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

github.com/twbs/bootstrap-rubygem.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGleb Mazovetskiy <glex.spb@gmail.com>2017-12-29 04:59:01 +0300
committerGleb Mazovetskiy <glex.spb@gmail.com>2017-12-29 04:59:01 +0300
commit2bb5568533f77bfbeb6ca50ec3a464a69a238bde (patch)
tree0ab4271cf951fd6df69c143991d6b7a109bda575 /assets/stylesheets/bootstrap/_forms.scss
parent5ae93e717519e910360350e6c0396efae8aff716 (diff)
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_forms.scss')
-rw-r--r--assets/stylesheets/bootstrap/_forms.scss113
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;
}
}
}