193 lines
4.3 KiB
Plaintext
193 lines
4.3 KiB
Plaintext
//
|
|
// Forms
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Normalize non-controls
|
|
//
|
|
// Restyle and baseline non-control form elements.
|
|
|
|
legend {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-bottom: @line-height-computed / 2;
|
|
font-size: (@component-font-size-base * 1.6); // ~24px
|
|
line-height: inherit;
|
|
color: @legend-color;
|
|
border-bottom: none;
|
|
}
|
|
|
|
// Normalize form controls
|
|
|
|
// Textarea
|
|
textarea {
|
|
font-size: ceil(@font-size-base * 1.071); // ~15px
|
|
line-height: 24px;
|
|
padding: 5px 11px;
|
|
}
|
|
|
|
// Search
|
|
input[type="search"] {
|
|
-webkit-appearance: none !important; // removes rounded corners for searchfields on iOS
|
|
}
|
|
|
|
|
|
// Label
|
|
label {
|
|
font-weight: normal;
|
|
font-size: @component-font-size-base;
|
|
line-height: 2.4; // ~36px
|
|
}
|
|
|
|
// Placeholder
|
|
//
|
|
// Placeholder text gets special styles because when browsers invalidate entire
|
|
// lines if it doesn't understand a selector/
|
|
.form-control {
|
|
.placeholder(desaturate(lighten(@brand-primary, 45%), 15%));
|
|
}
|
|
|
|
// Common form controls
|
|
//
|
|
// Shared size and type resets for form controls. Apply `.form-control` to any
|
|
// of the following form controls:
|
|
//
|
|
// select
|
|
// textarea
|
|
// input[type="text"]
|
|
// input[type="password"]
|
|
// input[type="datetime"]
|
|
// input[type="datetime-local"]
|
|
// input[type="date"]
|
|
// input[type="month"]
|
|
// input[type="time"]
|
|
// input[type="week"]
|
|
// input[type="number"]
|
|
// input[type="email"]
|
|
// input[type="url"]
|
|
// input[type="search"]
|
|
// input[type="tel"]
|
|
// input[type="color"]
|
|
|
|
.form-control {
|
|
border: 2px solid @gray-light;
|
|
color: @brand-primary;
|
|
font-family: @font-family-base;
|
|
font-size: @input-font-size-base;
|
|
line-height: @input-line-height-base;
|
|
padding: 8px 12px;
|
|
height: 42px;
|
|
-webkit-appearance: none;
|
|
border-radius: @input-border-radius;
|
|
.box-shadow(none);
|
|
.transition(~"border .25s linear, color .25s linear, background-color .25s linear");
|
|
|
|
// Customize the `:focus` state
|
|
.form-control-focus();
|
|
|
|
// Disabled and read-only inputs
|
|
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
|
|
// be 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] & {
|
|
background-color: @input-bg-disabled;
|
|
border-color: mix(@gray, white, 40%);
|
|
color: mix(@gray, white, 40%);
|
|
cursor: default;
|
|
.opacity(.7);
|
|
}
|
|
|
|
// Flat (without border)
|
|
&.flat {
|
|
border-color: transparent;
|
|
|
|
&:hover {
|
|
border-color: @gray-light;
|
|
}
|
|
&:focus {
|
|
border-color: @brand-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Form control sizing
|
|
.input-sm {
|
|
.input-size(@input-height-small; 6px; 10px; @input-font-size-small; @input-line-height-small);
|
|
}
|
|
|
|
.input-lg {
|
|
.input-size(@input-height-large; 10px; 15px; @input-font-size-large; @input-line-height-large);
|
|
}
|
|
|
|
.input-hg {
|
|
.input-size(@input-height-huge; 10px; 16px; @input-font-size-huge; @input-line-height-huge);
|
|
}
|
|
|
|
// Form control feedback states
|
|
//
|
|
// Apply contextual and semantic states to individual form controls.
|
|
|
|
// Warning
|
|
.has-warning {
|
|
.form-control-validation(@brand-warning; @brand-warning);
|
|
}
|
|
// Error
|
|
.has-error {
|
|
.form-control-validation(@brand-danger; @brand-danger);
|
|
}
|
|
// Success
|
|
.has-success {
|
|
.form-control-validation(@brand-success; @brand-success);
|
|
}
|
|
|
|
// Help text
|
|
//
|
|
// Apply to any element you wish to create light text for placement immediately
|
|
// below a form control. Use for general help, formatting, or instructional text.
|
|
|
|
.help-block {
|
|
font-size: @component-font-size-base;
|
|
margin-bottom: 5px;
|
|
color: inherit;
|
|
}
|
|
|
|
// Form groups
|
|
//
|
|
// Designed to help with the organization and spacing of vertical forms. For
|
|
// horizontal forms, use the predefined grid classes.
|
|
|
|
.form-group {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
// Horizontal forms
|
|
//
|
|
// Horizontal forms are built on grid classes and allow you to create forms with
|
|
// labels on the left and inputs on the right.
|
|
|
|
.form-horizontal {
|
|
|
|
// Consistent vertical alignment of labels, radios, and checkboxes
|
|
.control-label,
|
|
.radio,
|
|
.checkbox,
|
|
.radio-inline,
|
|
.checkbox-inline {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
// Make form groups behave like rows
|
|
.form-group {
|
|
.make-row();
|
|
}
|
|
|
|
.form-control-static {
|
|
padding-top: 6px;
|
|
}
|
|
} |