app/frameworks/twitter/bootstrap/forms.less in less-rails-bootstrap-3.2.0 vs app/frameworks/twitter/bootstrap/forms.less in less-rails-bootstrap-3.3.0.0
- old
+ new
@@ -139,11 +139,11 @@
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
- cursor: not-allowed;
+ cursor: @cursor-disabled;
background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s
@@ -181,17 +181,34 @@
// IE8+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
&.input-sm {
line-height: @input-height-small;
+ line-height: @line-height-small ~"\0";
}
&.input-lg {
line-height: @input-height-large;
+ line-height: @line-height-large ~"\0";
}
}
+// IE 11 hack to reverse the iOS temporal input hack.
+_:-ms-fullscreen, :root input[type="date"],
+_:-ms-fullscreen, :root input[type="time"],
+_:-ms-fullscreen, :root input[type="datetime-local"],
+_:-ms-fullscreen, :root input[type="month"] {
+ line-height: @line-height-base;
+ &.input-sm {
+ line-height: @line-height-small;
+ }
+ &.input-lg {
+ line-height: @line-height-large;
+ }
+}
+
+
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
@@ -206,15 +223,15 @@
.radio,
.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;
cursor: pointer;
}
@@ -256,28 +273,28 @@
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
- cursor: not-allowed;
+ cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
- cursor: not-allowed;
+ cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
- cursor: not-allowed;
+ cursor: @cursor-disabled;
}
}
}
@@ -304,16 +321,18 @@
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
-.input-sm {
- .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+.input-sm,
+.form-group-sm .form-control {
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}
-.input-lg {
- .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+.input-lg,
+.form-group-lg .form-control {
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
// Form control feedback states
//
@@ -329,18 +348,19 @@
}
}
// 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;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
text-align: center;
+ pointer-events: none;
}
.input-lg + .form-control-feedback {
width: @input-height-large;
height: @input-height-large;
line-height: @input-height-large;
@@ -360,14 +380,19 @@
}
.has-error {
.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;
+ }
}
// Help text
//
@@ -380,11 +405,10 @@
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
-
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
@@ -410,10 +434,15 @@
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
+ // Make static controls behave like regular ones
+ .form-control-static {
+ display: inline-block;
+ }
+
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
@@ -451,14 +480,11 @@
.checkbox input[type="checkbox"] {
position: relative;
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;
}
}
}
@@ -507,11 +533,10 @@
// 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.
.has-feedback .form-control-feedback {
- top: 0;
right: (@grid-gutter-width / 2);
}
// Form group sizes
//
@@ -521,20 +546,14 @@
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
}
}
- .form-control {
- &:extend(.input-lg);
- }
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@padding-small-vertical + 1);
}
- }
- .form-control {
- &:extend(.input-sm);
}
}
}