Summary Files Commits Branches @commit @diff @stats
path: root / src / _forms.scss
diff options
context:
space:
mode:
Commit068eee7a401b9b12975a60dcf7d523593fde2ed6 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-09-23 16:22:26 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-09-23 16:22:26 +0800
Filesb89ab502f6f8e6f68bf905b8ff8c2d9fc04e872f /src/_forms.scss
Spectre-Dark-Gruvbox-068eee7a401b9b12975a60dcf7d523593fde2ed6.tar
Spectre-Dark-Gruvbox-068eee7a401b9b12975a60dcf7d523593fde2ed6.tar.gz
Spectre-Dark-Gruvbox-068eee7a401b9b12975a60dcf7d523593fde2ed6.zip
Parentf654c5acec0677d65fb021048d30f6261aececa9 (diff)
Improve Buttons and Forms small and large variables
1 files changed, 18 insertions, 18 deletions
-rw-r--r--src/_forms.scss36
diff --git a/src/_forms.scss b/src/_forms.scss
index c23841e..47358f2 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,14 +18,14 @@ legend {
// Form element: Label
.form-label {
display: block;
- padding: $control-padding-v + $border-width 0;
+ padding: $control-padding-y + $border-width 0;
&.label-sm {
- padding: $control-padding-v-sm + $border-width 0;
+ padding: $control-padding-y-sm + $border-width 0;
}
&.label-lg {
- padding: $control-padding-v-lg + $border-width 0;
+ padding: $control-padding-y-lg + $border-width 0;
}
}
@@ -44,7 +44,7 @@ legend {
line-height: $line-height;
max-width: 100%;
outline: none;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
position: relative;
width: 100%;
&:focus {
@@ -59,13 +59,13 @@ legend {
&.input-sm {
font-size: $font-size-sm;
height: $control-size-sm;
- padding: $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm $control-padding-x-sm;
}
&.input-lg {
font-size: $font-size-lg;
height: $control-size-lg;
- padding: $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg $control-padding-x-lg;
}
&.input-inline {
@@ -112,7 +112,7 @@ textarea.form-input {
height: $control-size;
line-height: $line-height;
outline: none;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;
@@ -126,7 +126,7 @@ textarea.form-input {
}
&:not([multiple]):not([size]) {
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
- padding-right: $control-icon-size + $control-padding-h;
+ padding-right: $control-icon-size + $control-padding-x;
}
&:focus {
@include control-shadow();
@@ -140,13 +140,13 @@ textarea.form-input {
&.select-sm {
font-size: $font-size-sm;
height: $control-size-sm;
- padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
}
&.select-lg {
font-size: $font-size-lg;
height: $control-size-lg;
- padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}
}
@@ -157,7 +157,7 @@ textarea.form-input {
.form-icon {
height: $control-icon-size;
- margin: 0 $control-padding-v;
+ margin: 0 $control-padding-y;
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -171,7 +171,7 @@ textarea.form-input {
}
.form-input {
- padding-left: $control-icon-size + $control-padding-v * 2;
+ padding-left: $control-icon-size + $control-padding-y * 2;
}
}
@@ -181,7 +181,7 @@ textarea.form-input {
}
.form-input {
- padding-right: $control-icon-size + $control-padding-v * 2;
+ padding-right: $control-icon-size + $control-padding-y * 2;
}
}
@@ -191,7 +191,7 @@ textarea.form-input {
.form-switch {
display: inline-block;
line-height: $line-height;
- padding: (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-h);
+ padding: (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
position: relative;
input {
@@ -301,7 +301,7 @@ textarea.form-input {
// Form element: Switch
.form-switch {
- padding-left: ($unit-8 + $control-padding-h);
+ padding-left: ($unit-8 + $control-padding-x);
.form-icon {
background: $gray-color-light;
@@ -348,15 +348,15 @@ textarea.form-input {
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
line-height: $line-height;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
&.addon-sm {
font-size: $font-size-sm;
- padding: $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm $control-padding-x-sm;
}
&.addon-lg {
font-size: $font-size-lg;
- padding: $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg $control-padding-x-lg;
}
}