diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/bootstrap-3.3.2/forms.less (renamed from assets/css/lib/bootstrap/_forms.scss) | 226 |
1 files changed, 127 insertions, 99 deletions
diff --git a/assets/css/lib/bootstrap/_forms.scss b/assets/css/bootstrap-3.3.2/forms.less index 74bb67d..3138c2c 100644 --- a/assets/css/lib/bootstrap/_forms.scss +++ b/assets/css/bootstrap-3.3.2/forms.less @@ -21,12 +21,12 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: $line-height-computed; - font-size: ($font-size-base * 1.5); + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); line-height: inherit; - color: $legend-color; + color: @legend-color; border: 0; - border-bottom: 1px solid $legend-border-color; + border-bottom: 1px solid @legend-border-color; } label { @@ -45,7 +45,7 @@ label { // Override content-box in Normalize (* isn't specific enough) input[type="search"] { - @include box-sizing(border-box); + .box-sizing(border-box); } // Position radios and checkboxes better @@ -77,16 +77,16 @@ select[size] { input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { - @include tab-focus(); + .tab-focus(); } // Adjust output element output { display: block; - padding-top: ($padding-base-vertical + 1); - font-size: $font-size-base; - line-height: $line-height-base; - color: $input-color; + padding-top: (@padding-base-vertical + 1); + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; } @@ -115,23 +115,23 @@ output { .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) - padding: $padding-base-vertical $padding-base-horizontal; - font-size: $font-size-base; - line-height: $line-height-base; - color: $input-color; - background-color: $input-bg; + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + 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 - border: 1px solid $input-border; - border-radius: $input-border-radius; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + border: 1px solid @input-border; + 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"); // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus(); + .form-control-focus(); // Placeholder - @include placeholder(); + .placeholder(); // Disabled and read-only inputs // @@ -141,17 +141,15 @@ output { &[disabled], &[readonly], fieldset[disabled] & { - cursor: not-allowed; - background-color: $input-bg-disabled; - opacity: 1; // iOS fix for unreadable disabled content + cursor: @cursor-disabled; + background-color: @input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 } - // [converter] extracted textarea& to textarea.form-control -} - -// Reset height for `textarea`s -textarea.form-control { - height: auto; + // Reset height for `textarea`s + textarea& { + height: auto; + } } @@ -170,24 +168,26 @@ 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 + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + line-height: @input-height-base; + + &.input-sm, + .input-group-sm & { + line-height: @input-height-small; + } - &.input-sm { - line-height: $input-height-small; - } - &.input-lg { - line-height: $input-height-large; + &.input-lg, + .input-group-lg & { + line-height: @input-height-large; + } } } @@ -210,11 +210,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; @@ -260,7 +260,7 @@ input[type="checkbox"] { &[disabled], &.disabled, fieldset[disabled] & { - cursor: not-allowed; + cursor: @cursor-disabled; } } // These classes are used directly on <label>s @@ -268,7 +268,7 @@ input[type="checkbox"] { .checkbox-inline { &.disabled, fieldset[disabled] & { - cursor: not-allowed; + cursor: @cursor-disabled; } } // These classes are used on elements with <label> descendants @@ -277,7 +277,7 @@ input[type="checkbox"] { &.disabled, fieldset[disabled] & { label { - cursor: not-allowed; + cursor: @cursor-disabled; } } } @@ -290,8 +290,8 @@ input[type="checkbox"] { .form-control-static { // Size it appropriately next to real form controls - padding-top: ($padding-base-vertical + 1); - padding-bottom: ($padding-base-vertical + 1); + padding-top: (@padding-base-vertical + 1); + padding-bottom: (@padding-base-vertical + 1); // Remove default margin from `p` margin-bottom: 0; @@ -307,10 +307,39 @@ 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. -@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); +.input-sm { + .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 { + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small); + } + .form-control-static { + height: @input-height-small; + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + line-height: @line-height-small; + } +} -@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); +.input-lg { + .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 { + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large); + } + .form-control-static { + height: @input-height-large; + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + line-height: @line-height-large; + } +} // Form control feedback states @@ -323,47 +352,53 @@ input[type="checkbox"] { // Ensure icons don't overlap text .form-control { - padding-right: ($input-height-base * 1.25); + padding-right: (@input-height-base * 1.25); } } // 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; + 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; + width: @input-height-large; + height: @input-height-large; + line-height: @input-height-large; } .input-sm + .form-control-feedback { - width: $input-height-small; - height: $input-height-small; - line-height: $input-height-small; + width: @input-height-small; + height: @input-height-small; + line-height: @input-height-small; } // Feedback states .has-success { - @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); + .form-control-validation(@state-success-text; @state-success-text; @state-success-bg); } .has-warning { - @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); + .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); } .has-error { - @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); + .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; + } } @@ -376,11 +411,10 @@ input[type="checkbox"] { display: block; // account for any element using help-block margin-top: 5px; margin-bottom: 10px; - color: lighten($text-color, 25%); // lighten the text some for contrast + 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 @@ -395,7 +429,7 @@ input[type="checkbox"] { .form-inline { // Kick in the inline - @media (min-width: $screen-sm-min) { + @media (min-width: @screen-sm-min) { // Inline-block all the things for "inline" .form-group { display: inline-block; @@ -410,6 +444,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; @@ -432,8 +471,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; @@ -451,10 +489,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; } @@ -478,27 +513,27 @@ input[type="checkbox"] { .checkbox-inline { margin-top: 0; margin-bottom: 0; - padding-top: ($padding-base-vertical + 1); // Default padding plus a border + padding-top: (@padding-base-vertical + 1); // Default padding plus a border } // Account for padding we're adding to ensure the alignment and of help text // and other content below items .radio, .checkbox { - min-height: ($line-height-computed + ($padding-base-vertical + 1)); + min-height: (@line-height-computed + (@padding-base-vertical + 1)); } // Make form groups behave like rows .form-group { - @include make-row(); + .make-row(); } // Reset spacing and right align labels, but scope to media queries so that // labels on narrow viewports stack the same as a default form example. - @media (min-width: $screen-sm-min) { + @media (min-width: @screen-sm-min) { .control-label { text-align: right; margin-bottom: 0; - padding-top: ($padding-base-vertical + 1); // Default padding plus a border + padding-top: (@padding-base-vertical + 1); // Default padding plus a border } } @@ -507,8 +542,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: (@grid-gutter-width / 2); } // Form group sizes @@ -516,23 +550,17 @@ input[type="checkbox"] { // Quick utility class for applying `.input-lg` and `.input-sm` styles to the // inputs and labels within a `.form-group`. .form-group-lg { - @media (min-width: $screen-sm-min) { + @media (min-width: @screen-sm-min) { .control-label { - padding-top: (($padding-large-vertical * $line-height-large) + 1); + padding-top: ((@padding-large-vertical * @line-height-large) + 1); } } - .form-control { - @extend .input-lg; - } } .form-group-sm { - @media (min-width: $screen-sm-min) { + @media (min-width: @screen-sm-min) { .control-label { - padding-top: ($padding-small-vertical + 1); + padding-top: (@padding-small-vertical + 1); } } - .form-control { - @extend .input-sm; - } } } |