diff options
Diffstat (limited to 'src/_forms.scss')
-rw-r--r-- | src/_forms.scss | 47 |
1 files changed, 25 insertions, 22 deletions
diff --git a/src/_forms.scss b/src/_forms.scss index 8b53df9..b7ef0fa 100644 --- a/src/_forms.scss +++ b/src/_forms.scss @@ -118,19 +118,7 @@ textarea.form-input { padding: $control-padding-y $control-padding-x; vertical-align: middle; width: 100%; - - &[size], - &[multiple] { - height: auto; - - option { - padding: $unit-h $unit-1; - } - } - &:not([multiple]):not([size]) { - background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem; - padding-right: $control-icon-size + $control-padding-x; - } + background: $bg-color-light; &:focus { @include control-shadow(); border-color: $primary-color; @@ -151,6 +139,21 @@ textarea.form-input { height: $control-size-lg; padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg; } + + // Multiple select + &[size], + &[multiple] { + height: auto; + padding: $control-padding-y $control-padding-x; + + option { + padding: $unit-h $unit-1; + } + } + &:not([multiple]):not([size]) { + background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem; + padding-right: $control-icon-size + $control-padding-x; + } } // Form Icons @@ -266,14 +269,14 @@ textarea.form-input { border-left-width: 0; border-top-width: 0; content: ""; - height: 12px; + height: 9px; left: 50%; - margin-left: -4px; - margin-top: -8px; + margin-left: -3px; + margin-top: -6px; position: absolute; top: 50%; transform: rotate(45deg); - width: 8px; + width: 6px; } } &:indeterminate + .form-icon { @@ -304,12 +307,12 @@ textarea.form-input { background: $bg-color-light; border-radius: 50%; content: ""; - height: 4px; + height: 6px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); - width: 4px; + width: 6px; } } } @@ -320,7 +323,7 @@ textarea.form-input { padding-left: ($unit-8 + $control-padding-x); .form-icon { - background: $gray-color-light; + background: $gray-color; background-clip: padding-box; border-radius: $unit-2 + $border-width; height: $unit-4 + $border-width * 2; @@ -447,7 +450,7 @@ textarea.form-input { .form-icon { border-color: $error-color; } - + input { &:checked + .form-icon { background: $error-color; @@ -542,4 +545,4 @@ input { // Form inline .form-inline { display: inline-block; -}
\ No newline at end of file +} |