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 Hide 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 {
.form-control {
display: block;
width: 100%;
height: 2.625rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
......@@ -1670,6 +1669,9 @@ label {
-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;
}
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
......@@ -1698,10 +1700,8 @@ label {
cursor: false;
}
textarea.form-control {
height: auto;
padding-top: .75rem;
padding-bottom: .75rem;
.form-control-file {
display: block;
}
input[type="search"] {
......@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-bottom: .75rem;
}
.radio label, .checkbox label {
min-height: 1;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -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"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
margin-left: -1.25rem;
}
.radio + .radio, .checkbox + .checkbox {
margin-top: -5px;
margin-top: -.25rem;
}
.radio-inline, .checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
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"] {
......@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
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 @@
- title: User input
- title: Sample output
- title: Tables
- title: Forms
- title: Jumbotron
- title: Page header
- title: Buttons
......@@ -91,13 +90,14 @@
- title: Single toggle
- title: Checkbox and radio
- title: Methods
- title: Button group
- title: Button dropdown
- title: Forms
- title: Custom forms
sections:
- title: Checkboxes and radios
- title: Select menu
- title: File browser
- title: Button group
- title: Button dropdown
- title: Input group
sections:
- 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 {
.form-control {
display: block;
width: 100%;
height: 2.625rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
......@@ -1670,6 +1669,9 @@ label {
-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;
}
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
......@@ -1698,10 +1700,8 @@ label {
cursor: false;
}
textarea.form-control {
height: auto;
padding-top: .75rem;
padding-bottom: .75rem;
.form-control-file {
display: block;
}
input[type="search"] {
......@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-bottom: .75rem;
}
.radio label, .checkbox label {
min-height: 1;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -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"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
margin-left: -1.25rem;
}
.radio + .radio, .checkbox + .checkbox {
margin-top: -5px;
margin-top: -.25rem;
}
.radio-inline, .checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
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"] {
......@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
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 {
.form-control {
display: block;
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;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
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;
@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));
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.
@include form-control-focus();
// Placeholder
&::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
......@@ -130,7 +143,8 @@ label {
&[readonly],
fieldset[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],
......@@ -139,13 +153,17 @@ label {
}
}
// Reset height for `textarea`s
textarea.form-control {
height: auto;
padding-top: $padding-base-horizontal;
padding-bottom: $padding-base-horizontal;
}
// // Reset height for `textarea`s
// textarea.form-control {
// height: auto;
// padding-top: $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
//
......@@ -204,12 +222,13 @@ input[type="search"] {
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
// margin-top: ($spacer * .75);
margin-bottom: ($spacer * .75);
label {
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
// Ensure the input doesn't jump when there is no text
min-height: $line-height-computed;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -220,13 +239,15 @@ input[type="search"] {
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
// margin-top: 4px \9;
margin-left: -1.25rem;
}
.radio + .radio,
.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
......@@ -234,7 +255,7 @@ input[type="search"] {
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -243,7 +264,7 @@ input[type="search"] {
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
margin-left: .75rem;
}
// Apply same disabled cursor tweak as for inputs
......@@ -406,8 +427,8 @@ input[type="checkbox"] {
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
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