diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-12-29 04:59:01 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2017-12-29 04:59:01 +0300 |
commit | 2bb5568533f77bfbeb6ca50ec3a464a69a238bde (patch) | |
tree | 0ab4271cf951fd6df69c143991d6b7a109bda575 /assets/stylesheets/bootstrap/_forms.scss | |
parent | 5ae93e717519e910360350e6c0396efae8aff716 (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_forms.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_forms.scss | 113 |
1 files changed, 44 insertions, 69 deletions
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 42f2399..b0954f8 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -7,13 +7,13 @@ .form-control { display: block; width: 100%; - padding: $input-btn-padding-y $input-btn-padding-x; + padding: $input-padding-y $input-padding-x; font-size: $font-size-base; - line-height: $input-btn-line-height; + line-height: $input-line-height; color: $input-color; background-color: $input-bg; background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; + border: $input-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. @if $enable-rounded { @@ -76,6 +76,7 @@ select.form-control { .form-control-file, .form-control-range { display: block; + width: 100%; } @@ -83,41 +84,28 @@ select.form-control { // Labels // -// For use with horizontal and inline forms, when you need the label text to -// align with the form controls. +// For use with horizontal and inline forms, when you need the label (or legend) +// text to align with the form controls. .col-form-label { - padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); - padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); - margin-bottom: 0; // Override the `<label>` default - line-height: $input-btn-line-height; + padding-top: calc(#{$input-padding-y} + #{$input-border-width}); + padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); + margin-bottom: 0; // Override the `<label>/<legend>` default + font-size: inherit; // Override the `<legend>` default + line-height: $input-line-height; } .col-form-label-lg { - padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); - padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); + padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); + padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); font-size: $font-size-lg; - line-height: $input-btn-line-height-lg; + line-height: $input-line-height-lg; } .col-form-label-sm { - padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); - padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); + padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); + padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); font-size: $font-size-sm; - line-height: $input-btn-line-height-sm; -} - - -// -// Legends -// - -// For use with horizontal and inline forms, when you need the legend text to -// be the same size as regular labels, and to align with the form controls. -.col-form-legend { - padding-top: $input-btn-padding-y; - padding-bottom: $input-btn-padding-y; - margin-bottom: 0; - font-size: $font-size-base; + line-height: $input-line-height-sm; } @@ -129,13 +117,13 @@ select.form-control { .form-control-plaintext { display: block; width: 100%; - padding-top: $input-btn-padding-y; - padding-bottom: $input-btn-padding-y; + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins - line-height: $input-btn-line-height; + line-height: $input-line-height; background-color: transparent; border: solid transparent; - border-width: $input-btn-border-width 0; + border-width: $input-border-width 0; &.form-control-sm, &.form-control-lg { @@ -154,9 +142,9 @@ select.form-control { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; + padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; - line-height: $input-btn-line-height-sm; + line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } @@ -167,9 +155,9 @@ select.form-control-sm { } .form-control-lg { - padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; + padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; - line-height: $input-btn-line-height-lg; + line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } @@ -220,33 +208,35 @@ select.form-control-lg { .form-check { position: relative; display: block; - margin-bottom: $form-check-margin-bottom; - - &.disabled { - .form-check-label { - color: $text-muted; - } - } -} - -.form-check-label { padding-left: $form-check-input-gutter; - margin-bottom: 0; // Override default `<label>` bottom margin } .form-check-input { position: absolute; margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; + + &:disabled ~ .form-check-label { + color: $text-muted; + } +} + +.form-check-label { + margin-bottom: 0; // Override default `<label>` bottom margin } -// Radios and checkboxes on same line .form-check-inline { - display: inline-block; + display: inline-flex; + align-items: center; + padding-left: 0; // Override base .form-check margin-right: $form-check-inline-margin-x; - .form-check-label { - vertical-align: middle; + // Undo .form-check-input defaults and add some `margin-right`. + .form-check-input { + position: static; + margin-top: 0; + margin-right: $form-check-inline-input-margin-x; + margin-left: 0; } } @@ -323,10 +313,6 @@ select.form-control-lg { align-items: center; justify-content: center; width: auto; - margin-top: 0; - margin-bottom: 0; - } - .form-check-label { padding-left: 0; } .form-check-input { @@ -336,23 +322,12 @@ select.form-control-lg { margin-left: 0; } - // Custom form controls .custom-control { - display: flex; align-items: center; justify-content: center; - padding-left: 0; } - .custom-control-indicator { - position: static; - display: inline-block; - margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate. - vertical-align: text-bottom; - } - - // Re-override the feedback icon. - .has-feedback .form-control-feedback { - top: 0; + .custom-control-label { + margin-bottom: 0; } } } |