diff --git a/public/less/base/base.less b/public/less/base/base.less index 9c639c007cd..d10711b48f3 100644 --- a/public/less/base/base.less +++ b/public/less/base/base.less @@ -4,6 +4,25 @@ html { body { height: 100%; - background: @bodyBackground; + margin: 0; + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @textColor; + background-color: @bodyBackground; +} + + +// Links +// ------------------------- + +a { + color: @linkColor; + text-decoration: none; +} + +a:hover, +a:focus { + color: @linkColorHover; } diff --git a/public/less/base/forms.less b/public/less/base/forms.less index 5d2e00279d8..4a84a70b3ab 100644 --- a/public/less/base/forms.less +++ b/public/less/base/forms.less @@ -1,3 +1,244 @@ +// +// Forms +// -------------------------------------------------- + + +// GENERAL STYLES +// -------------- + +// Make all forms have space below them +form { + margin: 0 0 @baseLineHeight; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +// Groups of fields with labels on top (legends) +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @baseLineHeight; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; + color: @grayDark; + border: 0; + border-bottom: 1px solid #e5e5e5; + + // Small + small { + font-size: @baseLineHeight * .75; + color: @grayLight; + } +} + +// Set font for forms +label, +input, +button, +select, +textarea { + #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here +} +input, +button, +select, +textarea { + font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) +} + +// 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: @baseLineHeight; + padding: 4px 6px; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @inputText; + vertical-align: top; +} + +// 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: @inputBackground; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border linear .2s, box-shadow linear .2s"); + + // Focus state + &: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; + 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: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: @inputHeight; +} + +// 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 @inputBorder; + background-color: @inputBackground; // 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 { + .tab-focus(); +} + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +input, +textarea { + .placeholder(); +} + + +// 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 SIZING FOR INPUTS +// ---------------------- + +// Grid sizes +#grid > .input(@gridColumnWidth, @gridGutterWidth); + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: @inputDisabledBackground; +} + +// Explicitly reset the colors here +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + + +// 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; + &:focus { + border-color: darken(#ee5f5b, 10%); + @shadow: 0 0 6px lighten(#ee5f5b, 20%); + .box-shadow(@shadow); + } +} + input[type=text].input-fluid { width: 100%; box-sizing: border-box; diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 4c9f974bf2a..1b4e2d8824a 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -14,12 +14,8 @@ @import "reset.less"; // Grid system and page structure -@import "scaffolding.less"; @import "grid.less"; -// Base CSS -@import "forms.less"; - // Components: common @import "close.less"; diff --git a/public/less/bootstrap/forms.less b/public/less/bootstrap/forms.less index 21c4fd979fa..b20642c064c 100644 --- a/public/less/bootstrap/forms.less +++ b/public/less/bootstrap/forms.less @@ -81,11 +81,9 @@ input[type="color"], display: inline-block; height: @baseLineHeight; padding: 4px 6px; - margin-bottom: @baseLineHeight / 2; font-size: @baseFontSize; line-height: @baseLineHeight; color: @inputText; - .border-radius(@inputBorderRadius); vertical-align: middle; } @@ -100,6 +98,7 @@ textarea, textarea { height: auto; } + // Everything else textarea, input[type="text"], @@ -118,13 +117,12 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: @inputBackground; - border: 1px solid @inputBorder; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border linear .2s, box-shadow linear .2s"); // Focus state &:focus { - border-color: rgba(82,168,236,.8); + 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)"); @@ -135,8 +133,6 @@ input[type="color"], input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - *margin-top: 0; /* IE7 */ - margin-top: 1px \9; /* IE8-9 */ line-height: normal; } @@ -155,7 +151,6 @@ input[type="checkbox"] { select, input[type="file"] { height: @inputHeight; /* 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: @inputHeight; } @@ -180,33 +175,6 @@ input[type="checkbox"]:focus { .tab-focus(); } - -// Uneditable inputs -// ------------------------- - -// Make uneditable inputs look inactive -.uneditable-input, -.uneditable-textarea { - color: @grayLight; - background-color: darken(@inputBackground, 1%); - border-color: @inputBorder; - .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 // ------------------------- @@ -217,43 +185,6 @@ textarea { } -// CHECKBOXES & RADIOS -// ------------------- - -// Indent the labels to position radios/checkboxes as hanging -.radio, -.checkbox { - min-height: @baseLineHeight; // 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 collaspes -} - -// 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 // ----------- @@ -265,61 +196,12 @@ textarea { .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 // ---------------------- // Grid sizes #grid > .input(@gridColumnWidth, @gridGutterWidth); -// Control row for multiple inputs per line -.controls-row { - .clearfix(); // Clear the float from controls -} - -// 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; -} -// Explicity 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 // -------------- @@ -342,28 +224,6 @@ input[type="checkbox"][readonly] { } - - -// FORM FIELD FEEDBACK STATES -// -------------------------- - -// Warning -.control-group.warning { - .formFieldState(@warningText, @warningText, @warningBackground); -} -// Error -.control-group.error { - .formFieldState(@errorText, @errorText, @errorBackground); -} -// Success -.control-group.success { - .formFieldState(@successText, @successText, @successBackground); -} -// Success -.control-group.info { - .formFieldState(@infoText, @infoText, @infoBackground); -} - // HTML5 invalid states // Shares styles with the .control-group.error above input:focus:invalid, @@ -380,311 +240,4 @@ select:focus:invalid { -// FORM ACTIONS -// ------------ -.form-actions { - padding: (@baseLineHeight - 1) 20px @baseLineHeight; - margin-top: @baseLineHeight; - margin-bottom: @baseLineHeight; - background-color: @formActionsBackground; - border-top: 1px solid #e5e5e5; - .clearfix(); // Adding clearfix to allow for .pull-right button containers -} - - - -// HELP TEXT -// --------- - -.help-block, -.help-inline { - color: lighten(@textColor, 15%); // lighten the text some for contrast -} - -.help-block { - display: block; // account for any element using help-block - margin-bottom: @baseLineHeight / 2; -} - -.help-inline { - display: inline-block; - .ie7-inline-block(); - 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: @baseLineHeight / 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, - select, - .uneditable-input, - .dropdown-menu, - .popover { - font-size: @baseFontSize; - } - - input, - select, - .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 @inputBorderRadius @inputBorderRadius 0); - // Make input on top when focused so blue border and shadow always show - &:focus { - z-index: 2; - } - } - .add-on { - display: inline-block; - width: auto; - height: @baseLineHeight; - min-width: 16px; - padding: 4px 5px; - font-size: @baseFontSize; - font-weight: normal; - line-height: @baseLineHeight; - text-align: center; - text-shadow: 0 1px 0 @white; - background-color: @grayLighter; - border: 1px solid #ccc; - } - .add-on, - .btn, - .btn-group > .dropdown-toggle { - vertical-align: top; - .border-radius(0); - } - .active { - background-color: lighten(@green, 30); - border-color: @green; - } -} - -.input-prepend { - .add-on, - .btn { - margin-right: -1px; - } - .add-on:first-child, - .btn:first-child { - // FYI, `.btn:first-child` accounts for a button group that's prepended - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } -} - -.input-append { - input, - select, - .uneditable-input { - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - + .btn-group .btn:last-child { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - } - .add-on, - .btn, - .btn-group { - margin-left: -1px; - } - .add-on:last-child, - .btn:last-child, - .btn-group:last-child > .dropdown-toggle { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } -} - -// Remove all border-radius for inputs with both prepend and append -.input-prepend.input-append { - input, - select, - .uneditable-input { - .border-radius(0); - + .btn-group .btn { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - } - .add-on:first-child, - .btn:first-child { - margin-right: -1px; - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } - .add-on:last-child, - .btn:last-child { - margin-left: -1px; - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - .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); // Override due to specificity -} -.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 { - input, - textarea, - select, - .help-inline, - .uneditable-input, - .input-prepend, - .input-append { - display: inline-block; - .ie7-inline-block(); - margin-bottom: 0; - vertical-align: middle; - } - // Re-hide hidden elements due to specifity - .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: @baseLineHeight / 2; -} - -// Legend collapses margin, so next element is responsible for spacing -legend + .control-group { - margin-top: @baseLineHeight; - -webkit-margin-top-collapse: separate; -} - -// Horizontal-specific styles -// -------------------------- - -.form-horizontal { - // Increase spacing between groups - .control-group { - margin-bottom: @baseLineHeight; - .clearfix(); - } - // Float the labels left - .control-label { - float: left; - width: @horizontalComponentOffset - 20; - padding-top: 5px; - text-align: right; - } - // Move over all input controls and content - .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: @horizontalComponentOffset; - *margin-left: 0; - &:first-child { - *padding-left: @horizontalComponentOffset; - } - } - // Remove bottom margin on block level help text since that's accounted for on .control-group - .help-block { - margin-bottom: 0; - } - // And apply it only to .help-block instances that follow a form control - input, - select, - textarea, - .uneditable-input, - .input-prepend, - .input-append { - + .help-block { - margin-top: @baseLineHeight / 2; - } - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: @horizontalComponentOffset; - } -} diff --git a/public/less/bootstrap/scaffolding.less b/public/less/bootstrap/scaffolding.less deleted file mode 100644 index f17e8cadb40..00000000000 --- a/public/less/bootstrap/scaffolding.less +++ /dev/null @@ -1,53 +0,0 @@ -// -// Scaffolding -// -------------------------------------------------- - - -// Body reset -// ------------------------- - -body { - margin: 0; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @textColor; - background-color: @bodyBackground; -} - - -// Links -// ------------------------- - -a { - color: @linkColor; - text-decoration: none; -} -a:hover, -a:focus { - color: @linkColorHover; - text-decoration: underline; -} - - -// Images -// ------------------------- - -// Rounded corners -.img-rounded { - .border-radius(6px); -} - -// Add polaroid-esque trim -.img-polaroid { - padding: 4px; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - .box-shadow(0 1px 3px rgba(0,0,0,.1)); -} - -// Perfect circle -.img-circle { - .border-radius(500px); // crank the border-radius so it works with most reasonably sized images -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 550d5d601de..a75730ab7b3 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -85,149 +85,3 @@ hr { } } - -// FORMS -// ----------------------------------------------------- - -input, textarea, select { - border-width: 2px; - .border-radius(1px); -} - -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 { - color: @grayLight; -} - -input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input { - border-color: #444; -} - -input:focus, -textarea:focus, -input.focused, -textarea.focused { - border-color: rgba(82,168,236,1); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - .box-shadow(none); // override for file inputs - .tab-focus(); -} - -legend, label { - color: @textColor; - border-bottom: 0px solid #222; -} - -.form-actions { - border-top: 1px solid #222; -} - -// TABLES -// ----------------------------------------------------- - -.table { - .border-radius(1px); - - tbody tr.success td { - background-color: @green; - color: @white; - } - - tbody tr.error td { - background-color: @red; - color: @white; - } - - tbody tr.info td { - background-color: @blue; - color: @white; - } -} - -.label { - color: @white; -} - -.badge { - border-radius: 0; - font-weight: 200; -} - -.label, .alert { background-color: darken(@gray, 20%); } - -.label:hover { background-color: darken(@gray, 30%); } - -.label-important, -.alert-danger, -.alert-error { background-color: @red; } - -.label-important:hover { background-color: darken(@red, 10%); } - -.label-warning { background-color: darken(@orange, 10%); } - -.label-warning:hover { background-color: darken(@orange, 20%); } - -.label-success, .alert-success { background-color: darken(@green, 3%); } - -.label-success:hover { background-color: darken(@green, 13%); } - -.label-info, .alert-info { background-color: darken(@blueDark, 10%); } - -.label-info:hover { background-color: darken(@blueDark, 20%); } - -// MISC -// ----------------------------------------------------- - -a:hover { - text-decoration: none; -} - -.well, .hero-unit { - .border-radius(0px); -} - -.well, .hero-unit { - border-top: solid 1px lighten(@grayDark, 5%); - .box-shadow(0 2px 4px rgba(0,0,0,.8)); -} - -.thumbnail { - border-color: @grayDark; -} - -.progress { - background-color: #060606; - background-image: none; - .border-radius(0); -} - -.modal-footer { -} - - -.footer { - border-top: 1px solid @grayDark; -} - -// MEDIA QUERIES -// ----------------------------------------------------- - -.caret { - color: @textColor -} - -.dropdown-submenu > a:after { - border-left-color: @textColor; -} - diff --git a/public/less/components/gf-form.less b/public/less/components/gf-form.less index 3dd0e0a294a..50f8a87eaec 100644 --- a/public/less/components/gf-form.less +++ b/public/less/components/gf-form.less @@ -53,12 +53,9 @@ input[type=checkbox].gf-form-checkbox { } select.gf-form-input { - border: none; - margin: 0px; - border-radius: 0; - height: 36px; - padding: 9px 3px; + padding: 2px 3px; font-size: 15px; + box-sizing: content-box; } .gf-size-xs { width: 60px; } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 6d5434ac479..07a6da7f278 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -82,7 +82,7 @@ @headingsFontWeight: 400; // instead of browser default, bold @headingsFontStyle: normal; @headingsColor: darken(@white,11%); // empty to use BS default, @textColor -@inputText: @black; +@inputText: @grayLight; // Component sizing