|
@@ -56,7 +56,6 @@ input[type="checkbox"] {
|
|
|
line-height: normal;
|
|
|
}
|
|
|
|
|
|
-// Set the height of file controls to match text inputs
|
|
|
input[type="file"] {
|
|
|
display: block;
|
|
|
}
|
|
@@ -123,7 +122,7 @@ output {
|
|
|
background-color: @input-bg;
|
|
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
|
|
border: 1px solid @input-border;
|
|
|
- border-radius: @input-border-radius;
|
|
|
+ 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.
|
|
|
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
|
|
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
|
|
|
|
|
@@ -133,6 +132,12 @@ output {
|
|
|
// Placeholder
|
|
|
.placeholder();
|
|
|
|
|
|
+ // Unstyle the caret on `<select>`s in IE10+.
|
|
|
+ &::-ms-expand {
|
|
|
+ border: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
// Disabled and read-only inputs
|
|
|
//
|
|
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
@@ -141,9 +146,13 @@ output {
|
|
|
&[disabled],
|
|
|
&[readonly],
|
|
|
fieldset[disabled] & {
|
|
|
- cursor: not-allowed;
|
|
|
background-color: @input-bg-disabled;
|
|
|
- opacity: 1; // iOS fix for unreadable disabled content
|
|
|
+ opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
|
|
|
+ }
|
|
|
+
|
|
|
+ &[disabled],
|
|
|
+ fieldset[disabled] & {
|
|
|
+ cursor: @cursor-disabled;
|
|
|
}
|
|
|
|
|
|
// Reset height for `textarea`s
|
|
@@ -168,24 +177,30 @@ input[type="search"] {
|
|
|
// Special styles for iOS temporal inputs
|
|
|
//
|
|
|
// In Mobile Safari, setting `display: block` on temporal inputs causes the
|
|
|
-// text within the input to become vertically misaligned.
|
|
|
-// As a workaround, we set a pixel line-height that matches the
|
|
|
-// given height of the input. Since this fucks up everything else, we have to
|
|
|
-// appropriately reset it for Internet Explorer and the size variations.
|
|
|
-
|
|
|
-input[type="date"],
|
|
|
-input[type="time"],
|
|
|
-input[type="datetime-local"],
|
|
|
-input[type="month"] {
|
|
|
- line-height: @input-height-base;
|
|
|
- // IE8+ misaligns the text within date inputs, so we reset
|
|
|
- line-height: @line-height-base ~"\0";
|
|
|
+// text within the input to become vertically misaligned. As a workaround, we
|
|
|
+// set a pixel line-height that matches the given height of the input, but only
|
|
|
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
|
|
+//
|
|
|
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
|
|
+
|
|
|
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
|
+ input[type="date"],
|
|
|
+ input[type="time"],
|
|
|
+ input[type="datetime-local"],
|
|
|
+ input[type="month"] {
|
|
|
+ &.form-control {
|
|
|
+ line-height: @input-height-base;
|
|
|
+ }
|
|
|
|
|
|
- &.input-sm {
|
|
|
- line-height: @input-height-small;
|
|
|
- }
|
|
|
- &.input-lg {
|
|
|
- line-height: @input-height-large;
|
|
|
+ &.input-sm,
|
|
|
+ .input-group-sm & {
|
|
|
+ line-height: @input-height-small;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.input-lg,
|
|
|
+ .input-group-lg & {
|
|
|
+ line-height: @input-height-large;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -196,7 +211,7 @@ input[type="month"] {
|
|
|
// horizontal forms, use the predefined grid classes.
|
|
|
|
|
|
.form-group {
|
|
|
- margin-bottom: 15px;
|
|
|
+ margin-bottom: @form-group-margin-bottom;
|
|
|
}
|
|
|
|
|
|
|
|
@@ -208,11 +223,11 @@ input[type="month"] {
|
|
|
.checkbox {
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
- min-height: @line-height-computed; // clear the floating input if there is no label text
|
|
|
margin-top: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
label {
|
|
|
+ min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
|
|
|
padding-left: 20px;
|
|
|
margin-bottom: 0;
|
|
|
font-weight: normal;
|
|
@@ -236,6 +251,7 @@ input[type="month"] {
|
|
|
// Radios and checkboxes on same line
|
|
|
.radio-inline,
|
|
|
.checkbox-inline {
|
|
|
+ position: relative;
|
|
|
display: inline-block;
|
|
|
padding-left: 20px;
|
|
|
margin-bottom: 0;
|
|
@@ -258,7 +274,7 @@ input[type="checkbox"] {
|
|
|
&[disabled],
|
|
|
&.disabled,
|
|
|
fieldset[disabled] & {
|
|
|
- cursor: not-allowed;
|
|
|
+ cursor: @cursor-disabled;
|
|
|
}
|
|
|
}
|
|
|
// These classes are used directly on <label>s
|
|
@@ -266,7 +282,7 @@ input[type="checkbox"] {
|
|
|
.checkbox-inline {
|
|
|
&.disabled,
|
|
|
fieldset[disabled] & {
|
|
|
- cursor: not-allowed;
|
|
|
+ cursor: @cursor-disabled;
|
|
|
}
|
|
|
}
|
|
|
// These classes are used on elements with <label> descendants
|
|
@@ -275,7 +291,7 @@ input[type="checkbox"] {
|
|
|
&.disabled,
|
|
|
fieldset[disabled] & {
|
|
|
label {
|
|
|
- cursor: not-allowed;
|
|
|
+ cursor: @cursor-disabled;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -292,6 +308,7 @@ input[type="checkbox"] {
|
|
|
padding-bottom: (@padding-base-vertical + 1);
|
|
|
// Remove default margin from `p`
|
|
|
margin-bottom: 0;
|
|
|
+ min-height: (@line-height-computed + @font-size-base);
|
|
|
|
|
|
&.input-lg,
|
|
|
&.input-sm {
|
|
@@ -305,13 +322,64 @@ input[type="checkbox"] {
|
|
|
//
|
|
|
// 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.
|
|
|
|
|
|
.input-sm {
|
|
|
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
|
|
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
|
|
|
+}
|
|
|
+.form-group-sm {
|
|
|
+ .form-control {
|
|
|
+ height: @input-height-small;
|
|
|
+ padding: @padding-small-vertical @padding-small-horizontal;
|
|
|
+ font-size: @font-size-small;
|
|
|
+ line-height: @line-height-small;
|
|
|
+ border-radius: @input-border-radius-small;
|
|
|
+ }
|
|
|
+ select.form-control {
|
|
|
+ height: @input-height-small;
|
|
|
+ line-height: @input-height-small;
|
|
|
+ }
|
|
|
+ textarea.form-control,
|
|
|
+ select[multiple].form-control {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .form-control-static {
|
|
|
+ height: @input-height-small;
|
|
|
+ min-height: (@line-height-computed + @font-size-small);
|
|
|
+ padding: (@padding-small-vertical + 1) @padding-small-horizontal;
|
|
|
+ font-size: @font-size-small;
|
|
|
+ line-height: @line-height-small;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.input-lg {
|
|
|
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
|
|
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
|
|
|
+}
|
|
|
+.form-group-lg {
|
|
|
+ .form-control {
|
|
|
+ height: @input-height-large;
|
|
|
+ padding: @padding-large-vertical @padding-large-horizontal;
|
|
|
+ font-size: @font-size-large;
|
|
|
+ line-height: @line-height-large;
|
|
|
+ border-radius: @input-border-radius-large;
|
|
|
+ }
|
|
|
+ select.form-control {
|
|
|
+ height: @input-height-large;
|
|
|
+ line-height: @input-height-large;
|
|
|
+ }
|
|
|
+ textarea.form-control,
|
|
|
+ select[multiple].form-control {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .form-control-static {
|
|
|
+ height: @input-height-large;
|
|
|
+ min-height: (@line-height-computed + @font-size-large);
|
|
|
+ padding: (@padding-large-vertical + 1) @padding-large-horizontal;
|
|
|
+ font-size: @font-size-large;
|
|
|
+ line-height: @line-height-large;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
@@ -331,7 +399,7 @@ input[type="checkbox"] {
|
|
|
// Feedback icon (requires .glyphicon classes)
|
|
|
.form-control-feedback {
|
|
|
position: absolute;
|
|
|
- top: (@line-height-computed + 5); // Height of the `label` and its margin
|
|
|
+ top: 0;
|
|
|
right: 0;
|
|
|
z-index: 2; // Ensure icon is above input groups
|
|
|
display: block;
|
|
@@ -339,13 +407,18 @@ input[type="checkbox"] {
|
|
|
height: @input-height-base;
|
|
|
line-height: @input-height-base;
|
|
|
text-align: center;
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
-.input-lg + .form-control-feedback {
|
|
|
+.input-lg + .form-control-feedback,
|
|
|
+.input-group-lg + .form-control-feedback,
|
|
|
+.form-group-lg .form-control + .form-control-feedback {
|
|
|
width: @input-height-large;
|
|
|
height: @input-height-large;
|
|
|
line-height: @input-height-large;
|
|
|
}
|
|
|
-.input-sm + .form-control-feedback {
|
|
|
+.input-sm + .form-control-feedback,
|
|
|
+.input-group-sm + .form-control-feedback,
|
|
|
+.form-group-sm .form-control + .form-control-feedback {
|
|
|
width: @input-height-small;
|
|
|
height: @input-height-small;
|
|
|
line-height: @input-height-small;
|
|
@@ -362,10 +435,15 @@ input[type="checkbox"] {
|
|
|
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
|
|
|
}
|
|
|
|
|
|
+// Reposition feedback icon if input has visible label above
|
|
|
+.has-feedback label {
|
|
|
|
|
|
-// Reposition feedback icon if label is hidden with "screenreader only" state
|
|
|
-.has-feedback label.sr-only ~ .form-control-feedback {
|
|
|
- top: 0;
|
|
|
+ & ~ .form-control-feedback {
|
|
|
+ top: (@line-height-computed + 5); // Height of the `label` and its margin
|
|
|
+ }
|
|
|
+ &.sr-only ~ .form-control-feedback {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
@@ -382,7 +460,6 @@ input[type="checkbox"] {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
// Inline forms
|
|
|
//
|
|
|
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
|
@@ -412,6 +489,11 @@ input[type="checkbox"] {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
+ // Make static controls behave like regular ones
|
|
|
+ .form-control-static {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
.input-group {
|
|
|
display: inline-table;
|
|
|
vertical-align: middle;
|
|
@@ -434,8 +516,7 @@ input[type="checkbox"] {
|
|
|
}
|
|
|
|
|
|
// Remove default margin on radios/checkboxes that were used for stacking, and
|
|
|
- // then undo the floating of radios and checkboxes to match (which also avoids
|
|
|
- // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
|
|
|
+ // then undo the floating of radios and checkboxes to match.
|
|
|
.radio,
|
|
|
.checkbox {
|
|
|
display: inline-block;
|
|
@@ -453,10 +534,7 @@ input[type="checkbox"] {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
- // Validation states
|
|
|
- //
|
|
|
- // Reposition the icon because it's now within a grid column and columns have
|
|
|
- // `position: relative;` on them. Also accounts for the grid gutter padding.
|
|
|
+ // Re-override the feedback icon.
|
|
|
.has-feedback .form-control-feedback {
|
|
|
top: 0;
|
|
|
}
|
|
@@ -509,8 +587,7 @@ input[type="checkbox"] {
|
|
|
// Reposition the icon because it's now within a grid column and columns have
|
|
|
// `position: relative;` on them. Also accounts for the grid gutter padding.
|
|
|
.has-feedback .form-control-feedback {
|
|
|
- top: 0;
|
|
|
- right: (@grid-gutter-width / 2);
|
|
|
+ right: floor((@grid-gutter-width / 2));
|
|
|
}
|
|
|
|
|
|
// Form group sizes
|
|
@@ -521,20 +598,16 @@ input[type="checkbox"] {
|
|
|
@media (min-width: @screen-sm-min) {
|
|
|
.control-label {
|
|
|
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
|
|
|
+ font-size: @font-size-large;
|
|
|
}
|
|
|
}
|
|
|
- .form-control {
|
|
|
- &:extend(.input-lg);
|
|
|
- }
|
|
|
}
|
|
|
.form-group-sm {
|
|
|
@media (min-width: @screen-sm-min) {
|
|
|
.control-label {
|
|
|
padding-top: (@padding-small-vertical + 1);
|
|
|
+ font-size: @font-size-small;
|
|
|
}
|
|
|
}
|
|
|
- .form-control {
|
|
|
- &:extend(.input-sm);
|
|
|
- }
|
|
|
}
|
|
|
}
|