diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_forms.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_forms.scss | 32 |
1 files changed, 13 insertions, 19 deletions
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 74bb67d..ff008a8 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -210,11 +210,11 @@ input[type="month"] { .checkbox { position: relative; display: block; - min-height: $line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; label { + min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text padding-left: 20px; margin-bottom: 0; font-weight: normal; @@ -308,9 +308,9 @@ input[type="checkbox"] { // Build on `.form-control` with modifier classes to decrease or increase the // height and font-size of form controls. -@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); +@include input-size('.input-sm, .form-group-sm .form-control', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); -@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); +@include input-size('.input-lg, .form-group-lg .form-control', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); // Form control feedback states @@ -329,7 +329,7 @@ input[type="checkbox"] { // Feedback icon (requires .glyphicon classes) .form-control-feedback { position: absolute; - top: ($line-height-computed + 5); // Height of the `label` and its margin + top: 0; right: 0; z-index: 2; // Ensure icon is above input groups display: block; @@ -360,10 +360,15 @@ input[type="checkbox"] { @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); } +// Reposition feedback icon if input has visible label above +.has-feedback label { -// Reposition feedback icon if label is hidden with "screenreader only" state -.has-feedback label.sr-only ~ .form-control-feedback { - top: 0; + & ~ .form-control-feedback { + top: ($line-height-computed + 5); // Height of the `label` and its margin + } + &.sr-only ~ .form-control-feedback { + top: 0; + } } @@ -380,7 +385,6 @@ input[type="checkbox"] { } - // Inline forms // // Make forms appear inline(-block) by adding the `.form-inline` class. Inline @@ -451,10 +455,7 @@ input[type="checkbox"] { margin-left: 0; } - // Validation states - // - // Reposition the icon because it's now within a grid column and columns have - // `position: relative;` on them. Also accounts for the grid gutter padding. + // Re-override the feedback icon. .has-feedback .form-control-feedback { top: 0; } @@ -507,7 +508,6 @@ input[type="checkbox"] { // Reposition the icon because it's now within a grid column and columns have // `position: relative;` on them. Also accounts for the grid gutter padding. .has-feedback .form-control-feedback { - top: 0; right: ($grid-gutter-width / 2); } @@ -521,9 +521,6 @@ input[type="checkbox"] { padding-top: (($padding-large-vertical * $line-height-large) + 1); } } - .form-control { - @extend .input-lg; - } } .form-group-sm { @media (min-width: $screen-sm-min) { @@ -531,8 +528,5 @@ input[type="checkbox"] { padding-top: ($padding-small-vertical + 1); } } - .form-control { - @extend .input-sm; - } } } |