1.1 --- a/bootstrap-source/bootstrap-3.0.3/less Kopie/forms.less Sat Jan 18 12:34:36 2014 +0100
1.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
1.3 @@ -1,375 +0,0 @@
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 -}