Fix up some form docs styles, sizing, etc
This commit is contained in:
Mark Otto
parent
dc3abb5f12
commit
490294e68b
|
|
@ -1684,10 +1684,6 @@ pre code {
|
|||
border: 1px solid #eceeef;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -1708,7 +1704,7 @@ pre code {
|
|||
}
|
||||
.form-control:focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #999;
|
||||
|
|
@ -1738,6 +1734,38 @@ pre code {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
min-height: 2rem;
|
||||
padding-top: .5625rem;
|
||||
padding-bottom: .5625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control-static.form-control-sm, .form-control-static.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
height: 2rem;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.333333;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -1792,33 +1820,6 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
|||
cursor: false;
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
min-height: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.input-group-addon, .input-group-sm > .input-group-btn > .form-control-static.btn {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
height: 2rem;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.333333;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -629,35 +629,18 @@ For form controls with no visible label, add the `.sr-only` class on the label.
|
|||
|
||||
## Control sizing
|
||||
|
||||
Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
|
||||
Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
|
||||
|
||||
{% example html %}
|
||||
<input class="form-control input-lg" type="text" placeholder=".input-lg">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
|
||||
<input class="form-control" type="text" placeholder="Default input">
|
||||
<input class="form-control input-sm" type="text" placeholder=".input-sm">
|
||||
|
||||
<select class="form-control input-lg"></select>
|
||||
<select class="form-control"></select>
|
||||
<select class="form-control input-sm"></select>
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
|
||||
{% endexample %}
|
||||
|
||||
Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
|
||||
|
||||
{% example html %}
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group form-group-lg">
|
||||
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-group-sm">
|
||||
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
|
||||
<div class="col-sm-10">
|
||||
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<select class="form-control form-control-lg"></select>
|
||||
<select class="form-control"></select>
|
||||
<select class="form-control form-control-sm"></select>
|
||||
{% endexample %}
|
||||
|
||||
## Column sizing
|
||||
|
|
|
|||
|
|
@ -1684,10 +1684,6 @@ pre code {
|
|||
border: 1px solid #eceeef;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -1708,7 +1704,7 @@ pre code {
|
|||
}
|
||||
.form-control:focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
outline: none;
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #999;
|
||||
|
|
@ -1738,6 +1734,38 @@ pre code {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
padding: .5625rem .75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
min-height: 2rem;
|
||||
padding-top: .5625rem;
|
||||
padding-bottom: .5625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control-static.form-control-sm, .form-control-static.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
height: 2rem;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.333333;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -1792,33 +1820,6 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
|||
cursor: false;
|
||||
}
|
||||
|
||||
.form-control-static {
|
||||
min-height: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control, .input-group-lg > .form-control-static.input-group-addon, .input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control, .input-group-sm > .form-control-static.input-group-addon, .input-group-sm > .input-group-btn > .form-control-static.btn {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
height: 2rem;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.333333;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -61,6 +61,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
- Moved element resets to the `_reboot.scss` file.
|
||||
- Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
|
||||
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
|
||||
- Horizontal forms overhauled:
|
||||
- Dropped the `.form-horizontal` class requirement.
|
||||
- `.form-group` no longer mixins the `.row` class, so it's now required for grid layouts.
|
||||
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
|
||||
|
||||
### Grid system
|
||||
|
||||
|
|
|
|||
147
scss/_forms.scss
147
scss/_forms.scss
|
|
@ -111,6 +111,79 @@
|
|||
// }
|
||||
|
||||
|
||||
// Static form control text
|
||||
//
|
||||
// Apply class to an element to make any string of text align with labels in a
|
||||
// horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
min-height: ($line-height-computed + $font-size-base);
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: ($padding-base-vertical + $border-width);
|
||||
padding-bottom: ($padding-base-vertical + $border-width);
|
||||
// Remove default margin from `p`
|
||||
margin-bottom: 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
height: $input-height-sm;
|
||||
padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
border-radius: $input-border-radius-sm;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: $input-height-lg;
|
||||
padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-lg;
|
||||
border-radius: $input-border-radius-lg;
|
||||
}
|
||||
|
||||
// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-group-sm {
|
||||
// @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-sm;
|
||||
// min-height: ($line-height-computed + $font-size-sm);
|
||||
// padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
// font-size: $font-size-sm;
|
||||
// line-height: $line-height-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-group-lg {
|
||||
// @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-lg;
|
||||
// min-height: ($line-height-computed + $font-size-lg);
|
||||
// padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
// font-size: $font-size-lg;
|
||||
// line-height: $line-height-lg;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Designed to help with the organization and spacing of vertical forms. For
|
||||
|
|
@ -206,80 +279,6 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
|
||||
// Static form control text
|
||||
//
|
||||
// Apply class to a `p` element to make any string of text align with labels in
|
||||
// a horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
min-height: ($line-height-computed + $font-size-base);
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: ($padding-base-vertical + 1);
|
||||
padding-bottom: ($padding-base-vertical + 1);
|
||||
// Remove default margin from `p`
|
||||
margin-bottom: 0;
|
||||
|
||||
&.input-lg,
|
||||
&.input-sm {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
height: $input-height-sm;
|
||||
padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
border-radius: $input-border-radius-sm;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
height: $input-height-lg;
|
||||
padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-lg;
|
||||
border-radius: $input-border-radius-lg;
|
||||
}
|
||||
|
||||
// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-group-sm {
|
||||
// @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-sm;
|
||||
// min-height: ($line-height-computed + $font-size-sm);
|
||||
// padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
// font-size: $font-size-sm;
|
||||
// line-height: $line-height-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-group-lg {
|
||||
// @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-lg;
|
||||
// min-height: ($line-height-computed + $font-size-lg);
|
||||
// padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
// font-size: $font-size-lg;
|
||||
// line-height: $line-height-lg;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
border-color: $input-border-focus;
|
||||
outline: 0;
|
||||
outline: none;
|
||||
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue