Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/picturepan2/spectre.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'src/_forms.scss')
-rw-r--r--src/_forms.scss47
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
+}