1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/forms.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,375 @@
1.4 +//
1.5 +// Forms
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Normalize non-controls
1.10 +//
1.11 +// Restyle and baseline non-control form elements.
1.12 +
1.13 +fieldset {
1.14 + padding: 0;
1.15 + margin: 0;
1.16 + border: 0;
1.17 +}
1.18 +
1.19 +legend {
1.20 + display: block;
1.21 + width: 100%;
1.22 + padding: 0;
1.23 + margin-bottom: @line-height-computed;
1.24 + font-size: (@font-size-base * 1.5);
1.25 + line-height: inherit;
1.26 + color: @legend-color;
1.27 + border: 0;
1.28 + border-bottom: 1px solid @legend-border-color;
1.29 +}
1.30 +
1.31 +label {
1.32 + display: inline-block;
1.33 + margin-bottom: 5px;
1.34 + font-weight: bold;
1.35 +}
1.36 +
1.37 +
1.38 +// Normalize form controls
1.39 +
1.40 +// Override content-box in Normalize (* isn't specific enough)
1.41 +input[type="search"] {
1.42 + .box-sizing(border-box);
1.43 +}
1.44 +
1.45 +// Position radios and checkboxes better
1.46 +input[type="radio"],
1.47 +input[type="checkbox"] {
1.48 + margin: 4px 0 0;
1.49 + margin-top: 1px \9; /* IE8-9 */
1.50 + line-height: normal;
1.51 +}
1.52 +
1.53 +// Set the height of select and file controls to match text inputs
1.54 +input[type="file"] {
1.55 + display: block;
1.56 +}
1.57 +
1.58 +// Make multiple select elements height not fixed
1.59 +select[multiple],
1.60 +select[size] {
1.61 + height: auto;
1.62 +}
1.63 +
1.64 +// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
1.65 +select optgroup {
1.66 + font-size: inherit;
1.67 + font-style: inherit;
1.68 + font-family: inherit;
1.69 +}
1.70 +
1.71 +// Focus for select, file, radio, and checkbox
1.72 +input[type="file"]:focus,
1.73 +input[type="radio"]:focus,
1.74 +input[type="checkbox"]:focus {
1.75 + .tab-focus();
1.76 +}
1.77 +
1.78 +// Fix for Chrome number input
1.79 +// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
1.80 +// See https://github.com/twbs/bootstrap/issues/8350 for more.
1.81 +input[type="number"] {
1.82 + &::-webkit-outer-spin-button,
1.83 + &::-webkit-inner-spin-button {
1.84 + height: auto;
1.85 + }
1.86 +}
1.87 +
1.88 +// Adjust output element
1.89 +output {
1.90 + display: block;
1.91 + padding-top: (@padding-base-vertical + 1);
1.92 + font-size: @font-size-base;
1.93 + line-height: @line-height-base;
1.94 + color: @input-color;
1.95 + vertical-align: middle;
1.96 +}
1.97 +
1.98 +
1.99 +// Common form controls
1.100 +//
1.101 +// Shared size and type resets for form controls. Apply `.form-control` to any
1.102 +// of the following form controls:
1.103 +//
1.104 +// select
1.105 +// textarea
1.106 +// input[type="text"]
1.107 +// input[type="password"]
1.108 +// input[type="datetime"]
1.109 +// input[type="datetime-local"]
1.110 +// input[type="date"]
1.111 +// input[type="month"]
1.112 +// input[type="time"]
1.113 +// input[type="week"]
1.114 +// input[type="number"]
1.115 +// input[type="email"]
1.116 +// input[type="url"]
1.117 +// input[type="search"]
1.118 +// input[type="tel"]
1.119 +// input[type="color"]
1.120 +
1.121 +.form-control {
1.122 + display: block;
1.123 + width: 100%;
1.124 + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
1.125 + padding: @padding-base-vertical @padding-base-horizontal;
1.126 + font-size: @font-size-base;
1.127 + line-height: @line-height-base;
1.128 + color: @input-color;
1.129 + vertical-align: middle;
1.130 + background-color: @input-bg;
1.131 + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
1.132 + border: 1px solid @input-border;
1.133 + border-radius: @input-border-radius;
1.134 + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
1.135 + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
1.136 +
1.137 + // Customize the `:focus` state to imitate native WebKit styles.
1.138 + .form-control-focus();
1.139 +
1.140 + // Placeholder
1.141 + //
1.142 + // Placeholder text gets special styles because when browsers invalidate entire
1.143 + // lines if it doesn't understand a selector/
1.144 + .placeholder();
1.145 +
1.146 + // Disabled and read-only inputs
1.147 + // Note: HTML5 says that controls under a fieldset > legend:first-child won't
1.148 + // be disabled if the fieldset is disabled. Due to implementation difficulty,
1.149 + // we don't honor that edge case; we style them as disabled anyway.
1.150 + &[disabled],
1.151 + &[readonly],
1.152 + fieldset[disabled] & {
1.153 + cursor: not-allowed;
1.154 + background-color: @input-bg-disabled;
1.155 + }
1.156 +
1.157 + // Reset height for `textarea`s
1.158 + textarea& {
1.159 + height: auto;
1.160 + }
1.161 +}
1.162 +
1.163 +
1.164 +// Form groups
1.165 +//
1.166 +// Designed to help with the organization and spacing of vertical forms. For
1.167 +// horizontal forms, use the predefined grid classes.
1.168 +
1.169 +.form-group {
1.170 + margin-bottom: 15px;
1.171 +}
1.172 +
1.173 +
1.174 +// Checkboxes and radios
1.175 +//
1.176 +// Indent the labels to position radios/checkboxes as hanging controls.
1.177 +
1.178 +.radio,
1.179 +.checkbox {
1.180 + display: block;
1.181 + min-height: @line-height-computed; // clear the floating input if there is no label text
1.182 + margin-top: 10px;
1.183 + margin-bottom: 10px;
1.184 + padding-left: 20px;
1.185 + vertical-align: middle;
1.186 + label {
1.187 + display: inline;
1.188 + margin-bottom: 0;
1.189 + font-weight: normal;
1.190 + cursor: pointer;
1.191 + }
1.192 +}
1.193 +.radio input[type="radio"],
1.194 +.radio-inline input[type="radio"],
1.195 +.checkbox input[type="checkbox"],
1.196 +.checkbox-inline input[type="checkbox"] {
1.197 + float: left;
1.198 + margin-left: -20px;
1.199 +}
1.200 +.radio + .radio,
1.201 +.checkbox + .checkbox {
1.202 + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
1.203 +}
1.204 +
1.205 +// Radios and checkboxes on same line
1.206 +.radio-inline,
1.207 +.checkbox-inline {
1.208 + display: inline-block;
1.209 + padding-left: 20px;
1.210 + margin-bottom: 0;
1.211 + vertical-align: middle;
1.212 + font-weight: normal;
1.213 + cursor: pointer;
1.214 +}
1.215 +.radio-inline + .radio-inline,
1.216 +.checkbox-inline + .checkbox-inline {
1.217 + margin-top: 0;
1.218 + margin-left: 10px; // space out consecutive inline controls
1.219 +}
1.220 +
1.221 +// Apply same disabled cursor tweak as for inputs
1.222 +//
1.223 +// Note: Neither radios nor checkboxes can be readonly.
1.224 +input[type="radio"],
1.225 +input[type="checkbox"],
1.226 +.radio,
1.227 +.radio-inline,
1.228 +.checkbox,
1.229 +.checkbox-inline {
1.230 + &[disabled],
1.231 + fieldset[disabled] & {
1.232 + cursor: not-allowed;
1.233 + }
1.234 +}
1.235 +
1.236 +// Form control sizing
1.237 +.input-sm {
1.238 + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
1.239 +}
1.240 +
1.241 +.input-lg {
1.242 + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
1.243 +}
1.244 +
1.245 +
1.246 +// Form control feedback states
1.247 +//
1.248 +// Apply contextual and semantic states to individual form controls.
1.249 +
1.250 +// Warning
1.251 +.has-warning {
1.252 + .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
1.253 +}
1.254 +// Error
1.255 +.has-error {
1.256 + .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
1.257 +}
1.258 +// Success
1.259 +.has-success {
1.260 + .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
1.261 +}
1.262 +
1.263 +
1.264 +// Static form control text
1.265 +//
1.266 +// Apply class to a `p` element to make any string of text align with labels in
1.267 +// a horizontal form layout.
1.268 +
1.269 +.form-control-static {
1.270 + margin-bottom: 0; // Remove default margin from `p`
1.271 +}
1.272 +
1.273 +
1.274 +// Help text
1.275 +//
1.276 +// Apply to any element you wish to create light text for placement immediately
1.277 +// below a form control. Use for general help, formatting, or instructional text.
1.278 +
1.279 +.help-block {
1.280 + display: block; // account for any element using help-block
1.281 + margin-top: 5px;
1.282 + margin-bottom: 10px;
1.283 + color: lighten(@text-color, 25%); // lighten the text some for contrast
1.284 +}
1.285 +
1.286 +
1.287 +
1.288 +// Inline forms
1.289 +//
1.290 +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
1.291 +// forms begin stacked on extra small (mobile) devices and then go inline when
1.292 +// viewports reach <768px.
1.293 +//
1.294 +// Requires wrapping inputs and labels with `.form-group` for proper display of
1.295 +// default HTML form controls and our custom form controls (e.g., input groups).
1.296 +//
1.297 +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
1.298 +
1.299 +.form-inline {
1.300 +
1.301 + // Kick in the inline
1.302 + @media (min-width: @screen-sm) {
1.303 + // Inline-block all the things for "inline"
1.304 + .form-group {
1.305 + display: inline-block;
1.306 + margin-bottom: 0;
1.307 + vertical-align: middle;
1.308 + }
1.309 +
1.310 + // In navbar-form, allow folks to *not* use `.form-group`
1.311 + .form-control {
1.312 + display: inline-block;
1.313 + }
1.314 +
1.315 + // Override `width: 100%;` when not within a `.form-group`
1.316 + select.form-control {
1.317 + width: auto;
1.318 + }
1.319 +
1.320 + // Remove default margin on radios/checkboxes that were used for stacking, and
1.321 + // then undo the floating of radios and checkboxes to match (which also avoids
1.322 + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
1.323 + .radio,
1.324 + .checkbox {
1.325 + display: inline-block;
1.326 + margin-top: 0;
1.327 + margin-bottom: 0;
1.328 + padding-left: 0;
1.329 + }
1.330 + .radio input[type="radio"],
1.331 + .checkbox input[type="checkbox"] {
1.332 + float: none;
1.333 + margin-left: 0;
1.334 + }
1.335 + }
1.336 +}
1.337 +
1.338 +
1.339 +// Horizontal forms
1.340 +//
1.341 +// Horizontal forms are built on grid classes and allow you to create forms with
1.342 +// labels on the left and inputs on the right.
1.343 +
1.344 +.form-horizontal {
1.345 +
1.346 + // Consistent vertical alignment of labels, radios, and checkboxes
1.347 + .control-label,
1.348 + .radio,
1.349 + .checkbox,
1.350 + .radio-inline,
1.351 + .checkbox-inline {
1.352 + margin-top: 0;
1.353 + margin-bottom: 0;
1.354 + padding-top: (@padding-base-vertical + 1); // Default padding plus a border
1.355 + }
1.356 + // Account for padding we're adding to ensure the alignment and of help text
1.357 + // and other content below items
1.358 + .radio,
1.359 + .checkbox {
1.360 + min-height: @line-height-computed + (@padding-base-vertical + 1);
1.361 + }
1.362 +
1.363 + // Make form groups behave like rows
1.364 + .form-group {
1.365 + .make-row();
1.366 + }
1.367 +
1.368 + .form-control-static {
1.369 + padding-top: (@padding-base-vertical + 1);
1.370 + }
1.371 +
1.372 + // Only right align form labels here when the columns stop stacking
1.373 + @media (min-width: @screen-sm-min) {
1.374 + .control-label {
1.375 + text-align: right;
1.376 + }
1.377 + }
1.378 +}