diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-09-23 11:22:26 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-09-23 11:22:26 +0300 |
commit | 068eee7a401b9b12975a60dcf7d523593fde2ed6 (patch) | |
tree | b89ab502f6f8e6f68bf905b8ff8c2d9fc04e872f /src | |
parent | f654c5acec0677d65fb021048d30f6261aececa9 (diff) |
Improve Buttons and Forms small and large variables
Diffstat (limited to 'src')
-rw-r--r-- | src/_buttons.scss | 6 | ||||
-rw-r--r-- | src/_forms.scss | 36 | ||||
-rw-r--r-- | src/_variables.scss | 10 |
3 files changed, 27 insertions, 25 deletions
diff --git a/src/_buttons.scss b/src/_buttons.scss index 1860ed8..c4dc0a6 100644 --- a/src/_buttons.scss +++ b/src/_buttons.scss @@ -12,7 +12,7 @@ height: $control-size; line-height: $line-height; outline: none; - padding: $control-padding-v $control-padding-h; + padding: $control-padding-y $control-padding-x; text-align: center; text-decoration: none; user-select: none; @@ -90,13 +90,13 @@ &.btn-sm { font-size: $font-size-sm; height: $control-size-sm; - padding: $control-padding-v-sm $control-padding-h * .75; + padding: $control-padding-y-sm $control-padding-x-sm; } &.btn-lg { font-size: $font-size-lg; height: $control-size-lg; - padding: $control-padding-v-lg $control-padding-h * 1.25; + padding: $control-padding-y-lg $control-padding-x-lg; } // Button Block 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; } } diff --git a/src/_variables.scss b/src/_variables.scss index 4216d4a..400d581 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -79,10 +79,12 @@ $border-width-lg: $unit-h !default; $control-size: $unit-8 !default; $control-size-sm: $unit-6 !default; $control-size-lg: $unit-10 !default; -$control-padding-h: $unit-2 !default; -$control-padding-v: ($control-size - $line-height) / 2 - $border-width !default; -$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width !default; -$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width !default; +$control-padding-x: $unit-2 !default; +$control-padding-x-sm: $unit-2 * .75 !default; +$control-padding-x-lg: $unit-2 * 1.5 !default; +$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default; +$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default; +$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default; $control-icon-size: .7rem !default; $control-min-width: 180px !default; $control-max-width: 320px !default; |