/* Forms ======================================== */ /* GENERAL STYLES -------------- */ /* Make all forms have space below them */ form { margin: 0 0 var(--base-line-height); } fieldset { padding: 0; margin: 0; border: 0; } /* Groups of fields with labels on top (legends) */ legend { display: block; width: 100%; padding: 0; margin-bottom: var(--base-line-height); font-size: calc(var(--base-font-size) * 1.5); line-height: calc(var(--base-line-height) * 2); color: var(--gray-dark); border: 0; border-bottom: 1px solid #e5e5e5; } /* Small */ legend small { font-size: calc(var(--base-line-height) * 0.75); color: var(--gray-light); } /* Set font for forms */ label, input, button, select, textarea { font-size: var(--base-font-size); font-weight: normal; line-height: var(--base-line-height); } input, button, select, textarea { font-family: var(--base-font-family); /* And only set font-family here for those that need it */ } /* Identify controls by their labels */ label { display: block; margin-bottom: 5px; } /* Form controls -------------------------- */ /* Shared size and type resets */ 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"], .uneditable-input { display: inline-block; height: var(--base-line-height); padding: 4px 6px; margin-bottom: calc(var(--base-line-height) / 2); font-size: var(--base-font-size); line-height: var(--base-line-height); color: var(--gray); border-radius: var(--input-border-radius); vertical-align: middle; } /* Reset appearance properties for textual inputs and textarea Declare width for legacy (can't be on input[type=*] selectors or it's too specific) */ input, textarea, .uneditable-input { width: 206px; /* plus 12px padding and 2px border */ } /* Reset height since textareas have rows */ textarea { height: auto; } /* Everything else */ 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"], .uneditable-input { background-color: var(--input-background); border: 1px solid var(--input-border); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); transition: border linear .2s, box-shadow linear .2s; } /* Focus state */ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border-color: rgba(82,168,236,.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); } /* Position radios and checkboxes better */ input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; } /* Reset width of input images, buttons, radios, checkboxes */ input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; /* Override of generic input selector */ } /* Set the height of select and file controls to match text inputs */ select, input[type="file"] { height: var(--input-height); /* In IE7, the height of the select element cannot be changed by height, only font-size */ margin-top: 4px; /* For IE7, add top margin to align select with labels */ line-height: var(--input-height); } /* Make select elements obey height by applying a border */ select { width: 220px; /* default input width + 10px of padding that doesn't get applied */ border: 1px solid var(--input-border); background-color: var(--input-background); /* Chrome on Linux and Mobile Safari need background-color */ } /* Make multiple select elements height not fixed */ select[multiple], select[size] { height: auto; } /* Focus for select, file, radio, and checkbox */ select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } /* Uneditable inputs ------------------ */ /* Make uneditable inputs look inactive */ .uneditable-input, .uneditable-textarea { color: var(--gray-light); background-color: #fcfcfc; border-color: var(--input-border); box-shadow: inset 0 1px 2px rgba(0,0,0,.025); cursor: not-allowed; } /* For text that needs to appear as an input but should not be an input */ .uneditable-input { overflow: hidden; /* prevent text from wrapping, but still cut it off like an input does */ white-space: nowrap; } /* Make uneditable textareas behave like a textarea */ .uneditable-textarea { width: auto; height: auto; } /* Placeholder ----------- */ /* Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector */ input::placeholder, textarea::placeholder { color: var(--placeholder-text); } /* CHECKBOXES & RADIOS ------------------- */ /* Indent the labels to position radios/checkboxes as hanging */ .radio, .checkbox { min-height: var(--base-line-height); /* clear the floating input if there is no label text */ padding-left: 20px; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -20px; } /* Move the options list down to align with labels */ .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 5px; /* has to be padding because margin collapses */ } /* Radios and checkboxes on same line */ /* TODO v3: Convert .inline to .control-inline */ .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; /* space out consecutive inline controls */ } /* INPUT SIZES ----------- */ /* General classes for quick sizes */ .input-mini { width: 60px; } .input-small { width: 90px; } .input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } /* Grid style input sizes */ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], /* Redeclare since the fluid row class is more specific */ .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } /* Ensure input-prepend/append never wraps */ .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], .input-prepend .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] { display: inline-block; } /* GRID SIZING FOR INPUTS ---------------------- */ /* Control row for multiple inputs per line */ .controls-row { zoom: 1; } .controls-row:before, .controls-row:after { display: table; content: ""; line-height: 0; } .controls-row:after { clear: both; } /* Float to collapse white-space for proper grid alignment */ .controls-row [class*="span"], /* Redeclare the fluid grid collapse since we undo the float for inputs */ .row-fluid .controls-row [class*="span"] { float: left; } /* Explicitly set top padding on all checkboxes/radios, not just first-child */ .controls-row .checkbox[class*="span"], .controls-row .radio[class*="span"] { padding-top: 5px; } /* DISABLED STATE -------------- */ /* Disabled and read-only inputs */ input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; background-color: var(--input-disabled-background); } /* Explicitly reset the colors here */ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; } /* FORM FIELD FEEDBACK STATES -------------------------- */ /* Warning */ .control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline { color: var(--warning-text); } .control-group.warning .checkbox, .control-group.warning .radio, .control-group.warning input, .control-group.warning select, .control-group.warning textarea { color: var(--warning-text); } .control-group.warning input, .control-group.warning select, .control-group.warning textarea { border-color: var(--warning-text); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { border-color: #a47e3c; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #dbc59e; } .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { color: var(--warning-text); background-color: var(--warning-background); border-color: var(--warning-text); } /* Error */ .control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: var(--error-text); } .control-group.error .checkbox, .control-group.error .radio, .control-group.error input, .control-group.error select, .control-group.error textarea { color: var(--error-text); } .control-group.error input, .control-group.error select, .control-group.error textarea { border-color: var(--error-text); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .control-group.error input:focus, .control-group.error select:focus, .control-group.error textarea:focus { border-color: #953b39; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #d59392; } .control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { color: var(--error-text); background-color: var(--error-background); border-color: var(--error-text); } /* Success */ .control-group.success .control-label, .control-group.success .help-block, .control-group.success .help-inline { color: var(--success-text); } .control-group.success .checkbox, .control-group.success .radio, .control-group.success input, .control-group.success select, .control-group.success textarea { color: var(--success-text); } .control-group.success input, .control-group.success select, .control-group.success textarea { border-color: var(--success-text); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .control-group.success input:focus, .control-group.success select:focus, .control-group.success textarea:focus { border-color: #356635; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #7aba7b; } .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { color: var(--success-text); background-color: var(--success-background); border-color: var(--success-text); } /* Info */ .control-group.info .control-label, .control-group.info .help-block, .control-group.info .help-inline { color: var(--info-text); } .control-group.info .checkbox, .control-group.info .radio, .control-group.info input, .control-group.info select, .control-group.info textarea { color: var(--info-text); } .control-group.info input, .control-group.info select, .control-group.info textarea { border-color: var(--info-text); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .control-group.info input:focus, .control-group.info select:focus, .control-group.info textarea:focus { border-color: #2d6987; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #7ab5d3; } .control-group.info .input-prepend .add-on, .control-group.info .input-append .add-on { color: var(--info-text); background-color: var(--info-background); border-color: var(--info-text); } /* HTML5 invalid states Shares styles with the .control-group.error above */ input:focus:invalid, textarea:focus:invalid, select:focus:invalid { color: #b94a48; border-color: #ee5f5b; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: #e9322d; box-shadow: 0 0 6px #f8b9b7; } /* FORM ACTIONS ------------ */ .form-actions { padding: calc(var(--base-line-height) - 1px) 20px var(--base-line-height); margin-top: var(--base-line-height); margin-bottom: var(--base-line-height); background-color: var(--form-actions-background); border-top: 1px solid #e5e5e5; zoom: 1; } .form-actions:before, .form-actions:after { display: table; content: ""; line-height: 0; } .form-actions:after { clear: both; } /* HELP TEXT --------- */ .help-block, .help-inline { color: #737373; } .help-block { display: block; margin-bottom: calc(var(--base-line-height) / 2); } .help-inline { display: inline-block; display: inline; zoom: 1; vertical-align: middle; padding-left: 5px; } /* INPUT GROUPS ------------ */ /* Allow us to put symbols and text within the input field for a cleaner look */ .input-append, .input-prepend { display: inline-block; margin-bottom: calc(var(--base-line-height) / 2); vertical-align: middle; font-size: 0; /* white space collapse hack */ white-space: nowrap; /* Prevent span and input from separating */ } /* Reset the white space collapse hack */ .input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input, .input-append .dropdown-menu, .input-prepend .dropdown-menu, .input-append .popover, .input-prepend .popover { font-size: var(--base-font-size); } .input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input { position: relative; /* placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness */ margin-bottom: 0; /* prevent bottom margin from screwing up alignment in stacked forms */ margin-left: 0; vertical-align: top; border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } /* Make input on top when focused so blue border and shadow always show */ .input-append input:focus, .input-prepend input:focus, .input-append select:focus, .input-prepend select:focus, .input-append .uneditable-input:focus, .input-prepend .uneditable-input:focus { z-index: 2; } .input-append .add-on, .input-prepend .add-on { display: inline-block; width: auto; height: var(--base-line-height); min-width: 16px; padding: 4px 5px; font-size: var(--base-font-size); font-weight: normal; line-height: var(--base-line-height); text-align: center; text-shadow: 0 1px 0 var(--white); background-color: var(--gray-lighter); border: 1px solid #ccc; } .input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn, .input-append .btn-group > .dropdown-toggle, .input-prepend .btn-group > .dropdown-toggle { vertical-align: top; border-radius: 0; } .input-append .active, .input-prepend .active { background-color: #a9dba9; border-color: var(--green); } .input-prepend .add-on, .input-prepend .btn { margin-right: -1px; } .input-prepend .add-on:first-child, .input-prepend .btn:first-child { border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); } .input-append input, .input-append select, .input-append .uneditable-input { border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); } .input-append input + .btn-group .btn:last-child, .input-append select + .btn-group .btn:last-child, .input-append .uneditable-input + .btn-group .btn:last-child { border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } .input-append .add-on, .input-append .btn, .input-append .btn-group { margin-left: -1px; } .input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child > .dropdown-toggle { border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } /* Remove all border-radius for inputs with both prepend and append */ .input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input { border-radius: 0; } .input-prepend.input-append input + .btn-group .btn, .input-prepend.input-append select + .btn-group .btn, .input-prepend.input-append .uneditable-input + .btn-group .btn { border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } .input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child { margin-right: -1px; border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); } .input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child { margin-left: -1px; border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; } .input-prepend.input-append .btn-group:first-child { margin-left: 0; } /* SEARCH FORM ----------- */ input.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; /* Remove the default margin on all inputs */ border-radius: 15px; } /* Allow for input prepend/append in search forms */ .form-search .input-append .search-query, .form-search .input-prepend .search-query { border-radius: 0; } .form-search .input-append .search-query { border-radius: 14px 0 0 14px; } .form-search .input-append .btn { border-radius: 0 14px 14px 0; } .form-search .input-prepend .search-query { border-radius: 0 14px 14px 0; } .form-search .input-prepend .btn { border-radius: 14px 0 0 14px; } /* HORIZONTAL & VERTICAL FORMS --------------------------- */ /* Common properties ----------------- */ .form-search, .form-inline, .form-horizontal { display: block; } .form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append { display: inline-block; display: inline; zoom: 1; margin-bottom: 0; vertical-align: middle; } /* Re-hide hidden elements due to specifity */ .form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; } .form-search label, .form-inline label, .form-search .btn-group, .form-inline .btn-group { display: inline-block; } /* Remove margin for input-prepend/-append */ .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { margin-bottom: 0; } /* Inline checkbox/radio labels (remove padding on left) */ .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle; } /* Remove float and margin, set to inline-block */ .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-right: 3px; margin-left: 0; } /* Margin to space out fieldsets */ .control-group { margin-bottom: calc(var(--base-line-height) / 2); } /* Legend collapses margin, so next element is responsible for spacing */ legend + .control-group { margin-top: var(--base-line-height); -webkit-margin-top-collapse: separate; } /* Horizontal-specific styles -------------------------- */ .form-horizontal { /* Increase spacing between groups */ } .form-horizontal .control-group { margin-bottom: var(--base-line-height); zoom: 1; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; content: ""; line-height: 0; } .form-horizontal .control-group:after { clear: both; } /* Float the labels left */ .form-horizontal .control-label { float: left; width: calc(var(--horizontal-component-offset) - 20px); padding-top: 5px; text-align: right; } /* Move over all input controls and content */ .form-horizontal .controls { /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */ display: inline-block; padding-left: 20px; margin-left: var(--horizontal-component-offset); margin-left: 0; } .form-horizontal .controls:first-child { padding-left: var(--horizontal-component-offset); } /* Remove bottom margin on block level help text since that's accounted for on .control-group */ .form-horizontal .help-block { margin-bottom: 0; } /* And apply it only to .help-block instances that follow a form control */ .form-horizontal input, .form-horizontal select, .form-horizontal textarea, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append { margin-bottom: 0; } .form-horizontal input + .help-block, .form-horizontal select + .help-block, .form-horizontal textarea + .help-block, .form-horizontal .uneditable-input + .help-block, .form-horizontal .input-prepend + .help-block, .form-horizontal .input-append + .help-block { margin-top: calc(var(--base-line-height) / 2); } /* Move over buttons in .form-actions to align with .controls */ .form-horizontal .form-actions { padding-left: var(--horizontal-component-offset); }