Add isInvalid states for TextInput, TextArea, and SearchInput components. (#11995)
This commit is contained in:
parent
c9afc8b16f
commit
5437eb0e77
8 changed files with 55 additions and 42 deletions
|
@ -147,15 +147,8 @@
|
|||
border-radius: $borderRadius;
|
||||
transition: border-color $globalInputTransitionTiming;
|
||||
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
&:invalid {
|
||||
&:not(.ng-untouched) { /* 1 */
|
||||
border-color: $globalDangerBorderColor;
|
||||
}
|
||||
@include formControlInvalid;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
@ -177,6 +170,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
@mixin formControlInvalid {
|
||||
&:not(.ng-untouched) { /* 1 */
|
||||
border-color: $globalDangerBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
|
||||
* 2. Make room on right side for the caret.
|
||||
|
|
|
@ -5,6 +5,12 @@ $searchInputTextColor: #ACACAC;
|
|||
position: relative;
|
||||
font-size: $globalFontSize;
|
||||
line-height: $globalLineHeight;
|
||||
|
||||
&.kuiSearchInput-isInvalid {
|
||||
.kuiSearchInput__input {
|
||||
@include formControlInvalid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kuiSearchInput__icon {
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
.kuiTextArea {
|
||||
@include formControl;
|
||||
|
||||
&.kuiTextArea-isInvalid {
|
||||
@include formControlInvalid;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiTextArea--nonResizable {
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
.kuiTextInput {
|
||||
@include formControl;
|
||||
|
||||
&.kuiTextInput-isInvalid {
|
||||
@include formControlInvalid;
|
||||
}
|
||||
}
|
||||
|
||||
.kuiTextInput--small {
|
||||
|
|
48
ui_framework/dist/ui_framework.css
vendored
48
ui_framework/dist/ui_framework.css
vendored
|
@ -24,6 +24,11 @@
|
|||
/**
|
||||
* Nothing fancy, just the basics so we can use this for both regular and static controls.
|
||||
*/
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
/**
|
||||
* 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
|
||||
* 2. Make room on right side for the caret.
|
||||
|
@ -809,6 +814,9 @@ body {
|
|||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1.5; }
|
||||
.kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input:not(.ng-untouched) {
|
||||
/* 1 */
|
||||
border-color: #D86051; }
|
||||
|
||||
.kuiSearchInput__icon {
|
||||
position: absolute;
|
||||
|
@ -835,11 +843,6 @@ body {
|
|||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
padding-left: 28px;
|
||||
/* 1 */
|
||||
width: 100%;
|
||||
|
@ -876,11 +879,6 @@ body {
|
|||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
padding-right: 30px;
|
||||
/* 2 */
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
|
||||
|
@ -948,12 +946,7 @@ body {
|
|||
background-color: #ffffff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/ }
|
||||
transition: border-color 0.1s linear; }
|
||||
.theme-dark .kuiTextArea {
|
||||
color: #cecece; }
|
||||
.kuiTextArea:invalid:not(.ng-untouched) {
|
||||
|
@ -971,6 +964,9 @@ body {
|
|||
.theme-dark .kuiTextArea:focus {
|
||||
outline: none;
|
||||
border-color: #6EADC1; }
|
||||
.kuiTextArea.kuiTextArea-isInvalid:not(.ng-untouched) {
|
||||
/* 1 */
|
||||
border-color: #D86051; }
|
||||
|
||||
.kuiTextArea--nonResizable {
|
||||
resize: none; }
|
||||
|
@ -988,12 +984,7 @@ body {
|
|||
background-color: #ffffff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/ }
|
||||
transition: border-color 0.1s linear; }
|
||||
.theme-dark .kuiTextInput {
|
||||
color: #cecece; }
|
||||
.kuiTextInput:invalid:not(.ng-untouched) {
|
||||
|
@ -1011,6 +1002,9 @@ body {
|
|||
.theme-dark .kuiTextInput:focus {
|
||||
outline: none;
|
||||
border-color: #6EADC1; }
|
||||
.kuiTextInput.kuiTextInput-isInvalid:not(.ng-untouched) {
|
||||
/* 1 */
|
||||
border-color: #D86051; }
|
||||
|
||||
.kuiTextInput--small {
|
||||
width: 100%;
|
||||
|
@ -1792,11 +1786,6 @@ body {
|
|||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 100%;
|
||||
-ms-flex: 1 1 100%;
|
||||
|
@ -1874,11 +1863,6 @@ body {
|
|||
border: 1px solid #DEDEDE;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.1s linear;
|
||||
/**
|
||||
* 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
|
||||
* We only want invalid inputs to appear invalid after the user has had a chance to interact
|
||||
* with it.
|
||||
*/
|
||||
padding-right: 30px;
|
||||
/* 2 */
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg>');
|
||||
|
|
|
@ -6,3 +6,14 @@
|
|||
placeholder="Search..."
|
||||
>
|
||||
</div>
|
||||
|
||||
<hr class="guideBreak">
|
||||
|
||||
<div class="kuiSearchInput kuiSearchInput-isInvalid">
|
||||
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
|
||||
<input
|
||||
class="kuiSearchInput__input"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,7 @@ Entered text
|
|||
|
||||
<hr class="guideBreak">
|
||||
|
||||
<textarea type="text" class="kuiTextArea" required>
|
||||
<textarea type="text" class="kuiTextArea kuiTextArea-isInvalid">
|
||||
</textarea>
|
||||
|
||||
<hr class="guideBreak">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<hr class="guideBreak">
|
||||
|
||||
<input type="text" class="kuiTextInput" required>
|
||||
<input type="text" class="kuiTextInput kuiTextInput-isInvalid">
|
||||
|
||||
<hr class="guideBreak">
|
||||
|
||||
|
|
Loading…
Reference in a new issue