Skip to content

B
bootstrap
Commit bf5931b5 authored by Mark Otto's avatar Mark Otto
Browse files
Options

massive rewrite of forms docs and some css

parent 7f3c85ec
Expand all Show whitespace changes
Inline Side-by-side
Showing with 258 additions and 164 deletions
dist/css/bootstrap.css
View file @ bf5931b5
...@@ -1657,7 +1657,6 @@ label { ...@@ -1657,7 +1657,6 @@ label {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: 2.625rem;
padding: .5rem .75rem; padding: .5rem .75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
...@@ -1670,6 +1669,9 @@ label { ...@@ -1670,6 +1669,9 @@ label {
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
} }
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus { .form-control:focus {
border-color: #66afe9; border-color: #66afe9;
outline: 0; outline: 0;
...@@ -1698,10 +1700,8 @@ label { ...@@ -1698,10 +1700,8 @@ label {
cursor: false; cursor: false;
} }
textarea.form-control { .form-control-file {
height: auto; display: block;
padding-top: .75rem;
padding-bottom: .75rem;
} }
input[type="search"] { input[type="search"] {
...@@ -1715,12 +1715,11 @@ input[type="search"] { ...@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox { .radio, .checkbox {
position: relative; position: relative;
display: block; display: block;
margin-top: 10px; margin-bottom: .75rem;
margin-bottom: 10px;
} }
.radio label, .checkbox label { .radio label, .checkbox label {
min-height: 1; min-height: 1;
padding-left: 20px; padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
...@@ -1728,18 +1727,18 @@ input[type="search"] { ...@@ -1728,18 +1727,18 @@ input[type="search"] {
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute; position: absolute;
margin-top: 4px \9; margin-top: .25rem;
margin-left: -20px; margin-left: -1.25rem;
} }
.radio + .radio, .checkbox + .checkbox { .radio + .radio, .checkbox + .checkbox {
margin-top: -5px; margin-top: -.25rem;
} }
.radio-inline, .checkbox-inline { .radio-inline, .checkbox-inline {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
vertical-align: middle; vertical-align: middle;
...@@ -1748,7 +1747,7 @@ input[type="search"] { ...@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
margin-top: 0; margin-top: 0;
margin-left: 10px; margin-left: .75rem;
} }
input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] { input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] {
...@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te ...@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block { .help-block {
display: block; display: block;
margin-top: 5px; margin-top: .25rem;
margin-bottom: 10px; margin-bottom: .75rem;
color: #747a7f; color: #747a7f;
} }
......
dist/css/bootstrap.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ bf5931b5
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_data/nav.yml
View file @ bf5931b5
...@@ -76,7 +76,6 @@ ...@@ -76,7 +76,6 @@
- title: User input - title: User input
- title: Sample output - title: Sample output
- title: Tables - title: Tables
- title: Forms
- title: Jumbotron - title: Jumbotron
- title: Page header - title: Page header
- title: Buttons - title: Buttons
...@@ -91,13 +90,14 @@ ...@@ -91,13 +90,14 @@
- title: Single toggle - title: Single toggle
- title: Checkbox and radio - title: Checkbox and radio
- title: Methods - title: Methods
- title: Button group
- title: Button dropdown
- title: Forms
- title: Custom forms - title: Custom forms
sections: sections:
- title: Checkboxes and radios - title: Checkboxes and radios
- title: Select menu - title: Select menu
- title: File browser - title: File browser
- title: Button group
- title: Button dropdown
- title: Input group - title: Input group
sections: sections:
- title: Basic example - title: Basic example
......
docs/assets/css/docs.min.css
View file @ bf5931b5
This diff is collapsed.
docs/assets/css/docs.min.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
docs/components/forms.md
View file @ bf5931b5
This diff is collapsed.
docs/dist/css/bootstrap.css
View file @ bf5931b5
...@@ -1657,7 +1657,6 @@ label { ...@@ -1657,7 +1657,6 @@ label {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: 2.625rem;
padding: .5rem .75rem; padding: .5rem .75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
...@@ -1670,6 +1669,9 @@ label { ...@@ -1670,6 +1669,9 @@ label {
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
} }
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus { .form-control:focus {
border-color: #66afe9; border-color: #66afe9;
outline: 0; outline: 0;
...@@ -1698,10 +1700,8 @@ label { ...@@ -1698,10 +1700,8 @@ label {
cursor: false; cursor: false;
} }
textarea.form-control { .form-control-file {
height: auto; display: block;
padding-top: .75rem;
padding-bottom: .75rem;
} }
input[type="search"] { input[type="search"] {
...@@ -1715,12 +1715,11 @@ input[type="search"] { ...@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox { .radio, .checkbox {
position: relative; position: relative;
display: block; display: block;
margin-top: 10px; margin-bottom: .75rem;
margin-bottom: 10px;
} }
.radio label, .checkbox label { .radio label, .checkbox label {
min-height: 1; min-height: 1;
padding-left: 20px; padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
...@@ -1728,18 +1727,18 @@ input[type="search"] { ...@@ -1728,18 +1727,18 @@ input[type="search"] {
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute; position: absolute;
margin-top: 4px \9; margin-top: .25rem;
margin-left: -20px; margin-left: -1.25rem;
} }
.radio + .radio, .checkbox + .checkbox { .radio + .radio, .checkbox + .checkbox {
margin-top: -5px; margin-top: -.25rem;
} }
.radio-inline, .checkbox-inline { .radio-inline, .checkbox-inline {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
vertical-align: middle; vertical-align: middle;
...@@ -1748,7 +1747,7 @@ input[type="search"] { ...@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
margin-top: 0; margin-top: 0;
margin-left: 10px; margin-left: .75rem;
} }
input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] { input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] {
...@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te ...@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block { .help-block {
display: block; display: block;
margin-top: 5px; margin-top: .25rem;
margin-bottom: 10px; margin-bottom: .75rem;
color: #747a7f; color: #747a7f;
} }
......
docs/dist/css/bootstrap.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ bf5931b5
This source diff could not be displayed because it is too large. You can view the blob instead.
scss/_forms.scss
View file @ bf5931b5
...@@ -100,25 +100,38 @@ label { ...@@ -100,25 +100,38 @@ label {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) // display: inline-block;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height-base;
padding: $padding-base-vertical $padding-base-horizontal; padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height-base; line-height: $line-height-base;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
background-image: none;
border: 1px solid $input-border; border: 1px solid $input-border;
@include border-radius($input-border-radius); // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius);
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Make inputs at least the height of their button counterpart (base line-height + padding + border).
// Only apply the height to textual inputs and some selcts.
&:not(textarea),
&:not(select[size]),
&:not(select[multiple]) {
height: $input-height-base;
}
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus(); @include form-control-focus();
// Placeholder // Placeholder
&::placeholder { &::placeholder {
color: $input-color-placeholder; color: $input-color-placeholder;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
} }
// Disabled and read-only inputs // Disabled and read-only inputs
...@@ -130,7 +143,8 @@ label { ...@@ -130,7 +143,8 @@ label {
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
background-color: $input-bg-disabled; background-color: $input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
} }
&[disabled], &[disabled],
...@@ -139,13 +153,17 @@ label { ...@@ -139,13 +153,17 @@ label {
} }
} }
// Reset height for `textarea`s // // Reset height for `textarea`s
textarea.form-control { // textarea.form-control {
height: auto; // height: auto;
padding-top: $padding-base-horizontal; // padding-top: $padding-base-horizontal;
padding-bottom: $padding-base-horizontal; // padding-bottom: $padding-base-horizontal;
} // }
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file {
display: block;
}
// Search inputs in iOS // Search inputs in iOS
// //
...@@ -204,12 +222,13 @@ input[type="search"] { ...@@ -204,12 +222,13 @@ input[type="search"] {
.checkbox { .checkbox {
position: relative; position: relative;
display: block; display: block;
margin-top: 10px; // margin-top: ($spacer * .75);
margin-bottom: 10px; margin-bottom: ($spacer * .75);
label { label {
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text // Ensure the input doesn't jump when there is no text
padding-left: 20px; min-height: $line-height-computed;
padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
...@@ -220,13 +239,15 @@ input[type="search"] { ...@@ -220,13 +239,15 @@ input[type="search"] {
.checkbox input[type="checkbox"], .checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] { .checkbox-inline input[type="checkbox"] {
position: absolute; position: absolute;
margin-top: 4px \9; margin-top: .25rem;
margin-left: -20px; // margin-top: 4px \9;
margin-left: -1.25rem;
} }
.radio + .radio, .radio + .radio,
.checkbox + .checkbox { .checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing // Move up sibling radios or checkboxes for tighter spacing
margin-top: -.25rem;
} }
// Radios and checkboxes on same line // Radios and checkboxes on same line
...@@ -234,7 +255,7 @@ input[type="search"] { ...@@ -234,7 +255,7 @@ input[type="search"] {
.checkbox-inline { .checkbox-inline {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 20px; padding-left: 1.25rem;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
vertical-align: middle; vertical-align: middle;
...@@ -243,7 +264,7 @@ input[type="search"] { ...@@ -243,7 +264,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline { .checkbox-inline + .checkbox-inline {
margin-top: 0; margin-top: 0;
margin-left: 10px; // space out consecutive inline controls margin-left: .75rem;
} }
// Apply same disabled cursor tweak as for inputs // Apply same disabled cursor tweak as for inputs
...@@ -406,8 +427,8 @@ input[type="checkbox"] { ...@@ -406,8 +427,8 @@ input[type="checkbox"] {
.help-block { .help-block {
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-top: 5px; margin-top: .25rem;
margin-bottom: 10px; margin-bottom: .75rem;
color: lighten($text-color, 25%); // lighten the text some for contrast color: lighten($text-color, 25%); // lighten the text some for contrast
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment