From ec8619a9808b9b6e721334af8e6b5248ccbea8b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Sep 2011 17:21:43 -0700 Subject: update docs to remove old stuff, update to all new classes; no more backwards compatibility --- lib/patterns.less | 46 ++-------------------------------------------- 1 file changed, 2 insertions(+), 44 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index ce387614e..1ba218c36 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -23,8 +23,6 @@ } // Hover and active states - // h3 for backwards compatibility - h3 a:hover, .brand a:hover, ul .active > a { background-color: #333; @@ -33,12 +31,7 @@ text-decoration: none; } - // Website name - // h3 left for backwards compatibility - h3 { - position: relative; - } - h3 a, + // Website or project name .brand { float: left; display: block; @@ -112,9 +105,7 @@ } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -// For backwards compatibility, include .topbar .fill -.topbar-inner, -.topbar .fill { +.topbar-inner { background-color: #222; #gradient > .vertical(#333, #222); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); @@ -127,8 +118,6 @@ // Topbar Nav // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -// For backwards compatibility, leave in .topbar div > ul -.topbar div > ul, .nav { display: block; float: left; @@ -160,28 +149,19 @@ float: right; margin-left: 10px; margin-right: 0; - // backwards compatibility - .menu-dropdown, .dropdown-menu { right: 0; border: 0; } } // Dropdowns within the .nav - // a.menu:hover and li.open .menu for backwards compatibility - a.menu:hover, - li.open .menu, .dropdown-toggle:hover, .dropdown.open .dropdown-toggle { background: #444; background: rgba(255,255,255,.05); } - // .menu-dropdown for backwards compatibility - .menu-dropdown, .dropdown-menu { background-color: #333; - // a.menu for backwards compatibility - a.menu, .dropdown-toggle { color: @white; &.open { @@ -207,22 +187,16 @@ } } -// For backwards compatibility with new dropdowns, redeclare dropdown link padding -.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a { padding: 4px 15px; } // Dropdown Menus // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -// li.menu for backwards compatibility -li.menu, .dropdown { position: relative; } // The link that is clicked to toggle the dropdown -// a.menu for backwards compatibility -a.menu:after, .dropdown-toggle:after { width: 0; height: 0; @@ -238,8 +212,6 @@ a.menu:after, .opacity(50); } // The dropdown menu (ul) -// .menu-dropdown for backwards compatibility -.menu-dropdown, .dropdown-menu { background-color: @white; float: left; @@ -300,18 +272,12 @@ a.menu:after, } // Open state for the dropdown -// .open for backwards compatibility -.open, .dropdown.open { - // .menu for backwards compatibility - .menu, .dropdown-toggle { color: @white; background: #ccc; background: rgba(0,0,0,.3); } - // .menu-dropdown for backwards compatibility - .menu-dropdown, .dropdown-menu { display: block; } @@ -360,27 +326,19 @@ a.menu:after, border-bottom-color: transparent; } } - // first one for backwards compatibility - .menu-dropdown, .dropdown-menu { top: 35px; border-width: 1px; .border-radius(0 6px 6px 6px); } - // first one for backwards compatibility - a.menu:after, .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } - // first one for backwards compatibility - li.open.menu .menu, .open.dropdown .dropdown-toggle { border-color: #999; } - // first one for backwards compatibility - li.open a.menu:after, .dropdown.open .dropdown-toggle:after { border-top-color: #555; } -- cgit v1.2.3 From 6d541a6066d46bff19833707deeca8f41279b180 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Sep 2011 19:06:10 -0700 Subject: pulling out more stuff and fixing file name at top of file --- lib/mixins.less | 2 +- lib/patterns.less | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index ca7893daf..929618a40 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -1,4 +1,4 @@ -/* Variables.less +/* Mixins.less * Snippets of reusable CSS to develop faster and keep code readable * ----------------------------------------------------------------- */ diff --git a/lib/patterns.less b/lib/patterns.less index 1ba218c36..eae09a596 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -350,7 +350,7 @@ // Basic pill nav .pills { a { - margin: 5px 3px 5px 0; + margin: 5px 3px 5px 0; padding: 0 15px; text-shadow: 0 1px 1px @white; line-height: 30px; @@ -376,7 +376,7 @@ .tab-content > .active, .pill-content > .active { - display:block; + display: block; } @@ -398,8 +398,6 @@ padding: 0 5px; color: @grayLight; } - a { - } .active a { color: @grayDark; } -- cgit v1.2.3 From 1b21d5e321ec77c6381becae2e2d7d1c4ab14d9a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Sep 2011 19:15:31 -0700 Subject: updated forms.less to have better comments while pulling out all the old classes for input elements --- lib/forms.less | 85 ++++++++++++++++++++++++++-------------------------------- 1 file changed, 38 insertions(+), 47 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 0da4037df..91aca77fe 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,8 +3,8 @@ * ------------------------------------------------------------- */ -// FORM STYLES -// ----------- +// GENERAL STYLES +// -------------- form { margin-bottom: @baseline; @@ -189,47 +189,17 @@ form div.clearfix.error { } } -// Form element sizes -// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes -.input-mini, -input.mini, -textarea.mini, -select.mini { - width: 60px; -} -.input-small, -input.small, -textarea.small, -select.small { - width: 90px; -} -.input-medium, -input.medium, -textarea.medium, -select.medium { - width: 150px; -} -.input-large, -input.large, -textarea.large, -select.large { - width: 210px; -} -.input-xlarge, -input.xlarge, -textarea.xlarge, -select.xlarge { - width: 270px; -} -.input-xxlarge, -input.xxlarge, -textarea.xxlarge, -select.xxlarge { - width: 530px; -} -textarea.xxlarge { - overflow-y: auto; -} + +// 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 // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border @@ -261,6 +231,10 @@ select { &.span16 { .formColumns(16); } } + +// INPUT STATES +// ------------ + // Disabled and read-only inputs input[disabled], select[disabled], @@ -292,7 +266,10 @@ textarea[readonly] { } } -// Help Text + +// HELP TEXT +// --------- + .help-inline, .help-block { font-size: @basefont - 2; @@ -311,7 +288,10 @@ textarea[readonly] { max-width: 600px; } -// Inline Fields (input fields that appear as inline objects + +// INLINE FIELDS +// --------- + .inline-inputs { color: @gray; span, input { @@ -328,6 +308,10 @@ textarea[readonly] { } } + +// INPUTS GROUPS +// ------------- + // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { @@ -375,6 +359,10 @@ textarea[readonly] { } } + +// LISTS OF CONTROLS +// ----------------- + // Stacked options for forms (radio buttons or checkboxes) .inputs-list { margin: 0 0 5px; @@ -417,7 +405,10 @@ textarea[readonly] { } } -// Stacked forms + +// STACKED FORMS +// ------------- + .form-stacked { padding-left: 20px; fieldset { @@ -462,4 +453,4 @@ textarea[readonly] { margin-left: -20px; padding-left: 20px; } -} +} \ No newline at end of file -- cgit v1.2.3 From f919f6f94f3e8405d7653a5f16f8b3d587c47f4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:40:27 -0700 Subject: huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins --- lib/forms.less | 325 ++++++++++++++++++++++------------------------------- lib/mixins.less | 92 +++++++++------ lib/reset.less | 2 +- lib/type.less | 7 +- lib/variables.less | 8 +- 5 files changed, 202 insertions(+), 232 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 91aca77fe..fd46fc71e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -6,29 +6,20 @@ // GENERAL STYLES // -------------- +// Make all forms have space below them form { margin-bottom: @baseline; } // Groups of fields with labels on top (legends) -fieldset { - margin-bottom: @baseline; - padding-top: @baseline; - legend { - display: block; - padding-left: 150px; - font-size: @basefont * 1.5; - line-height: 1; - color: @grayDark; - *padding: 0 0 5px 145px; /* IE6-7 */ - *line-height: 1.5; /* IE6-7 */ - } -} - -// Parent element that clears floats and wraps labels and fields together -form .clearfix { - margin-bottom: @baseline; - .clearfix() +legend { + display: block; + width: 100%; + margin-bottom: @baseline * 1.5; + font-size: @basefont * 1.5; + line-height: @baseline * 2; + color: @grayDark; + border-bottom: 1px solid #eee; } // Set font for forms @@ -36,25 +27,16 @@ label, input, select, textarea { - #font > .sans-serif(normal,13px,normal); + #font > .sans-serif(normal,@basefont,@baseline); } -// Float labels left +// Identify controls by their labels label { - padding-top: 6px; - font-size: @basefont; - line-height: @baseline; - float: left; - width: 130px; - text-align: right; + display: block; + margin-bottom: 5px; color: @grayDark; } -// Shift over the inside div to align all label's relevant content -form .input { - margin-left: 150px; -} - // Checkboxs and radio buttons input[type=checkbox], input[type=radio] { @@ -77,7 +59,7 @@ select, .border-radius(3px); } -/* mini reset for non-html5 file types */ +/* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { width: auto; @@ -89,6 +71,7 @@ input[type=radio] { border: none; } +// Reset the file input to browser defaults input[type=file] { background-color: @white; padding: initial; @@ -97,6 +80,7 @@ input[type=file] { .box-shadow(none); } +// Help out input buttons input[type=button], input[type=reset], input[type=submit] { @@ -120,24 +104,11 @@ textarea { height: auto; } -// For text that needs to appear as an input but should not be an input -.uneditable-input { - background-color: @white; - display: block; - border-color: #eee; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; -} -// Placeholder text gets special styles; can't be bundled together though for some reason -:-moz-placeholder { - color: @grayLight; -} -::-webkit-input-placeholder { - color: @grayLight; -} -// Focus states +// FOCUS STATE +// ----------- + input, textarea { @transition: border linear .2s, box-shadow linear .2s; @@ -158,36 +129,6 @@ select:focus { outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline } -// Error styles -form div.clearfix.error { - background: lighten(@red, 57%); - padding: 10px 0; - margin: -10px 0 10px; - .border-radius(4px); - @error-text: desaturate(lighten(@red, 25%), 25%); - > label, - span.help-inline, - span.help-block { - color: @red; - } - input, - textarea { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); - &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); - } - } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } - } -} // INPUT SIZES @@ -232,8 +173,9 @@ select { } -// INPUT STATES -// ------------ + +// DISABLED STATE +// -------------- // Disabled and read-only inputs input[disabled], @@ -247,36 +189,89 @@ textarea[readonly] { cursor: not-allowed; } -// Actions (the buttons) -.actions { - background: #f5f5f5; + + +// ERROR STATE +// ----------- + +// Set color of error text +@error-text: desaturate(lighten(@red, 25%), 25%); + +// Style the background of control-groups with errors +.has-error { + background: lighten(@red, 55%); + padding: (@baseline / 2) 0; + margin: -10px 0 10px; + .border-radius(4px); + > label, + span.help-inline, + span.help-block { + color: @red; + } + input, + textarea, + select { + border-color: @error-text; + .box-shadow(0 0 3px rgba(171,41,32,.25)); + &:focus { + border-color: darken(@error-text, 10%); + .box-shadow(0 0 6px rgba(171,41,32,.5)); + } + } + .input-prepend, + .input-append { + span.add-on { + background: lighten(@red, 50%); + border-color: @error-text; + color: darken(@error-text, 10%); + } + } +} + + + +// FORM ACTIONS +// ------------ + +.form-actions { + padding: (@baseline - 1) 20px @baseline; margin-top: @baseline; margin-bottom: @baseline; - padding: (@baseline - 1) 20px @baseline 150px; + background-color: #f5f5f5; border-top: 1px solid #ddd; - .border-radius(0 0 3px 3px); - .secondary-action { - float: right; - a { - line-height: 30px; - &:hover { - text-decoration: underline; - } - } - } } +// For text that needs to appear as an input but should not be an input +.uneditable-input { + background-color: @white; + display: block; + border-color: #eee; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + cursor: not-allowed; +} + +// Placeholder text gets special styles; can't be bundled together though for some reason +:-moz-placeholder { + color: @grayLight; +} +::-webkit-input-placeholder { + color: @grayLight; +} + + + // HELP TEXT // --------- -.help-inline, -.help-block { - font-size: @basefont - 2; - line-height: @baseline; +.help-text { + margin-top: 5px; + margin-bottom: 0; color: @grayLight; } + .help-inline { + display: inline; padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ @@ -290,7 +285,7 @@ textarea[readonly] { // INLINE FIELDS -// --------- +// ------------- .inline-inputs { color: @gray; @@ -309,8 +304,8 @@ textarea[readonly] { } -// INPUTS GROUPS -// ------------- +// INPUT GROUPS +// ------------ // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, @@ -360,97 +355,49 @@ textarea[readonly] { } -// LISTS OF CONTROLS + + +// HORIZONTAL & VERTICAL FORMS +// --------------------------- + + +// Common properties // ----------------- -// Stacked options for forms (radio buttons or checkboxes) -.inputs-list { - margin: 0 0 5px; - width: 100%; - li { - display: block; - padding: 0; - width: 100%; - } - label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: @baseline; - text-align: left; - white-space: normal; - strong { - color: @gray; - } - small { - font-size: @basefont - 2; - font-weight: normal; - } - } - .inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; - } - &:first-child { - padding-top: 6px; - } - li + li { - padding-top: 2px; - } - input[type=radio], - input[type=checkbox] { - margin-bottom: 0; - } +// Margin to space out fieldsets +.control-group { + margin-bottom: @baseline; } +// Bold the labels so they stand out +.control-group > label { + font-weight: bold; +} -// STACKED FORMS -// ------------- +// Lists of controls (checkboxes and radios) +.control-list { +} -.form-stacked { - padding-left: 20px; - fieldset { - padding-top: @baseline / 2; - } - legend { - padding-left: 0; - } - label { - display: block; - float: none; - width: auto; - font-weight: bold; - text-align: left; - line-height: 20px; - padding-top: 0; - } - .clearfix { - margin-bottom: @baseline / 2; - div.input { - margin-left: 0; - } - } - .inputs-list { - margin-bottom: 0; - li { - padding-top: 0; - label { - font-weight: normal; - padding-top: 0; - } - } - } - div.clearfix.error { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - margin-top: 0; - margin-left: -10px; - } - .actions { - margin-left: -20px; - padding-left: 20px; - } -} \ No newline at end of file + +// Horizontal-specific styles +// -------------------------- + +// Float the labels left +.form-horizontal .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; +} +// Move over all input controls and content +.form-horizontal .controls { + margin-left: 150px; +} +// Move the options list down to align with labels +.form-horizontal .control-list { + padding-top: 6px; // has to be padding because margin collaspes +} +// Move over buttons in .form-actions to align with .controls +.form-horizontal .form-actions { + padding-left: 150px; +} diff --git a/lib/mixins.less b/lib/mixins.less index 929618a40..b0ecf03d3 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -6,32 +6,32 @@ // Clearfix for clearing floats like a boss h5bp.com/q .clearfix() { zoom: 1; - &:before, + &:before, &:after { display: table; content: ""; zoom: 1; *display: inline; - } - &:after { + } + &:after { clear: both; - } + } } // Center-align a block level element .center-block() { - display: block; + display: block; margin-left: auto; margin-right: auto; } // Sizing shortcuts .size(@height: 5px, @width: 5px) { - height: @height; - width: @width; + height: @height; + width: @width; } .square(@size: 5px) { - .size(@size, @size); + .size(@size, @size); } // Input placeholder text @@ -112,27 +112,40 @@ // Transitions .transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - transition: @transition; + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +// Transform for scale and rotate +// translate, rotate, scale -- need to finalize +.rotation(@degrees: 5deg) { + -webkit-transform: rotate(@degrees); + -moz-transform: rotate(@degrees); + transform: rotate(@degrees); +} +.scale(@value: 1.5) { + -webkit-transform: scale(@value); + -moz-transform: scale(@value); + transform: scale(@value); } // Background clipping .background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; + -webkit-background-clip: @clip; + -moz-background-clip: @clip; + background-clip: @clip; } // CSS3 Content Columns .content-columns(@columnCount, @columnGap: 20px) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; + -webkit-column-count: @columnCount; + -moz-column-count: @columnCount; column-count: @columnCount; -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; + -moz-column-gap: @columnGap; column-gap: @columnGap; } @@ -140,11 +153,11 @@ #translucent { .background(@color: @white, @alpha: 1) { background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; - } + } + .border(@color: @white, @alpha: 1) { + border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); + background-clip: padding-box; + } } // Gradient Bar Colors for buttons and allerts @@ -157,9 +170,8 @@ // Gradients #gradient { - .horizontal (@startColor: #555, @endColor: #333) { + .horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 @@ -167,11 +179,11 @@ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard + background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down } - .vertical (@startColor: #555, @endColor: #333) { + .vertical(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 @@ -179,9 +191,10 @@ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down } - .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { + .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; background-repeat: repeat-x; background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ @@ -192,15 +205,24 @@ } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: @endColor; - background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback } + .radial(@centerColor: #555, @outsideColor: #333) { + background-color: @outsideColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor)); + background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor); + background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor); + background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor); + background-repeat: no-repeat; + // Opera cannot do radial gradients yet + } } // Reset filters for IE @@ -210,8 +232,8 @@ // Opacity .opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; + filter: e(%("alpha(opacity=%d)", @opacity)); + -khtml-opacity: @opacity / 100; + -moz-opacity: @opacity / 100; + opacity: @opacity / 100; } \ No newline at end of file diff --git a/lib/reset.less b/lib/reset.less index 6be76fdba..983f14f3d 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -1,5 +1,5 @@ /* Reset.less - * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). + * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ diff --git a/lib/type.less b/lib/type.less index 077ae9d8f..88b320459 100644 --- a/lib/type.less +++ b/lib/type.less @@ -41,15 +41,16 @@ h2 { font-size: 14px; } } -h3, h4, h5, h6 { - line-height: @baseline * 2; -} h3 { + line-height: @baseline * 2; font-size: 18px; small { font-size: 14px; } } +h4, h5, h6 { + line-height: @baseline; +} h4 { font-size: 16px; small { diff --git a/lib/variables.less b/lib/variables.less index 34000d066..dcb0a8ebf 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -9,10 +9,10 @@ // Grays @black: #000; -@grayDark: lighten(@black, 25%); -@gray: lighten(@black, 50%); -@grayLight: lighten(@black, 75%); -@grayLighter: lighten(@black, 90%); +@grayDark: #333; +@gray: #555; +@grayLight: #777; +@grayLighter: #ccc; @white: #fff; // Accent Colors -- cgit v1.2.3 From 4e9849966d0f7b18cd4b8a22f6ef98c6900a2099 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:43:14 -0700 Subject: update topbar dropdown arrow to match link and hover colors --- lib/patterns.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index eae09a596..ec40641d3 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -205,11 +205,14 @@ text-indent: -99999px; vertical-align: top; margin-top: 8px; - margin-left: 4px; + margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @white; - .opacity(50); + .opacity(30); +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); } // The dropdown menu (ul) .dropdown-menu { -- cgit v1.2.3 From 00204a80cf1c45cb9d7d80986756401d304a3944 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:44:51 -0700 Subject: change h4 back to lineheight * 2 --- lib/type.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 88b320459..ea1f289e7 100644 --- a/lib/type.less +++ b/lib/type.less @@ -48,20 +48,20 @@ h3 { font-size: 14px; } } -h4, h5, h6 { - line-height: @baseline; -} h4 { font-size: 16px; + line-height: @baseline * 2; small { font-size: 12px; } } h5 { font-size: 14px; + line-height: @baseline; } h6 { font-size: 13px; + line-height: @baseline; color: @grayLight; text-transform: uppercase; } -- cgit v1.2.3 From f54568fa31396556a0df7bf8e2b180885e2b1c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:47:55 -0700 Subject: round the corners on the search form inputs like a boss --- lib/forms.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index fd46fc71e..56325daa9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -357,6 +357,15 @@ textarea[readonly] { +// SEARCH FORM +// ----------- + +.form-search .search-query { + .border-radius(14px); +} + + + // HORIZONTAL & VERTICAL FORMS // --------------------------- -- cgit v1.2.3 From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 02:21:02 -0700 Subject: adding button groups and toolbars like a boss --- lib/mixins.less | 17 +++++++++++++++++ lib/patterns.less | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index b0ecf03d3..131d14278 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -102,6 +102,23 @@ -moz-border-radius: @radius; border-radius: @radius; } +.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { + -webkit-border-top-left-radius: @topLeft; + -moz-border-radius-topleft: @topLeft; + border-top-left-radius: @topLeft; + -webkit-border-top-right-radius: @topRight; + -moz-border-radius-topright: @topRight; + border-top-right-radius: @topRight; + -webkit-border-bottom-right-radius: @bottomRight; + -moz-border-radius-bottomright: @bottomRight; + border-bottom-right-radius: @bottomRight; + -webkit-border-bottom-left-radius: @bottomLeft; + -moz-border-radius-bottomleft: @bottomLeft; + border-bottom-left-radius: @bottomLeft; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { diff --git a/lib/patterns.less b/lib/patterns.less index ec40641d3..8add82c16 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -565,6 +565,54 @@ input[type=submit].btn { } } +// Button groups +// ------------- + +// Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + .btn-group { + float: left; + margin-right: 10px; + } +} + +// Clear the float +.btn-group { + .clearfix(); +} +// Float them, remove border radius, then re-add to first and last elements +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + .border-radius(0); + &:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; + } + &:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; + } +} +// On hover/focus/active, bring the proper btn to front +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active { + z-index: 2; +} + + // CLOSE ICONS // ----------- -- cgit v1.2.3 From 96dd7a2903aa5213ddb364b385660e26396dc670 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 00:20:38 -0700 Subject: update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement --- lib/forms.less | 30 +++++++++++++++--------------- lib/mixins.less | 10 +++++----- lib/patterns.less | 34 +++++++++++++++++----------------- lib/scaffolding.less | 4 +++- lib/tables.less | 6 +++--- lib/type.less | 50 ++++++++++++++++++++++++++------------------------ lib/variables.less | 49 +++++++++++++++++++++++++++++++------------------ 7 files changed, 100 insertions(+), 83 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 56325daa9..b657e53d6 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,16 +8,16 @@ // Make all forms have space below them form { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Groups of fields with labels on top (legends) legend { display: block; width: 100%; - margin-bottom: @baseline * 1.5; - font-size: @basefont * 1.5; - line-height: @baseline * 2; + margin-bottom: @baseLineHeight * 1.5; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; } @@ -27,7 +27,7 @@ label, input, select, textarea { - #font > .sans-serif(normal,@basefont,@baseline); + #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); } // Identify controls by their labels @@ -50,10 +50,10 @@ select, .uneditable-input { display: inline-block; width: 210px; - height: @baseline; + height: @baseLineHeight; padding: 4px; - font-size: @basefont; - line-height: @baseline; + font-size: @baseFontSize; + line-height: @baseLineHeight; color: @gray; border: 1px solid #ccc; .border-radius(3px); @@ -90,8 +90,8 @@ input[type=submit] { select, input[type=file] { - height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseline * 1.5; + height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size + line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } @@ -200,7 +200,7 @@ textarea[readonly] { // Style the background of control-groups with errors .has-error { background: lighten(@red, 55%); - padding: (@baseline / 2) 0; + padding: (@baseLineHeight / 2) 0; margin: -10px 0 10px; .border-radius(4px); > label, @@ -234,9 +234,9 @@ textarea[readonly] { // ------------ .form-actions { - padding: (@baseline - 1) 20px @baseline; - margin-top: @baseline; - margin-bottom: @baseline; + padding: (@baseLineHeight - 1) 20px @baseLineHeight; + margin-top: @baseLineHeight; + margin-bottom: @baseLineHeight; background-color: #f5f5f5; border-top: 1px solid #ddd; } @@ -375,7 +375,7 @@ textarea[readonly] { // Margin to space out fieldsets .control-group { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Bold the labels so they stand out diff --git a/lib/mixins.less b/lib/mixins.less index 131d14278..c43f16632 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -46,25 +46,25 @@ // Font Stacks #font { - .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { + .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-family: "Georgia", Times New Roman, Times, serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { - font-family: "Monaco", Courier New, monospace; + .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { + font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; font-size: @size; font-weight: @weight; line-height: @lineHeight; diff --git a/lib/patterns.less b/lib/patterns.less index 8add82c16..1b27b7184 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -313,7 +313,7 @@ > a { padding: 0 15px; margin-right: 2px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { @@ -387,7 +387,7 @@ // ----------- .breadcrumb { - margin: 0 0 @baseline; + margin: 0 0 @baseLineHeight; padding: 7px 14px; #gradient > .vertical(#ffffff, #f5f5f5); border: 1px solid #ddd; @@ -424,12 +424,12 @@ p { font-size: 18px; font-weight: 200; - line-height: @baseline * 1.5; + line-height: @baseLineHeight * 1.5; } } footer { - margin-top: @baseline - 1; - padding-top: @baseline - 1; + margin-top: @baseLineHeight - 1; + padding-top: @baseLineHeight - 1; border-top: 1px solid #eee; } @@ -438,11 +438,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseline - 1; + margin-bottom: @baseLineHeight - 1; border-bottom: 1px solid #ddd; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseline / 2) - 1px; + margin-bottom: (@baseLineHeight / 2) - 1px; } } @@ -488,7 +488,7 @@ footer { padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; - font-size: @basefont; + font-size: @baseFontSize; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; @@ -540,14 +540,14 @@ footer { // Button Sizes &.large { - font-size: @basefont + 2px; + font-size: @baseFontSize + 2px; line-height: normal; padding: 9px 14px 9px; .border-radius(6px); } &.small { padding: 7px 9px 7px; - font-size: @basefont - 2px; + font-size: @baseFontSize - 2px; } } // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons @@ -621,7 +621,7 @@ input[type=submit].btn { color: @black; font-size: 20px; font-weight: bold; - line-height: @baseline * .75; + line-height: @baseLineHeight * .75; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); &:hover { @@ -639,7 +639,7 @@ input[type=submit].btn { .alert-message { position: relative; padding: 7px 15px; - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; color: @grayDark; .gradientBar(#fceec1, #eedc94); // warning by default text-shadow: 0 1px 0 rgba(255,255,255,.5); @@ -655,7 +655,7 @@ input[type=submit].btn { // Remove extra margin from content h5 { - line-height: @baseline; + line-height: @baseLineHeight; } p { margin-bottom: 0; @@ -715,8 +715,8 @@ input[type=submit].btn { // ---------- .pagination { - height: @baseline * 2; - margin: @baseline 0; + height: @baseLineHeight * 2; + margin: @baseLineHeight 0; ul { float: left; margin: 0; @@ -731,7 +731,7 @@ input[type=submit].btn { a { float: left; padding: 0 14px; - line-height: (@baseline * 2) - 2; + line-height: (@baseLineHeight * 2) - 2; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0,0,0,.15); @@ -972,7 +972,7 @@ input[type=submit].btn { .label { padding: 1px 3px 2px; background-color: @grayLight; - font-size: @basefont * .75; + font-size: @baseFontSize * .75; font-weight: bold; color: @white; text-transform: uppercase; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 26bb0cc05..b6852535c 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -12,7 +12,9 @@ html, body { } body { margin: 0; - #font > .sans-serif(normal,@basefont,@baseline); + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; color: @grayDark; } diff --git a/lib/tables.less b/lib/tables.less index 988483f0e..8a786ffd2 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -9,16 +9,16 @@ table { width: 100%; - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; padding: 0; border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; /* IE7, collapse table to remove spacing */ - font-size: @basefont; + font-size: @baseFontSize; border: 1px solid #ddd; .border-radius(4px); th, td { padding: 10px 10px 9px; - line-height: @baseline; + line-height: @baseLineHeight; text-align: left; } th { diff --git a/lib/type.less b/lib/type.less index ea1f289e7..4232a24df 100644 --- a/lib/type.less +++ b/lib/type.less @@ -7,10 +7,12 @@ // --------- p { - #font > .shorthand(normal,@basefont,@baseline); - margin-bottom: @baseline / 2; + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + margin-bottom: @baseLineHeight / 2; small { - font-size: @basefont - 2; + font-size: @baseFontSize - 2; color: @grayLight; } } @@ -27,22 +29,22 @@ h1, h2, h3, h4, h5, h6 { } } h1 { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; font-size: 30px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 18px; } } h2 { font-size: 24px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 14px; } } h3 { - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; font-size: 18px; small { font-size: 14px; @@ -50,18 +52,18 @@ h3 { } h4 { font-size: 16px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 12px; } } h5 { font-size: 14px; - line-height: @baseline; + line-height: @baseLineHeight; } h6 { font-size: 13px; - line-height: @baseline; + line-height: @baseLineHeight; color: @grayLight; text-transform: uppercase; } @@ -72,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseline 25px; + margin: 0 0 @baseLineHeight 25px; } ul ul, ul ol, @@ -87,7 +89,7 @@ ol { list-style: decimal; } li { - line-height: @baseline; + line-height: @baseLineHeight; color: @gray; } ul.unstyled { @@ -97,15 +99,15 @@ ul.unstyled { // Description Lists dl { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; dt, dd { - line-height: @baseline; + line-height: @baseLineHeight; } dt { font-weight: bold; } dd { - margin-left: @baseline / 2; + margin-left: @baseLineHeight / 2; } } @@ -135,16 +137,16 @@ em { // Blockquotes blockquote { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; border-left: 5px solid #eee; padding-left: 15px; p { - #font > .shorthand(300,14px,@baseline); + #font > .shorthand(300,14px,@baseLineHeight); margin-bottom: 0; } small { display: block; - #font > .shorthand(300,12px,@baseline); + #font > .shorthand(300,12px,@baseLineHeight); color: @grayLight; &:before { content: '\2014 \00A0'; @@ -155,14 +157,14 @@ blockquote { // Addresses address { display: block; - line-height: @baseline; - margin-bottom: @baseline; + line-height: @baseLineHeight; + margin-bottom: @baseLineHeight; } // Inline and block code styles code, pre { padding: 0 3px 2px; - font-family: Monaco, Andale Mono, Courier New, monospace; + font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; font-size: 12px; .border-radius(3px); } @@ -174,9 +176,9 @@ code { pre { background-color: #f5f5f5; display: block; - padding: (@baseline - 1) / 2; - margin: 0 0 @baseline; - line-height: @baseline; + padding: (@baseLineHeight - 1) / 2; + margin: 0 0 @baseLineHeight; + line-height: @baseLineHeight; font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); diff --git a/lib/variables.less b/lib/variables.less index dcb0a8ebf..864dbe8c0 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -3,19 +3,27 @@ * ----------------------------------------------------- */ -// Links +// LINK COLORS +// ----------- + @linkColor: #0069d6; @linkColorHover: darken(@linkColor, 15); -// Grays + +// GRAYS +// ----- + @black: #000; -@grayDark: #333; -@gray: #555; -@grayLight: #777; -@grayLighter: #ccc; +@grayDark: lighten(@black, 25%); +@gray: lighten(@black, 50%); +@grayLight: lighten(@black, 75%); +@grayLighter: lighten(@black, 90%); @white: #fff; -// Accent Colors + +// ACCENT COLORS +// ------------- + @blue: #049CDB; @blueDark: #0064CD; @green: #46a546; @@ -25,11 +33,10 @@ @pink: #c3325f; @purple: #7a43b6; -// Baseline grid -@basefont: 13px; -@baseline: 18px; -// Griditude +// GRID +// ---- + // Modify the grid styles in mixins.less @gridColumns: 16; @gridColumnWidth: 40px; @@ -37,7 +44,10 @@ @extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// Color Scheme + +// COLOR SCHEME +// ------------ + // Use this to roll your own color schemes if you like (unused by Bootstrap by default) @baseColor: @blue; // Set a base color @complement: spin(@baseColor, 180); // Determine a complementary color @@ -51,10 +61,13 @@ @analog2: spin(@baseColor, -22); +// THEME VARIABLES +// --------------- + +// Typography +@baseFontSize: 13px; +@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseLineHeight: 18px; -// More variables coming soon: -// - @basefont to @baseFontSize -// - @baseline to @baseLineHeight -// - @baseFontFamily -// - @primaryButtonColor -// - anything else? File an issue on GitHub \ No newline at end of file +// Visuals +@primaryButtonColor: @blue; -- cgit v1.2.3 From cde17c94919ef26093145e5412c6d425d3199d9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 00:48:31 -0700 Subject: adding placeholder font-face mixin which doesn't work yet --- lib/mixins.less | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index c43f16632..47eb1a1c3 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,6 +71,20 @@ } } +// Font face generator +.font-face(@fontFamily, @fileName, @style, @weight) { + @font-face { + font-family: @fontFamily; + font-style: @style; + font-weight: @weight; + src: url('@{fileName}.eot'); + src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), + url('@{fileName}.woff') format('woff'), + url('@{fileName}.ttf') format('truetype'), + url('@{fileName}.svg#@{fontFamily}') format('svg'); + } +} + // Grid System .fixed-container() { width: @siteWidth; -- cgit v1.2.3 From bdbc35206630645e6cc6655ec9e50aa70081a2fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 00:55:35 -0700 Subject: adding new mixins --- lib/mixins.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 47eb1a1c3..9c27346c2 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -155,13 +155,24 @@ .rotation(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); + -o-transform: rotate(@degrees); transform: rotate(@degrees); } .scale(@value: 1.5) { -webkit-transform: scale(@value); -moz-transform: scale(@value); + -ms-transform: scale(@value); + -o-transform: scale(@value); transform: scale(@value); } +.translate(@x: 0, @y: 0) { + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} // Background clipping .background-clip(@clip) { -- cgit v1.2.3 From 913338f930736a1b186178469c6eafb55c1dbea8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 4 Oct 2011 01:15:31 -0700 Subject: fixing multi select on chromium ubuntu by setting background color explicitly --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index b657e53d6..4bdddc3a2 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -97,6 +97,7 @@ input[type=file] { // Make multiple select elements height not fixed select[multiple] { + background-color: @white; // Fixes Chromium bug? height: inherit; } -- cgit v1.2.3 From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- lib/patterns.less | 85 ++++++++++++++++++++++++++-------------------------- lib/scaffolding.less | 26 ++++++++++------ 2 files changed, 59 insertions(+), 52 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 1b27b7184..8ceffaa99 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -54,54 +54,53 @@ } // Search Form - form { - float: left; - margin: 5px 0 0 0; + .form-search { position: relative; - .opacity(100); + margin-top: 5px; + margin-bottom: 0; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + } + } } // Todo: remove from v2.0 when ready, added for legacy - form.pull-right { + .pull-right { float: right; } - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } - } } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b6852535c..00a8ee3b3 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -24,20 +24,28 @@ body { } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; .clearfix(); - > .sidebar { - float: left; - width: 220px; - } - // TODO in v2: rename this and .popover .content to be more specific - > .content { - margin-left: 240px; - } +} +// Sidebars (left and right options) +.fluid-sidebar-left, +.fluid-sidebar-right { + width: 220px; +} +.fluid-sidebar-left { float: left; } +.fluid-sidebar-right { float: right; } +// The main content area +.fluid-content { + margin-left: 240px; +} +// Reverse layout for sidebar on right +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; } -- cgit v1.2.3 From dd1efdf0d5ec2469978a65c845cc5dfd16b74899 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:25:28 -0700 Subject: update input prepend and append to use baseline variable --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4bdddc3a2..4b2bb8016 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -323,11 +323,11 @@ textarea[readonly] { display: block; width: auto; min-width: 16px; - height: 18px; + height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; - line-height: 18px; + line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; -- cgit v1.2.3 From 8ba005d38dd7a79ea3e90efb6efc7ac9ebcadc26 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 09:44:51 -0700 Subject: new navbar introduced to replace topbar --- lib/patterns.less | 154 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 86 insertions(+), 68 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 8ceffaa99..a82e2856d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,34 +3,41 @@ * ---------------------------------------------------------------------------- */ -// TOPBAR -// ------ +// NAVBAR (FIXED AND STATIC) +// ------------------------- -// Topbar for Branding and Nav -.topbar { - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; - overflow: visible; +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; - // Links get text shadow +// Common styles +.navbar { + height: @navBarHeight; + overflow: visible; +} +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +.navbar-inner { + background-color: @navBarBgEnd; + #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + .box-shadow(@shadow); +} +// Text and links +.navbar { + // Links get text-shadow a { color: @grayLight; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } - // Hover and active states .brand a:hover, ul .active > a { - background-color: #333; + background-color: @navBarBgStart; background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; } - // Website or project name .brand { float: left; @@ -42,7 +49,6 @@ font-weight: 200; line-height: 1; } - // Plain text in topbar p { margin: 0; @@ -52,70 +58,82 @@ color: @white; } } +} - // Search Form - .form-search { - position: relative; - margin-top: 5px; - margin-bottom: 0; - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); +// Navbar search +.navbar-search { + position: relative; + margin-top: 5px; + margin-bottom: 0; + float: left; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); } - } - // Todo: remove from v2.0 when ready, added for legacy - .pull-right { - float: right; } } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.topbar-inner { - background-color: #222; - #gradient > .vertical(#333, #222); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + +// Static navbar +.navbar-static { + margin-bottom: @baseLineHeight; +} +.navbar-static .navbar-inner { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + .border-radius(4px); +} + +// Fixed navbar +.navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; } + // NAVIGATION // ---------- -// Topbar Nav +// Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { display: block; -- cgit v1.2.3 From b6443905411dcdcec54d7eaad2f998a582271728 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 09:52:50 -0700 Subject: update navbar search form --- lib/patterns.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index a82e2856d..f2a0b7f0e 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -63,10 +63,10 @@ // Navbar search .navbar-search { position: relative; - margin-top: 5px; + margin-top: 6px; margin-bottom: 0; float: left; - input { + .search-query { background-color: #444; background-color: rgba(255,255,255,.3); #font > .sans-serif(13px, normal, 1); @@ -74,8 +74,7 @@ color: @white; color: rgba(255,255,255,.75); border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); -- cgit v1.2.3 From fa8b1dc12dcfe993f1e4185f95ebe0981fbeb0f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 19:31:25 -0700 Subject: remove color scheme variables, remove font-face mixin --- lib/mixins.less | 17 +++-------------- lib/variables.less | 16 ---------------- 2 files changed, 3 insertions(+), 30 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 9c27346c2..22a30a1c8 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,20 +71,6 @@ } } -// Font face generator -.font-face(@fontFamily, @fileName, @style, @weight) { - @font-face { - font-family: @fontFamily; - font-style: @style; - font-weight: @weight; - src: url('@{fileName}.eot'); - src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), - url('@{fileName}.woff') format('woff'), - url('@{fileName}.ttf') format('truetype'), - url('@{fileName}.svg#@{fontFamily}') format('svg'); - } -} - // Grid System .fixed-container() { width: @siteWidth; @@ -115,6 +101,9 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/variables.less b/lib/variables.less index 864dbe8c0..f85e0ec85 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -45,22 +45,6 @@ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// COLOR SCHEME -// ------------ - -// Use this to roll your own color schemes if you like (unused by Bootstrap by default) -@baseColor: @blue; // Set a base color -@complement: spin(@baseColor, 180); // Determine a complementary color -@split1: spin(@baseColor, 158); // Split complements -@split2: spin(@baseColor, -158); -@triad1: spin(@baseColor, 135); // Triads colors -@triad2: spin(@baseColor, -135); -@tetra1: spin(@baseColor, 90); // Tetra colors -@tetra2: spin(@baseColor, -90); -@analog1: spin(@baseColor, 22); // Analogs colors -@analog2: spin(@baseColor, -22); - - // THEME VARIABLES // --------------- -- cgit v1.2.3 From f4fc56b1b3827254dd771536dcb2b711919f3867 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 12 Oct 2011 08:31:16 -0700 Subject: first pass at moving over the new tabs stuff to 2.0 --- lib/patterns.less | 106 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 19 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index f2a0b7f0e..af898a561 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -318,14 +318,14 @@ } } -// Basic Tabs +// Tabs .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; > li { position: relative; // For the dropdowns mostly - top: 1px; + margin-bottom: -1px; > a { padding: 0 15px; margin-right: 2px; @@ -338,61 +338,129 @@ border-color: #eee #eee #ddd; } } - &.active > a { - color: @gray; - background-color: @white; - border: 1px solid #ddd; + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { border-bottom-color: transparent; + border-top-color: #ddd; } } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left + &.tabs-left .tabs { + float: left; + } + &.tabs-left .tabs > li { + float: none; + } + + // Tabs on right + &.tabs-right .tabs { + float: right; + } + &.tabs-right .tabs > li { + float: none; + } +} + + +// Dropdowns in tabs +.tabs { + // first one for backwards compatibility + .menu-dropdown, .dropdown-menu { top: 35px; border-width: 1px; .border-radius(0 6px 6px 6px); } + // first one for backwards compatibility + a.menu:after, .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } + // first one for backwards compatibility + li.open.menu .menu, .open.dropdown .dropdown-toggle { border-color: #999; } + // first one for backwards compatibility + li.open a.menu:after, .dropdown.open .dropdown-toggle:after { border-top-color: #555; } } -.tab-content { - clear: both; -} -// Basic pill nav +// Pills .pills { a { margin: 5px 3px 5px 0; padding: 0 15px; - text-shadow: 0 1px 1px @white; line-height: 30px; + text-shadow: 0 1px 1px @white; .border-radius(15px); &:hover { - background: @linkColorHover; color: @white; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; } } .active a { - background: @linkColor; color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; } } -.tab-content > *, -.pill-content > * { - display: none; +// Stacked pills +.pills-vertical > li { + float: none; } +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} .tab-content > .active, .pill-content > .active { display: block; -- cgit v1.2.3 From fbe22f05800a3ce4ae3a880914d8e03cb1e01d1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Oct 2011 17:21:39 -0700 Subject: updated index of docs to use html5 self closing tags, add responsive shell to bootstrap file --- lib/bootstrap.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 62f2ce916..9665306fd 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,4 +23,7 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; -@import "patterns.less"; \ No newline at end of file +@import "patterns.less"; + +// Responsive +@import "responsive.less"; \ No newline at end of file -- cgit v1.2.3 From 9e9109469e5c86c4232cc744639b286bcd9ef0ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:00:58 -0700 Subject: biiiiiig update coming for responsiveness --- lib/mixins.less | 3 --- lib/scaffolding.less | 27 ++++----------------------- lib/variables.less | 4 ++-- 3 files changed, 6 insertions(+), 28 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 22a30a1c8..16ea91ba4 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -101,9 +101,6 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 00a8ee3b3..01fcd9e77 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -84,10 +84,8 @@ a { // GRID SYSTEM // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there - .row { .clearfix(); - margin-left: -1 * @gridGutterWidth; } // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) @@ -95,6 +93,10 @@ a { [class*="span"] { .gridColumn(); } +// Kill the margin on the first column +.row > [class*="span"]:first-child { + margin-left: 0; +} // Default columns .span1 { .columns(1); } @@ -109,20 +111,6 @@ a { .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } -.span13 { .columns(13); } -.span14 { .columns(14); } -.span15 { .columns(15); } -.span16 { .columns(16); } - -// For optional 24-column grid -.span17 { .columns(17); } -.span18 { .columns(18); } -.span19 { .columns(19); } -.span20 { .columns(20); } -.span21 { .columns(21); } -.span22 { .columns(22); } -.span23 { .columns(23); } -.span24 { .columns(24); } // Offset column options .offset1 { .offset(1); } @@ -136,10 +124,3 @@ a { .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } -.offset12 { .offset(12); } - -// Unique column sizes for 16-column grid -.span-one-third { width: 300px; } -.span-two-thirds { width: 620px; } -.offset-one-third { margin-left: 340px; } -.offset-two-thirds { margin-left: 660px; } diff --git a/lib/variables.less b/lib/variables.less index f85e0ec85..24eb8b45a 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -38,8 +38,8 @@ // ---- // Modify the grid styles in mixins.less -@gridColumns: 16; -@gridColumnWidth: 40px; +@gridColumns: 12; +@gridColumnWidth: 60px; @gridGutterWidth: 20px; @extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- cgit v1.2.3 From be926a04bc7d1fec228b9cbd4c6d0bb0c75c30cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:08:14 -0700 Subject: fix uber size in responsive; remove @extraspace variable by changing grid to use :first-child over negative margin --- lib/mixins.less | 2 +- lib/variables.less | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 16ea91ba4..47857f1fa 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -82,7 +82,7 @@ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { diff --git a/lib/variables.less b/lib/variables.less index 24eb8b45a..92d09de70 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -41,7 +41,6 @@ @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; -@extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- cgit v1.2.3 From 3a4760637f3acca9cbd8af2819d163848852a23a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:15:17 -0700 Subject: tweak navbar styles for static version to not cause problems on responsive layouts --- lib/patterns.less | 2 -- 1 file changed, 2 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index af898a561..950ac2feb 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -111,8 +111,6 @@ margin-bottom: @baseLineHeight; } .navbar-static .navbar-inner { - margin-left: -20px; - margin-right: -20px; padding-left: 20px; padding-right: 20px; .border-radius(4px); -- cgit v1.2.3 From d1d38079589f2cda2b28cc9f5a3da86cbfabbf25 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:15:36 -0700 Subject: add responsive.less file --- lib/responsive.less | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 lib/responsive.less (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less new file mode 100644 index 000000000..ee974d3e1 --- /dev/null +++ b/lib/responsive.less @@ -0,0 +1,147 @@ +/* Responsive.less + * For phone and tablet devices + * ------------------------------------------------------------- */ + + +@media (max-width: 480px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + } +} + + +@media (min-width: 480px) and (max-width: 768px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} + + +// TABLET TO MEDIUM DESKTOP +// ------------------------ + +@media (min-width: 768px) and (max-width: 940px) { + + // Reset grid variables + @gridColumns: 16; + @gridColumnWidth: 28px; + @gridGutterWidth: 20px; + @siteWidth: 748px; + @extraSpace: (@gridGutterWidth * 2); + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + } + + // 16cols at 30px wide with 16px gutters + .container { + width: @siteWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} + + +// LARGE DESKTOP +// ------------- + +@media (min-width: 1170px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + .container { + width: @siteWidth; + } + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} \ No newline at end of file -- cgit v1.2.3 From 6f44a90edbfc897082dd69630983391bf6e57ba7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 11:35:24 -0700 Subject: tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles --- lib/responsive.less | 46 +++++++++++++++++++++++++++++++++++++++------- lib/type.less | 4 ++-- 2 files changed, 41 insertions(+), 9 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index ee974d3e1..5c8e0539e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,6 +3,9 @@ * ------------------------------------------------------------- */ +// UP TO LANDSCAPE PHONE +// --------------------- + @media (max-width: 480px) { // Remove width from containers .container { @@ -14,10 +17,40 @@ float: none; display: block; width: auto; + margin: 0; + } + // Resize modals + .modal { + width: auto; + margin: 0; } + + // Remove the horizontal form styles + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .form-horizontal .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .form-horizontal .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-horizontal .form-actions { + padding-left: 0; + } + } +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// -------------------------------------------------- + @media (min-width: 480px) and (max-width: 768px) { // Remove width from containers .container { @@ -34,24 +67,23 @@ } -// TABLET TO MEDIUM DESKTOP -// ------------------------ +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables @gridColumns: 16; - @gridColumnWidth: 28px; + @gridColumnWidth: 44px; @gridGutterWidth: 20px; @siteWidth: 748px; - @extraSpace: (@gridGutterWidth * 2); // Bring grid mixins to recalculate widths .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // 16cols at 30px wide with 16px gutters @@ -90,8 +122,8 @@ } -// LARGE DESKTOP -// ------------- +// LARGE DESKTOP & UP +// ------------------ @media (min-width: 1170px) { diff --git a/lib/type.less b/lib/type.less index 4232a24df..7cf9e6ccd 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,13 +38,13 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; small { font-size: 14px; } } h3 { - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; font-size: 18px; small { font-size: 14px; -- cgit v1.2.3 From 756e7c8739266ec8594d545e7eec2a50ea06ce08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 12:11:48 -0700 Subject: more tweaks to responsive --- lib/responsive.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 5c8e0539e..afd30f279 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,7 +121,7 @@ } - +/* // LARGE DESKTOP & UP // ------------------ @@ -176,4 +176,5 @@ .offset11 { .offset(11); } .offset12 { .offset(12); } -} \ No newline at end of file +} +*/ \ No newline at end of file -- cgit v1.2.3 From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 18:01:05 -0700 Subject: tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks --- lib/forms.less | 8 ++------ lib/type.less | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4b2bb8016..6edf29e53 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -37,12 +37,6 @@ label { color: @grayDark; } -// Checkboxs and radio buttons -input[type=checkbox], -input[type=radio] { - cursor: pointer; -} - // Inputs, Textareas, Selects input, textarea, @@ -69,11 +63,13 @@ input[type=radio] { *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; + cursor: pointer; } // Reset the file input to browser defaults input[type=file] { background-color: @white; + background-color: initial; padding: initial; border: initial; line-height: initial; diff --git a/lib/type.less b/lib/type.less index 7cf9e6ccd..c746a58af 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,7 +38,7 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 1.5; + line-height: @baseLineHeight * 2; small { font-size: 14px; } @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; + color: @grayDark; } ul.unstyled { list-style: none; -- cgit v1.2.3 From c62a0239bd30a12e9f0d8c1e45f5818460e9df90 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 19:12:33 -0700 Subject: update to responsive to fix new masthead --- lib/responsive.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index afd30f279..900df4c75 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,11 +121,10 @@ } -/* // LARGE DESKTOP & UP // ------------------ -@media (min-width: 1170px) { +@media (min-width: 1210px) { // Reset grid variables @gridColumns: 12; @@ -177,4 +176,3 @@ .offset12 { .offset(12); } } -*/ \ No newline at end of file -- cgit v1.2.3 From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 23:04:31 -0700 Subject: few tweaks to responsive stuff, updated docs for grid system (still needs copy editing) --- lib/mixins.less | 9 +++++---- lib/patterns.less | 6 +++--- lib/responsive.less | 2 ++ lib/scaffolding.less | 5 +---- 4 files changed, 11 insertions(+), 11 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 47857f1fa..5b05654d5 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -78,12 +78,13 @@ margin-right: auto; .clearfix(); } -.columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); +.columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } -.offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } + // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { display: inline; diff --git a/lib/patterns.less b/lib/patterns.less index 950ac2feb..f1badc46d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -520,11 +520,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseLineHeight - 1; - border-bottom: 1px solid #ddd; + margin-bottom: @baseLineHeight * 1.5; + border-bottom: 1px solid #eee; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseLineHeight / 2) - 1px; + margin-bottom: @baseLineHeight * .75; } } diff --git a/lib/responsive.less b/lib/responsive.less index 900df4c75..a1a33164f 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,6 +121,7 @@ } +/* // LARGE DESKTOP & UP // ------------------ @@ -176,3 +177,4 @@ .offset12 { .offset(12); } } +*/ \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 01fcd9e77..f15f6853c 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -85,6 +85,7 @@ a { // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { + margin-left: -@gridGutterWidth; .clearfix(); } @@ -93,10 +94,6 @@ a { [class*="span"] { .gridColumn(); } -// Kill the margin on the first column -.row > [class*="span"]:first-child { - margin-left: 0; -} // Default columns .span1 { .columns(1); } -- cgit v1.2.3 From f48baceeda7dc18e1fdf78f89c55b3de40a3357e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 12:45:09 -0700 Subject: remove bottom margin from h1 --- lib/type.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index c746a58af..28d893fb9 100644 --- a/lib/type.less +++ b/lib/type.less @@ -29,7 +29,6 @@ h1, h2, h3, h4, h5, h6 { } } h1 { - margin-bottom: @baseLineHeight; font-size: 30px; line-height: @baseLineHeight * 2; small { -- cgit v1.2.3 From 27cbe7f63a13fad987dc2547ef5b6f526ceb268c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 14:17:29 -0700 Subject: add abbr styles, overhaul type docs section to remove lots of verbose text and put emphasis on tables and more scannable content --- lib/type.less | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 28d893fb9..4978dd786 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,6 +24,7 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; + text-rendering: optimizelegibility; small { color: @grayLight; } @@ -39,7 +40,7 @@ h2 { font-size: 24px; line-height: @baseLineHeight * 2; small { - font-size: 14px; + font-size: 18px; } } h3 { @@ -134,6 +135,14 @@ em { color: @grayLight; } +// Abbreviations and acronyms +abbr { + font-size: 90%; + text-transform: uppercase; + border-bottom: 1px dotted #ddd; + cursor: help; +} + // Blockquotes blockquote { margin-bottom: @baseLineHeight; -- cgit v1.2.3 From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- lib/type.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 4978dd786..a490bf5fa 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, -- cgit v1.2.3 From d4675bf4ef8019fc80e3b6816d3597c07cde81df Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Oct 2011 15:49:42 -0700 Subject: updating the docs to include more responsive fixes, adding rows to the responsive changes as well to undo negative margin --- lib/responsive.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index a1a33164f..6cacccad9 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -12,6 +12,10 @@ width: auto; padding: 0 10px; } + // Undo negative margin on rows + .row { + margin-left: 0; + } // Make all columns even [class*="span"] { float: none; @@ -57,6 +61,10 @@ width: auto; padding: 0 10px; } + // Undo negative margin on rows + .row { + margin-left: 0; + } // Make all columns even [class*="span"] { float: none; -- cgit v1.2.3 From b4c0d2a6b2fe1bc92c3635cda71b63ee08a05be4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Oct 2011 22:49:37 -0700 Subject: tweaks to the responsive layout to improve type --- lib/responsive.less | 2 +- lib/type.less | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 6cacccad9..75c33b1a8 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -10,7 +10,7 @@ // Remove width from containers .container { width: auto; - padding: 0 10px; + padding: 0 15px; } // Undo negative margin on rows .row { diff --git a/lib/type.less b/lib/type.less index a490bf5fa..d092b203d 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,7 +24,7 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; - text-rendering: optimizelegibility; + text-rendering: optimizelegibility; // Fix the character spacing for headings small { color: @grayLight; } @@ -185,7 +185,7 @@ pre { background-color: #f5f5f5; display: block; padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight; + margin: 0 0 @baseLineHeight / 2; line-height: @baseLineHeight; font-size: 12px; border: 1px solid #ccc; @@ -193,6 +193,5 @@ pre { .border-radius(3px); white-space: pre; white-space: pre-wrap; - word-wrap: break-word; - + word-break: break-all; } \ No newline at end of file -- cgit v1.2.3 From e616026d678239104b93cafca9a77ea74a4c0ddf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2011 21:04:14 -0700 Subject: update to docs to cleanup pagination for smartphones, fix some pagination inconsistencies --- lib/type.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index d092b203d..7f8044cd8 100644 --- a/lib/type.less +++ b/lib/type.less @@ -149,12 +149,12 @@ blockquote { border-left: 5px solid #eee; padding-left: 15px; p { - #font > .shorthand(300,14px,@baseLineHeight); + #font > .shorthand(300,16px,@baseLineHeight * 1.25); margin-bottom: 0; } small { display: block; - #font > .shorthand(300,12px,@baseLineHeight); + line-height: @baseLineHeight; color: @grayLight; &:before { content: '\2014 \00A0'; -- cgit v1.2.3 From 648c4689273647c321dd6e3979d910282e9a9339 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2011 23:11:56 -0700 Subject: breaking down the main page into subpages for easier, more comprehensive documentation --- lib/mixins.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 5b05654d5..6d034cbcc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -162,12 +162,19 @@ } // Background clipping +// Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { -webkit-background-clip: @clip; -moz-background-clip: @clip; background-clip: @clip; } +// Resize anything +.resizable(@direction: both) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + // CSS3 Content Columns .content-columns(@columnCount, @columnGap: 20px) { -webkit-column-count: @columnCount; -- cgit v1.2.3 From cb13f010e2dd1eb8f37048b5664ff455b60eba05 Mon Sep 17 00:00:00 2001 From: Bulat Shakirzyanov Date: Thu, 27 Oct 2011 18:51:49 -0700 Subject: implement left and right tabs styles --- lib/patterns.less | 72 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 62 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index f1badc46d..1db315831 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -379,19 +379,71 @@ } // Tabs on left - &.tabs-left .tabs { - float: left; - } - &.tabs-left .tabs > li { - float: none; + &.tabs-left { + .clearfix(); + + .tab-content { + float: left; + } + .tabs { + float: left; + + > li { + float: none; + margin-bottom: -1px; + margin-right: -1px; + > a { + margin-right: 0; + margin-bottom: 2px; + .border-radius(4px 0 0 4px); + + &:hover { + border-color: transparent; + border-right-color: #ddd; + } + } + } + + > .active > a, + > .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } } // Tabs on right - &.tabs-right .tabs { - float: right; - } - &.tabs-right .tabs > li { - float: none; + &.tabs-right { + .clearfix(); + + .tab-content { + float: right; + } + .tabs { + float: right; + + > li { + float: none; + margin-bottom: -1px; + margin-left: -1px; + > a { + margin-left: 0; + margin-bottom: 2px; + .border-radius(4px 0 0 4px); + + &:hover { + border-color: transparent; + border-left-color: #ddd; + } + } + } + + > .active > a, + > .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } } } -- cgit v1.2.3 From 2764cfda6dbda56b4a50561fb8cd2a8be86dc096 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Oct 2011 18:38:06 -0700 Subject: remove html from body background --- lib/scaffolding.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f15f6853c..7b8aa369a 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -7,10 +7,8 @@ // STRUCTURAL LAYOUT // ----------------- -html, body { - background-color: @white; -} body { + background-color: @white; margin: 0; font-family: @baseFontFamily; font-size: @baseFontSize; -- cgit v1.2.3 From 3f512adf953da3a3fbbfca18b138fb6659f2b77f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 30 Oct 2011 20:14:27 -0700 Subject: updated docs and type styles for blockquotes and a few fixes for type --- lib/type.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 7f8044cd8..421d666a4 100644 --- a/lib/type.less +++ b/lib/type.less @@ -160,6 +160,15 @@ blockquote { content: '\2014 \00A0'; } } + + // Float right with text-align: right + &.pull-right { + float: right; + p, + small { + text-align: right; + } + } } // Addresses -- cgit v1.2.3 From 02bf27592c8eec51795ac806390bc57db501926d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2011 19:37:10 -0700 Subject: overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs --- lib/tables.less | 95 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 76 insertions(+), 19 deletions(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 8a786ffd2..b02087fbd 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -9,14 +9,12 @@ table { width: 100%; - margin-bottom: @baseLineHeight; padding: 0; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; /* IE7, collapse table to remove spacing */ + margin-bottom: @baseLineHeight; font-size: @baseFontSize; - border: 1px solid #ddd; - .border-radius(4px); - th, td { + border-collapse: collapse; + th, + td { padding: 10px 10px 9px; line-height: @baseLineHeight; text-align: left; @@ -25,22 +23,49 @@ table { padding-top: 9px; font-weight: bold; vertical-align: middle; - border-bottom: 1px solid #ddd; } td { vertical-align: top; + border-top: 1px solid #ddd; + } + // When scoped to row, fix th in tbody + tbody th { + border-top: 1px solid #ddd; + vertical-align: top; + } +} + + +// CONDENSED VERSION +// ----------------- + +.condensed-table { + th, + td { + padding: 5px 5px 4px; } +} + + +// BORDERED VERSION +// ---------------- + +.bordered-table { + border: 1px solid #ddd; + border-collapse: separate; // Done so we can round those corners! + *border-collapse: collapse; /* IE7, collapse table to remove spacing */ + .border-radius(4px); th + th, - td + td { + td + td, + th + td { border-left: 1px solid #ddd; } - tr + tr td { - border-top: 1px solid #ddd; - } - tbody tr:first-child td:first-child { + thead:first-child tr:first-child th:first-child, + tbody:first-child tr:first-child td:first-child { .border-radius(4px 0 0 0); } - tbody tr:first-child td:last-child { + thead:first-child tr:first-child th:last-child, + tbody:first-child tr:first-child td:last-child { .border-radius(0 4px 0 0); } tbody tr:last-child td:first-child { @@ -52,20 +77,55 @@ table { } +// ---------------- + +// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border +.tableColumns(@columnSpan: 1) { + width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); +} +table { + // Default columns + .span1 { .tableColumns(1); } + .span2 { .tableColumns(2); } + .span3 { .tableColumns(3); } + .span4 { .tableColumns(4); } + .span5 { .tableColumns(5); } + .span6 { .tableColumns(6); } + .span7 { .tableColumns(7); } + .span8 { .tableColumns(8); } + .span9 { .tableColumns(9); } + .span10 { .tableColumns(10); } + .span11 { .tableColumns(11); } + .span12 { .tableColumns(12); } + .span13 { .tableColumns(13); } + .span14 { .tableColumns(14); } + .span15 { .tableColumns(15); } + .span16 { .tableColumns(16); } +} + + // ZEBRA-STRIPING // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) -.zebra-striped { +.striped-table { tbody { - tr:nth-child(odd) td { + tr:nth-child(odd) td, + tr:nth-child(odd) th { background-color: #f9f9f9; } - tr:hover td { + tr:hover td, + tr:hover th { background-color: #f5f5f5; } } +} + +// TABLESORTER +// ----------- + +table { // Tablesorting styles w/ jQuery plugin .header { cursor: pointer; @@ -111,9 +171,6 @@ table { .opacity(60); } } -} - -table { // Blue Table Headings .blue { color: @blue; -- cgit v1.2.3 From 31ea00304626ea68b758def41769606d4c049671 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2011 21:45:46 -0700 Subject: remove alt tab styles for now, too complicated to accomplish both static and tabble; fix up CSS a bit --- lib/patterns.less | 53 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 23 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 1db315831..367347e27 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -378,34 +378,48 @@ border-color: transparent #ddd #ddd #ddd; } - // Tabs on left - &.tabs-left { + // Tabs on left and right + &.tabs-left, + &.tabs-right { .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + // Tabs on left + &.tabs-left { .tab-content { - float: left; + margin-left: 100px; } .tabs { float: left; - > li { - float: none; - margin-bottom: -1px; margin-right: -1px; > a { margin-right: 0; - margin-bottom: 2px; .border-radius(4px 0 0 4px); &:hover { - border-color: transparent; border-right-color: #ddd; } } } - - > .active > a, - > .active > a:hover { + // Active state + .active > a, + .active > a:hover { border-color: #ddd; border-right-color: transparent; } @@ -414,32 +428,25 @@ // Tabs on right &.tabs-right { - .clearfix(); - .tab-content { - float: right; + margin-right: 100px; } .tabs { float: right; - > li { - float: none; - margin-bottom: -1px; margin-left: -1px; > a { margin-left: 0; - margin-bottom: 2px; - .border-radius(4px 0 0 4px); + .border-radius(0 4px 4px 0); &:hover { - border-color: transparent; border-left-color: #ddd; } } } - - > .active > a, - > .active > a:hover { + // Active state + .active > a, + .active > a:hover { border-color: #ddd; border-left-color: transparent; } -- cgit v1.2.3 From 1fb98bed91977b710ae321443d0819939a1a8cc7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Nov 2011 00:46:02 -0800 Subject: updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage --- lib/forms.less | 72 +++++++++++++++++++++++++++---------------------------- lib/mixins.less | 2 +- lib/patterns.less | 10 ++++++++ 3 files changed, 47 insertions(+), 37 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 6edf29e53..b7eb15005 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,6 +3,7 @@ * ------------------------------------------------------------- */ + // GENERAL STYLES // -------------- @@ -84,6 +85,7 @@ input[type=submit] { height: auto; } +// Set the height of select and file controls to match text inputs select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size @@ -188,42 +190,47 @@ textarea[readonly] { -// ERROR STATE -// ----------- - -// Set color of error text -@error-text: desaturate(lighten(@red, 25%), 25%); +// FORM FIELD FEEDBACK STATES +// -------------------------- -// Style the background of control-groups with errors -.has-error { - background: lighten(@red, 55%); - padding: (@baseLineHeight / 2) 0; - margin: -10px 0 10px; - .border-radius(4px); +// Mixin for form field states +.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { + // Set the text color > label, - span.help-inline, - span.help-block { - color: @red; + .help-block, + .help-inline { + color: @textColor; } + // Style inputs accordingly input, - textarea, - select { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); + textarea { + color: @textColor; + border-color: @borderColor; &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); + border-color: darken(@borderColor, 10%); + .box-shadow(0 0 6px lighten(@borderColor, 20%); } } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } + // Give a small background color for input-prepend/-append + .input-prepend .add-on, + .input-append .add-on { + color: @textColor; + background-color: @backgroundColor; + border-color: @textColor; } } +// Error +form .clearfix.error { + .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); +} +// Warning +form .clearfix.warning { + .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); +} +// Success +form .clearfix.success { + .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); +} @@ -238,7 +245,6 @@ textarea[readonly] { border-top: 1px solid #ddd; } - // For text that needs to appear as an input but should not be an input .uneditable-input { background-color: @white; @@ -281,6 +287,7 @@ textarea[readonly] { } + // INLINE FIELDS // ------------- @@ -301,6 +308,7 @@ textarea[readonly] { } + // INPUT GROUPS // ------------ @@ -353,7 +361,6 @@ textarea[readonly] { - // SEARCH FORM // ----------- @@ -366,7 +373,6 @@ textarea[readonly] { // HORIZONTAL & VERTICAL FORMS // --------------------------- - // Common properties // ----------------- @@ -374,17 +380,11 @@ textarea[readonly] { .control-group { margin-bottom: @baseLineHeight; } - // Bold the labels so they stand out .control-group > label { font-weight: bold; } -// Lists of controls (checkboxes and radios) -.control-list { -} - - // Horizontal-specific styles // -------------------------- diff --git a/lib/mixins.less b/lib/mixins.less index 6d034cbcc..1d2c68856 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -139,7 +139,7 @@ // Transform for scale and rotate // translate, rotate, scale -- need to finalize -.rotation(@degrees: 5deg) { +.rotate(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); -ms-transform: rotate(@degrees); diff --git a/lib/patterns.less b/lib/patterns.less index 367347e27..618b90840 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -1151,3 +1151,13 @@ input[type=submit].btn { } } } + + +// MISC +// ---- +.pull-right { + float: right; +} +.pull-left { + float: left; +} \ No newline at end of file -- cgit v1.2.3 From a0179322854a9d1e2b9363447c9884e40733d04f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 16 Nov 2011 23:58:36 -0800 Subject: start breaking down patterns.less into more distinct files, update docs for forms to use correct classes --- lib/bootstrap.less | 10 ++ lib/breadcrumbs.less | 22 +++ lib/media-grids.less | 26 +++ lib/mixins.less | 39 ++++- lib/modals.less | 60 +++++++ lib/pagination.less | 40 +++++ lib/patterns.less | 483 --------------------------------------------------- lib/popovers.less | 45 +++++ lib/tabs-pills.less | 221 +++++++++++++++++++++++ lib/twipsy.less | 33 ++++ 10 files changed, 495 insertions(+), 484 deletions(-) create mode 100644 lib/breadcrumbs.less create mode 100644 lib/media-grids.less create mode 100644 lib/modals.less create mode 100644 lib/pagination.less create mode 100644 lib/popovers.less create mode 100644 lib/tabs-pills.less create mode 100644 lib/twipsy.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 9665306fd..ffad35913 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,7 +23,17 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; + +// Temp catchall for what's missing thus far @import "patterns.less"; +@import "tabs-pills.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "modals.less"; +@import "twipsy.less"; +@import "popovers.less"; +@import "media-grids.less"; + // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less new file mode 100644 index 000000000..89a7aef13 --- /dev/null +++ b/lib/breadcrumbs.less @@ -0,0 +1,22 @@ +// BREADCRUMBS +// ----------- + +.breadcrumb { + margin: 0 0 @baseLineHeight; + padding: 7px 14px; + #gradient > .vertical(#ffffff, #f5f5f5); + border: 1px solid #ddd; + .border-radius(3px); + .box-shadow(inset 0 1px 0 @white); + li { + display: inline; + text-shadow: 0 1px 0 @white; + } + .divider { + padding: 0 5px; + color: @grayLight; + } + .active a { + color: @grayDark; + } +} diff --git a/lib/media-grids.less b/lib/media-grids.less new file mode 100644 index 000000000..7ceade651 --- /dev/null +++ b/lib/media-grids.less @@ -0,0 +1,26 @@ +// MEDIA GRIDS +// ----------- + +.media-grid { + margin-left: -20px; + margin-bottom: 0; + .clearfix(); + li { + display: inline; + } + a { + float: left; + padding: 4px; + margin: 0 0 20px 20px; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); + img { + display: block; + } + &:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); + } + } +} diff --git a/lib/mixins.less b/lib/mixins.less index 1d2c68856..b8565bbdc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -272,4 +272,41 @@ -khtml-opacity: @opacity / 100; -moz-opacity: @opacity / 100; opacity: @opacity / 100; -} \ No newline at end of file +} + +// Popover arrows +// For tipsies and popovers +#popoverArrow { + .above(@arrowWidth: 5px) { + bottom: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid @black; + } + .left(@arrowWidth: 5px) { + top: 50%; + right: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-left: @arrowWidth solid @black; + } + .below(@arrowWidth: 5px) { + top: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid @black; + } + .right(@arrowWidth: 5px) { + top: 50%; + left: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-right: @arrowWidth solid @black; + } +} diff --git a/lib/modals.less b/lib/modals.less new file mode 100644 index 000000000..672431beb --- /dev/null +++ b/lib/modals.less @@ -0,0 +1,60 @@ +// MODALS +// ------ + +.modal-backdrop { + background-color: @black; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000; + // Fade for backdrop + &.fade { opacity: 0; } +} + +.modal-backdrop, .modal-backdrop.fade.in { + .opacity(80); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: 11000; + width: 560px; + margin: -250px 0 0 -250px; + background-color: @white; + border: 1px solid #999; + border: 1px solid rgba(0,0,0,.3); + *border: 1px solid #999; /* IE6-7 */ + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + .close { margin-top: 7px; } + &.fade { + .transition(e('opacity .3s linear, top .3s ease-out')); + top: -25%; + } + &.fade.in { top: 50%; } +} +.modal-header { + border-bottom: 1px solid #eee; + padding: 5px 15px; +} +.modal-body { + padding: 15px; +} +.modal-footer { + background-color: #f5f5f5; + padding: 14px 15px 15px; + border-top: 1px solid #ddd; + .border-radius(0 0 6px 6px); + .box-shadow(inset 0 1px 0 @white); + .clearfix(); + margin-bottom: 0; + .btn { + float: right; + margin-left: 5px; + } +} diff --git a/lib/pagination.less b/lib/pagination.less new file mode 100644 index 000000000..d97a1bab3 --- /dev/null +++ b/lib/pagination.less @@ -0,0 +1,40 @@ +// PAGINATION +// ---------- + +.pagination { + height: @baseLineHeight * 2; + margin: @baseLineHeight 0; + ul { + float: left; + margin: 0; + border: 1px solid #ddd; + border: 1px solid rgba(0,0,0,.15); + .border-radius(3px); + .box-shadow(0 1px 2px rgba(0,0,0,.05)); + } + li { + display: inline; + } + a { + float: left; + padding: 0 14px; + line-height: (@baseLineHeight * 2) - 2; + border-right: 1px solid; + border-right-color: #ddd; + border-right-color: rgba(0,0,0,.15); + *border-right-color: #ddd; /* IE6-7 */ + text-decoration: none; + } + a:hover, + .active a { + background-color: lighten(@blue, 45%); + } + .disabled a, + .disabled a:hover { + background-color: transparent; + color: @grayLight; + } + .next a { + border: 0; + } +} diff --git a/lib/patterns.less b/lib/patterns.less index 618b90840..bc1229bd9 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -301,251 +301,8 @@ } -// Tabs and Pills -.tabs, -.pills { - margin: 0 0 20px; - padding: 0; - list-style: none; - .clearfix(); - > li { - float: left; - > a { - display: block; - } - } -} - -// Tabs -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; - > li { - position: relative; // For the dropdowns mostly - margin-bottom: -1px; - > a { - padding: 0 15px; - margin-right: 2px; - line-height: @baseLineHeight * 2; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; - } - } - } - // Active state, and it's :hover to override normal :hover - .active > a, - .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; - } -} - -.tabbable { - margin-bottom: @baseLineHeight; - - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } - - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; - } - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} - -// Dropdowns in tabs -.tabs { - // first one for backwards compatibility - .menu-dropdown, - .dropdown-menu { - top: 35px; - border-width: 1px; - .border-radius(0 6px 6px 6px); - } - // first one for backwards compatibility - a.menu:after, - .dropdown-toggle:after { - border-top-color: #999; - margin-top: 15px; - margin-left: 5px; - } - // first one for backwards compatibility - li.open.menu .menu, - .open.dropdown .dropdown-toggle { - border-color: #999; - } - // first one for backwards compatibility - li.open a.menu:after, - .dropdown.open .dropdown-toggle:after { - border-top-color: #555; - } -} -// Pills -.pills { - a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px @white; - .border-radius(15px); - &:hover { - color: @white; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColorHover; - } - } - .active a { - color: @white; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColor; - } -} - -// Stacked pills -.pills-vertical > li { - float: none; -} - -// Tabbable areas -.tab-content, -.pill-content { -} -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// BREADCRUMBS -// ----------- - -.breadcrumb { - margin: 0 0 @baseLineHeight; - padding: 7px 14px; - #gradient > .vertical(#ffffff, #f5f5f5); - border: 1px solid #ddd; - .border-radius(3px); - .box-shadow(inset 0 1px 0 @white); - li { - display: inline; - text-shadow: 0 1px 0 @white; - } - .divider { - padding: 0 5px; - color: @grayLight; - } - .active a { - color: @grayDark; - } -} // PAGE HEADERS @@ -852,46 +609,6 @@ input[type=submit].btn { } -// PAGINATION -// ---------- - -.pagination { - height: @baseLineHeight * 2; - margin: @baseLineHeight 0; - ul { - float: left; - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); - } - li { - display: inline; - } - a { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0,0,0,.15); - *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; - } - a:hover, - .active a { - background-color: lighten(@blue, 45%); - } - .disabled a, - .disabled a:hover { - background-color: transparent; - color: @grayLight; - } - .next a { - border: 0; - } -} // WELLS @@ -913,186 +630,12 @@ input[type=submit].btn { } -// MODALS -// ------ - -.modal-backdrop { - background-color: @black; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10000; - // Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); -} - -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - width: 560px; - margin: -250px 0 0 -250px; - background-color: @white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - .close { margin-top: 7px; } - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 50%; } -} -.modal-header { - border-bottom: 1px solid #eee; - padding: 5px 15px; -} -.modal-body { - padding: 15px; -} -.modal-footer { - background-color: #f5f5f5; - padding: 14px 15px 15px; - border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 @white); - .clearfix(); - margin-bottom: 0; - .btn { - float: right; - margin-left: 5px; - } -} - - -// POPOVER ARROWS -// -------------- -#popoverArrow { - .above(@arrowWidth: 5px) { - bottom: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-top: @arrowWidth solid @black; - } - .left(@arrowWidth: 5px) { - top: 50%; - right: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @black; - } - .below(@arrowWidth: 5px) { - top: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid @black; - } - .right(@arrowWidth: 5px) { - top: 50%; - left: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @black; - } -} -// TWIPSY -// ------ -.twipsy { - display: block; - position: absolute; - visibility: visible; - padding: 5px; - font-size: 11px; - z-index: 1000; - .opacity(80); - &.fade.in { - .opacity(80); - } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } -} -.twipsy-inner { - padding: 3px 8px; - background-color: @black; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - .border-radius(4px); -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -// POPOVERS -// -------- -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - padding: 5px; - display: none; - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } - .arrow { - position: absolute; - width: 0; - height: 0; - } - .inner { - background-color: @black; - background-color: rgba(0,0,0,.8); - padding: 3px; - overflow: hidden; - width: 280px; - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - } - .title { - background-color: #f5f5f5; - padding: 9px 15px; - line-height: 1; - .border-radius(3px 3px 0 0); - border-bottom:1px solid #eee; - } - .content { - background-color: @white; - padding: 14px; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); - p, ul, ol { - margin-bottom: 0; - } - } -} // PATTERN ANIMATIONS @@ -1125,32 +668,6 @@ input[type=submit].btn { } -// MEDIA GRIDS -// ----------- - -.media-grid { - margin-left: -20px; - margin-bottom: 0; - .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } -} // MISC diff --git a/lib/popovers.less b/lib/popovers.less new file mode 100644 index 000000000..ed335eeed --- /dev/null +++ b/lib/popovers.less @@ -0,0 +1,45 @@ +// POPOVERS +// -------- + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1000; + padding: 5px; + display: none; + &.above .arrow { #popoverArrow > .above(); } + &.right .arrow { #popoverArrow > .right(); } + &.below .arrow { #popoverArrow > .below(); } + &.left .arrow { #popoverArrow > .left(); } + .arrow { + position: absolute; + width: 0; + height: 0; + } + .inner { + background-color: @black; + background-color: rgba(0,0,0,.8); + padding: 3px; + overflow: hidden; + width: 280px; + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + } + .title { + background-color: #f5f5f5; + padding: 9px 15px; + line-height: 1; + .border-radius(3px 3px 0 0); + border-bottom:1px solid #eee; + } + .content { + background-color: @white; + padding: 14px; + .border-radius(0 0 3px 3px); + .background-clip(padding-box); + p, ul, ol { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less new file mode 100644 index 000000000..7e6c0bf39 --- /dev/null +++ b/lib/tabs-pills.less @@ -0,0 +1,221 @@ +// Tabs and Pills +.tabs, +.pills { + margin: 0 0 20px; + padding: 0; + list-style: none; + .clearfix(); + > li { + float: left; + > a { + display: block; + } + } +} + +// Tabs +.tabs { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; + > li { + position: relative; // For the dropdowns mostly + margin-bottom: -1px; + > a { + padding: 0 15px; + margin-right: 2px; + line-height: @baseLineHeight * 2; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; + } + } + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } + } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } +} + + +// Dropdowns in tabs +.tabs { + // first one for backwards compatibility + .menu-dropdown, + .dropdown-menu { + top: 35px; + border-width: 1px; + .border-radius(0 6px 6px 6px); + } + // first one for backwards compatibility + a.menu:after, + .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; + } + // first one for backwards compatibility + li.open.menu .menu, + .open.dropdown .dropdown-toggle { + border-color: #999; + } + // first one for backwards compatibility + li.open a.menu:after, + .dropdown.open .dropdown-toggle:after { + border-top-color: #555; + } +} + +// Pills +.pills { + a { + margin: 5px 3px 5px 0; + padding: 0 15px; + line-height: 30px; + text-shadow: 0 1px 1px @white; + .border-radius(15px); + &:hover { + color: @white; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; + } + } + .active a { + color: @white; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; + } +} + +// Stacked pills +.pills-vertical > li { + float: none; +} + +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} diff --git a/lib/twipsy.less b/lib/twipsy.less new file mode 100644 index 000000000..5d168db3e --- /dev/null +++ b/lib/twipsy.less @@ -0,0 +1,33 @@ +// TWIPSY +// ------ + +.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 11px; + z-index: 1000; + .opacity(80); + &.fade.in { + .opacity(80); + } + &.above .twipsy-arrow { #popoverArrow > .above(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.below .twipsy-arrow { #popoverArrow > .below(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } +} +.twipsy-inner { + padding: 3px 8px; + background-color: @black; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + .border-radius(4px); +} +.twipsy-arrow { + position: absolute; + width: 0; + height: 0; +} -- cgit v1.2.3 From a8e88d14a422c3dfdb79eaf6d6a3a2f1144df150 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:06:16 -0800 Subject: make form classes match table classes (readable left to right), update docs associated with it --- lib/forms.less | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index b7eb15005..adc050d7a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -364,7 +364,7 @@ form .clearfix.success { // SEARCH FORM // ----------- -.form-search .search-query { +.search-form .search-query { .border-radius(14px); } @@ -388,22 +388,24 @@ form .clearfix.success { // Horizontal-specific styles // -------------------------- -// Float the labels left -.form-horizontal .control-group > label { - float: left; - width: 130px; - padding-top: 5px; - text-align: right; -} -// Move over all input controls and content -.form-horizontal .controls { - margin-left: 150px; -} -// Move the options list down to align with labels -.form-horizontal .control-list { - padding-top: 6px; // has to be padding because margin collaspes -} -// Move over buttons in .form-actions to align with .controls -.form-horizontal .form-actions { - padding-left: 150px; +.horizontal-form { + // Float the labels left + .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; + } + // Move over all input controls and content + .controls { + margin-left: 150px; + } + // Move the options list down to align with labels + .control-list { + padding-top: 6px; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-actions { + padding-left: 150px; + } } -- cgit v1.2.3 From 160970560b819fe3e3a3396f7385ed8cafc43bf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:37:14 -0800 Subject: updated font mixins courtesy of @apancutt --- lib/mixins.less | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index b8565bbdc..fc1795042 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -46,28 +46,33 @@ // Font Stacks #font { - .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + #family { + .serif() { + font-family: "Georgia", Times New Roman, Times, serif; + } + .sans-serif() { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + .monospace() { + font-family: "Menlo", Monaco, Courier New, monospace; + } } - .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: "Georgia", Times New Roman, Times, serif; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .serif; + #font > .shorthand(@size, @weight, @lineHeight); } - .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .sans-serif; + #font > .shorthand(@size, @weight, @lineHeight); + } + .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .monospace; + #font > .shorthand(@size, @weight, @lineHeight); } } -- cgit v1.2.3 From 6418a40675a2354df757e949e2092a246485ff1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:41:26 -0800 Subject: spelling mistake in comment --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index fc1795042..670b17384 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -201,7 +201,7 @@ } } -// Gradient Bar Colors for buttons and allerts +// Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { #gradient > .vertical(@primaryColor, @secondaryColor); text-shadow: 0 -1px 0 rgba(0,0,0,.25); -- cgit v1.2.3 From ba9fcd8b57ad7974a52aecabac7c90dccda4afcb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:49:51 -0800 Subject: make uneditable inputs work with span* classes --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index adc050d7a..f590101cd 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -151,7 +151,8 @@ select:focus { } input, textarea, -select { +select, +.uneditable-input { // Default columns &.span1 { .formColumns(1); } &.span2 { .formColumns(2); } -- cgit v1.2.3 From 159c7a7fdae4a3bd929ee9cc76aaa3b509a969dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 00:52:11 -0800 Subject: remove code styling if it's in a pre tag --- lib/type.less | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 421d666a4..f5b5ff272 100644 --- a/lib/type.less +++ b/lib/type.less @@ -179,15 +179,16 @@ address { } // Inline and block code styles -code, pre { +code, +pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; + #font > #family > .monospace; font-size: 12px; + color: @grayDark; .border-radius(3px); } code { background-color: lighten(@orange, 40%); - color: rgba(0,0,0,.75); padding: 1px 3px; } pre { @@ -203,4 +204,10 @@ pre { white-space: pre; white-space: pre-wrap; word-break: break-all; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + background-color: transparent; + } } \ No newline at end of file -- cgit v1.2.3 From 4e6275d0fe0880d32633a2c139dad8d3e2745bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 01:28:42 -0800 Subject: update property order and do some misc cleanup --- lib/breadcrumbs.less | 2 +- lib/forms.less | 30 ++++++++--------- lib/mixins.less | 11 +++--- lib/modals.less | 10 +++--- lib/pagination.less | 4 +-- lib/patterns.less | 95 +++++++++++++++++++++++----------------------------- lib/popovers.less | 14 ++++---- lib/reset.less | 12 +++---- lib/scaffolding.less | 6 ++-- lib/tables.less | 8 ++--- lib/tabs-pills.less | 7 ++-- lib/twipsy.less | 8 ++--- lib/type.less | 16 ++++----- 13 files changed, 105 insertions(+), 118 deletions(-) (limited to 'lib') diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less index 89a7aef13..2fa9921ac 100644 --- a/lib/breadcrumbs.less +++ b/lib/breadcrumbs.less @@ -2,8 +2,8 @@ // ----------- .breadcrumb { - margin: 0 0 @baseLineHeight; padding: 7px 14px; + margin: 0 0 @baseLineHeight; #gradient > .vertical(#ffffff, #f5f5f5); border: 1px solid #ddd; .border-radius(3px); diff --git a/lib/forms.less b/lib/forms.less index f590101cd..845eec185 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -69,11 +69,11 @@ input[type=radio] { // Reset the file input to browser defaults input[type=file] { - background-color: @white; - background-color: initial; padding: initial; - border: initial; line-height: initial; + border: initial; + background-color: @white; + background-color: initial; .box-shadow(none); } @@ -89,14 +89,14 @@ input[type=submit] { select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: @baseLineHeight * 1.5; } // Make multiple select elements height not fixed select[multiple] { - background-color: @white; // Fixes Chromium bug? height: inherit; + background-color: @white; // Fixes Chromium bug? } textarea { @@ -110,16 +110,16 @@ textarea { input, textarea { + .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); } input:focus, textarea:focus { - outline: 0; border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); + outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, @@ -248,8 +248,8 @@ form .clearfix.success { // For text that needs to appear as an input but should not be an input .uneditable-input { - background-color: @white; display: block; + background-color: @white; border-color: #eee; .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; @@ -275,10 +275,10 @@ form .clearfix.success { } .help-inline { - display: inline; - padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ + display: inline; + padding-left: 5px; } // Big blocks of help text @@ -321,25 +321,25 @@ form .clearfix.success { } .add-on { position: relative; - background: #f5f5f5; - border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: @baseLineHeight; - padding: 4px 4px 4px 5px; margin-right: -1px; + padding: 4px 4px 4px 5px; font-weight: normal; line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; + background-color: #f5f5f5; + border: 1px solid #ccc; .border-radius(3px 0 0 3px); } .active { - background: lighten(@green, 30); + background-color: lighten(@green, 30); border-color: @green; } } @@ -354,9 +354,9 @@ form .clearfix.success { .border-radius(3px 0 0 3px); } .add-on { - .border-radius(0 3px 3px 0); margin-right: 0; margin-left: -1px; + .border-radius(0 3px 3px 0); } } diff --git a/lib/mixins.less b/lib/mixins.less index 670b17384..d77ecf621 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -9,9 +9,9 @@ &:before, &:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } &:after { clear: both; @@ -27,8 +27,8 @@ // Sizing shortcuts .size(@height: 5px, @width: 5px) { - height: @height; width: @width; + height: @height; } .square(@size: 5px) { .size(@size, @size); @@ -197,14 +197,16 @@ } .border(@color: @white, @alpha: 1) { border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } } // Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); } @@ -274,7 +276,6 @@ // Opacity .opacity(@opacity: 100) { filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; -moz-opacity: @opacity / 100; opacity: @opacity / 100; } diff --git a/lib/modals.less b/lib/modals.less index 672431beb..53d6cd408 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -2,13 +2,13 @@ // ------ .modal-backdrop { - background-color: @black; position: fixed; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; z-index: 10000; + background-color: @black; // Fade for backdrop &.fade { opacity: 0; } } @@ -39,20 +39,20 @@ &.fade.in { top: 50%; } } .modal-header { - border-bottom: 1px solid #eee; padding: 5px 15px; + border-bottom: 1px solid #eee; } .modal-body { padding: 15px; } .modal-footer { - background-color: #f5f5f5; padding: 14px 15px 15px; + margin-bottom: 0; + background-color: #f5f5f5; border-top: 1px solid #ddd; .border-radius(0 0 6px 6px); .box-shadow(inset 0 1px 0 @white); .clearfix(); - margin-bottom: 0; .btn { float: right; margin-left: 5px; diff --git a/lib/pagination.less b/lib/pagination.less index d97a1bab3..d82a0bbd0 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -19,11 +19,11 @@ float: left; padding: 0 14px; line-height: (@baseLineHeight * 2) - 2; + text-decoration: none; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0,0,0,.15); *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; } a:hover, .active a { @@ -31,8 +31,8 @@ } .disabled a, .disabled a:hover { - background-color: transparent; color: @grayLight; + background-color: transparent; } .next a { border: 0; diff --git a/lib/patterns.less b/lib/patterns.less index bc1229bd9..2fcc4f2b3 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -33,10 +33,10 @@ // Hover and active states .brand a:hover, ul .active > a { - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; + background-color: @navBarBgStart; + background-color: rgba(255,255,255,.05); } // Website or project name .brand { @@ -44,18 +44,18 @@ display: block; padding: 8px 20px 12px; margin-left: -20px; // negative indent to left-align the text down the page - color: @white; font-size: 20px; font-weight: 200; line-height: 1; + color: @white; } // Plain text in topbar p { margin: 0; line-height: 40px; a:hover { - background-color: transparent; color: @white; + background-color: transparent; } } } @@ -63,16 +63,16 @@ // Navbar search .navbar-search { position: relative; + float: left; margin-top: 6px; margin-bottom: 0; - float: left; .search-query { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); padding: 4px 9px; + #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); + background-color: #444; + background-color: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); @@ -87,20 +87,20 @@ } // Hover states &:hover { + color: @white; background-color: @grayLight; background-color: rgba(255,255,255,.5); - color: @white; } // Focus states (we use .focused since IE8 and down doesn't support :focus) &:focus, &.focused { - outline: 0; - background-color: @white; + padding: 5px 10px; color: @grayDark; text-shadow: 0 1px 0 @white; + background-color: @white; border: 0; - padding: 5px 10px; .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; } } } @@ -120,8 +120,8 @@ .navbar-fixed { position: fixed; top: 0; - left: 0; right: 0; + left: 0; z-index: 10000; } @@ -133,11 +133,11 @@ // Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { + position: relative; + left: 0; display: block; float: left; margin: 0 10px 0 0; - position: relative; - left: 0; > li { display: block; float: left; @@ -212,37 +212,36 @@ } // The link that is clicked to toggle the dropdown .dropdown-toggle:after { + display: inline-block; width: 0; height: 0; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; margin-top: 8px; margin-left: 6px; + text-indent: -99999px; + vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @white; .opacity(30); + content: "↓"; } .dropdown:hover .dropdown-toggle:after { .opacity(100); } // The dropdown menu (ul) .dropdown-menu { - background-color: @white; - float: left; - display: none; // None by default, but block on "open" of the menu position: absolute; top: 40px; z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu min-width: 160px; max-width: 220px; _width: 160px; + padding: 6px 0; margin-left: 0; // override default ul styles margin-right: 0; - padding: 6px 0; - zoom: 1; // do we need this? + background-color: @white; border-color: #999; border-color: rgba(0,0,0,.2); border-style: solid; @@ -250,6 +249,7 @@ .border-radius(0 0 6px 6px); .box-shadow(0 2px 4px rgba(0,0,0,.2)); .background-clip(padding-box); + zoom: 1; // do we need this? // Unfloat any li's to make them stack li { @@ -279,9 +279,9 @@ text-shadow: 0 1px 0 @white; // Hover state &:hover { - #gradient > .vertical(#eeeeee, #dddddd); color: @grayDark; text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); .box-shadow(@shadow); } @@ -309,9 +309,9 @@ // ------------ .hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; padding: 60px; + margin-bottom: 30px; + background-color: #f5f5f5; .border-radius(6px); h1 { margin-bottom: 0; @@ -326,8 +326,8 @@ } } footer { - margin-top: @baseLineHeight - 1; padding-top: @baseLineHeight - 1; + margin-top: @baseLineHeight - 1; border-top: 1px solid #eee; } @@ -380,24 +380,24 @@ footer { // Base .btn styles .btn { // Button Base - cursor: pointer; display: inline-block; - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; font-size: @baseFontSize; line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient border: 1px solid #ccc; border-bottom-color: #bbb; .border-radius(4px); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); + cursor: pointer; &:hover { - background-position: 0 -15px; color: #333; text-decoration: none; + background-position: 0 -15px; } // Focus state for keyboard and accessibility @@ -438,9 +438,9 @@ footer { // Button Sizes &.large { + padding: 9px 14px 9px; font-size: @baseFontSize + 2px; line-height: normal; - padding: 9px 14px 9px; .border-radius(6px); } &.small { @@ -516,10 +516,10 @@ input[type=submit].btn { // ----------- .close { float: right; - color: @black; font-size: 20px; font-weight: bold; line-height: @baseLineHeight * .75; + color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); &:hover { @@ -539,8 +539,8 @@ input[type=submit].btn { padding: 7px 15px; margin-bottom: @baseLineHeight; color: @grayDark; - .gradientBar(#fceec1, #eedc94); // warning by default text-shadow: 0 1px 0 rgba(255,255,255,.5); + .gradientBar(#fceec1, #eedc94); // warning by default border-width: 1px; border-style: solid; .border-radius(4px); @@ -569,10 +569,10 @@ input[type=submit].btn { } &.block-message { + padding: 14px; background-image: none; background-color: lighten(#fceec1, 5%); - .reset-filter(); - padding: 14px; + .reset-filter(); // undo gradient for IE9 border-color: #fceec1; .box-shadow(none); ul, p { @@ -615,10 +615,10 @@ input[type=submit].btn { // ----- .well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0,0,0,.05); .border-radius(4px); @@ -655,11 +655,11 @@ input[type=submit].btn { .label { padding: 1px 3px 2px; - background-color: @grayLight; font-size: @baseFontSize * .75; font-weight: bold; color: @white; text-transform: uppercase; + background-color: @grayLight; .border-radius(3px); &.important { background-color: #c43c35; } &.warning { background-color: @orange; } @@ -667,14 +667,3 @@ input[type=submit].btn { &.notice { background-color: lighten(@blue, 25%); } } - - - -// MISC -// ---- -.pull-right { - float: right; -} -.pull-left { - float: left; -} \ No newline at end of file diff --git a/lib/popovers.less b/lib/popovers.less index ed335eeed..570bc906c 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -6,8 +6,8 @@ top: 0; left: 0; z-index: 1000; - padding: 5px; display: none; + padding: 5px; &.above .arrow { #popoverArrow > .above(); } &.right .arrow { #popoverArrow > .right(); } &.below .arrow { #popoverArrow > .below(); } @@ -18,24 +18,24 @@ height: 0; } .inner { - background-color: @black; - background-color: rgba(0,0,0,.8); padding: 3px; - overflow: hidden; width: 280px; + overflow: hidden; + background-color: @black; + background-color: rgba(0,0,0,.8); .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); } .title { - background-color: #f5f5f5; padding: 9px 15px; line-height: 1; - .border-radius(3px 3px 0 0); + background-color: #f5f5f5; border-bottom:1px solid #eee; + .border-radius(3px 3px 0 0); } .content { - background-color: @white; padding: 14px; + background-color: @white; .border-radius(0 0 3px 3px); .background-clip(padding-box); p, ul, ol { diff --git a/lib/reset.less b/lib/reset.less index 983f14f3d..8bff57335 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -75,9 +75,9 @@ audio:not([controls]) { // Source: http://github.com/necolas/normalize.css sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } sup { @@ -91,8 +91,8 @@ sub { // ------------------------- // Source: http://github.com/necolas/normalize.css img { - border: 0; - -ms-interpolation-mode: bicubic; + border: 0; + -ms-interpolation-mode: bicubic; } // Forms @@ -104,20 +104,20 @@ button, input, select, textarea { - font-size: 100%; margin: 0; + font-size: 100%; vertical-align: baseline; *vertical-align: middle; } button, input { - line-height: normal; // FF3/4 have !important on line-height in UA stylesheet *overflow: visible; // Inner spacing ie IE6/7 + line-height: normal; // FF3/4 have !important on line-height in UA stylesheet } button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 - border: 0; padding: 0; + border: 0; } button, input[type="button"], diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7b8aa369a..179ef2638 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -8,12 +8,12 @@ // ----------------- body { - background-color: @white; margin: 0; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; color: @grayDark; + background-color: @white; } // Container (centered, fixed-width layouts) @@ -52,10 +52,10 @@ body { // Links a { + font-weight: inherit; + line-height: inherit; color: @linkColor; text-decoration: none; - line-height: inherit; - font-weight: inherit; &:hover { color: @linkColorHover; text-decoration: underline; diff --git a/lib/tables.less b/lib/tables.less index b02087fbd..4aed466b1 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -130,32 +130,32 @@ table { .header { cursor: pointer; &:after { - content: ""; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #000 transparent; + content: ""; visibility: hidden; } } // Style the sorted column headers (THs) .headerSortUp, .headerSortDown { - background-color: rgba(141,192,219,.25); text-shadow: 0 1px 1px rgba(255,255,255,.75); + background-color: rgba(141,192,219,.25); } // Style the ascending (reverse alphabetical) column header .header:hover { &:after { - visibility:visible; + visibility: visible; } } // Style the descending (alphabetical) column header .headerSortDown, .headerSortDown:hover { &:after { - visibility:visible; + visibility: visible; .opacity(60); } } diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 7e6c0bf39..3ff08a676 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -1,8 +1,8 @@ // Tabs and Pills .tabs, .pills { - margin: 0 0 20px; padding: 0; + margin: 0 0 20px; list-style: none; .clearfix(); > li { @@ -183,8 +183,8 @@ // Pills .pills { a { - margin: 5px 3px 5px 0; padding: 0 15px; + margin: 5px 3px 5px 0; line-height: 30px; text-shadow: 0 1px 1px @white; .border-radius(15px); @@ -208,9 +208,6 @@ } // Tabbable areas -.tab-content, -.pill-content { -} .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; diff --git a/lib/twipsy.less b/lib/twipsy.less index 5d168db3e..4193eda5f 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -2,12 +2,12 @@ // ------ .twipsy { - display: block; position: absolute; + z-index: 1000; + display: block; visibility: visible; padding: 5px; font-size: 11px; - z-index: 1000; .opacity(80); &.fade.in { .opacity(80); @@ -18,12 +18,12 @@ &.right .twipsy-arrow { #popoverArrow > .right(); } } .twipsy-inner { + max-width: 200px; padding: 3px 8px; - background-color: @black; color: white; text-align: center; - max-width: 200px; text-decoration: none; + background-color: @black; .border-radius(4px); } .twipsy-arrow { diff --git a/lib/type.less b/lib/type.less index f5b5ff272..8e25fd9c5 100644 --- a/lib/type.less +++ b/lib/type.less @@ -7,10 +7,10 @@ // --------- p { + margin-bottom: @baseLineHeight / 2; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; - margin-bottom: @baseLineHeight / 2; small { font-size: @baseFontSize - 2; color: @grayLight; @@ -93,8 +93,8 @@ li { color: @grayDark; } ul.unstyled { - list-style: none; margin-left: 0; + list-style: none; } // Description Lists @@ -145,12 +145,12 @@ abbr { // Blockquotes blockquote { + padding-left: 15px; margin-bottom: @baseLineHeight; border-left: 5px solid #eee; - padding-left: 15px; p { - #font > .shorthand(300,16px,@baseLineHeight * 1.25); margin-bottom: 0; + #font > .shorthand(300,16px,@baseLineHeight * 1.25); } small { display: block; @@ -174,8 +174,8 @@ blockquote { // Addresses address { display: block; - line-height: @baseLineHeight; margin-bottom: @baseLineHeight; + line-height: @baseLineHeight; } // Inline and block code styles @@ -188,16 +188,16 @@ pre { .border-radius(3px); } code { - background-color: lighten(@orange, 40%); padding: 1px 3px; + background-color: lighten(@orange, 40%); } pre { - background-color: #f5f5f5; display: block; padding: (@baseLineHeight - 1) / 2; margin: 0 0 @baseLineHeight / 2; - line-height: @baseLineHeight; font-size: 12px; + line-height: @baseLineHeight; + background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); -- cgit v1.2.3 From bc65b58551575c9dfb2e4d9f4f7af97009e39432 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 20 Nov 2011 20:58:04 -0800 Subject: merge in js from 1.4... start working through js docs --- lib/twipsy.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/twipsy.less b/lib/twipsy.less index 4193eda5f..3fa21fa01 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -8,8 +8,8 @@ visibility: visible; padding: 5px; font-size: 11px; - .opacity(80); - &.fade.in { + .opacity(0); + &.in { .opacity(80); } &.above .twipsy-arrow { #popoverArrow > .above(); } -- cgit v1.2.3 From b2650859d6c6dcb0665311b6e983d230fee1111f Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 24 Nov 2011 14:43:26 -0800 Subject: update buttons js for button groups --- lib/patterns.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 2fcc4f2b3..01b32cd90 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -415,6 +415,7 @@ footer { .transition(.1s linear all); // Active and Disabled states + &.active, &:active { @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); -- cgit v1.2.3 From 98fddaa3557b1c872f1e585d579ec7e5e989e95d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 25 Nov 2011 17:23:14 -0800 Subject: new plugin "collapse" for collapsible lists and "accordion" like support --- lib/patterns.less | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 01b32cd90..1b4c5a941 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -631,14 +631,6 @@ input[type=submit].btn { } - - - - - - - - // PATTERN ANIMATIONS // ------------------ @@ -650,6 +642,21 @@ input[type=submit].btn { } } +.collapse { + position:relative; + overflow:hidden; + &.height { + .transition(height .35s ease); + height: 0; + &.in { height: auto; } + } + &.width { + .transition(width .35s ease); + width: 0; + &.in { width: auto; } + } +} + // LABELS // ------ -- cgit v1.2.3 From 3157de8d1d4b69c0f5152b4a784bd185f76c9ac4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 25 Nov 2011 21:34:55 -0800 Subject: clean up comments for better built files --- lib/forms.less | 7 +++---- lib/mixins.less | 6 +++--- lib/patterns.less | 19 ++++++------------- lib/reset.less | 8 +++++--- lib/responsive.less | 6 +++--- lib/scaffolding.less | 8 ++++---- lib/tables.less | 8 ++++---- lib/type.less | 6 +++--- lib/variables.less | 6 +++--- 9 files changed, 34 insertions(+), 40 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 845eec185..39c293799 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -1,7 +1,6 @@ -/* Forms.less - * Base styles for various input types, form layouts, and states - * ------------------------------------------------------------- */ - +// Forms.less +// Base styles for various input types, form layouts, and states +// ------------------------------------------------------------- // GENERAL STYLES diff --git a/lib/mixins.less b/lib/mixins.less index d77ecf621..0effdfa37 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -1,6 +1,6 @@ -/* Mixins.less - * Snippets of reusable CSS to develop faster and keep code readable - * ----------------------------------------------------------------- */ +// Mixins.less +// Snippets of reusable CSS to develop faster and keep code readable +// ----------------------------------------------------------------- // Clearfix for clearing floats like a boss h5bp.com/q diff --git a/lib/patterns.less b/lib/patterns.less index 1b4c5a941..15c3c9c06 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -1,6 +1,6 @@ -/* Patterns.less - * Repeatable UI elements outside the base styles provided from the scaffolding - * ---------------------------------------------------------------------------- */ +// Patterns.less +// Repeatable UI elements outside the base styles provided from the scaffolding +// ---------------------------------------------------------------------------- // NAVBAR (FIXED AND STATIC) @@ -643,18 +643,11 @@ input[type=submit].btn { } .collapse { + .transition(height .35s ease); position:relative; overflow:hidden; - &.height { - .transition(height .35s ease); - height: 0; - &.in { height: auto; } - } - &.width { - .transition(width .35s ease); - width: 0; - &.in { width: auto; } - } + height: 0; + &.in { height: auto; } } diff --git a/lib/reset.less b/lib/reset.less index 8bff57335..c95c7b04c 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -1,6 +1,8 @@ -/* Reset.less - * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). - * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ +// Reset.less +// Props to Eric Meyer (meyerweb.com) for his CSS reset file. +// We're using an adapted version here that cuts out some of the reset HTML +// elements we will never need here (i.e., dfn, samp, etc). +// ------------------------------------------------------------------------ // ERIC MEYER RESET diff --git a/lib/responsive.less b/lib/responsive.less index 75c33b1a8..f63f90c98 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -1,6 +1,6 @@ -/* Responsive.less - * For phone and tablet devices - * ------------------------------------------------------------- */ +// Responsive.less +// For phone and tablet devices +// ------------------------------------------------------------- // UP TO LANDSCAPE PHONE diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 179ef2638..3e231aae5 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -1,7 +1,7 @@ -/* - * Scaffolding - * Basic and global styles for generating a grid system, structural layout, and page templates - * ------------------------------------------------------------------------------------------- */ +// +// Scaffolding +// Basic and global styles for generating a grid system, structural layout, and page templates +// ------------------------------------------------------------------------------------------- // STRUCTURAL LAYOUT diff --git a/lib/tables.less b/lib/tables.less index 4aed466b1..22a319918 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -1,7 +1,7 @@ -/* - * Tables.less - * Tables for, you guessed it, tabular data - * ---------------------------------------- */ +// +// Tables.less +// Tables for, you guessed it, tabular data +// ---------------------------------------- // BASELINE STYLES diff --git a/lib/type.less b/lib/type.less index 8e25fd9c5..407a20ec2 100644 --- a/lib/type.less +++ b/lib/type.less @@ -1,6 +1,6 @@ -/* Typography.less - * Headings, body text, lists, code, and more for a versatile and durable typography system - * ---------------------------------------------------------------------------------------- */ +// Typography.less +// Headings, body text, lists, code, and more for a versatile and durable typography system +// ---------------------------------------------------------------------------------------- // BODY TEXT diff --git a/lib/variables.less b/lib/variables.less index 92d09de70..caa9c0f60 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -1,6 +1,6 @@ -/* Variables.less - * Variables to customize the look and feel of Bootstrap - * ----------------------------------------------------- */ +// Variables.less +// Variables to customize the look and feel of Bootstrap +// ----------------------------------------------------- // LINK COLORS -- cgit v1.2.3 From d48027d49567c2d38211c357d6fb8d6a5a9e8a7b Mon Sep 17 00:00:00 2001 From: Jeff Adams Date: Tue, 29 Nov 2011 11:12:32 -0600 Subject: add input width calculation fix from #408 to the 2.0 branch --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 39c293799..5de55e727 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -145,7 +145,7 @@ select:focus { .formColumns(@columnSpan: 1) { display: inline-block; float: none; - width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1)); + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } input, -- cgit v1.2.3 From 1da19bf65f9affec06ba6e1f6e5f545a8e2ea457 Mon Sep 17 00:00:00 2001 From: Jeff Adams Date: Tue, 29 Nov 2011 14:06:31 -0600 Subject: scope form feedback states to .control-group instead of unused .clearfix --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 39c293799..23cdb28c9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,15 +220,15 @@ textarea[readonly] { } } // Error -form .clearfix.error { +.control-group.error { .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); } // Warning -form .clearfix.warning { +.control-group.warning { .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); } // Success -form .clearfix.success { +.control-group.success { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } -- cgit v1.2.3 From b36df463108e2e4df8c389a06f577823564788d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 29 Nov 2011 22:35:03 -0800 Subject: misc docs updates, revamped tables CSS save for grid columns and tablesorter options --- lib/tables.less | 96 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 47 insertions(+), 49 deletions(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 4aed466b1..c8cda1cf9 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -4,45 +4,41 @@ * ---------------------------------------- */ + // BASELINE STYLES // --------------- table { width: 100%; - padding: 0; margin-bottom: @baseLineHeight; - font-size: @baseFontSize; - border-collapse: collapse; - th, - td { - padding: 10px 10px 9px; - line-height: @baseLineHeight; - text-align: left; - } - th { - padding-top: 9px; - font-weight: bold; - vertical-align: middle; - } - td { - vertical-align: top; - border-top: 1px solid #ddd; - } - // When scoped to row, fix th in tbody - tbody th { - border-top: 1px solid #ddd; - vertical-align: top; - } +} +th, +td { + padding: 8px; + line-height: @baseLineHeight; + text-align: left; + border-bottom: 1px solid #ddd; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + vertical-align: top; +} +tbody tr:last-child th, +tbody tr:last-child td { + border-bottom: 0; } -// CONDENSED VERSION -// ----------------- +// CONDENSED TABLE W/ HALF PADDING +// ------------------------------- .condensed-table { th, td { - padding: 5px 5px 4px; + padding: 4px 5px; } } @@ -53,13 +49,14 @@ table { .bordered-table { border: 1px solid #ddd; border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; /* IE7, collapse table to remove spacing */ .border-radius(4px); th + th, td + td, - th + td { + th + td, + td + th { border-left: 1px solid #ddd; } + // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { .border-radius(4px 0 0 0); @@ -68,15 +65,34 @@ table { tbody:first-child tr:first-child td:last-child { .border-radius(0 4px 0 0); } - tbody tr:last-child td:first-child { + // For first th or td in the first row in the first thead or tbody + thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child { .border-radius(0 0 0 4px); } - tbody tr:last-child td:last-child { + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child { .border-radius(0 0 4px 0); } } +// ZEBRA-STRIPING +// -------------- + +// Default zebra-stripe styles (alternating gray and transparent backgrounds) +.striped-table { + tbody { + tr:nth-child(odd) td, + tr:nth-child(odd) th { + background-color: #f9f9f9; + } + } +} + + + +/* // ---------------- // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border @@ -104,24 +120,6 @@ table { } -// ZEBRA-STRIPING -// -------------- - -// Default zebra-stripe styles (alternating gray and transparent backgrounds) -.striped-table { - tbody { - tr:nth-child(odd) td, - tr:nth-child(odd) th { - background-color: #f9f9f9; - } - tr:hover td, - tr:hover th { - background-color: #f5f5f5; - } - } -} - - // TABLESORTER // ----------- @@ -225,4 +223,4 @@ table { .headerSortDown.purple { background-color: lighten(@purple, 40%); } -} \ No newline at end of file +}*/ \ No newline at end of file -- cgit v1.2.3 From 61e84d8762d79befb2d75685705fd4e451a609fe Mon Sep 17 00:00:00 2001 From: Evan Meagher Date: Tue, 29 Nov 2011 23:16:09 -0800 Subject: Add vertical nav divider. --- lib/patterns.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 15c3c9c06..a2d512339 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -157,6 +157,15 @@ background-color: #222; background-color: rgba(0,0,0,.5); } + // Dividers (basically a vertical hr) + .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; + } // Secondary (floated right) nav in topbar &.secondary-nav { -- cgit v1.2.3 From 90c190d4efedd4080c574b34bffdf54cd5b9ed88 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 29 Nov 2011 23:48:27 -0800 Subject: updates to add warning for bordered tables to docs, fix to spacing on prettyprint pre blocks --- lib/type.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 407a20ec2..bdc99acdf 100644 --- a/lib/type.less +++ b/lib/type.less @@ -205,6 +205,11 @@ pre { white-space: pre-wrap; word-break: break-all; + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: @baseLineHeight; + } + // Account for some code outputs that place code tags in pre tags code { padding: 0; -- cgit v1.2.3 From f2c40ee24d0caa26e79ed206370858918c603419 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 30 Nov 2011 00:39:38 -0800 Subject: adding step nav to components --- lib/tabs-pills.less | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'lib') diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 3ff08a676..7fc73f69c 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -216,3 +216,46 @@ .pill-content > .active { display: block; } + + +// Step nav +.step-nav { + position: relative; // for prev/next links + margin: 0 0 @baseLineHeight; + list-style: none; + line-height: 30px; + text-align: center; + background-color: #f5f5f5; + .border-radius(15px); + li { + display: inline; + color: @grayLight; + } + // prev/next links + .prev, + .next { + position: absolute; + top: 6px; + } + .prev { + left: 15px; + } + .next { + right: 15px; + } + // indicators for each step/page/item/etc + .dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 3px; + text-indent: -999em; + background-color: @grayLight; + .border-radius(5px); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); + } + .dot:hover, + .active .dot { + background-color: @grayDark; + } +} -- cgit v1.2.3 From bc51c15709469fd0c2e78886a15e849626a8f191 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 30 Nov 2011 01:00:55 -0800 Subject: adding temp idea for subnav to docs --- lib/tabs-pills.less | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'lib') diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 7fc73f69c..e9b58d04a 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -259,3 +259,35 @@ background-color: @grayDark; } } + + +// Subnav +// STILL A WIP +.subnav { + position: relative; + #gradient > .vertical(#f5f5f5, #eeeeee); + .border-radius(6px); + a { + padding: 10px 15px; + color: @linkColor; + text-shadow: 0 1px 0 #fff; + border-left: 1px solid #f9f9f9; + border-right: 1px solid #e5e5e5; + &:hover { + color: @linkColorHover; + background-color: #eee; + } + } + li:first-child a { + border-left: 0; + .border-radius(6px 0 0 6px); + } + li:last-child a { + border-right: 0; + .border-radius(0 6px 6px 0); + } + ul .active > a { + color: @grayDark; + background-color: #eee; + } +} \ No newline at end of file -- cgit v1.2.3 From b12b71bf7ca76437a532122d8efff59506b61530 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 11:32:07 -0800 Subject: updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings --- lib/patterns.less | 3 -- lib/responsive.less | 90 ++++++++++++++++++++++++++++++++++++++--------------- lib/tabs-pills.less | 7 +++-- 3 files changed, 69 insertions(+), 31 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 15c3c9c06..cd2fdc01e 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -13,7 +13,6 @@ // Common styles .navbar { - height: @navBarHeight; overflow: visible; } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present @@ -303,8 +302,6 @@ - - // PAGE HEADERS // ------------ diff --git a/lib/responsive.less b/lib/responsive.less index f63f90c98..e0772b111 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,26 +3,21 @@ // ------------------------------------------------------------- +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5BP +.hidden { + display: none; + visibility: hidden; +} + + // UP TO LANDSCAPE PHONE // --------------------- @media (max-width: 480px) { - // Remove width from containers - .container { - width: auto; - padding: 0 15px; - } - // Undo negative margin on rows - .row { - margin-left: 0; - } - // Make all columns even - [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } // Resize modals .modal { width: auto; @@ -30,36 +25,35 @@ } // Remove the horizontal form styles - .form-horizontal .control-group > label { + .horizontal-form .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content - .form-horizontal .controls { + .horizontal-form .controls { margin-left: 0; } // Move the options list down to align with labels - .form-horizontal .control-list { + .horizontal-form .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { + .horizontal-form .form-actions { padding-left: 0; } - } // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // -------------------------------------------------- -@media (min-width: 480px) and (max-width: 768px) { +@media (max-width: 768px) { // Remove width from containers .container { width: auto; - padding: 0 10px; + padding: 0 20px; } // Undo negative margin on rows .row { @@ -72,6 +66,54 @@ width: auto; margin: 0; } + + // Make the nav work for small devices + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .navbar ul .active > a { + background-color: transparent; + } + .nav > .active a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + .nav > .active a:hover { + background-color: rgba(255,255,255,.05); + } } @@ -129,7 +171,6 @@ } -/* // LARGE DESKTOP & UP // ------------------ @@ -185,4 +226,3 @@ .offset12 { .offset(12); } } -*/ \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index e9b58d04a..ad6459c0d 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -264,11 +264,12 @@ // Subnav // STILL A WIP .subnav { - position: relative; #gradient > .vertical(#f5f5f5, #eeeeee); - .border-radius(6px); + @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5); + .box-shadow(@shadow); a { - padding: 10px 15px; + padding: 8px 10px; + font-size: 12px; color: @linkColor; text-shadow: 0 1px 0 #fff; border-left: 1px solid #f9f9f9; -- cgit v1.2.3 From 7b810bf9a617e1f02e073aafcc70857dc915ee59 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 12:10:01 -0800 Subject: update js in footer, add max-width to img --- lib/reset.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'lib') diff --git a/lib/reset.less b/lib/reset.less index c95c7b04c..200215456 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -93,6 +93,8 @@ sub { // ------------------------- // Source: http://github.com/necolas/normalize.css img { + max-width: 100%; + height: auto; border: 0; -ms-interpolation-mode: bicubic; } -- cgit v1.2.3 From 97b285896f50bed4a66b00a70ed67eb3224bc7f3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 12:51:54 -0800 Subject: help tables not look like shit on mobile maybe? also fix bordered table example --- lib/reset.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/reset.less b/lib/reset.less index 200215456..28638b6b3 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -10,7 +10,11 @@ html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } -table { border-collapse: collapse; border-spacing: 0; } +table { + max-width: 100%; + border-collapse: collapse; + border-spacing: 0; +} ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } -- cgit v1.2.3 From 5c8df1d2858c3d5f2cc65a80acaef5312b1ae87f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 14:34:38 -0800 Subject: updated index page to add featured sites, more docs tweaks --- lib/type.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index bdc99acdf..b2ba73b86 100644 --- a/lib/type.less +++ b/lib/type.less @@ -116,9 +116,10 @@ dl { // Horizontal rules hr { - margin: 20px 0 19px; + margin: @baseLineHeight * 1.5 0; border: 0; - border-bottom: 1px solid #eee; + border-top: 1px solid #e5e5e5; + border-bottom: 1px solid #fff; } // Emphasis -- cgit v1.2.3 From 4d55356e9b476cbfea5eb2ea01099dc19a5fc5f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 14:39:23 -0800 Subject: remove uber large responsive stuff --- lib/responsive.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index e0772b111..c74f6b98e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -173,7 +173,7 @@ // LARGE DESKTOP & UP // ------------------ - +/* @media (min-width: 1210px) { // Reset grid variables @@ -226,3 +226,4 @@ .offset12 { .offset(12); } } +*/ -- cgit v1.2.3 From d587845149471ad9ed07bc57c1a8652c54d17c55 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Dec 2011 22:21:08 -0800 Subject: tweaks and increase specificity of pills and active classes --- lib/tabs-pills.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index ad6459c0d..26c62c950 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -182,7 +182,7 @@ // Pills .pills { - a { + > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; @@ -195,7 +195,7 @@ background-color: @linkColorHover; } } - .active a { + .active > a { color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); background-color: @linkColor; -- cgit v1.2.3 From d2e56ad53d5d5c93cd6206a6829ee2054f583c5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Dec 2011 22:29:49 -0800 Subject: unstyle image inputs --- lib/forms.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e85b9f201..8d4369b18 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -53,7 +53,8 @@ select, .border-radius(3px); } -/* Mini reset for unique input types */ +// Mini reset for unique input types +input[type=image], input[type=checkbox], input[type=radio] { width: auto; @@ -98,6 +99,11 @@ select[multiple] { background-color: @white; // Fixes Chromium bug? } +// Remove shadow from image inputs +input[type=image] { + .box-shadow(none); +} + textarea { height: auto; } -- cgit v1.2.3 From 95048c271eb4166a4e22ab1f0ff6d69bade7d62b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Dec 2011 01:03:57 -0800 Subject: fix specificity on pills --- lib/tabs-pills.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 26c62c950..23ba9ccfa 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -182,7 +182,7 @@ // Pills .pills { - > a { + > li > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; -- cgit v1.2.3 From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: mostly docs updates, but also some bug fixes per github issues --- lib/forms.less | 6 +++++- lib/media-grids.less | 49 ++++++++++++++++++++++++++++--------------------- 2 files changed, 33 insertions(+), 22 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 8d4369b18..a73e6f545 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,10 +93,14 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } +// Chrome on Linux needs background color +select { + background-color: @white; +} + // Make multiple select elements height not fixed select[multiple] { height: inherit; - background-color: @white; // Fixes Chromium bug? } // Remove shadow from image inputs diff --git a/lib/media-grids.less b/lib/media-grids.less index 7ceade651..12626df3f 100644 --- a/lib/media-grids.less +++ b/lib/media-grids.less @@ -1,26 +1,33 @@ -// MEDIA GRIDS -// ----------- +// THUMBNAILS +// ---------- -.media-grid { +.thumbnails { margin-left: -20px; margin-bottom: 0; + list-style: none; .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } +} +.thumbnails > li { + float: left; + margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); +} +// Add a hover state for linked versions only +a.thumbnail:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); +} +// Images and captions +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; } -- cgit v1.2.3 From c4364285e456013c4b66308fea86e0f1fb852817 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 20 Dec 2011 22:12:23 -0800 Subject: add default margin for popover and twipsy --- lib/popovers.less | 6 +++++- lib/twipsy.less | 8 +++++--- 2 files changed, 10 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/popovers.less b/lib/popovers.less index 570bc906c..ff875eaff 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -8,10 +8,14 @@ z-index: 1000; display: none; padding: 5px; + &.above { margin-top: -5px; } + &.right { margin-left: 5px; } + &.below { margin-top: 5px; } + &.left { margin-left: -5px; } &.above .arrow { #popoverArrow > .above(); } &.right .arrow { #popoverArrow > .right(); } &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; diff --git a/lib/twipsy.less b/lib/twipsy.less index 3fa21fa01..05f121a5d 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -9,9 +9,11 @@ padding: 5px; font-size: 11px; .opacity(0); - &.in { - .opacity(80); - } + &.in { .opacity(80); } + &.above { margin-top: -2px; } + &.right { margin-left: 2px; } + &.below { margin-top: 2px; } + &.left { margin-left: -2px; } &.above .twipsy-arrow { #popoverArrow > .above(); } &.left .twipsy-arrow { #popoverArrow > .left(); } &.below .twipsy-arrow { #popoverArrow > .below(); } -- cgit v1.2.3 From 8a7abc7493a07935d4d91b2cc56a82523fd53970 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:00:50 -0600 Subject: docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug --- lib/forms.less | 1 + lib/mixins.less | 1 - lib/patterns.less | 6 ++++++ 3 files changed, 7 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index a73e6f545..64e77fdb4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -325,6 +325,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + overflow: hidden; input { .border-radius(0 3px 3px 0); } diff --git a/lib/mixins.less b/lib/mixins.less index 0effdfa37..251173fce 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -205,7 +205,6 @@ // Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); diff --git a/lib/patterns.less b/lib/patterns.less index 558f3ca45..ec717e030 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -575,6 +575,12 @@ input[type=submit].btn { .box-shadow(0 1px 0 rgba(255,255,255,.25)); } + &.error, + &.success, + &.info { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + &.block-message { padding: 14px; background-image: none; -- cgit v1.2.3 From 20aecb983838422c7b43e20960b10d4d79fefaa3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:22:20 -0600 Subject: updated all docs to jQuery 1.7, move all docs JS to application.js, and move dropdowns css to dedicated file --- lib/bootstrap.less | 1 + lib/dropdowns.less | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/patterns.less | 3 +- 3 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 lib/dropdowns.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index ffad35913..a871a7cd4 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,6 +27,7 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @import "pagination.less"; diff --git a/lib/dropdowns.less b/lib/dropdowns.less new file mode 100644 index 000000000..7436f6a2c --- /dev/null +++ b/lib/dropdowns.less @@ -0,0 +1,94 @@ +// Dropdown Menus +// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropdown { + position: relative; +} +// The link that is clicked to toggle the dropdown +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(30); + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; // override default ul styles + margin-right: 0; + background-color: @white; + border-color: #999; + border-color: rgba(0,0,0,.2); + border-style: solid; + border-width: 0 1px 1px; + .border-radius(0 0 6px 6px); + .box-shadow(0 2px 4px rgba(0,0,0,.2)); + .background-clip(padding-box); + zoom: 1; // do we need this? + + // Unfloat any li's to make them stack + li { + float: none; + display: block; + background-color: none; + } + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid @white; + } +} + +.topbar .dropdown-menu, .dropdown-menu { + // Links within the dropdown menu + a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: @gray; + text-shadow: 0 1px 0 @white; + // Hover state + &:hover { + color: @grayDark; + text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); + @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + .box-shadow(@shadow); + } + } +} + +// Open state for the dropdown +.dropdown.open { + .dropdown-toggle { + color: @white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} diff --git a/lib/patterns.less b/lib/patterns.less index ec717e030..44c427adf 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -401,7 +401,7 @@ footer { cursor: pointer; &:hover { - color: #333; + color: @grayDark; text-decoration: none; background-position: 0 -15px; } @@ -414,6 +414,7 @@ footer { // Primary Button Type &.primary { color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); .gradientBar(@blue, @blueDark) } -- cgit v1.2.3 From c854ed167ce37d6a008723c78f2e6336211fff69 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:26:21 -0600 Subject: rename media grid to thumbnails, recompile bootstrap, fix examples for mobile phones --- lib/bootstrap.less | 2 +- lib/media-grids.less | 33 --------------------------------- lib/thumbnails.less | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 34 deletions(-) delete mode 100644 lib/media-grids.less create mode 100644 lib/thumbnails.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index a871a7cd4..e05a966ad 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -34,7 +34,7 @@ @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; -@import "media-grids.less"; +@import "thumbnails.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/media-grids.less b/lib/media-grids.less deleted file mode 100644 index 12626df3f..000000000 --- a/lib/media-grids.less +++ /dev/null @@ -1,33 +0,0 @@ -// THUMBNAILS -// ---------- - -.thumbnails { - margin-left: -20px; - margin-bottom: 0; - list-style: none; - .clearfix(); -} -.thumbnails > li { - float: left; - margin: 0 0 20px 20px; -} -.thumbnail { - display: block; - line-height: 1; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); -} -// Add a hover state for linked versions only -a.thumbnail:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); -} -// Images and captions -.thumbnail > img { - display: block; - margin: 4px; -} -.thumbnail .caption { - padding: 9px; -} diff --git a/lib/thumbnails.less b/lib/thumbnails.less new file mode 100644 index 000000000..12626df3f --- /dev/null +++ b/lib/thumbnails.less @@ -0,0 +1,33 @@ +// THUMBNAILS +// ---------- + +.thumbnails { + margin-left: -20px; + margin-bottom: 0; + list-style: none; + .clearfix(); +} +.thumbnails > li { + float: left; + margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); +} +// Add a hover state for linked versions only +a.thumbnail:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); +} +// Images and captions +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; +} -- cgit v1.2.3 From 00cbadf9943fea6a196cc01c7705d7f2c012bfa1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 18:21:55 -0600 Subject: update thumbnails to keep images from going past edges of thumbnails --- lib/thumbnails.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 12626df3f..9e25f5027 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -13,6 +13,7 @@ } .thumbnail { display: block; + padding: 4px; line-height: 1; border: 1px solid #ddd; .border-radius(4px); @@ -26,7 +27,7 @@ a.thumbnail:hover { // Images and captions .thumbnail > img { display: block; - margin: 4px; + max-width: 100%; } .thumbnail .caption { padding: 9px; -- cgit v1.2.3 From 369cedd87c4447241ce2a73ed6c8414a4cd8bdf8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 19:31:01 -0600 Subject: update comment on select bg bug and confirmed it was fixed, scoped responsive .span* to .row --- lib/forms.less | 2 +- lib/responsive.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 64e77fdb4..84fddd7d1 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,7 +93,7 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } -// Chrome on Linux needs background color +// Chrome on Linux and Mobile Safari need background-color select { background-color: @white; } diff --git a/lib/responsive.less b/lib/responsive.less index c74f6b98e..d8b453d06 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -60,7 +60,7 @@ margin-left: 0; } // Make all columns even - [class*="span"] { + .row > [class*="span"] { float: none; display: block; width: auto; -- cgit v1.2.3 From 690d3f4d1aeb97a76d22a4dfe056e33606e0bd94 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 19:32:14 -0600 Subject: remove inline input field CSS since that's not required as all inputs are inline-block anyway --- lib/forms.less | 21 --------------------- 1 file changed, 21 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 84fddd7d1..99d6fcb59 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -298,27 +298,6 @@ textarea[readonly] { -// INLINE FIELDS -// ------------- - -.inline-inputs { - color: @gray; - span, input { - display: inline-block; - } - input.mini { - width: 60px; - } - input.small { - width: 90px; - } - span { - padding: 0 2px 0 1px; - } -} - - - // INPUT GROUPS // ------------ -- cgit v1.2.3 From 87ac818253a26bcf09fa55f78ae3f55759c54e64 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 22 Dec 2011 19:10:32 -0800 Subject: change above below to top bottom and add "inside" placement option --- lib/mixins.less | 4 ++-- lib/popovers.less | 16 ++++++++-------- lib/twipsy.less | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 0effdfa37..41cf8890d 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -283,7 +283,7 @@ // Popover arrows // For tipsies and popovers #popoverArrow { - .above(@arrowWidth: 5px) { + .top(@arrowWidth: 5px) { bottom: 0; left: 50%; margin-left: -@arrowWidth; @@ -299,7 +299,7 @@ border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @black; } - .below(@arrowWidth: 5px) { + .bottom(@arrowWidth: 5px) { top: 0; left: 50%; margin-left: -@arrowWidth; diff --git a/lib/popovers.less b/lib/popovers.less index ff875eaff..5ecde0923 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -8,14 +8,14 @@ z-index: 1000; display: none; padding: 5px; - &.above { margin-top: -5px; } - &.right { margin-left: 5px; } - &.below { margin-top: 5px; } - &.left { margin-left: -5px; } - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } + &.top { margin-top: -5px; } + &.right { margin-left: 5px; } + &.bottom { margin-top: 5px; } + &.left { margin-left: -5px; } + &.top .arrow { #popoverArrow > .top(); } + &.right .arrow { #popoverArrow > .right(); } + &.bottom .arrow { #popoverArrow > .bottom(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; diff --git a/lib/twipsy.less b/lib/twipsy.less index 05f121a5d..abd0599f4 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -9,15 +9,15 @@ padding: 5px; font-size: 11px; .opacity(0); - &.in { .opacity(80); } - &.above { margin-top: -2px; } - &.right { margin-left: 2px; } - &.below { margin-top: 2px; } - &.left { margin-left: -2px; } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } + &.in { .opacity(80); } + &.top { margin-top: -2px; } + &.right { margin-left: 2px; } + &.bottom { margin-top: 2px; } + &.left { margin-left: -2px; } + &.top .twipsy-arrow { #popoverArrow > .top(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.bottom .twipsy-arrow { #popoverArrow > .bottom(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } } .twipsy-inner { max-width: 200px; -- cgit v1.2.3 From 058f47b33b3978bbb484e521e7fc14c6ebadc161 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2011 17:25:25 -0600 Subject: clean up some comments and fix a bug with buttons in navbar by removing too generic of a link color --- lib/patterns.less | 103 ++---------------------------------------------------- 1 file changed, 3 insertions(+), 100 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 44c427adf..25934d80a 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -24,11 +24,6 @@ } // Text and links .navbar { - // Links get text-shadow - a { - color: @grayLight; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } // Hover and active states .brand a:hover, ul .active > a { @@ -146,7 +141,9 @@ float: none; padding: 10px 10px 11px; line-height: 19px; + color: @grayLight; text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); &:hover { color: @white; text-decoration: none; @@ -213,101 +210,6 @@ padding: 4px 15px; } -// Dropdown Menus -// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropdown { - position: relative; -} -// The link that is clicked to toggle the dropdown -.dropdown-toggle:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(30); - content: "↓"; -} -.dropdown:hover .dropdown-toggle:after { - .opacity(100); -} -// The dropdown menu (ul) -.dropdown-menu { - position: absolute; - top: 40px; - z-index: 900; - float: left; - display: none; // None by default, but block on "open" of the menu - min-width: 160px; - max-width: 220px; - _width: 160px; - padding: 6px 0; - margin-left: 0; // override default ul styles - margin-right: 0; - background-color: @white; - border-color: #999; - border-color: rgba(0,0,0,.2); - border-style: solid; - border-width: 0 1px 1px; - .border-radius(0 0 6px 6px); - .box-shadow(0 2px 4px rgba(0,0,0,.2)); - .background-clip(padding-box); - zoom: 1; // do we need this? - - // Unfloat any li's to make them stack - li { - float: none; - display: block; - background-color: none; - } - // Dividers (basically an hr) within the dropdown - .divider { - height: 1px; - margin: 5px 0; - overflow: hidden; - background-color: #eee; - border-bottom: 1px solid @white; - } -} - -.topbar .dropdown-menu, .dropdown-menu { - // Links within the dropdown menu - a { - display: block; - padding: 4px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: @gray; - text-shadow: 0 1px 0 @white; - // Hover state - &:hover { - color: @grayDark; - text-decoration: none; - #gradient > .vertical(#eeeeee, #dddddd); - @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); - .box-shadow(@shadow); - } - } -} - -// Open state for the dropdown -.dropdown.open { - .dropdown-toggle { - color: @white; - background: #ccc; - background: rgba(0,0,0,.3); - } - .dropdown-menu { - display: block; - } -} - @@ -493,6 +395,7 @@ input[type=submit].btn { float: left; margin-left: -1px; .border-radius(0); + // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match &:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -- cgit v1.2.3 From 324246e4f964437a2dfa7efbd2d1b6b039369b2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 12:39:39 -0600 Subject: remove negative margin from .brand in docs, update navbar to support buttons up thurr --- lib/patterns.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 25934d80a..d48d65e48 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -52,6 +52,10 @@ background-color: transparent; } } + // Buttons in navbar + .btn { + margin-top: 5px; // make buttons vertically centered in navbar + } } // Navbar search -- cgit v1.2.3 From 5801c4d766205c6f1579b9c45e733df5dba3b1fe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 13:51:50 -0600 Subject: capitalize Less in makefile, add print less file (not yet compiled) --- lib/print.less | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 lib/print.less (limited to 'lib') diff --git a/lib/print.less b/lib/print.less new file mode 100644 index 000000000..b45d016fd --- /dev/null +++ b/lib/print.less @@ -0,0 +1,18 @@ +/*! + * Bootstrap @VERSION for Print + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + * Date: @DATE + */ + + +// HIDE UNECESSARY COMPONENTS +// -------------------------- + +.navbar-fixed { + display: none; +} \ No newline at end of file -- cgit v1.2.3 From fec02f50455c87f0e01fe74b1fb2e3cd032ade09 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 15:40:58 -0600 Subject: clean up some css for github issues: input prepend z-index, modals revamped for responsive --- lib/forms.less | 4 +--- lib/modals.less | 3 ++- lib/responsive.less | 12 ++++++++++++ 3 files changed, 15 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 99d6fcb59..9d96e8f33 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,6 +96,7 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { background-color: @white; + vertical-align: middle; } // Make multiple select elements height not fixed @@ -304,13 +305,10 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { - overflow: hidden; input { .border-radius(0 3px 3px 0); } .add-on { - position: relative; - z-index: 2; float: left; display: block; width: auto; diff --git a/lib/modals.less b/lib/modals.less index 53d6cd408..4d2b92cbc 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -13,7 +13,8 @@ &.fade { opacity: 0; } } -.modal-backdrop, .modal-backdrop.fade.in { +.modal-backdrop, +.modal-backdrop.fade.in { .opacity(80); } diff --git a/lib/responsive.less b/lib/responsive.less index d8b453d06..fe2b7cd49 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -43,6 +43,18 @@ .horizontal-form .form-actions { padding-left: 0; } + + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + .close { + padding: 10px; + } + } } -- cgit v1.2.3 From 3426877c894b858d89e68c72bc300cd4f670c40f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 15:51:36 -0600 Subject: add ie7 inline block mixin and add ability to center pagination --- lib/mixins.less | 6 ++++++ lib/pagination.less | 8 +++++++- 2 files changed, 13 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index e8b5cdd2f..58df9298a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -25,6 +25,12 @@ margin-right: auto; } +// IE7 inline-block +.ie7-inline-block() { + *display: inline; /* IE7 inline-block hack */ + *zoom: 1; +} + // Sizing shortcuts .size(@height: 5px, @width: 5px) { width: @width; diff --git a/lib/pagination.less b/lib/pagination.less index d82a0bbd0..f63051168 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -5,7 +5,8 @@ height: @baseLineHeight * 2; margin: @baseLineHeight 0; ul { - float: left; + display: inline-block; + .ie7-inline-block(); margin: 0; border: 1px solid #ddd; border: 1px solid rgba(0,0,0,.15); @@ -37,4 +38,9 @@ .next a { border: 0; } + + // Centered + &.centered { + text-align: center; + } } -- cgit v1.2.3 From 46d2ad5e221646807fb2bd71881860462988008e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 16:08:07 -0600 Subject: allow select with size attr to not have fixed height --- lib/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 9d96e8f33..e9c392c76 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -100,7 +100,8 @@ select { } // Make multiple select elements height not fixed -select[multiple] { +select[multiple], +select[size] { height: inherit; } -- cgit v1.2.3 From 550879cf666ec6445d1918604cb71c7202a52999 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 16:50:27 -0600 Subject: fix quotes in font-family usage --- lib/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 58df9298a..83a3a31f9 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -54,13 +54,13 @@ #font { #family { .serif() { - font-family: "Georgia", Times New Roman, Times, serif; + font-family: Georgia, "Times New Roman", Times, serif; } .sans-serif() { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { - font-family: "Menlo", Monaco, Courier New, monospace; + font-family: Menlo, Monaco, Courier New, monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { -- cgit v1.2.3 From 53c6dbff0d6dd781df421f07acdd9e98719b41bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 17:04:55 -0600 Subject: add appended input example to docs, fix help-text wrapping issue by clearing float --- lib/forms.less | 1 + lib/tables.less | 6 +----- 2 files changed, 2 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e9c392c76..5293d780a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -306,6 +306,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + .clearfix(); // Clear the float to prevent wrapping input { .border-radius(0 3px 3px 0); } diff --git a/lib/tables.less b/lib/tables.less index 524f959f0..164370562 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -17,7 +17,7 @@ td { padding: 8px; line-height: @baseLineHeight; text-align: left; - border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; } th { font-weight: bold; @@ -26,10 +26,6 @@ th { td { vertical-align: top; } -tbody tr:last-child th, -tbody tr:last-child td { - border-bottom: 0; -} // CONDENSED TABLE W/ HALF PADDING -- cgit v1.2.3 From 704d713aadbfcd27e39226cb0d1b2243d52dde0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 17:39:34 -0600 Subject: border radius on large button toolbar --- lib/patterns.less | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index d48d65e48..7c9ee7e48 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -417,6 +417,24 @@ input[type=submit].btn { -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; } + // Reset corners for large buttons + &.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; + } + &.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; + } } // On hover/focus/active, bring the proper btn to front .btn-group .btn:hover, -- cgit v1.2.3 From 553030ca7de8dac3c5180629ff84fa14173513ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Dec 2011 16:01:29 -0800 Subject: missing parantheses --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 5293d780a..ededc772e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,7 +220,7 @@ textarea[readonly] { border-color: @borderColor; &:focus { border-color: darken(@borderColor, 10%); - .box-shadow(0 0 6px lighten(@borderColor, 20%); + .box-shadow(0 0 6px lighten(@borderColor, 20%)); } } // Give a small background color for input-prepend/-append -- cgit v1.2.3 From 2d092dfeea969d82bc55a153c6a597a3e87a0a03 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 16:04:01 -0800 Subject: start playing with carousel stuff --- lib/modals.less | 2 ++ lib/thumbnails.less | 8 ++++++++ 2 files changed, 10 insertions(+) (limited to 'lib') diff --git a/lib/modals.less b/lib/modals.less index 53d6cd408..ec1607c51 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -22,6 +22,8 @@ top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: @white; diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 9e25f5027..ae2e6c94e 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -32,3 +32,11 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } + +.carousel .item { + display: none; +} + +.carousel .active { + display: block; +} \ No newline at end of file -- cgit v1.2.3 From 0c3bf7275cfe0757c876be6ba6f01cad31375923 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 16:05:14 -0800 Subject: add quotes to courier new --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 83a3a31f9..32d3a83ac 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -60,7 +60,7 @@ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { -- cgit v1.2.3 From 8b58a1c3d9fea740c89f48c1771a6c7dd44e1f41 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 19:13:02 -0800 Subject: placeholder design for carousel --- lib/thumbnails.less | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/thumbnails.less b/lib/thumbnails.less index ae2e6c94e..181cca681 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -33,10 +33,26 @@ a.thumbnail:hover { padding: 9px; } -.carousel .item { - display: none; -} +// carousel +.carousel { + position: relative; -.carousel .active { - display: block; + .item { display: none; } + .active { display: block; } + + .nav { + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; + &.right { right: 5px; left: auto; } + &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } + } } \ No newline at end of file -- cgit v1.2.3 From 3fb6f6ee8670acff0c681c621b87a06a087f94be Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:30:57 -0800 Subject: basic carousel implementation --- lib/thumbnails.less | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 181cca681..114d0f0c8 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -33,14 +33,40 @@ a.thumbnail:hover { padding: 9px; } -// carousel .carousel { + position: relative; - .item { display: none; } - .active { display: block; } + .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; + } + + .item { + display: none; + position: relative; + .transition(.25s linear left); + } + + .active, .next, .prev { display: block; } + + .next, .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { left: 100%; } + .prev { left: -100%; } + .next.left, .prev.right { left: 0% } + + .active.left { left: -100% } + .active.right { left: 100% } .nav { + width: auto; + .border-radius(0); height: 50px; position: absolute; top: 50%; -- cgit v1.2.3 From f5bcfaec2c13eb3102ffc2890a69a7c2b725ff36 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:33:49 -0800 Subject: ease-in-out slide transition --- lib/thumbnails.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 114d0f0c8..6ac3cb51f 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -46,7 +46,7 @@ a.thumbnail:hover { .item { display: none; position: relative; - .transition(.25s linear left); + .transition(.6s ease-in-out left); } .active, .next, .prev { display: block; } -- cgit v1.2.3 From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- lib/bootstrap.less | 2 + lib/sidenav.less | 40 ++++++++++++++++++ lib/sprites.less | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/tables.less | 5 +++ lib/type.less | 2 +- 5 files changed, 166 insertions(+), 1 deletion(-) create mode 100644 lib/sidenav.less create mode 100644 lib/sprites.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index e05a966ad..8b821825c 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,6 +27,7 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "sprites.less"; @import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @@ -34,6 +35,7 @@ @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; +@import "sidenav.less"; @import "thumbnails.less"; // Responsive diff --git a/lib/sidenav.less b/lib/sidenav.less new file mode 100644 index 000000000..afc5ea1dd --- /dev/null +++ b/lib/sidenav.less @@ -0,0 +1,40 @@ +// SIDE NAV +// -------- + + +.side-nav { + padding: @baseLineHeight / 2 0; +} +.side-nav .nav-label, +.side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.side-nav .nav-label { + font-size: 11px; + line-height: @baseLineHeight; + color: @grayDark; + text-transform: uppercase; +} +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; +} + +.side-nav .nav-item { + font-weight: bold; +} +.side-nav .nav-item i { + vertical-align: -2px; +} +.side-nav .nav-item:hover { + text-decoration: none; +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.3); + #gradient > .vertical(#ccc, #aaa); + @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); + .box-shadow(@shadow); +} \ No newline at end of file diff --git a/lib/sprites.less b/lib/sprites.less new file mode 100644 index 000000000..8b5bcd5a5 --- /dev/null +++ b/lib/sprites.less @@ -0,0 +1,118 @@ +// SPRITES +// Glyphs and icons for buttons, nav, and more +// ------------------------------------------- + + +// ICONS +// ----- + +// As of v2.0.0, the tag is reserved for icons from the Glyphicons set. +// All icons receive the styles of the tag and are then given a unique +// class to add width, height, and background-position. Your resulting HTML +// will look like . + +i { + background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); + background-position: 0 0; + background-repeat: no-repeat; + display: inline-block; + vertical-align: text-top; + width: 14px; + height: 14px; +} + +.glass { background-position: 0 0; } +.music { background-position: -24px 0; } +.search { background-position: -48px 0; } +.envelope { background-position: -72px 0; } +.heart { background-position: -96px 0; } +.star { background-position: -120px 0; } +.star-empty { background-position: -144px 0; } +.user { background-position: -168px 0; } +.film { background-position: -192px 0; } +.th-large { background-position: -216px 0; } +.th { background-position: -240px 0; } +.th-lines { background-position: -264px 0; } +.ok { background-position: -288px 0; } +.remove { background-position: -312px 0; } +.zoom-in { background-position: -336px 0; } +.zoom-out { background-position: -360px 0; } +.off { background-position: -384px 0; } +.signal { background-position: -408px 0; } +.cog { background-position: -432px 0; } +.trash { background-position: -456px 0; } + +.home { background-position: 0 -24px; } +.file { background-position: -24px -24px; } +.time { background-position: -48px -24px; } +.road { background-position: -72px -24px; } +.download-alt { background-position: -96px -24px; } +.download { background-position: -120px -24px; } +.upload { background-position: -144px -24px; } +.inbox { background-position: -168px -24px; } +.play-circle { background-position: -192px -24px; } +.repeat { background-position: -216px -24px; } +.refresh { background-position: -240px -24px; } +.calendar { background-position: -264px -24px; } +.lock { background-position: -288px -24px; } +.flag { background-position: -312px -24px; } +.headphones { background-position: -336px -24px; } +.volume-off { background-position: -360px -24px; } +.volume-down { background-position: -384px -24px; } +.volume-up { background-position: -408px -24px; } +.qrcode { background-position: -432px -24px; } +.barcode { background-position: -456px -24px; } + +.tag { background-position: 0 -48px; } +.tags { background-position: -24px -48px; } +.book { background-position: -48px -48px; } +.bookmark { background-position: -72px -48px; } +.print { background-position: -96px -48px; } +.camera { background-position: -120px -48px; } +.font { background-position: -144px -48px; } +.bold { background-position: -168px -48px; } +.italic { background-position: -192px -48px; } +.text-height { background-position: -216px -48px; } +.text-width { background-position: -240px -48px; } +.align-left { background-position: -264px -48px; } +.align-center { background-position: -288px -48px; } +.align-right { background-position: -312px -48px; } +.align-justify { background-position: -336px -48px; } +.list { background-position: -360px -48px; } +.indent-left { background-position: -384px -48px; } +.indent-right { background-position: -408px -48px; } +.facetime-video { background-position: -432px -48px; } +.picture { background-position: -456px -48px; } + +.pencil { background-position: 0 -72px; } +.map-marker { background-position: -24px -72px; } +.adjust { background-position: -48px -72px; } +.tint { background-position: -72px -72px; } +.edit { background-position: -96px -72px; } +.share { background-position: -120px -72px; } +.check { background-position: -144px -72px; } +.move { background-position: -168px -72px; } +.step-backward { background-position: -192px -72px; } +.fast-backward { background-position: -216px -72px; } +.backward { background-position: -240px -72px; } +.play { background-position: -264px -72px; } +.pause { background-position: -288px -72px; } +.stop { background-position: -312px -72px; } +.forward { background-position: -336px -72px; } +.fast-forward { background-position: -360px -72px; } +.step-forward { background-position: -384px -72px; } +.eject { background-position: -408px -72px; } +.chevron-left { background-position: -432px -72px; } +.chevron-right { background-position: -456px -72px; } + +.arrow-left { background-position: -240px -96px; } +.arrow-right { background-position: -264px -96px; } +.arrow-up { background-position: -288px -96px; } +.arrow-down { background-position: -312px -96px; } +.share { background-position: -336px -96px; } +.resize-full { background-position: -360px -96px; } +.resize-small { background-position: -384px -96px; } +.plus { background-position: -408px -96px; } +.minus { background-position: -432px -96px; } +.asterisk { background-position: -456px -96px; } + diff --git a/lib/tables.less b/lib/tables.less index 164370562..e1c9ed53b 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -52,6 +52,11 @@ td { td + th { border-left: 1px solid #ddd; } + // Prevent a double border + thead:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: 0; + } // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { diff --git a/lib/type.less b/lib/type.less index b2ba73b86..cc446a69d 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight / 2 25px; + margin: 13px 0 14px 25px; } ul ul, ul ol, -- cgit v1.2.3 From 20add59de3f2b69aaa9c9b325dab20b13c75eaa1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 10:01:42 -0800 Subject: breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs --- lib/alerts.less | 83 +++++++ lib/bootstrap.less | 24 +- lib/button-groups.less | 65 +++++ lib/buttons.less | 119 +++++++++ lib/close.less | 17 ++ lib/component-animations.less | 18 ++ lib/forms.less | 3 +- lib/labels.less | 16 ++ lib/navbar.less | 206 +++++++++++++++ lib/patterns.less | 565 ------------------------------------------ lib/scaffolding.less | 2 +- lib/variables.less | 10 +- lib/wells.less | 17 ++ 13 files changed, 568 insertions(+), 577 deletions(-) create mode 100644 lib/alerts.less create mode 100644 lib/button-groups.less create mode 100644 lib/buttons.less create mode 100644 lib/close.less create mode 100644 lib/component-animations.less create mode 100644 lib/labels.less create mode 100644 lib/navbar.less create mode 100644 lib/wells.less (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less new file mode 100644 index 000000000..bb0bd5d99 --- /dev/null +++ b/lib/alerts.less @@ -0,0 +1,83 @@ +// ALERT STYLES +// ------------ + +// Base alert styles +.alert-message { + position: relative; + padding: 7px 15px; + margin-bottom: @baseLineHeight; + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + .gradientBar(#fceec1, #eedc94); // warning by default + border-width: 1px; + border-style: solid; + .border-radius(4px); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + + // Adjust close icon + .close { + *margin-top: 3px; /* IE7 spacing */ + } + + // Remove extra margin from content + h5 { + line-height: @baseLineHeight; + } + p { + margin-bottom: 0; + } + div { + margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; + } + .btn { + // Provide actions with buttons + .box-shadow(0 1px 0 rgba(255,255,255,.25)); + } + + &.error, + &.success, + &.info { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + + &.block-message { + padding: 14px; + background-image: none; + background-color: lighten(#fceec1, 5%); + .reset-filter(); // undo gradient for IE9 + border-color: #fceec1; + .box-shadow(none); + ul, p { + margin-right: 30px; + } + ul { + margin-bottom: 0; + } + li { + color: @grayDark; + } + .alert-actions { + margin-top: 5px; + } + &.error, + &.success, + &.info { + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + &.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); + } + &.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); + } + &.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); + } + } +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 8b821825c..df233f128 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -19,24 +19,38 @@ // Grid system and page structure @import "scaffolding.less"; -// Styled patterns and elements +// Base CSS @import "type.less"; @import "forms.less"; @import "tables.less"; -// Temp catchall for what's missing thus far -@import "patterns.less"; - +// Components: common @import "sprites.less"; @import "dropdowns.less"; +@import "wells.less"; +@import "component-animations.less"; +@import "close.less"; + +// Components: Nav +@import "navbar.less"; @import "tabs-pills.less"; +@import "sidenav.less"; @import "breadcrumbs.less"; @import "pagination.less"; + +// Components: Popovers @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; -@import "sidenav.less"; + +// Components: Buttons & Alerts +@import "buttons.less"; +@import "button-groups.less"; +@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less + +// Components: Misc @import "thumbnails.less"; +@import "labels.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/button-groups.less b/lib/button-groups.less new file mode 100644 index 000000000..3024ecd65 --- /dev/null +++ b/lib/button-groups.less @@ -0,0 +1,65 @@ +// BUTTON GROUPS +// ------------- + +// Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + .btn-group { + float: left; + margin-right: 10px; + } +} + +// Clear the float +.btn-group { + .clearfix(); +} +// Float them, remove border radius, then re-add to first and last elements +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + .border-radius(0); + // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match + &:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; + } + &:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; + } + // Reset corners for large buttons + &.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; + } + &.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; + } +} +// On hover/focus/active, bring the proper btn to front +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active { + z-index: 2; +} diff --git a/lib/buttons.less b/lib/buttons.less new file mode 100644 index 000000000..aeb70605b --- /dev/null +++ b/lib/buttons.less @@ -0,0 +1,119 @@ +// BUTTON STYLES +// ------------- + +// Shared colors for buttons and alerts +.btn, +.alert-message { + // Set text color + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + // Danger and error appear as red + &.danger, + &.error { + .gradientBar(#ee5f5b, #c43c35); + } + // Success appears as green + &.success { + .gradientBar(#62c462, #57a957); + } + // Info appears as a neutral blue + &.info { + .gradientBar(#5bc0de, #339bb9); + } +} + +// Base .btn styles +.btn { + // Button Base + display: inline-block; + padding: 5px 14px 6px; + font-size: @baseFontSize; + line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient + border: 1px solid #ccc; + border-bottom-color: #bbb; + .border-radius(4px); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + cursor: pointer; + + &:hover { + color: @grayDark; + text-decoration: none; + background-position: 0 -15px; + } + + // Focus state for keyboard and accessibility + &:focus { + outline: 1px dotted #666; + } + + // Primary Button Type + &.primary { + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + .gradientBar(@blue, @blueDark) + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.active, + &:active { + @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } + &.disabled { + cursor: default; + background-image: none; + .reset-filter(); + .opacity(65); + .box-shadow(none); + } + &[disabled] { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .reset-filter(); + .opacity(65); + .box-shadow(none); + } + + // Button Sizes + &.large { + padding: 9px 14px 9px; + font-size: @baseFontSize + 2px; + line-height: normal; + .border-radius(6px); + } + &.small { + padding: 7px 9px 7px; + font-size: @baseFontSize - 2px; + } +} +// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons +:root .alert-message, +:root .btn { + border-radius: 0 \0; +} + +// Help Firefox not be a jerk about adding extra padding to buttons +button.btn, +input[type=submit].btn { + &::-moz-focus-inner { + padding: 0; + border: 0; + } +} \ No newline at end of file diff --git a/lib/close.less b/lib/close.less new file mode 100644 index 000000000..25a0c3ef3 --- /dev/null +++ b/lib/close.less @@ -0,0 +1,17 @@ +// CLOSE ICONS +// ----------- + +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: @baseLineHeight * .75; + color: @black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } +} diff --git a/lib/component-animations.less b/lib/component-animations.less new file mode 100644 index 000000000..4f2a4fd11 --- /dev/null +++ b/lib/component-animations.less @@ -0,0 +1,18 @@ +// COMPONENT ANIMATIONS +// -------------------- + +.fade { + .transition(opacity .15s linear); + opacity: 0; + &.in { + opacity: 1; + } +} + +.collapse { + .transition(height .35s ease); + position:relative; + overflow:hidden; + height: 0; + &.in { height: auto; } +} diff --git a/lib/forms.less b/lib/forms.less index ededc772e..0c624fa88 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -391,7 +391,8 @@ textarea[readonly] { margin-left: 150px; } // Move the options list down to align with labels - .control-list { + .controls > .radio:first-child, + .controls > .checkbox:first-child { padding-top: 6px; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls diff --git a/lib/labels.less b/lib/labels.less new file mode 100644 index 000000000..114bc85b5 --- /dev/null +++ b/lib/labels.less @@ -0,0 +1,16 @@ +// LABELS +// ------ + +.label { + padding: 1px 3px 2px; + font-size: @baseFontSize * .75; + font-weight: bold; + color: @white; + text-transform: uppercase; + background-color: @grayLight; + .border-radius(3px); + &.important { background-color: #c43c35; } + &.warning { background-color: @orange; } + &.success { background-color: @green; } + &.notice { background-color: lighten(@blue, 25%); } +} diff --git a/lib/navbar.less b/lib/navbar.less new file mode 100644 index 000000000..d57f316f5 --- /dev/null +++ b/lib/navbar.less @@ -0,0 +1,206 @@ +// NAVBAR (FIXED AND STATIC) +// ------------------------- + +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; + +// Common styles +.navbar { + overflow: visible; +} +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +.navbar-inner { + background-color: @navBarBgEnd; + #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + .box-shadow(@shadow); +} +// Text and links +.navbar { + // Hover and active states + .brand a:hover, + ul .active > a { + color: @white; + text-decoration: none; + background-color: @navBarBgStart; + background-color: rgba(255,255,255,.05); + } + // Website or project name + .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -20px; // negative indent to left-align the text down the page + font-size: 20px; + font-weight: 200; + line-height: 1; + color: @white; + } + // Plain text in topbar + p { + margin: 0; + line-height: 40px; + a:hover { + color: @white; + background-color: transparent; + } + } + // Buttons in navbar + .btn { + margin-top: 5px; // make buttons vertically centered in navbar + } +} + +// Navbar search +.navbar-search { + position: relative; + float: left; + margin-top: 6px; + margin-bottom: 0; + .search-query { + padding: 4px 9px; + #font > .sans-serif(13px, normal, 1); + color: @white; + color: rgba(255,255,255,.75); + background-color: #444; + background-color: rgba(255,255,255,.3); + border: 1px solid #111; + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); + .box-shadow(@shadow); + .transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + color: @white; + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + padding: 5px 10px; + color: @grayDark; + text-shadow: 0 1px 0 @white; + background-color: @white; + border: 0; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; + } + } +} + + +// Static navbar +.navbar-static { + margin-bottom: @baseLineHeight; +} +.navbar-static .navbar-inner { + padding-left: 20px; + padding-right: 20px; + .border-radius(4px); +} + +// Fixed navbar +.navbar-fixed { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 10000; +} + + + +// NAVIGATION +// ---------- + +// Nav for navbar and topbar +// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity +.nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; + > li { + display: block; + float: left; + } + a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: @grayLight; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + &:hover { + color: @white; + text-decoration: none; + } + } + .active > a { + background-color: #222; + background-color: rgba(0,0,0,.5); + } + // Dividers (basically a vertical hr) + .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; + } + + // Secondary (floated right) nav in topbar + &.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; + .dropdown-menu { + right: 0; + border: 0; + } + } + // Dropdowns within the .nav + .dropdown-toggle:hover, + .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255,255,255,.05); + } + .dropdown-menu { + background-color: #333; + .dropdown-toggle { + color: @white; + &.open { + background: #444; + background: rgba(255,255,255,.05); + } + } + li a { + color: #999; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + &:hover { + #gradient > .vertical(#292929,#191919); + color: @white; + } + } + .active a { + color: @white; + } + .divider { + background-color: #222; + border-color: #444; + } + } +} diff --git a/lib/patterns.less b/lib/patterns.less index 7c9ee7e48..72c3e8ec5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,220 +3,6 @@ // ---------------------------------------------------------------------------- -// NAVBAR (FIXED AND STATIC) -// ------------------------- - -// Navbar variables -@navBarHeight: 40px; -@navBarBgStart: #333; -@navBarBgEnd: #222; - -// Common styles -.navbar { - overflow: visible; -} -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.navbar-inner { - background-color: @navBarBgEnd; - #gradient > .vertical(@navBarBgStart, @navBarBgEnd); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); -} -// Text and links -.navbar { - // Hover and active states - .brand a:hover, - ul .active > a { - color: @white; - text-decoration: none; - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); - } - // Website or project name - .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - line-height: 1; - color: @white; - } - // Plain text in topbar - p { - margin: 0; - line-height: 40px; - a:hover { - color: @white; - background-color: transparent; - } - } - // Buttons in navbar - .btn { - margin-top: 5px; // make buttons vertically centered in navbar - } -} - -// Navbar search -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; - .search-query { - padding: 4px 9px; - #font > .sans-serif(13px, normal, 1); - color: @white; - color: rgba(255,255,255,.75); - background-color: #444; - background-color: rgba(255,255,255,.3); - border: 1px solid #111; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - color: @white; - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 10px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @white; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } -} - - -// Static navbar -.navbar-static { - margin-bottom: @baseLineHeight; -} -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - .border-radius(4px); -} - -// Fixed navbar -.navbar-fixed { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 10000; -} - - - -// NAVIGATION -// ---------- - -// Nav for navbar and topbar -// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -.nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; - > li { - display: block; - float: left; - } - a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: @grayLight; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @white; - text-decoration: none; - } - } - .active > a { - background-color: #222; - background-color: rgba(0,0,0,.5); - } - // Dividers (basically a vertical hr) - .divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; - } - - // Secondary (floated right) nav in topbar - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - .dropdown-menu { - right: 0; - border: 0; - } - } - // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - } -} - -.topbar ul .dropdown-menu li a { - padding: 4px 15px; -} - - - - // PAGE HEADERS // ------------ @@ -255,354 +41,3 @@ footer { margin-bottom: @baseLineHeight * .75; } } - - -// BUTTON STYLES -// ------------- - -// Shared colors for buttons and alerts -.btn, -.alert-message { - // Set text color - &.danger, - &.danger:hover, - &.error, - &.error:hover, - &.success, - &.success:hover, - &.info, - &.info:hover { - color: @white - } - // Danger and error appear as red - &.danger, - &.error { - .gradientBar(#ee5f5b, #c43c35); - } - // Success appears as green - &.success { - .gradientBar(#62c462, #57a957); - } - // Info appears as a neutral blue - &.info { - .gradientBar(#5bc0de, #339bb9); - } -} - -// Base .btn styles -.btn { - // Button Base - display: inline-block; - padding: 5px 14px 6px; - font-size: @baseFontSize; - line-height: normal; - color: #333; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient - border: 1px solid #ccc; - border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - cursor: pointer; - - &:hover { - color: @grayDark; - text-decoration: none; - background-position: 0 -15px; - } - - // Focus state for keyboard and accessibility - &:focus { - outline: 1px dotted #666; - } - - // Primary Button Type - &.primary { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@blue, @blueDark) - } - - // Transitions - .transition(.1s linear all); - - // Active and Disabled states - &.active, - &:active { - @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } - &.disabled { - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - &[disabled] { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - - // Button Sizes - &.large { - padding: 9px 14px 9px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(6px); - } - &.small { - padding: 7px 9px 7px; - font-size: @baseFontSize - 2px; - } -} -// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .alert-message, -:root .btn { - border-radius: 0 \0; -} - -// Help Firefox not be a jerk about adding extra padding to buttons -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} - -// Button groups -// ------------- - -// Group multiple button groups together for a toolbar -.btn-toolbar { - .clearfix(); - .btn-group { - float: left; - margin-right: 10px; - } -} - -// Clear the float -.btn-group { - .clearfix(); -} -// Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - .border-radius(0); - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match - &:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - // Reset corners for large buttons - &.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; - } - &.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; - } -} -// On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active { - z-index: 2; -} - - - -// CLOSE ICONS -// ----------- -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight * .75; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { - color: @black; - text-decoration: none; - .opacity(40); - } -} - - -// ERROR STYLES -// ------------ - -// Base alert styles -.alert-message { - position: relative; - padding: 7px 15px; - margin-bottom: @baseLineHeight; - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - .gradientBar(#fceec1, #eedc94); // warning by default - border-width: 1px; - border-style: solid; - .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); - - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } - - // Remove extra margin from content - h5 { - line-height: @baseLineHeight; - } - p { - margin-bottom: 0; - } - div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; - } - .btn { - // Provide actions with buttons - .box-shadow(0 1px 0 rgba(255,255,255,.25)); - } - - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } - - &.block-message { - padding: 14px; - background-image: none; - background-color: lighten(#fceec1, 5%); - .reset-filter(); // undo gradient for IE9 - border-color: #fceec1; - .box-shadow(none); - ul, p { - margin-right: 30px; - } - ul { - margin-bottom: 0; - } - li { - color: @grayDark; - } - .alert-actions { - margin-top: 5px; - } - &.error, - &.success, - &.info { - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - } - &.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); - } - &.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); - } - &.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); - } - } -} - - - - -// WELLS -// ----- - -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); - .border-radius(4px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); - blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,.15); - } -} - - -// PATTERN ANIMATIONS -// ------------------ - -.fade { - .transition(opacity .15s linear); - opacity: 0; - &.in { - opacity: 1; - } -} - -.collapse { - .transition(height .35s ease); - position:relative; - overflow:hidden; - height: 0; - &.in { height: auto; } -} - - -// LABELS -// ------ - -.label { - padding: 1px 3px 2px; - font-size: @baseFontSize * .75; - font-weight: bold; - color: @white; - text-transform: uppercase; - background-color: @grayLight; - .border-radius(3px); - &.important { background-color: #c43c35; } - &.warning { background-color: @orange; } - &.success { background-color: @green; } - &.notice { background-color: lighten(@blue, 25%); } -} - diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 3e231aae5..d75adba56 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -12,7 +12,7 @@ body { font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; - color: @grayDark; + color: @gray; background-color: @white; } diff --git a/lib/variables.less b/lib/variables.less index caa9c0f60..03f1028f8 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -6,7 +6,7 @@ // LINK COLORS // ----------- -@linkColor: #0069d6; +@linkColor: #08c; @linkColorHover: darken(@linkColor, 15); @@ -14,10 +14,10 @@ // ----- @black: #000; -@grayDark: lighten(@black, 25%); -@gray: lighten(@black, 50%); -@grayLight: lighten(@black, 75%); -@grayLighter: lighten(@black, 90%); +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; @white: #fff; diff --git a/lib/wells.less b/lib/wells.less new file mode 100644 index 000000000..244b8ca10 --- /dev/null +++ b/lib/wells.less @@ -0,0 +1,17 @@ +// WELLS +// ----- + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #eee; + border: 1px solid rgba(0,0,0,.05); + .border-radius(4px); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); + blockquote { + border-color: #ddd; + border-color: rgba(0,0,0,.15); + } +} -- cgit v1.2.3 From 23e5fc2133dd748ba4a7df52b598a24a2915811a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 14:11:41 -0800 Subject: Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly --- lib/forms.less | 27 ++++++++++++++++++++++----- lib/patterns.less | 13 ------------- 2 files changed, 22 insertions(+), 18 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 0c624fa88..32acbdaba 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -116,6 +116,28 @@ textarea { +// CHECKBOXES & RADIOS +// ------------------- + +// Indent the labels to position radios/checkboxes as hanging +.radio, +.checkbox { + padding-left: 18px; +} +.radio input[type=radio], +.checkbox input[type=checkbox] { + float: left; + margin-left: -18px; +} + +// Move the options list down to align with labels +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 6px; // has to be padding because margin collaspes +} + + + // FOCUS STATE // ----------- @@ -390,11 +412,6 @@ textarea[readonly] { .controls { margin-left: 150px; } - // Move the options list down to align with labels - .controls > .radio:first-child, - .controls > .checkbox:first-child { - padding-top: 6px; // has to be padding because margin collaspes - } // Move over buttons in .form-actions to align with .controls .form-actions { padding-left: 150px; diff --git a/lib/patterns.less b/lib/patterns.less index 72c3e8ec5..7a039ce26 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -28,16 +28,3 @@ footer { margin-top: @baseLineHeight - 1; border-top: 1px solid #eee; } - - -// PAGE HEADERS -// ------------ - -.page-header { - margin-bottom: @baseLineHeight * 1.5; - border-bottom: 1px solid #eee; - .box-shadow(0 1px 0 rgba(255,255,255,.5)); - h1 { - margin-bottom: @baseLineHeight * .75; - } -} -- cgit v1.2.3 From 621dd13d87b6ba5fd351966056ea335c6a946f45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 15:43:07 -0800 Subject: move mega link footer to scaffolding to try it out, fix broken button text shadow, change UL/OL margins back, make li color same as body --- lib/buttons.less | 1 + lib/type.less | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index aeb70605b..bc2df0fb6 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -13,6 +13,7 @@ &.success:hover, &.info, &.info:hover { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); color: @white } // Danger and error appear as red diff --git a/lib/type.less b/lib/type.less index cc446a69d..59dae717f 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 13px 0 14px 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @grayDark; + color: @gray; } ul.unstyled { margin-left: 0; -- cgit v1.2.3 From 03d7c1a65e0321445842a4925d19331fda200c02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 15:46:48 -0800 Subject: make dropdowns use unicode character for :after --- lib/dropdowns.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 7436f6a2c..18856cf05 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -16,7 +16,7 @@ border-right: 4px solid transparent; border-top: 4px solid @white; .opacity(30); - content: "↓"; + content: "\2193"; } .dropdown:hover .dropdown-toggle:after { .opacity(100); -- cgit v1.2.3 From aa5342888bf9b3041d2f703349d7ff94cf8b5f43 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 15:48:40 -0800 Subject: default cursor for disabled links in pagination --- lib/pagination.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/pagination.less b/lib/pagination.less index f63051168..e38805760 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -34,6 +34,7 @@ .disabled a:hover { color: @grayLight; background-color: transparent; + cursor: default; } .next a { border: 0; -- cgit v1.2.3 From c56e9d2d35299b4c9e4e3d1aabcf59cedc9143f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 21:43:28 -0800 Subject: massive docs update, mostly to all our new forms, and to the buttons --- lib/buttons.less | 2 +- lib/forms.less | 32 +++++++++++++++++++++----------- lib/mixins.less | 1 - 3 files changed, 22 insertions(+), 13 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index bc2df0fb6..3fab6e039 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -35,7 +35,7 @@ .btn { // Button Base display: inline-block; - padding: 5px 14px 6px; + padding: 5px 10px 6px; font-size: @baseFontSize; line-height: normal; color: #333; diff --git a/lib/forms.less b/lib/forms.less index 32acbdaba..ddd735cc4 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -42,10 +42,11 @@ input, textarea, select, .uneditable-input { - display: inline-block; + display: block; width: 210px; height: @baseLineHeight; padding: 4px; + margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; @@ -177,7 +178,6 @@ select:focus { // Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border .formColumns(@columnSpan: 1) { - display: inline-block; float: none; width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; @@ -224,6 +224,7 @@ textarea[readonly] { + // FORM FIELD FEEDBACK STATES // -------------------------- @@ -289,10 +290,10 @@ textarea[readonly] { } // Placeholder text gets special styles; can't be bundled together though for some reason -:-moz-placeholder { +input:-moz-placeholder { color: @grayLight; } -::-webkit-input-placeholder { +input::-webkit-input-placeholder { color: @grayLight; } @@ -301,7 +302,7 @@ textarea[readonly] { // HELP TEXT // --------- -.help-text { +.help-block { margin-top: 5px; margin-bottom: 0; color: @grayLight; @@ -314,12 +315,6 @@ textarea[readonly] { padding-left: 5px; } -// Big blocks of help text -.help-block { - display: block; - max-width: 600px; -} - // INPUT GROUPS @@ -328,6 +323,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + margin-bottom: 5px; .clearfix(); // Clear the float to prevent wrapping input { .border-radius(0 3px 3px 0); @@ -377,6 +373,8 @@ textarea[readonly] { // ----------- .search-form .search-query { + padding-left: 14px; + padding-right: 14px; .border-radius(14px); } @@ -388,6 +386,18 @@ textarea[readonly] { // Common properties // ----------------- +.search-form, +.inline-form, +.horizontal-form { + input, + textarea, + select, + .uneditable-input { + display: inline-block; + margin-bottom: 0; + } +} + // Margin to space out fieldsets .control-group { margin-bottom: @baseLineHeight; diff --git a/lib/mixins.less b/lib/mixins.less index 32d3a83ac..49eabb875 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -98,7 +98,6 @@ // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { - display: inline; float: left; margin-left: @gridGutterWidth; } -- cgit v1.2.3 From 7582520808ad6c3610831652d0d4d33ea4ebf15b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 22:37:23 -0800 Subject: docs cleanup and navbar brand hover --- lib/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index d57f316f5..7e0b17d43 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -20,7 +20,7 @@ // Text and links .navbar { // Hover and active states - .brand a:hover, + .brand:hover, ul .active > a { color: @white; text-decoration: none; -- cgit v1.2.3 From 5cb76037ae70ca26a923750ca9441b04d2fbd6a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 23:24:19 -0800 Subject: fixing conflict in dividers in navbar, fix navbar docs, fix search form in navbar --- lib/forms.less | 3 ++- lib/navbar.less | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index ddd735cc4..938983536 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -372,9 +372,10 @@ input::-webkit-input-placeholder { // SEARCH FORM // ----------- -.search-form .search-query { +.search-query { padding-left: 14px; padding-right: 14px; + margin-bottom: 0; // remove the default margin on all inputs .border-radius(14px); } diff --git a/lib/navbar.less b/lib/navbar.less index 7e0b17d43..a96aa941c 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -153,7 +153,7 @@ background-color: rgba(0,0,0,.5); } // Dividers (basically a vertical hr) - .divider { + .vertical-divider { height: 40px; width: 1px; margin: 0 5px; @@ -188,6 +188,7 @@ } } li a { + padding: 4px 15px; color: #999; text-shadow: 0 1px 0 rgba(0,0,0,.5); &:hover { -- cgit v1.2.3 From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- lib/forms.less | 10 ++++++++++ lib/navbar.less | 5 +++++ lib/sidenav.less | 11 +++++++---- lib/type.less | 12 ++++++------ 4 files changed, 28 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 938983536..8b85d240a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -137,6 +137,16 @@ textarea { padding-top: 6px; // has to be padding because margin collaspes } +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + // FOCUS STATE diff --git a/lib/navbar.less b/lib/navbar.less index a96aa941c..edc19c641 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -53,6 +53,11 @@ } } +// Navbar forms +.navbar-form { + margin-bottom: 0; // remove default bottom margin +} + // Navbar search .navbar-search { position: relative; diff --git a/lib/sidenav.less b/lib/sidenav.less index afc5ea1dd..51f97f44d 100644 --- a/lib/sidenav.less +++ b/lib/sidenav.less @@ -8,19 +8,22 @@ .side-nav .nav-label, .side-nav .nav-item { display: block; - padding: 3px 16px; + padding: 3px 15px; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .side-nav .nav-label { font-size: 11px; line-height: @baseLineHeight; - color: @grayDark; + color: @grayLight; text-transform: uppercase; } .side-nav .nav-group { - margin: 0 -1px; + margin: 0; // clear default ul margins list-style: none; } +.side-nav .nav-group + .nav-label { + margin-top: 9px; +} .side-nav .nav-item { font-weight: bold; @@ -34,7 +37,7 @@ .side-nav .active .nav-item { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #aaa); + #gradient > .vertical(#ccc, #999); @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); .box-shadow(@shadow); } \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 59dae717f..4aa642358 100644 --- a/lib/type.less +++ b/lib/type.less @@ -50,20 +50,20 @@ h3 { font-size: 14px; } } +h4, h5, h6 { + line-height: @baseLineHeight; +} h4 { - font-size: 16px; - line-height: @baseLineHeight * 2; + font-size: 14px; small { font-size: 12px; } } h5 { - font-size: 14px; - line-height: @baseLineHeight; + font-size: 12px; } h6 { - font-size: 13px; - line-height: @baseLineHeight; + font-size: 11px; color: @grayLight; text-transform: uppercase; } -- cgit v1.2.3 From 36e7660383a7639f5d538efb7dc0f349e285b42d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:26:58 -0800 Subject: fix forms in navbars, fix examples' navbars --- lib/forms.less | 3 ++- lib/navbar.less | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 8b85d240a..9e0b84362 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -141,10 +141,11 @@ textarea { .radio.inline, .checkbox.inline { display: inline-block; + margin-bottom: 0; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { - margin-left: 10px; + margin-left: 10px; // space out consecutive inline controls } diff --git a/lib/navbar.less b/lib/navbar.less index edc19c641..516890ba7 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -56,6 +56,11 @@ // Navbar forms .navbar-form { margin-bottom: 0; // remove default bottom margin + input, + select { + display: inline-block; + margin-bottom: 0; + } } // Navbar search -- cgit v1.2.3 From 0cb2866409c674f834f8e0f4e204c3c3331abbcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:29:36 -0800 Subject: fix reponsive 1200+ media query to resolve mismatched gutters and negative margins on the row --- lib/responsive.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index fe2b7cd49..4cef89180 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -205,6 +205,9 @@ .container { width: @siteWidth; } + .row { + margin-left: @gridGutterWidth * -1; + } [class*="span"] { margin-left: @gridGutterWidth; } @@ -238,4 +241,4 @@ .offset12 { .offset(12); } } -*/ +*/ \ No newline at end of file -- cgit v1.2.3 From bcf1136f2c8236cd3fa28eac7e57a9a3fc17d104 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 00:47:53 -0800 Subject: fix form field sizing for selects, document form field grid sizing --- lib/forms.less | 63 ++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 42 insertions(+), 21 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 9e0b84362..433b1ff98 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,8 +96,10 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { - background-color: @white; + width: 220px; // default input width + 10px of padding that doesn't get applied + padding: 0; vertical-align: middle; + background-color: @white; } // Make multiple select elements height not fixed @@ -187,33 +189,52 @@ select:focus { .input-xxlarge { width: 530px; } // Grid style input sizes -// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border -.formColumns(@columnSpan: 1) { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } + +// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border +.inputColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; +} input, textarea, -select, .uneditable-input { // Default columns - &.span1 { .formColumns(1); } - &.span2 { .formColumns(2); } - &.span3 { .formColumns(3); } - &.span4 { .formColumns(4); } - &.span5 { .formColumns(5); } - &.span6 { .formColumns(6); } - &.span7 { .formColumns(7); } - &.span8 { .formColumns(8); } - &.span9 { .formColumns(9); } - &.span10 { .formColumns(10); } - &.span11 { .formColumns(11); } - &.span12 { .formColumns(12); } - &.span13 { .formColumns(13); } - &.span14 { .formColumns(14); } - &.span15 { .formColumns(15); } - &.span16 { .formColumns(16); } + &.span1 { .inputColumns(1); } + &.span2 { .inputColumns(2); } + &.span3 { .inputColumns(3); } + &.span4 { .inputColumns(4); } + &.span5 { .inputColumns(5); } + &.span6 { .inputColumns(6); } + &.span7 { .inputColumns(7); } + &.span8 { .inputColumns(8); } + &.span9 { .inputColumns(9); } + &.span10 { .inputColumns(10); } + &.span11 { .inputColumns(11); } + &.span12 { .inputColumns(12); } +} + +.selectColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10; +} +select { + &.span1 { .selectColumns(1); } + &.span2 { .selectColumns(2); } + &.span3 { .selectColumns(3); } + &.span4 { .selectColumns(4); } + &.span5 { .selectColumns(5); } + &.span6 { .selectColumns(6); } + &.span7 { .selectColumns(7); } + &.span8 { .selectColumns(8); } + &.span9 { .selectColumns(9); } + &.span10 { .selectColumns(10); } + &.span11 { .selectColumns(11); } + &.span12 { .selectColumns(12); } } -- cgit v1.2.3 From d6a1402f2af5111e11a87a6029b642dc0b814854 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:03:26 -0800 Subject: update form shadows and tweak prettyprint styles --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 433b1ff98..5e02b7fde 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -157,14 +157,14 @@ textarea { input, textarea { - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); } input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + @shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } -- cgit v1.2.3 From e23448ab1b2cc627a3cab54406ffce6c915297b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:08:58 -0800 Subject: make fixed navbars have lower z-index --- lib/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index 516890ba7..9756ce2ca 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -125,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 10000; + z-index: 999; } -- cgit v1.2.3 From 45d671d97f4d448780729bbb6357e9ec776f980c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:22:52 -0800 Subject: tweak spacing once more on prettify; add support for uneditable inputs to input-append and prepend --- lib/forms.less | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 5e02b7fde..f0b7c2ea6 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -192,7 +192,7 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input { float: none; margin-left: 0; } @@ -357,9 +357,13 @@ input::-webkit-input-placeholder { .input-append { margin-bottom: 5px; .clearfix(); // Clear the float to prevent wrapping - input { + input, + .uneditable-input { .border-radius(0 3px 3px 0); } + .uneditable-input { + border-left-color: #ccc; + } .add-on { float: left; display: block; @@ -388,10 +392,14 @@ input::-webkit-input-placeholder { } } .input-append { - input { + input, + .uneditable-input { float: left; .border-radius(3px 0 0 3px); } + .uneditable-input { + border-right-color: #ccc; + } .add-on { margin-right: 0; margin-left: -1px; -- cgit v1.2.3 From 5fb2c666acfd5e7d2f134d2cb5b65b828102c5a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 01:59:53 -0800 Subject: update the fluid examples to use new classes and clear the floats properly from sidebar --- lib/scaffolding.less | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index d75adba56..f454b2e91 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -29,21 +29,23 @@ body { padding-right: 20px; .clearfix(); } + // Sidebars (left and right options) -.fluid-sidebar-left, -.fluid-sidebar-right { +.fluid-sidebar { width: 220px; + margin: 0 20px 18px; } -.fluid-sidebar-left { float: left; } -.fluid-sidebar-right { float: right; } +.sidebar-left { padding-left: 260px; } +.sidebar-right { padding-right: 260px; } + +// Float the sidebars accordingly +.sidebar-left .fluid-sidebar { float: left; margin-left: -240px; } +.sidebar-right .fluid-sidebar { float: right; margin-right: -240px; } + // The main content area .fluid-content { - margin-left: 240px; -} -// Reverse layout for sidebar on right -.fluid-container.reverse .fluid-content { - margin-left: 0; - margin-right: 240px; + float: left; + width: 100%; } -- cgit v1.2.3 From 8ccc3bcf03fedbe8c3a19a96c08a5cad6ae456e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 03:45:24 -0800 Subject: overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section --- lib/button-groups.less | 139 +++++++++++++++++++++++++++++++++---------------- lib/dropdowns.less | 58 ++++++++++----------- lib/type.less | 2 +- 3 files changed, 123 insertions(+), 76 deletions(-) (limited to 'lib') diff --git a/lib/button-groups.less b/lib/button-groups.less index 3024ecd65..d2307018e 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -1,65 +1,116 @@ // BUTTON GROUPS // ------------- -// Group multiple button groups together for a toolbar + +// Make the div behave like a button +.btn-group { + position: relative; + .clearfix(); // clears the floated buttons +} + +// Space out series of button groups +.btn-group + .btn-group { + margin-left: 5px; +} + +// Optional: Group multiple button groups together for a toolbar .btn-toolbar { - .clearfix(); .btn-group { - float: left; - margin-right: 10px; + display: inline-block; } } -// Clear the float -.btn-group { - .clearfix(); -} // Float them, remove border radius, then re-add to first and last elements .btn-group .btn { position: relative; float: left; margin-left: -1px; .border-radius(0); - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match - &:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - // Reset corners for large buttons - &.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; - } - &.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; - } } +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group .btn:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +.btn-group .btn:last-child, +.btn-group .dropdown-toggle { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; +} +// Reset corners for large buttons +.btn-group .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; +} +.btn-group .btn.large:last-child, +.btn-group .large.dropdown-toggle { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; +} + // On hover/focus/active, bring the proper btn to front .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { z-index: 2; } + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; + @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Reposition menu on open and round all corners +.btn-group.open .dropdown-menu { + display: block; + top: 30px; + .border-radius(5px); +} +.btn-group.open .dropdown-toggle { + background-image: none; + @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Reposition the caret +.btn .caret { + margin-top: 6px; + margin-left: 0; +} + +// Account for other colors +.primary, +.danger, +.info, +.success { + .caret { + border-top-color: #fff; + .opacity(75); + } +} + diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 18856cf05..e2bca04ac 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -3,22 +3,24 @@ .dropdown { position: relative; } -// The link that is clicked to toggle the dropdown -.dropdown-toggle:after { +// Dropdown arrow/caret +.caret { display: inline-block; width: 0; height: 0; - margin-top: 8px; - margin-left: 6px; text-indent: -99999px; vertical-align: top; - border-left: 4px solid transparent; + border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid @white; + border-top: 4px solid #000; .opacity(30); content: "\2193"; } -.dropdown:hover .dropdown-toggle:after { +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} +.dropdown:hover .caret { .opacity(100); } // The dropdown menu (ul) @@ -27,55 +29,49 @@ top: 40px; z-index: 900; float: left; - display: none; // None by default, but block on "open" of the menu + display: none; // none by default, but block on "open" of the menu min-width: 160px; max-width: 220px; _width: 160px; - padding: 6px 0; - margin-left: 0; // override default ul styles - margin-right: 0; + padding: 5px 0; + margin: 0; // override default ul + list-style: none; background-color: @white; border-color: #999; - border-color: rgba(0,0,0,.2); + border-color: rgba(0,0,0,.1); border-style: solid; - border-width: 0 1px 1px; - .border-radius(0 0 6px 6px); - .box-shadow(0 2px 4px rgba(0,0,0,.2)); - .background-clip(padding-box); + border-width: 1px; + .border-radius(0 0 5px 5px); + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; zoom: 1; // do we need this? - // Unfloat any li's to make them stack - li { - float: none; - display: block; - background-color: none; - } // Dividers (basically an hr) within the dropdown .divider { height: 1px; - margin: 5px 0; + margin: 5px 1px; overflow: hidden; - background-color: #eee; + background-color: #e5e5e5; border-bottom: 1px solid @white; } -} -.topbar .dropdown-menu, .dropdown-menu { // Links within the dropdown menu a { display: block; - padding: 4px 15px; + padding: 2px 15px; clear: both; font-weight: normal; line-height: 18px; color: @gray; - text-shadow: 0 1px 0 @white; // Hover state &:hover { - color: @grayDark; + color: #fff; text-decoration: none; - #gradient > .vertical(#eeeeee, #dddddd); - @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@blue, @blueDark); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); } } diff --git a/lib/type.less b/lib/type.less index 4aa642358..32cb09431 100644 --- a/lib/type.less +++ b/lib/type.less @@ -116,7 +116,7 @@ dl { // Horizontal rules hr { - margin: @baseLineHeight * 1.5 0; + margin: @baseLineHeight 0; border: 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff; -- cgit v1.2.3 From 33dad13014ae2272d3fcf799f114bfcf8256d968 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 03:53:20 -0800 Subject: update fluid layout to use variable for sidebar width --- lib/scaffolding.less | 10 +++++----- lib/variables.less | 3 +++ 2 files changed, 8 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f454b2e91..7432e849b 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -32,15 +32,15 @@ body { // Sidebars (left and right options) .fluid-sidebar { - width: 220px; + width: @fluidSidebarWidth; margin: 0 20px 18px; } -.sidebar-left { padding-left: 260px; } -.sidebar-right { padding-right: 260px; } +.sidebar-left { padding-left: @fluidSidebarWidth + 40; } +.sidebar-right { padding-right: @fluidSidebarWidth + 40; } // Float the sidebars accordingly -.sidebar-left .fluid-sidebar { float: left; margin-left: -240px; } -.sidebar-right .fluid-sidebar { float: right; margin-right: -240px; } +.sidebar-left .fluid-sidebar { float: left; margin-left: (@fluidSidebarWidth + 20) * -1; } +.sidebar-right .fluid-sidebar { float: right; margin-right: (@fluidSidebarWidth + 20) * -1; } // The main content area .fluid-content { diff --git a/lib/variables.less b/lib/variables.less index 03f1028f8..dfd773304 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -43,6 +43,9 @@ @gridGutterWidth: 20px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; + // THEME VARIABLES // --------------- -- cgit v1.2.3 From 2540caeddd59822cd8f7c805e777adc7504b87b3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 03:58:48 -0800 Subject: quick stab at fixing modal placement on 480px and down --- lib/responsive.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 4cef89180..7856121be 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -22,6 +22,7 @@ .modal { width: auto; margin: 0; + &.fade.in { top: auto; } } // Remove the horizontal form styles -- cgit v1.2.3 From 8bdaf1f36451266064ec460b87a12f21a2caa65b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:01:09 -0800 Subject: better ranking of z-indexes for tipsies so they appear above dropdown menus but below fixed topbar --- lib/dropdowns.less | 2 +- lib/popovers.less | 2 +- lib/twipsy.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2bca04ac..a87641d64 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: 900; + z-index: 1000; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/popovers.less b/lib/popovers.less index 5ecde0923..ec91ab923 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: 1005; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/twipsy.less b/lib/twipsy.less index abd0599f4..9e3cf2f14 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1000; + z-index: 1005; display: block; visibility: visible; padding: 5px; -- cgit v1.2.3 From 5ba7c14afe0fbe1eb9ba18e6a06cc298362ec159 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:07:53 -0800 Subject: another quick pass at ranking all zindexes and listing them in variables for quick overview and editing later --- lib/dropdowns.less | 2 +- lib/modals.less | 2 +- lib/navbar.less | 2 +- lib/popovers.less | 2 +- lib/twipsy.less | 2 +- lib/variables.less | 11 ++++++++++- 6 files changed, 15 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index a87641d64..fc333a4cd 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: 1000; + z-index: @zindexDropdowns; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/modals.less b/lib/modals.less index 96f9a488e..8183194b7 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: @zindexPopover; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } diff --git a/lib/navbar.less b/lib/navbar.less index 9756ce2ca..90ff78676 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -125,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 999; + z-index: @zindexFixedNavbar; } diff --git a/lib/popovers.less b/lib/popovers.less index ec91ab923..9ecdf5fd9 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1005; + z-index: @zindexPopover; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/twipsy.less b/lib/twipsy.less index 9e3cf2f14..7eaa7d5bf 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1005; + z-index: @zindexTwipsy; display: block; visibility: visible; padding: 5px; diff --git a/lib/variables.less b/lib/variables.less index dfd773304..3db5839b0 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -44,7 +44,16 @@ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid width sidebar -@fluidSidebarWidth: 220px; +@fluidSidebarWidth: 220px; + + +// Z-INDEX +// ------- +@zindexDropdowns: 1000; +@zindexTwipsy: 1000; +@zindexFixedNavbar: 1010; +@zindexPopover: 1020; +@zindexModal: 1030; // THEME VARIABLES -- cgit v1.2.3 From e594107f37ede1ea8bee05d8f4b22aeba89bf458 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:17:33 -0800 Subject: change up the z-indexing and add some popover/twipsy content to the test modal on the js docs to help avoid future bugs --- lib/dropdowns.less | 2 +- lib/modals.less | 4 ++-- lib/variables.less | 11 ++++++----- 3 files changed, 9 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index fc333a4cd..00c686dc2 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: @zindexDropdowns; + z-index: @zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/modals.less b/lib/modals.less index 8183194b7..dbac5ff87 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: @zindexPopover; + z-index: @zindexModalBackdrop; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } @@ -22,7 +22,7 @@ position: fixed; top: 50%; left: 50%; - z-index: 11000; + z-index: @zindexModal; max-height: 500px; overflow: auto; width: 560px; diff --git a/lib/variables.less b/lib/variables.less index 3db5839b0..37f5adb71 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -49,11 +49,12 @@ // Z-INDEX // ------- -@zindexDropdowns: 1000; -@zindexTwipsy: 1000; -@zindexFixedNavbar: 1010; -@zindexPopover: 1020; -@zindexModal: 1030; +@zindexDropdown: 1000; +@zindexFixedNavbar: 1010; +@zindexModalBackdrop: 1020; +@zindexModal: 1030; +@zindexPopover: 1040; +@zindexTwipsy: 1050; // THEME VARIABLES -- cgit v1.2.3 From b6d50c892d6ae8ed42ff0bfbba4252c7dc47417e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:20:56 -0800 Subject: scope close icon in modal to modal-header to allow alerts in modals to use close icons --- lib/modals.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/modals.less b/lib/modals.less index dbac5ff87..46fcd880b 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -34,7 +34,6 @@ .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); .background-clip(padding-box); - .close { margin-top: 7px; } &.fade { .transition(e('opacity .3s linear, top .3s ease-out')); top: -25%; @@ -44,6 +43,8 @@ .modal-header { padding: 5px 15px; border-bottom: 1px solid #eee; + // Close icon + .close { margin-top: 7px; } } .modal-body { padding: 15px; -- cgit v1.2.3 From 7728f7b8241dc43292c3f897fdfe08a13f58e40b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:28:30 -0800 Subject: add html5 invalid state for super fancy errors via browser --- lib/forms.less | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index f0b7c2ea6..19e2aa8bc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -299,6 +299,19 @@ textarea[readonly] { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:invalid, +textarea:invalid, +select:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + } +} + // FORM ACTIONS -- cgit v1.2.3 From 6dee40f46990b39bb33b4c42aa003df784cff8fc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:34:30 -0800 Subject: adding back table grid sizing; will need support for responsive perhaps --- lib/tables.less | 121 +++----------------------------------------------------- 1 file changed, 6 insertions(+), 115 deletions(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index e1c9ed53b..d1a690a3f 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -93,15 +93,16 @@ td { -/* -// ---------------- +// TABLE CELL SIZING +// ----------------- -// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border +// Change the columns .tableColumns(@columnSpan: 1) { - width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); + float: none; + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; + margin-left: 0; } table { - // Default columns .span1 { .tableColumns(1); } .span2 { .tableColumns(2); } .span3 { .tableColumns(3); } @@ -114,114 +115,4 @@ table { .span10 { .tableColumns(10); } .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } } - - -// TABLESORTER -// ----------- - -table { - // Tablesorting styles w/ jQuery plugin - .header { - cursor: pointer; - &:after { - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: #000 transparent; - content: ""; - visibility: hidden; - } - } - // Style the sorted column headers (THs) - .headerSortUp, - .headerSortDown { - text-shadow: 0 1px 1px rgba(255,255,255,.75); - background-color: rgba(141,192,219,.25); - } - // Style the ascending (reverse alphabetical) column header - .header:hover { - &:after { - visibility: visible; - } - } - // Style the descending (alphabetical) column header - .headerSortDown, - .headerSortDown:hover { - &:after { - visibility: visible; - .opacity(60); - } - } - // Style the ascending (reverse alphabetical) column header - .headerSortUp { - &:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - visibility:visible; - .box-shadow(none); //can't add boxshadow to downward facing arrow :( - .opacity(60); - } - } - // Blue Table Headings - .blue { - color: @blue; - border-bottom-color: @blue; - } - .headerSortUp.blue, - .headerSortDown.blue { - background-color: lighten(@blue, 40%); - } - // Green Table Headings - .green { - color: @green; - border-bottom-color: @green; - } - .headerSortUp.green, - .headerSortDown.green { - background-color: lighten(@green, 40%); - } - // Red Table Headings - .red { - color: @red; - border-bottom-color: @red; - } - .headerSortUp.red, - .headerSortDown.red { - background-color: lighten(@red, 50%); - } - // Yellow Table Headings - .yellow { - color: @yellow; - border-bottom-color: @yellow; - } - .headerSortUp.yellow, - .headerSortDown.yellow { - background-color: lighten(@yellow, 40%); - } - // Orange Table Headings - .orange { - color: @orange; - border-bottom-color: @orange; - } - .headerSortUp.orange, - .headerSortDown.orange { - background-color: lighten(@orange, 40%); - } - // Purple Table Headings - .purple { - color: @purple; - border-bottom-color: @purple; - } - .headerSortUp.purple, - .headerSortDown.purple { - background-color: lighten(@purple, 40%); - } -}*/ -- cgit v1.2.3 From 3eb80591b2c8bb2850caf27da7d6b8c8b747063a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Oko=C5=84ski?= Date: Sat, 26 Nov 2011 19:41:17 +0100 Subject: Progress bars --- lib/bootstrap.less | 1 + lib/mixins.less | 16 ++++++++ lib/progress-bars.less | 100 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 lib/progress-bars.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index df233f128..0335f8651 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -30,6 +30,7 @@ @import "wells.less"; @import "component-animations.less"; @import "close.less"; +@import "progress-bars.less"; // Components: Nav @import "navbar.less"; diff --git a/lib/mixins.less b/lib/mixins.less index 49eabb875..ea8d685f0 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -270,6 +270,15 @@ background-repeat: no-repeat; // Opera cannot do radial gradients yet } + .striped(@color,@angle: -45deg) { + background-color: @color; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + } } // Reset filters for IE @@ -320,3 +329,10 @@ border-right: @arrowWidth solid @black; } } + +.background-size(@width, @height){ + -webkit-background-size: @width @height; + -moz-background-size: @width @height; + -o-background-size: @width @height; + background-size: @width @height; +} diff --git a/lib/progress-bars.less b/lib/progress-bars.less new file mode 100644 index 000000000..cc524cc9f --- /dev/null +++ b/lib/progress-bars.less @@ -0,0 +1,100 @@ +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +.progress { + height: 25px; + margin-bottom: 18px; + overflow: hidden; + .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); + #gradient > .vertical(#fff, #f5f5f5); + .border-radius(10px); + border: 1px solid #ddd; + border-color: rgba(0,0,0,.0); + &.active { + .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; + } + } + &.animated { + .bar { + .transition(width .6s ease); + } + } + &.danger, + &.error { + .bar { + #gradient > .vertical(#ee5f5b, #c43c35); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#ee5f5b); + } + } + } + &.success { + .bar { + #gradient > .vertical(#62c462, #57a957); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + } + &.info { + .bar { + #gradient > .vertical(#5bc0de, #339bb9); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#5bc0de); + } + } + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + .bar { + width: 0%; + height: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + .gradientBar(#62c462, #57a957); + @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); + .box-shadow(@shadow); + .border-radius(10px); + } +} \ No newline at end of file -- cgit v1.2.3 From 95c88a2953d6493050192f9c99c8e5597e591ac3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:40:32 -0800 Subject: scratch that, tweaking dropdowns in tabs --- lib/tabs-pills.less | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) (limited to 'lib') diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 23ba9ccfa..8e8856a56 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -154,30 +154,17 @@ // Dropdowns in tabs .tabs { - // first one for backwards compatibility - .menu-dropdown, .dropdown-menu { - top: 35px; + top: 36px; border-width: 1px; - .border-radius(0 6px 6px 6px); } - // first one for backwards compatibility - a.menu:after, - .dropdown-toggle:after { - border-top-color: #999; + .dropdown-toggle .caret { margin-top: 15px; margin-left: 5px; } - // first one for backwards compatibility - li.open.menu .menu, - .open.dropdown .dropdown-toggle { + .open .dropdown-toggle { border-color: #999; } - // first one for backwards compatibility - li.open a.menu:after, - .dropdown.open .dropdown-toggle:after { - border-top-color: #555; - } } // Pills -- cgit v1.2.3 From a339f0051b21f9e51d47c3eb1fd7d37f126e87a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 12:22:51 -0800 Subject: fixing tablesorter styles by adding the jquery plugin back to the lib, fixing the docs examples --- lib/tables.less | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/tabs-pills.less | 6 +++++- 2 files changed, 59 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index d1a690a3f..92ac57c39 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -116,3 +116,57 @@ table { .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } } + + + +// TABLESORTER +// ----------- +// Support for the tablesorter jQuerdy plugin + +table { + // Tablesorting styles w/ jQuery plugin + .header { + cursor: pointer; + &:after { + content: ""; + float: right; + margin-top: 7px; + border-width: 0 4px 4px; + border-style: solid; + border-color: #000 transparent; + visibility: hidden; + } + } + // Style the sorted column headers (THs) + .headerSortUp, + .headerSortDown { + background-color: rgba(141,192,219,.25); + text-shadow: 0 1px 1px rgba(255,255,255,.75); + } + // Style the ascending (reverse alphabetical) column header + .header:hover { + &:after { + visibility:visible; + } + } + // Style the descending (alphabetical) column header + .headerSortDown, + .headerSortDown:hover { + &:after { + visibility:visible; + .opacity(60); + } + } + // Style the ascending (reverse alphabetical) column header + .headerSortUp { + &:after { + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #000; + visibility:visible; + .box-shadow(none); //can't add boxshadow to downward facing arrow :( + .opacity(60); + } + } +} diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 8e8856a56..4a94266a3 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -155,7 +155,7 @@ // Dropdowns in tabs .tabs { .dropdown-menu { - top: 36px; + top: 37px; border-width: 1px; } .dropdown-toggle .caret { @@ -165,6 +165,10 @@ .open .dropdown-toggle { border-color: #999; } + .open .dropdown-toggle .caret { + border-top-color: #fff; + .opacity(100); + } } // Pills -- cgit v1.2.3 From 1438b14f74fc30c3b9bd63bd54d3bcfe5ce33c3c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 15:52:57 -0800 Subject: overhauled docs to include example markup, add language around browser support and classes --- lib/bootstrap.less | 2 +- lib/mixins.less | 19 ++++-- lib/progress-bars.less | 180 ++++++++++++++++++++++++------------------------- 3 files changed, 102 insertions(+), 99 deletions(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 0335f8651..d82dffc65 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -30,7 +30,6 @@ @import "wells.less"; @import "component-animations.less"; @import "close.less"; -@import "progress-bars.less"; // Components: Nav @import "navbar.less"; @@ -52,6 +51,7 @@ // Components: Misc @import "thumbnails.less"; @import "labels.less"; +@import "progress-bars.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/mixins.less b/lib/mixins.less index ea8d685f0..50986c68c 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -179,6 +179,13 @@ background-clip: @clip; } +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + // Resize anything .resizable(@direction: both) { resize: @direction; // Options: horizontal, vertical, both @@ -272,12 +279,12 @@ } .striped(@color,@angle: -45deg) { background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } } diff --git a/lib/progress-bars.less b/lib/progress-bars.less index 1a9afb275..28c56d131 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -1,102 +1,98 @@ +// PROGRESS BARS +// ------------- + + +// ANIMATIONS +// ---------- + +// Webkit @-webkit-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } + from { background-position: 0 0; } + to { background-position: 40px 0; } } -/* COMMENTED OUT SO LESS COMPILES -@-moz-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -*/ +// Temporarily commented out since LESS won't compile with this +// @-moz-keyframes progress-bar-stripes { +// from { background-position: 0 0; } +// to { background-position: 40px 0; } +// } +// Spec @keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + + + +// THE BARS +// -------- + +// Common styles +.progress, +.progress .bar { + .border-radius(4px); } +// Outer container .progress { - height: 25px; + height: 18px; margin-bottom: 18px; - overflow: hidden; - .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); - #gradient > .vertical(#fff, #f5f5f5); - .border-radius(10px); + #gradient > .vertical(#f5f5f5, #f9f9f9); border: 1px solid #ddd; - border-color: rgba(0,0,0,.0); - &.active { - .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; - } - } - &.animated { - .bar { - .transition(width .6s ease); - } - } - &.danger, - &.error { - .bar { - #gradient > .vertical(#ee5f5b, #c43c35); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#ee5f5b); - } - } - } - &.success { - .bar { - #gradient > .vertical(#62c462, #57a957); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#62c462); - } - } - } - &.info { - .bar { - #gradient > .vertical(#5bc0de, #339bb9); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#5bc0de); - } - } - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#62c462); - } - } - .bar { - width: 0%; - height: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - .gradientBar(#62c462, #57a957); - @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); - .box-shadow(@shadow); - .border-radius(10px); - } -} \ No newline at end of file + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress .bar { + width: 0%; + height: 20px; + margin: -1px; + #gradient > .vertical(#62c462, #57a957); + #gradient > .vertical(#149bdf, #0480be); + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + .box-sizing(border-box); + .transition(width .6s ease); +} + +// Striped bars +.progress.striped .bar { + #gradient > .striped(#62c462); + .background-size(40px, 40px); +} + +// Call animation for the active one +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + + + +// COLORS +// ------ + +// Danger (red) +.progress.danger .bar { + #gradient > .vertical(#ee5f5b, #c43c35); +} +.progress.danger.striped .bar { + #gradient > .striped(#ee5f5b); +} + +// Success (green) +.progress.success .bar { + #gradient > .vertical(#62c462, #57a957); +} +.progress.success.striped .bar { + #gradient > .striped(#62c462); +} + +// Info (teal) +.progress.info .bar { + #gradient > .vertical(#5bc0de, #339bb9); +} +.progress.info.striped .bar { + #gradient > .striped(#5bc0de); +} -- cgit v1.2.3 From 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 20:40:28 -0800 Subject: overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class --- lib/bootstrap.less | 3 +- lib/dropdowns.less | 5 +- lib/forms.less | 1 + lib/navbar.less | 7 +- lib/navs.less | 327 ++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/sidenav.less | 43 ------- lib/tabs-pills.less | 285 --------------------------------------------- lib/type.less | 2 +- 8 files changed, 337 insertions(+), 336 deletions(-) create mode 100644 lib/navs.less delete mode 100644 lib/sidenav.less delete mode 100644 lib/tabs-pills.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index d82dffc65..2bec3dd01 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -33,8 +33,7 @@ // Components: Nav @import "navbar.less"; -@import "tabs-pills.less"; -@import "sidenav.less"; +@import "navs.less"; @import "breadcrumbs.less"; @import "pagination.less"; diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 00c686dc2..a1b9e37bc 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -1,4 +1,6 @@ -// Dropdown Menus +// DROPDOWN MENUS +// -------------- + // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns .dropdown { position: relative; @@ -71,6 +73,7 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(@blue, @blueDark); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); } diff --git a/lib/forms.less b/lib/forms.less index 19e2aa8bc..505331044 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -20,6 +20,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; + -webkit-margin-collapse: separate; } // Set font for forms diff --git a/lib/navbar.less b/lib/navbar.less index 90ff78676..00afe3d8f 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -135,7 +135,7 @@ // Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -.nav { +.navbar .nav { position: relative; left: 0; display: block; @@ -146,7 +146,6 @@ float: left; } a { - display: block; float: none; padding: 10px 10px 11px; line-height: 19px; @@ -182,7 +181,7 @@ border: 0; } } - // Dropdowns within the .nav +/* // Dropdowns within the .nav .dropdown-toggle:hover, .dropdown.open .dropdown-toggle { background: #444; @@ -213,5 +212,5 @@ background-color: #222; border-color: #444; } - } + }*/ } diff --git a/lib/navs.less b/lib/navs.less new file mode 100644 index 000000000..8616ea047 --- /dev/null +++ b/lib/navs.less @@ -0,0 +1,327 @@ +// NAVIGATIONS +// ----------- + + + +// BASE CLASS +// ---------- + +.nav { + margin-left: 0; + margin-bottom: @baseLineHeight; + list-style: none; +} + +// Make links block level +.nav > li > a { + display: block; +} +.nav > li > a:hover { + text-decoration: none; + background-color: #eee; +} + + + +// NAV LIST +// -------- + +.nav.list { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; +} +.nav.list > li > a, +.nav.list .nav-header { + display: block; + padding: 3px 15px; + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.nav.list .nav-header { + font-size: 11px; + font-weight: bold; + line-height: @baseLineHeight; + color: @grayLight; + text-transform: uppercase; +} +.nav.list > li + .nav-header { + margin-top: 9px; +} +.nav.list .active > a { + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + background-color: @linkColor; +} + + + +// TABS AND PILLS +// ------------- + +// Common styles +.tabs, +.pills { + .clearfix(); +} +.tabs > li, +.pills > li { + float: left; +} +.tabs > li > a, +.pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; // keeps the overall height an even number +} + +// TABS +// ---- + +// Give the tabs something to sit on +.tabs { + border-bottom: 1px solid #ddd; +} + +// Make the list-items overlay the bottom border +.tabs > li { + margin-bottom: -1px; +} + +// Actual tabs (as links) +.tabs > li > a { + padding-top: 9px; + padding-bottom: 9px; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover { + border-color: #eee #eee #ddd; + } +} +// Active state, and it's :hover to override normal :hover +.tabs .active > a, +.tabs .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + +// PILLS +// ----- + +// Links rendered as pills +.pills > li > a { + padding-top: 8px; + padding-bottom: 8px; + margin-top: 2px; + margin-bottom: 2px; + .border-radius(5px); +} + +// Active state +.pills .active > a, +.pills .active > a:hover { + color: @white; + background-color: @linkColor; +} + + + +// STACKED NAV +// ----------- + +// Stacked tabs and pills +.nav.stacked > li { + float: none; +} +.nav.stacked > li > a { + margin-right: 0; // no need for the gap between nav items +} + +// Tabs +.tabs.stacked { + border-bottom: 0; +} +.tabs.stacked > li > a { + border: 1px solid #ddd; + .border-radius(0); +} +.tabs.stacked > li:first-child > a { + .border-radius(4px 4px 0 0); +} +.tabs.stacked > li:last-child > a { + .border-radius(0 0 4px 4px); +} +.tabs.stacked > li > a:hover { + border-color: #ddd; + z-index: 2; +} + +// Pills +.pills.stacked > li > a { + margin-bottom: 3px; +} +.pills.stacked > li:last-child > a { + margin-bottom: 1px; // decrease margin to match sizing of stacked tabs +} + + + +// DROPDOWNS +// --------- + +// Position the menu +.tabs .dropdown-menu, +.pills .dropdown-menu { + top: 33px; + border-width: 1px; +} +.pills .dropdown-menu { + .border-radius(4px); +} +.tabs .dropdown-toggle .caret, +.pills .dropdown-toggle .caret { + margin-top: 6px; +} +.tabs .open .dropdown-toggle, +.pills .open .dropdown-toggle { + background-color: #999; + border-color: #999; +} +.tabs .open .caret, +.pills .open .caret { + border-top-color: #fff; + .opacity(100); +} + + + +// TABBABLE +// -------- + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } + } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } +} + + + + + + + +// Tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} + diff --git a/lib/sidenav.less b/lib/sidenav.less deleted file mode 100644 index 51f97f44d..000000000 --- a/lib/sidenav.less +++ /dev/null @@ -1,43 +0,0 @@ -// SIDE NAV -// -------- - - -.side-nav { - padding: @baseLineHeight / 2 0; -} -.side-nav .nav-label, -.side-nav .nav-item { - display: block; - padding: 3px 15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.side-nav .nav-label { - font-size: 11px; - line-height: @baseLineHeight; - color: @grayLight; - text-transform: uppercase; -} -.side-nav .nav-group { - margin: 0; // clear default ul margins - list-style: none; -} -.side-nav .nav-group + .nav-label { - margin-top: 9px; -} - -.side-nav .nav-item { - font-weight: bold; -} -.side-nav .nav-item i { - vertical-align: -2px; -} -.side-nav .nav-item:hover { - text-decoration: none; -} -.side-nav .active .nav-item { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #999); - @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); - .box-shadow(@shadow); -} \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less deleted file mode 100644 index 4a94266a3..000000000 --- a/lib/tabs-pills.less +++ /dev/null @@ -1,285 +0,0 @@ -// Tabs and Pills -.tabs, -.pills { - padding: 0; - margin: 0 0 20px; - list-style: none; - .clearfix(); - > li { - float: left; - > a { - display: block; - } - } -} - -// Tabs -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; - > li { - position: relative; // For the dropdowns mostly - margin-bottom: -1px; - > a { - padding: 0 15px; - margin-right: 2px; - line-height: @baseLineHeight * 2; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; - } - } - } - // Active state, and it's :hover to override normal :hover - .active > a, - .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; - } -} - -.tabbable { - margin-bottom: @baseLineHeight; - - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } - - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; - } - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} - - -// Dropdowns in tabs -.tabs { - .dropdown-menu { - top: 37px; - border-width: 1px; - } - .dropdown-toggle .caret { - margin-top: 15px; - margin-left: 5px; - } - .open .dropdown-toggle { - border-color: #999; - } - .open .dropdown-toggle .caret { - border-top-color: #fff; - .opacity(100); - } -} - -// Pills -.pills { - > li > a { - padding: 0 15px; - margin: 5px 3px 5px 0; - line-height: 30px; - text-shadow: 0 1px 1px @white; - .border-radius(15px); - &:hover { - color: @white; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColorHover; - } - } - .active > a { - color: @white; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColor; - } -} - -// Stacked pills -.pills-vertical > li { - float: none; -} - -// Tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// Step nav -.step-nav { - position: relative; // for prev/next links - margin: 0 0 @baseLineHeight; - list-style: none; - line-height: 30px; - text-align: center; - background-color: #f5f5f5; - .border-radius(15px); - li { - display: inline; - color: @grayLight; - } - // prev/next links - .prev, - .next { - position: absolute; - top: 6px; - } - .prev { - left: 15px; - } - .next { - right: 15px; - } - // indicators for each step/page/item/etc - .dot { - display: inline-block; - width: 10px; - height: 10px; - margin: 0 3px; - text-indent: -999em; - background-color: @grayLight; - .border-radius(5px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); - } - .dot:hover, - .active .dot { - background-color: @grayDark; - } -} - - -// Subnav -// STILL A WIP -.subnav { - #gradient > .vertical(#f5f5f5, #eeeeee); - @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5); - .box-shadow(@shadow); - a { - padding: 8px 10px; - font-size: 12px; - color: @linkColor; - text-shadow: 0 1px 0 #fff; - border-left: 1px solid #f9f9f9; - border-right: 1px solid #e5e5e5; - &:hover { - color: @linkColorHover; - background-color: #eee; - } - } - li:first-child a { - border-left: 0; - .border-radius(6px 0 0 6px); - } - li:last-child a { - border-right: 0; - .border-radius(0 6px 6px 0); - } - ul .active > a { - color: @grayDark; - background-color: #eee; - } -} \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 32cb09431..7e2c4a7a8 100644 --- a/lib/type.less +++ b/lib/type.less @@ -201,7 +201,7 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); + .border-radius(4px); white-space: pre; white-space: pre-wrap; word-break: break-all; -- cgit v1.2.3 From 95f47026cf55dc029d266e80bb4fab00b85af0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 21:09:02 -0800 Subject: fix up dropdowns and navbar docs for the new dropdown styles --- lib/dropdowns.less | 3 +- lib/navbar.less | 137 ++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 101 insertions(+), 39 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index a1b9e37bc..f59ab3728 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -22,7 +22,8 @@ margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret { +.dropdown:hover .caret, +.open.dropdown .caret { .opacity(100); } // The dropdown menu (ul) diff --git a/lib/navbar.less b/lib/navbar.less index 00afe3d8f..b7f223141 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -133,54 +133,116 @@ // NAVIGATION // ---------- -// Nav for navbar and topbar -// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; - > li { - display: block; - float: left; +} +.navbar .nav.pull-right { + float: right; // redeclare due to specificity +} +.navbar .nav > li { + display: block; + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: @grayLight; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); +} +// Hover +.navbar .nav > li > a:hover { + background-color: transparent; + color: @white; + text-decoration: none; +} + +// Active nav items +.navbar .nav .active > a { + background-color: #222; + background-color: rgba(0,0,0,.5); +} + +// Dividers (basically a vertical hr) +.navbar .vertical-divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; +} + +// Secondary (floated right) nav in topbar +.navbar .nav.pull-right { + margin-left: 10px; + margin-right: 0; +} + + + +// Dropdown menus +// -------------- + +// Menu position and menu carets +.navbar .dropdown-menu { + top: 42px; + .border-radius(4px); + &:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0,0,0,.1); + position: absolute; + top: -7px; + left: 12px; } - a { - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: @grayLight; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @white; - text-decoration: none; - } + &:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + position: absolute; + top: -6px; + left: 13px; } - .active > a { - background-color: #222; - background-color: rgba(0,0,0,.5); +} + +// Dropdown toggle caret +.navbar .dropdown-toggle .caret, +.navbar .open.dropdown .caret { + border-top-color: #fff; +} + +// Remove background color from open dropdown +.navbar .open .dropdown-toggle { + background-color: transparent; +} + +// Right aligned menus need alt position +.navbar .nav.pull-right .dropdown-menu { + right: 0; + &:before { + left: auto; + right: 12px; } - // Dividers (basically a vertical hr) - .vertical-divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; + &:after { + left: auto; + right: 13px; } +} + - // Secondary (floated right) nav in topbar - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - .dropdown-menu { - right: 0; - border: 0; - } - } /* // Dropdowns within the .nav .dropdown-toggle:hover, .dropdown.open .dropdown-toggle { @@ -213,4 +275,3 @@ border-color: #444; } }*/ -} -- cgit v1.2.3 From ecffa038903412419163c7aed9299a7289ad14ad Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 21:10:17 -0800 Subject: nuke unused code, add to upgrading page --- lib/navbar.less | 34 ---------------------------------- 1 file changed, 34 deletions(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index b7f223141..8ee203307 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -241,37 +241,3 @@ right: 13px; } } - - -/* // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - padding: 4px 15px; - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - }*/ -- cgit v1.2.3 From d0eecc85f89fd258a2e58d7be06a8b6068da90e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 21:18:14 -0800 Subject: remove tabbable stuff to try new approach --- lib/navs.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index 8616ea047..0d31cf3bc 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -203,6 +203,7 @@ // TABBABLE // -------- +/* .tabbable { margin-bottom: @baseLineHeight; @@ -308,7 +309,7 @@ } } } - +*/ -- cgit v1.2.3 From 22e0c5f7c8c092531b111b6042a7d7ee87d406b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 22:06:44 -0800 Subject: redoing the tabs on bottom, left, and right --- lib/navs.less | 113 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 87 insertions(+), 26 deletions(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index 0d31cf3bc..f76f1acad 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -203,36 +203,97 @@ // TABBABLE // -------- -/* + +// COMMON STYLES +// ------------- + +// Clear any floats .tabbable { - margin-bottom: @baseLineHeight; + .clearfix(); +} +// Remove border on bottom, left, right +.tabs-below .tabs, +.tabs-right .tabs, +.tabs-left .tabs { + border-bottom: 0; +} - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } +// BOTTOM +// ------ - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; +.tabs-below .tabs { + border-top: 1px solid #ddd; +} +.tabs-below .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabs-below .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; } +} +.tabs-below .tabs .active > a, +.tabs-below .tabs .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} + +// LEFT & RIGHT +// ------------ + +// Common styles +.tabs-left .tabs > li, +.tabs-right .tabs > li { + float: none; +} +.tabs-left .tabs > li > a, +.tabs-right .tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +// Tabs on the left +.tabs-left .tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} +.tabs-left .tabs > li > a { + margin-right: -1px; + .border-radius(4px 0 0 4px); +} +.tabs-left .tabs > li > a:hover { + border-color: #eee #ddd #eee #eee; +} +.tabs-left .tabs .active > a, +.tabs-left .tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; +} + +// Tabs on the right +.tabs-right .tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} +.tabs-right .tabs > li > a { + margin-left: -1px; + .border-radius(0 4px 4px 0); +} +.tabs-right .tabs > li > a:hover { + border-color: #eee #eee #eee #ddd; +} +.tabs-right .tabs .active > a, +.tabs-right .tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; +} + + +/* +.tabbable { // Tabs on left and right &.tabs-left, -- cgit v1.2.3 From 961c479422f10cb566ade1f3a08d1b807d590b7a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 22:07:18 -0800 Subject: remove unused css and reorder the toggle classes --- lib/navs.less | 109 +++++++--------------------------------------------------- 1 file changed, 12 insertions(+), 97 deletions(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index f76f1acad..743d772f3 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -211,6 +211,7 @@ .tabbable { .clearfix(); } + // Remove border on bottom, left, right .tabs-below .tabs, .tabs-right .tabs, @@ -218,6 +219,17 @@ border-bottom: 0; } +// Show/hide tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} + + // BOTTOM // ------ @@ -290,100 +302,3 @@ .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; } - - -/* -.tabbable { - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} -*/ - - - - - - -// Tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - -- cgit v1.2.3 From d170224457581b6ab7305b29b4e2a15cb50ab853 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 23:21:40 -0800 Subject: fix progress bars by removing border and negative margins --- lib/progress-bars.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/progress-bars.less b/lib/progress-bars.less index 28c56d131..f5a839834 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -39,16 +39,14 @@ height: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); - border: 1px solid #ddd; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } // Bar of progress .progress .bar { width: 0%; - height: 20px; - margin: -1px; - #gradient > .vertical(#62c462, #57a957); + height: 18px; + margin: ; #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); -- cgit v1.2.3 From 4478df768168fe41599508688046612bf5f1e526 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 8 Jan 2012 00:49:38 -0800 Subject: first pass at ultra basic autocomplete --- lib/dropdowns.less | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index f59ab3728..5dea8d678 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -68,16 +68,17 @@ font-weight: normal; line-height: 18px; color: @gray; - // Hover state - &:hover { - color: #fff; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@blue, @blueDark); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); - } + } + + // Hover state + &.typeahead .active a, a:hover { + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@blue, @blueDark); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); + .box-shadow(@shadow); } } -- cgit v1.2.3 From 19986b3dd8e921e9f0b4e238af6b4af83ef5bebe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 01:45:49 -0800 Subject: remove / on js, fix link to typeahead, remove old gradient on dropdown hover --- lib/dropdowns.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 5dea8d678..34d83af2a 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -75,7 +75,6 @@ color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@blue, @blueDark); #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); -- cgit v1.2.3 From b780034a65faf99acffb2c5cea27a98883ddf819 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 01:50:12 -0800 Subject: clean up some spacing on the dropdown for typeahead --- lib/dropdowns.less | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 34d83af2a..484cbbcd7 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -69,16 +69,17 @@ line-height: 18px; color: @gray; } +} - // Hover state - &.typeahead .active a, a:hover { - color: #fff; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); - } +// Hover & Active states +.dropdown-menu a:hover, +.dropdown-menu .active > a { + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); + .box-shadow(@shadow); } // Open state for the dropdown @@ -92,3 +93,9 @@ display: block; } } + +// Typeahead +.typeahead { + margin-top: 2px; // give it some space to breathe + .border-radius(4px); +} -- cgit v1.2.3 From 9daf1661c5c9cce161e1981b484b7d7f04eac2e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 01:54:59 -0800 Subject: fix docs for fluid layout, update topbar to fix active text color for links --- lib/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index 8ee203307..70be434ba 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -21,7 +21,7 @@ .navbar { // Hover and active states .brand:hover, - ul .active > a { + .nav .active > a { color: @white; text-decoration: none; background-color: @navBarBgStart; -- cgit v1.2.3 From 916761d56854ca4fcc8ea4afa68511fb26a93e4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 01:57:05 -0800 Subject: fix styles on right aligned blockquote to flip padding and border appropriately --- lib/type.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 7e2c4a7a8..84130f3fa 100644 --- a/lib/type.less +++ b/lib/type.less @@ -165,6 +165,10 @@ blockquote { // Float right with text-align: right &.pull-right { float: right; + padding-left: 0; + padding-right: 15px; + border-left: 0; + border-right: 5px solid #eee; p, small { text-align: right; -- cgit v1.2.3 From cf05dc86774ea05aa0f40aff771538e6e2f405d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 02:15:47 -0800 Subject: adjust navs for fine details on dropdowns in stacked nav and improved open state there --- lib/navs.less | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index 743d772f3..dee482aea 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -175,29 +175,35 @@ // --------- // Position the menu -.tabs .dropdown-menu, -.pills .dropdown-menu { +.nav .dropdown-menu { top: 33px; border-width: 1px; } .pills .dropdown-menu { .border-radius(4px); } -.tabs .dropdown-toggle .caret, -.pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { + border-top-color: @linkColor; margin-top: 6px; } -.tabs .open .dropdown-toggle, -.pills .open .dropdown-toggle { +.nav .dropdown-toggle:hover .caret { + border-top-color: @linkColorHover; +} +.nav .open .dropdown-toggle { background-color: #999; border-color: #999; } -.tabs .open .caret, -.pills .open .caret { +.nav .open .caret, +.nav .open a:hover .caret { border-top-color: #fff; .opacity(100); } +// Dropdowns in stacked tabs +.tabs.stacked .open > a:hover { + border-color: #999; +} + // TABBABLE -- cgit v1.2.3 From 9e7acc637057292205906edc99fb23a49c937afa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 02:30:18 -0800 Subject: fix responsive navbar nav treatment by using hover instead of click --- lib/navbar.less | 2 +- lib/responsive.less | 100 +++++++++++++++++++++++++++++----------------------- 2 files changed, 56 insertions(+), 46 deletions(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index 70be434ba..dbad9dcd8 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -10,7 +10,7 @@ .navbar { overflow: visible; } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { background-color: @navBarBgEnd; #gradient > .vertical(@navBarBgStart, @navBarBgEnd); diff --git a/lib/responsive.less b/lib/responsive.less index 7856121be..9f8f9ec6c 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -81,52 +81,62 @@ } // Make the nav work for small devices - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .navbar ul .active > a { - background-color: transparent; - } - .nav > .active a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - .nav > .active a:hover { - background-color: rgba(255,255,255,.05); + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } } + } -- cgit v1.2.3 From b7acbd8476060bc1f2da9837693b0b86b68423c5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 03:00:06 -0800 Subject: move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap links with position absolute --- lib/responsive.less | 124 ++++++++++++++++++++++++++++------------------------ 1 file changed, 67 insertions(+), 57 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 9f8f9ec6c..e87b8495f 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -18,6 +18,64 @@ // --------------------- @media (max-width: 480px) { + + // Make the nav work for small devices + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } + } + // Resize modals .modal { width: auto; @@ -63,6 +121,15 @@ // -------------------------------------------------- @media (max-width: 768px) { + + // Unfix the navbar + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + // Remove width from containers .container { width: auto; @@ -80,63 +147,6 @@ margin: 0; } - // Make the nav work for small devices - .navbar { - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - - .nav:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - } -- cgit v1.2.3 From d4ded76a8fbd35ac66663a6b54f7ab6f85bf0350 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 8 Jan 2012 11:33:55 -0800 Subject: get carousel working in firefox --- lib/thumbnails.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'lib') diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 6ac3cb51f..3d1d5bc24 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -51,6 +51,8 @@ a.thumbnail:hover { .active, .next, .prev { display: block; } + .active { left: 0 } + .next, .prev { position: absolute; top: 0; -- cgit v1.2.3 From 1ef9cbc6e4b2a002eea4515f3779318f2ee60666 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 12:40:30 -0800 Subject: rejigger z-index ranks for popovers/topbar/etc --- lib/variables.less | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/variables.less b/lib/variables.less index 37f5adb71..97b6f9e3c 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -49,12 +49,13 @@ // Z-INDEX // ------- + @zindexDropdown: 1000; -@zindexFixedNavbar: 1010; -@zindexModalBackdrop: 1020; -@zindexModal: 1030; -@zindexPopover: 1040; -@zindexTwipsy: 1050; +@zindexPopover: 1010; +@zindexTwipsy: 1020; +@zindexFixedNavbar: 1030; +@zindexModalBackdrop: 1040; +@zindexModal: 1050; // THEME VARIABLES -- cgit v1.2.3 From cb9be7bd0cde19b3b401d2dcdfb6162dd00b5ab5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 13:21:44 -0800 Subject: clean up dup css in responsive, fix navbar dropdown caret --- lib/navs.less | 6 ++++-- lib/responsive.less | 16 +++++----------- lib/scaffolding.less | 10 ++++++++-- 3 files changed, 17 insertions(+), 15 deletions(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index dee482aea..65d459da9 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -182,11 +182,13 @@ .pills .dropdown-menu { .border-radius(4px); } -.nav .dropdown-toggle .caret { +.tabs .dropdown-toggle .caret, +.pills .dropdown-toggle .caret { border-top-color: @linkColor; margin-top: 6px; } -.nav .dropdown-toggle:hover .caret { +.tabs .dropdown-toggle:hover .caret, +.pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } .nav .open .dropdown-toggle { diff --git a/lib/responsive.less b/lib/responsive.less index e87b8495f..5131aa625 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -67,7 +67,6 @@ .opacity(100); content: "↓"; } - .nav:hover > li { display: block; } @@ -76,13 +75,6 @@ } } - // Resize modals - .modal { - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - // Remove the horizontal form styles .horizontal-form .control-group > label { float: none; @@ -110,10 +102,12 @@ left: 20px; right: 20px; width: auto; - .close { - padding: 10px; - } + &.fade.in { top: auto; } } + .modal-header .close { + padding: 10px; + } + } diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7432e849b..a1f41ab66 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -39,8 +39,14 @@ body { .sidebar-right { padding-right: @fluidSidebarWidth + 40; } // Float the sidebars accordingly -.sidebar-left .fluid-sidebar { float: left; margin-left: (@fluidSidebarWidth + 20) * -1; } -.sidebar-right .fluid-sidebar { float: right; margin-right: (@fluidSidebarWidth + 20) * -1; } +.sidebar-left .fluid-sidebar { + float: left; + margin-left: (@fluidSidebarWidth + 20) * -1; +} +.sidebar-right .fluid-sidebar { + float: right; + margin-right: (@fluidSidebarWidth + 20) * -1; +} // The main content area .fluid-content { -- cgit v1.2.3 From 6226b14e3b97819119da0f026e9d3ae6dd0a31c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 13:30:23 -0800 Subject: fix placement of dropdowns in navbar after getting to general in those styles --- lib/navs.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/navs.less b/lib/navs.less index 65d459da9..804a273bb 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -175,7 +175,8 @@ // --------- // Position the menu -.nav .dropdown-menu { +.pills .dropdown-menu, +.tabs .dropdown-menu { top: 33px; border-width: 1px; } @@ -191,7 +192,8 @@ .pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } -.nav .open .dropdown-toggle { +.tabs .open .dropdown-toggle, +.pills .open .dropdown-toggle { background-color: #999; border-color: #999; } -- cgit v1.2.3 From 2c790304393cce3ba7db3b3d5bc9385b1986b838 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 14:33:14 -0800 Subject: fix navbar styles for .brand --- lib/navbar.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index dbad9dcd8..82f9f7d2e 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -20,12 +20,9 @@ // Text and links .navbar { // Hover and active states - .brand:hover, - .nav .active > a { + .brand:hover { color: @white; text-decoration: none; - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); } // Website or project name .brand { @@ -166,6 +163,8 @@ // Active nav items .navbar .nav .active > a { + color: @white; + text-decoration: none; background-color: #222; background-color: rgba(0,0,0,.5); } -- cgit v1.2.3 From 4b79443bba6ad83d9da62e00765ef45121fb39ff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 15:33:44 -0800 Subject: fix dropdowns for active state in dropdown menus --- lib/dropdowns.less | 13 ++++++++++--- lib/navs.less | 30 +++++++++++++++++++++++++++--- 2 files changed, 37 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 484cbbcd7..85f74b632 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -71,9 +71,8 @@ } } -// Hover & Active states -.dropdown-menu a:hover, -.dropdown-menu .active > a { +// Hover state +.dropdown-menu li > a:hover { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); @@ -82,6 +81,14 @@ .box-shadow(@shadow); } +// Active state +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + color: #fff; + background-color: #999; + background-image: none; // remove the gradient +} + // Open state for the dropdown .dropdown.open { .dropdown-toggle { diff --git a/lib/navs.less b/lib/navs.less index 804a273bb..432ab3cbd 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -101,8 +101,8 @@ } } // Active state, and it's :hover to override normal :hover -.tabs .active > a, -.tabs .active > a:hover { +.tabs > .active > a, +.tabs > .active > a:hover { color: @gray; background-color: @white; border: 1px solid #ddd; @@ -183,6 +183,10 @@ .pills .dropdown-menu { .border-radius(4px); } + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start .tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { border-top-color: @linkColor; @@ -192,12 +196,32 @@ .pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } + +// Active dropdown links +// ------------------------- +.tabs .active .dropdown-toggle .caret, +.pills .active .dropdown-toggle .caret { + border-top-color: #333; +} + +// Active:hover dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover { + color: #000; + cursor: pointer; +} + +// Open dropdowns +// ------------------------- .tabs .open .dropdown-toggle, -.pills .open .dropdown-toggle { +.pills .open .dropdown-toggle, +.nav > .open.active > a:hover { + color: #fff; background-color: #999; border-color: #999; } .nav .open .caret, +.nav .open.active .caret, .nav .open a:hover .caret { border-top-color: #fff; .opacity(100); -- cgit v1.2.3 From eaa8220d70f84a710c9dfa1bd49a7c35bcab1a3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 15:38:57 -0800 Subject: add utilities.less file for generic classes --- lib/bootstrap.less | 3 +++ lib/scaffolding.less | 16 ---------------- lib/utilities.less | 23 +++++++++++++++++++++++ 3 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 lib/utilities.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 2bec3dd01..57ada98a9 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,5 +52,8 @@ @import "labels.less"; @import "progress-bars.less"; +// Utility classes +@import "utilities.less"; // Has to be last to override when necessary + // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index a1f41ab66..a0d54a886 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -70,22 +70,6 @@ a { } } -// Quick floats -.pull-right { - float: right; -} -.pull-left { - float: left; -} - -// Toggling content -.hide { - display: none; -} -.show { - display: block; -} - // GRID SYSTEM // ----------- diff --git a/lib/utilities.less b/lib/utilities.less new file mode 100644 index 000000000..d60d22031 --- /dev/null +++ b/lib/utilities.less @@ -0,0 +1,23 @@ +// UTILITY CLASSES +// --------------- + +// Quick floats +.pull-right { + float: right; +} +.pull-left { + float: left; +} + +// Toggling content +.hide { + display: none; +} +.show { + display: block; +} + +// Visibility +.invisible { + visibility: hidden; +} -- cgit v1.2.3 From 83c0896999c91f4d85bb75434f4a4ecfaff07fe0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 21:48:07 -0800 Subject: updated js pages to put examples first --- lib/buttons.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 3fab6e039..140d1112c 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -97,7 +97,7 @@ padding: 9px 14px 9px; font-size: @baseFontSize + 2px; line-height: normal; - .border-radius(6px); + .border-radius(5px); } &.small { padding: 7px 9px 7px; -- cgit v1.2.3 From 5032ef9b54b92443f1dbaa2594468dcd84b6bd9e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 23:14:07 -0800 Subject: remove static popovers, modals, and twipsies from components in favor of full javascript page --- lib/close.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/close.less b/lib/close.less index 25a0c3ef3..1210ec463 100644 --- a/lib/close.less +++ b/lib/close.less @@ -13,5 +13,6 @@ color: @black; text-decoration: none; .opacity(40); + cursor: pointer; } } -- cgit v1.2.3 From 5c2bf0feef7f7f64584cbd0cb6a2ef74dbba80d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jan 2012 09:15:42 -0800 Subject: remove empty margin property --- lib/progress-bars.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/progress-bars.less b/lib/progress-bars.less index f5a839834..fd9d3f427 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -46,7 +46,6 @@ .progress .bar { width: 0%; height: 18px; - margin: ; #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); -- cgit v1.2.3 From a2ebf0c0c1381c38dda24bf12aebd5f9b4907e06 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jan 2012 21:54:11 -0800 Subject: account for multiple tbody with 2px border between --- lib/tables.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 92ac57c39..4c1fb6e07 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -26,6 +26,9 @@ th { td { vertical-align: top; } +tbody + tbody { + border-top: 2px solid #ddd; +} // CONDENSED TABLE W/ HALF PADDING -- cgit v1.2.3 From 32c628725924ca014df208fa57de4c5a4050733e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Jan 2012 09:43:13 -0800 Subject: comments and borders for multiple tbody --- lib/tables.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 4c1fb6e07..8b69f5d7f 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -26,6 +26,14 @@ th { td { vertical-align: top; } + +// Remove top border from thead by default +thead:first-child tr th, +thead:first-child tr td { + border-top: 0; +} + +// Account for multiple tbody instances tbody + tbody { border-top: 2px solid #ddd; } -- cgit v1.2.3 From 6f2f947a4309a8fdeb7067612447c0f1a15dcfd9 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 11 Jan 2012 21:42:55 -0800 Subject: add build tool for js + rename twipsy to tooltip + lots of little doc cleanup --- lib/bootstrap.less | 2 +- lib/button-groups.less | 1 + lib/tooltip.less | 35 +++++++++++++++++++++++++++++++++++ lib/twipsy.less | 35 ----------------------------------- lib/variables.less | 2 +- 5 files changed, 38 insertions(+), 37 deletions(-) create mode 100644 lib/tooltip.less delete mode 100644 lib/twipsy.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 57ada98a9..d71002c46 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -39,7 +39,7 @@ // Components: Popovers @import "modals.less"; -@import "twipsy.less"; +@import "tooltip.less"; @import "popovers.less"; // Components: Buttons & Alerts diff --git a/lib/button-groups.less b/lib/button-groups.less index d2307018e..e9724ba8c 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -90,6 +90,7 @@ display: block; top: 30px; .border-radius(5px); + &.large { top: 40px; } } .btn-group.open .dropdown-toggle { background-image: none; diff --git a/lib/tooltip.less b/lib/tooltip.less new file mode 100644 index 000000000..b21c6bb7a --- /dev/null +++ b/lib/tooltip.less @@ -0,0 +1,35 @@ +// TOOLTIP +// ------= + +.tooltip { + position: absolute; + z-index: @zindexTooltip; + display: block; + visibility: visible; + padding: 5px; + font-size: 11px; + .opacity(0); + &.in { .opacity(80); } + &.top { margin-top: -2px; } + &.right { margin-left: 2px; } + &.bottom { margin-top: 2px; } + &.left { margin-left: -2px; } + &.top .tooltip-arrow { #popoverArrow > .top(); } + &.left .tooltip-arrow { #popoverArrow > .left(); } + &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } + &.right .tooltip-arrow { #popoverArrow > .right(); } +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: white; + text-align: center; + text-decoration: none; + background-color: @black; + .border-radius(4px); +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; +} diff --git a/lib/twipsy.less b/lib/twipsy.less deleted file mode 100644 index 7eaa7d5bf..000000000 --- a/lib/twipsy.less +++ /dev/null @@ -1,35 +0,0 @@ -// TWIPSY -// ------ - -.twipsy { - position: absolute; - z-index: @zindexTwipsy; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - .opacity(0); - &.in { .opacity(80); } - &.top { margin-top: -2px; } - &.right { margin-left: 2px; } - &.bottom { margin-top: 2px; } - &.left { margin-left: -2px; } - &.top .twipsy-arrow { #popoverArrow > .top(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.bottom .twipsy-arrow { #popoverArrow > .bottom(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } -} -.twipsy-inner { - max-width: 200px; - padding: 3px 8px; - color: white; - text-align: center; - text-decoration: none; - background-color: @black; - .border-radius(4px); -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} diff --git a/lib/variables.less b/lib/variables.less index 97b6f9e3c..3f32c36f4 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -52,7 +52,7 @@ @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTwipsy: 1020; +@zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; -- cgit v1.2.3 From 5e3c21133430112bf8361827dc7a6a29f3f56c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jan 2012 10:19:07 -0800 Subject: fix type shorthand in blockquote --- lib/type.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 84130f3fa..73462b38a 100644 --- a/lib/type.less +++ b/lib/type.less @@ -151,7 +151,7 @@ blockquote { border-left: 5px solid #eee; p { margin-bottom: 0; - #font > .shorthand(300,16px,@baseLineHeight * 1.25); + #font > .shorthand(16px,300,@baseLineHeight * 1.25); } small { display: block; -- cgit v1.2.3 From ef8b27cdc7ad490b4b52003a7178bd1465ee5dc9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jan 2012 12:30:36 -0800 Subject: fix heading --- lib/type.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 73462b38a..f7d5077cf 100644 --- a/lib/type.less +++ b/lib/type.less @@ -69,8 +69,8 @@ h6 { } -// COLORS -// ------ +// LISTS +// ----- // Unordered and Ordered lists ul, ol { -- cgit v1.2.3 From 391248c0e3ba9b00b0b4a02e4d94475e9ae9877a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jan 2012 15:29:16 -0800 Subject: nuke uber footer, bring back topbar dropdowns --- lib/dropdowns.less | 10 ++++------ lib/navbar.less | 20 +++++++++++++++----- 2 files changed, 19 insertions(+), 11 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 85f74b632..daa7003e3 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -36,12 +36,12 @@ min-width: 160px; max-width: 220px; _width: 160px; - padding: 5px 0; + padding: 4px 0; margin: 0; // override default ul list-style: none; background-color: @white; border-color: #999; - border-color: rgba(0,0,0,.1); + border-color: rgba(0,0,0,.2); border-style: solid; border-width: 1px; .border-radius(0 0 5px 5px); @@ -68,6 +68,7 @@ font-weight: normal; line-height: 18px; color: @gray; + white-space: nowrap; } } @@ -75,10 +76,7 @@ .dropdown-menu li > a:hover { color: #fff; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); + background-color: @linkColor; } // Active state diff --git a/lib/navbar.less b/lib/navbar.less index 82f9f7d2e..a3e64cde8 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -192,7 +192,7 @@ // Menu position and menu carets .navbar .dropdown-menu { - top: 42px; + top: 41px; .border-radius(4px); &:before { content: ''; @@ -200,10 +200,10 @@ border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0,0,0,.1); + border-bottom-color: rgba(0,0,0,.2); position: absolute; top: -7px; - left: 12px; + left: 9px; } &:after { content: ''; @@ -213,7 +213,7 @@ border-bottom: 6px solid #fff; position: absolute; top: -6px; - left: 13px; + left: 10px; } } @@ -222,12 +222,22 @@ .navbar .open.dropdown .caret { border-top-color: #fff; } +.navbar .nav .active .caret { + .opacity(100); +} // Remove background color from open dropdown -.navbar .open .dropdown-toggle { +.navbar .nav .open > .dropdown-toggle, +.navbar .nav .active > .dropdown-toggle, +.navbar .nav .open.active > .dropdown-toggle { background-color: transparent; } +// Dropdown link on hover +.navbar .nav .active > .dropdown-toggle:hover { + color: #fff; +} + // Right aligned menus need alt position .navbar .nav.pull-right .dropdown-menu { right: 0; -- cgit v1.2.3 From fc053ac8b27611e3dc7fae769ce28f154250d50e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jan 2012 10:07:56 -0800 Subject: update dropdowns spacing and docs section spacing --- lib/dropdowns.less | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index daa7003e3..e2d5fef25 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -63,7 +63,7 @@ // Links within the dropdown menu a { display: block; - padding: 2px 15px; + padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; @@ -73,18 +73,12 @@ } // Hover state -.dropdown-menu li > a:hover { - color: #fff; - text-decoration: none; - background-color: @linkColor; -} - -// Active state +.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; - background-color: #999; - background-image: none; // remove the gradient + text-decoration: none; + background-color: @linkColor; } // Open state for the dropdown -- cgit v1.2.3 From f587e81b7d72e47b16bf808c721c3dfe45ae1062 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:18:15 -0800 Subject: rewrite alert messages to use less code, combine the look of default and block messages, simplify docs --- lib/alerts.less | 126 +++++++++++++++++++++++++------------------------------ lib/buttons.less | 8 +--- lib/type.less | 1 - 3 files changed, 58 insertions(+), 77 deletions(-) (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index bb0bd5d99..d1cd8addd 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -2,82 +2,68 @@ // ------------ // Base alert styles -.alert-message { +.alert { position: relative; - padding: 7px 15px; + padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; - color: @grayDark; text-shadow: 0 1px 0 rgba(255,255,255,.5); - .gradientBar(#fceec1, #eedc94); // warning by default - border-width: 1px; - border-style: solid; + background-color: #fcf8e3; + border: 1px solid #f3edd2; .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); +} +.alert, +.alert-heading { + color: #c09853; +} - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } +// Adjust close link position +.alert > .close { + *margin-top: 3px; /* IE7 spacing */ + margin-right: -21px; +} - // Remove extra margin from content - h5 { - line-height: @baseLineHeight; - } - p { - margin-bottom: 0; - } - div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; - } - .btn { - // Provide actions with buttons - .box-shadow(0 1px 0 rgba(255,255,255,.25)); - } +// Alternate styles +// ---------------- - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } +.success-alert { + background-color: #dff0d8; + border-color: #cfe8c4; +} +.success-alert, +.success-alert .alert-heading { + color: #468847; +} +.danger-alert, +.error-alert { + background-color: #f2dede; + border-color: #e9c7c7; +} +.danger-alert, +.error-alert, +.danger-alert .alert-heading, +.error-alert .alert-heading { + color: #B94A48; +} +.info-alert { + background-color: #d9edf7; + border-color: #bfe1f2; +} +.info-alert, +.info-alert .alert-heading { + color: #3a87ad; +} - &.block-message { - padding: 14px; - background-image: none; - background-color: lighten(#fceec1, 5%); - .reset-filter(); // undo gradient for IE9 - border-color: #fceec1; - .box-shadow(none); - ul, p { - margin-right: 30px; - } - ul { - margin-bottom: 0; - } - li { - color: @grayDark; - } - .alert-actions { - margin-top: 5px; - } - &.error, - &.success, - &.info { - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - } - &.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); - } - &.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); - } - &.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); - } - } + +// Block alerts +// ------------------------ +.block-alert { + padding-top: 14px; + padding-bottom: 14px; +} +.block-alert > p, +.block-alert > ul { + margin-bottom: 0; } +.block-alert p + p { + margin-top: 5px; +} \ No newline at end of file diff --git a/lib/buttons.less b/lib/buttons.less index 140d1112c..a7492f9fd 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -2,13 +2,10 @@ // ------------- // Shared colors for buttons and alerts -.btn, -.alert-message { +.btn { // Set text color &.danger, &.danger:hover, - &.error, - &.error:hover, &.success, &.success:hover, &.info, @@ -17,8 +14,7 @@ color: @white } // Danger and error appear as red - &.danger, - &.error { + &.danger { .gradientBar(#ee5f5b, #c43c35); } // Success appears as green diff --git a/lib/type.less b/lib/type.less index f7d5077cf..ab7409ce3 100644 --- a/lib/type.less +++ b/lib/type.less @@ -90,7 +90,6 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; } ul.unstyled { margin-left: 0; -- cgit v1.2.3 From ceb6836e03b03c757578c9e5614f535d9be2ad7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:24:23 -0800 Subject: move up alert message close icon --- lib/close.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/close.less b/lib/close.less index 1210ec463..f2c5157c9 100644 --- a/lib/close.less +++ b/lib/close.less @@ -5,7 +5,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: @baseLineHeight * .75; + line-height: 12px; color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); -- cgit v1.2.3 From a40b2a636c908859c2bb7434f0c050be2dc7e70e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:38:40 -0800 Subject: make inline and search form labels inline-block --- lib/forms.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 505331044..ed97d8dd0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -452,6 +452,10 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } +.search-form label, +.inline-form label { + display: inline-block; +} // Margin to space out fieldsets .control-group { -- cgit v1.2.3 From 028726a9a3e2acd56195dacd903680db5d934b8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:45:01 -0800 Subject: add user-select mixin --- lib/mixins.less | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 50986c68c..67e0c27de 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -147,8 +147,7 @@ transition: @transition; } -// Transform for scale and rotate -// translate, rotate, scale -- need to finalize +// Transformations .rotate(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); @@ -171,6 +170,15 @@ transform: translate(@x, @y); } +// User select +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -o-user-select: @select; + user-select: @select; +} + // Background clipping // Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { -- cgit v1.2.3 From 55ea574f8a56534b1313b5f2d85e7ee22565ea27 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:50:36 -0800 Subject: update preventing double border line for bordered tables by account for th elements in tr elements --- lib/tables.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 8b69f5d7f..1d044ec7c 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -65,6 +65,7 @@ tbody + tbody { } // Prevent a double border thead:first-child tr:first-child th, + tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { border-top: 0; } -- cgit v1.2.3 From 74c0fc17c826d3a16c1b3e45b71138c048f7d630 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:56:47 -0800 Subject: fix duplicate icons --- lib/sprites.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/sprites.less b/lib/sprites.less index 8b5bcd5a5..aec08a5a2 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -32,7 +32,7 @@ i { .film { background-position: -192px 0; } .th-large { background-position: -216px 0; } .th { background-position: -240px 0; } -.th-lines { background-position: -264px 0; } +.th-list { background-position: -264px 0; } .ok { background-position: -288px 0; } .remove { background-position: -312px 0; } .zoom-in { background-position: -336px 0; } -- cgit v1.2.3 From 2c3365f99ef81e53d90593c45d10ebeb3426dea9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 17:16:46 -0800 Subject: allow btn-groups to work in navbars --- lib/navbar.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/navbar.less b/lib/navbar.less index a3e64cde8..0d01fe524 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -45,9 +45,13 @@ } } // Buttons in navbar - .btn { + .btn, + .btn-group { margin-top: 5px; // make buttons vertically centered in navbar } + .btn-group .btn { + margin-top: 0; + } } // Navbar forms @@ -218,8 +222,8 @@ } // Dropdown toggle caret -.navbar .dropdown-toggle .caret, -.navbar .open.dropdown .caret { +.navbar .nav .dropdown-toggle .caret, +.navbar .nav .open.dropdown .caret { border-top-color: #fff; } .navbar .nav .active .caret { -- cgit v1.2.3 From 6d916763f82be8c2d4f87842275170c12bea72ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 20:54:37 -0800 Subject: adding the pager component after rewriting the pagination docs and css --- lib/bootstrap.less | 1 + lib/pager.less | 25 ++++++++++++++++++ lib/pagination.less | 76 +++++++++++++++++++++++++++-------------------------- 3 files changed, 65 insertions(+), 37 deletions(-) create mode 100644 lib/pager.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index d71002c46..43b512086 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -36,6 +36,7 @@ @import "navs.less"; @import "breadcrumbs.less"; @import "pagination.less"; +@import "pager.less"; // Components: Popovers @import "modals.less"; diff --git a/lib/pager.less b/lib/pager.less new file mode 100644 index 000000000..de009afda --- /dev/null +++ b/lib/pager.less @@ -0,0 +1,25 @@ +// PAGER +// ----- + +.pager { + margin-left: 0; + margin-bottom: @baseLineHeight; + list-style: none; + text-align: center; + .clearfix(); +} +.pager li { + display: inline; +} +.pager a { + display: inline-block; + padding: 6px 15px; + background-color: #f5f5f5; + .border-radius(15px); +} +.pager .next a { + float: right; +} +.pager .previous a { + float: left; +} diff --git a/lib/pagination.less b/lib/pagination.less index e38805760..655abe5a3 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -4,44 +4,46 @@ .pagination { height: @baseLineHeight * 2; margin: @baseLineHeight 0; - ul { - display: inline-block; - .ie7-inline-block(); - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); - } - li { + } +.pagination ul { + display: inline-block; + .ie7-inline-block(); + margin-left: 0; + margin-bottom: 0; + border: 1px solid #ddd; + border: 1px solid rgba(0,0,0,.15); + .border-radius(3px); + .box-shadow(0 1px 2px rgba(0,0,0,.05)); +} +.pagination li { display: inline; } - a { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - text-decoration: none; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0,0,0,.15); - *border-right-color: #ddd; /* IE6-7 */ - } - a:hover, - .active a { - background-color: lighten(@blue, 45%); - } - .disabled a, - .disabled a:hover { - color: @grayLight; - background-color: transparent; - cursor: default; - } - .next a { - border: 0; - } +.pagination a { + float: left; + padding: 0 14px; + line-height: (@baseLineHeight * 2) - 2; + text-decoration: none; + border-right: 1px solid #ddd; + border-right: 1px solid rgba(0,0,0,.15); +} +.pagination a:hover, +.pagination .active a { + background-color: #f5f5f5; +} +.pagination .disabled a, +.pagination .disabled a:hover { + color: @grayLight; + background-color: transparent; + cursor: default; +} +.pagination li:last-child a { + border: 0; +} - // Centered - &.centered { - text-align: center; - } +// Centered +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; } -- cgit v1.2.3 From dab6d2b17cc2fd67c2462b5a5eb84eb58d9c72bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 21:28:47 -0800 Subject: change up classes on tables and forms, fix nav list styles in example --- lib/forms.less | 12 ++++++------ lib/responsive.less | 8 ++++---- lib/tables.less | 6 +++--- 3 files changed, 13 insertions(+), 13 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index ed97d8dd0..04e684c99 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -441,9 +441,9 @@ input::-webkit-input-placeholder { // Common properties // ----------------- -.search-form, -.inline-form, -.horizontal-form { +.form-search, +.form-inline, +.form-horizontal { input, textarea, select, @@ -452,8 +452,8 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } -.search-form label, -.inline-form label { +.form-search label, +.form-inline label { display: inline-block; } @@ -469,7 +469,7 @@ input::-webkit-input-placeholder { // Horizontal-specific styles // -------------------------- -.horizontal-form { +.form-horizontal { // Float the labels left .control-group > label { float: left; diff --git a/lib/responsive.less b/lib/responsive.less index 5131aa625..f5c23df3c 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -76,22 +76,22 @@ } // Remove the horizontal form styles - .horizontal-form .control-group > label { + .form-horizontal .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content - .horizontal-form .controls { + .form-horizontal .controls { margin-left: 0; } // Move the options list down to align with labels - .horizontal-form .control-list { + .form-horizontal .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls - .horizontal-form .form-actions { + .form-horizontal .form-actions { padding-left: 0; } diff --git a/lib/tables.less b/lib/tables.less index 1d044ec7c..5b803b3df 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -42,7 +42,7 @@ tbody + tbody { // CONDENSED TABLE W/ HALF PADDING // ------------------------------- -.condensed-table { +.table-condensed { th, td { padding: 4px 5px; @@ -53,7 +53,7 @@ tbody + tbody { // BORDERED VERSION // ---------------- -.bordered-table { +.table-bordered { border: 1px solid #ddd; border-collapse: separate; // Done so we can round those corners! .border-radius(4px); @@ -94,7 +94,7 @@ tbody + tbody { // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) -.striped-table { +.table-striped { tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { -- cgit v1.2.3 From 16eccc43d9fa6317818b5d1621d0477150214488 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 23:28:48 -0800 Subject: dates updated to 2012 --- lib/bootstrap.less | 2 +- lib/print.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 43b512086..db6a192f5 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -1,7 +1,7 @@ /*! * Bootstrap @VERSION * - * Copyright 2011 Twitter, Inc + * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * diff --git a/lib/print.less b/lib/print.less index b45d016fd..4fd45e282 100644 --- a/lib/print.less +++ b/lib/print.less @@ -1,7 +1,7 @@ /*! * Bootstrap @VERSION for Print * - * Copyright 2011 Twitter, Inc + * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * -- cgit v1.2.3 From f989c6892f690cf46b0e67158ebb621c3fe690fe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 23:33:42 -0800 Subject: gray out links for active state on pagination --- lib/pagination.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'lib') diff --git a/lib/pagination.less b/lib/pagination.less index 655abe5a3..064362b7b 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -30,6 +30,9 @@ .pagination .active a { background-color: #f5f5f5; } +.pagination .active a { + color: @grayLight; +} .pagination .disabled a, .pagination .disabled a:hover { color: @grayLight; -- cgit v1.2.3 From 8ceea1f559fb432fc12df32153911de89caea36f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:26:06 -0800 Subject: fix some ie7 bugs, improve dropdowns for ie due to lack of a shadow, fix pager example code --- lib/dropdowns.less | 5 ++++- lib/tables.less | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2d5fef25..08054713c 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -21,6 +21,7 @@ .dropdown .caret { margin-top: 8px; margin-left: 2px; + *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { @@ -40,7 +41,7 @@ margin: 0; // override default ul list-style: none; background-color: @white; - border-color: #999; + border-color: #ccc; border-color: rgba(0,0,0,.2); border-style: solid; border-width: 1px; @@ -50,6 +51,8 @@ -moz-background-clip: padding; background-clip: padding-box; zoom: 1; // do we need this? + *border-right-width: 2px; + *border-bottom-width: 2px; // Dividers (basically an hr) within the dropdown .divider { diff --git a/lib/tables.less b/lib/tables.less index 5b803b3df..1edd9e3b8 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -152,7 +152,7 @@ table { // Style the sorted column headers (THs) .headerSortUp, .headerSortDown { - background-color: rgba(141,192,219,.25); + background-color: #f7f7f9; text-shadow: 0 1px 1px rgba(255,255,255,.75); } // Style the ascending (reverse alphabetical) column header -- cgit v1.2.3 From fe160261e460903cae251de25eaf41f236bd051e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:30:24 -0800 Subject: normalize the alert classes to match last night's flip for form and table classes --- lib/alerts.less | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index d1cd8addd..a338f502a 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -25,45 +25,45 @@ // Alternate styles // ---------------- -.success-alert { +.alert-success { background-color: #dff0d8; border-color: #cfe8c4; } -.success-alert, -.success-alert .alert-heading { +.alert-success, +.alert-success .alert-heading { color: #468847; } -.danger-alert, -.error-alert { +.alert-danger, +.alert-error { background-color: #f2dede; border-color: #e9c7c7; } -.danger-alert, -.error-alert, -.danger-alert .alert-heading, -.error-alert .alert-heading { +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading { color: #B94A48; } -.info-alert { +.alert-info { background-color: #d9edf7; border-color: #bfe1f2; } -.info-alert, -.info-alert .alert-heading { +.alert-info, +.alert-info .alert-heading { color: #3a87ad; } // Block alerts // ------------------------ -.block-alert { +.alert-block { padding-top: 14px; padding-bottom: 14px; } -.block-alert > p, -.block-alert > ul { +.alert-block > p, +.alert-block > ul { margin-bottom: 0; } -.block-alert p + p { +.alert-block p + p { margin-top: 5px; } \ No newline at end of file -- cgit v1.2.3 From 9f732e90d4e8f3a598a798fb8b29a4f59c0b7631 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:33:30 -0800 Subject: make horizontal form labels map to default grid sizing --- lib/forms.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 04e684c99..ef4804afc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -461,10 +461,6 @@ input::-webkit-input-placeholder { .control-group { margin-bottom: @baseLineHeight; } -// Bold the labels so they stand out -.control-group > label { - font-weight: bold; -} // Horizontal-specific styles // -------------------------- @@ -473,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 130px; + width: 120px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 150px; + margin-left: 140px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 150px; + padding-left: 140px; } } -- cgit v1.2.3 From 6077b7678c8d21eeb4bc33bbfede20a4cc41fa11 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:41:46 -0800 Subject: fix modal horizontal alignment --- lib/modals.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/modals.less b/lib/modals.less index 46fcd880b..fe3f295b0 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -26,7 +26,7 @@ max-height: 500px; overflow: auto; width: 560px; - margin: -250px 0 0 -250px; + margin: -250px 0 0 -280px; background-color: @white; border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); -- cgit v1.2.3 From f43f2c0ea269e72251e7f858b44ccef966d079af Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 12:53:35 -0800 Subject: fix grid sized horizontal form layout --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index ef4804afc..703accff8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -469,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 120px; + width: 140px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 140px; + margin-left: 160px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 140px; + padding-left: 160px; } } -- cgit v1.2.3 From 127c0d0b52c52227dcd3f346d371e5cd4219a08f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 13:12:29 -0800 Subject: make dl and child elements less specific --- lib/type.less | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index ab7409ce3..707d2215d 100644 --- a/lib/type.less +++ b/lib/type.less @@ -99,15 +99,16 @@ ul.unstyled { // Description Lists dl { margin-bottom: @baseLineHeight; - dt, dd { - line-height: @baseLineHeight; - } - dt { - font-weight: bold; - } - dd { - margin-left: @baseLineHeight / 2; - } +} +dt, +dd { + line-height: @baseLineHeight; +} +dt { + font-weight: bold; +} +dd { + margin-left: @baseLineHeight / 2; } // MISC -- cgit v1.2.3 From c02501e1b714ebb44c560483316ac36c4f709c50 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 16:27:36 -0800 Subject: move carousel to separate stylesheet, update popovers to fix ie7 bug, fix pagination, fix alerts --- lib/alerts.less | 8 ++++---- lib/bootstrap.less | 1 + lib/carousel.less | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++ lib/pagination.less | 12 +++++++----- lib/popovers.less | 4 ++-- lib/thumbnails.less | 53 ---------------------------------------------------- 6 files changed, 68 insertions(+), 64 deletions(-) create mode 100644 lib/carousel.less (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index a338f502a..53a43c6e4 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -3,7 +3,6 @@ // Base alert styles .alert { - position: relative; padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); @@ -17,9 +16,10 @@ } // Adjust close link position -.alert > .close { +.alert .close { *margin-top: 3px; /* IE7 spacing */ - margin-right: -21px; + position: relative; + right: -21px; } // Alternate styles @@ -66,4 +66,4 @@ } .alert-block p + p { margin-top: 5px; -} \ No newline at end of file +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index db6a192f5..db5ed61f7 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,6 +52,7 @@ @import "thumbnails.less"; @import "labels.less"; @import "progress-bars.less"; +@import "carousel.less"; // Utility classes @import "utilities.less"; // Has to be last to override when necessary diff --git a/lib/carousel.less b/lib/carousel.less new file mode 100644 index 000000000..0cfb0127a --- /dev/null +++ b/lib/carousel.less @@ -0,0 +1,54 @@ +// CAROUSEL +// -------- + +.carousel { + + position: relative; + + .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; + } + + .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + } + + .active, .next, .prev { display: block; } + + .active { left: 0 } + + .next, .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { left: 100%; } + .prev { left: -100%; } + .next.left, .prev.right { left: 0% } + + .active.left { left: -100% } + .active.right { left: 100% } + + .nav { + width: auto; + .border-radius(0); + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; + &.right { right: 5px; left: auto; } + &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } + } +} \ No newline at end of file diff --git a/lib/pagination.less b/lib/pagination.less index 064362b7b..8ecb2a401 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -10,8 +10,6 @@ .ie7-inline-block(); margin-left: 0; margin-bottom: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); .border-radius(3px); .box-shadow(0 1px 2px rgba(0,0,0,.05)); } @@ -23,8 +21,8 @@ padding: 0 14px; line-height: (@baseLineHeight * 2) - 2; text-decoration: none; - border-right: 1px solid #ddd; - border-right: 1px solid rgba(0,0,0,.15); + border: 1px solid #ddd; + border-left-width: 0; } .pagination a:hover, .pagination .active a { @@ -39,8 +37,12 @@ background-color: transparent; cursor: default; } +.pagination li:first-child a { + border-left-width: 1px; + .border-radius(3px 0 0 3px); +} .pagination li:last-child a { - border: 0; + .border-radius(0 3px 3px 0); } // Centered diff --git a/lib/popovers.less b/lib/popovers.less index 9ecdf5fd9..6de314d86 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -25,8 +25,8 @@ padding: 3px; width: 280px; overflow: hidden; - background-color: @black; - background-color: rgba(0,0,0,.8); + background: @black; // has to be full background declaration for IE fallback + background: rgba(0,0,0,.8); .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); } diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 3d1d5bc24..4f9c5f76d 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -3,7 +3,6 @@ .thumbnails { margin-left: -20px; - margin-bottom: 0; list-style: none; .clearfix(); } @@ -32,55 +31,3 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } - -.carousel { - - position: relative; - - .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; - } - - .item { - display: none; - position: relative; - .transition(.6s ease-in-out left); - } - - .active, .next, .prev { display: block; } - - .active { left: 0 } - - .next, .prev { - position: absolute; - top: 0; - width: 100%; - } - - .next { left: 100%; } - .prev { left: -100%; } - .next.left, .prev.right { left: 0% } - - .active.left { left: -100% } - .active.right { left: 100% } - - .nav { - width: auto; - .border-radius(0); - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; - &.right { right: 5px; left: auto; } - &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } - } -} \ No newline at end of file -- cgit v1.2.3 From f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 18:40:17 -0800 Subject: updated accordion and carousel; accordion still needs work --- lib/accordion.less | 21 ++++++++++ lib/bootstrap.less | 1 + lib/carousel.less | 115 ++++++++++++++++++++++++++++++++++++++--------------- 3 files changed, 106 insertions(+), 31 deletions(-) create mode 100644 lib/accordion.less (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less new file mode 100644 index 000000000..babbe85f9 --- /dev/null +++ b/lib/accordion.less @@ -0,0 +1,21 @@ +// ACCORDION +// --------- + +.accordion { + padding: 0; +} +.accordion-heading { + padding: 5px 10px; + border: 1px solid #ddd; +} +.accordion-body { + padding: 10px; + margin-left: 0; + margin-bottom: @baseLineHeight / 2; + border: 1px solid #ddd; + border-top: 0; + display: none; +} +.accordion .in { + display: block; +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index db5ed61f7..fec87a339 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,6 +52,7 @@ @import "thumbnails.less"; @import "labels.less"; @import "progress-bars.less"; +@import "accordion.less"; @import "carousel.less"; // Utility classes diff --git a/lib/carousel.less b/lib/carousel.less index 0cfb0127a..a9399ef63 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -2,14 +2,17 @@ // -------- .carousel { + position: relative; + line-height: 1; +} +.carousel-inner { + overflow: hidden; + width: 100%; position: relative; +} - .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; - } +.carousel { .item { display: none; @@ -17,38 +20,88 @@ .transition(.6s ease-in-out left); } - .active, .next, .prev { display: block; } + .active, + .next, + .prev { display: block; } - .active { left: 0 } + .active { + left: 0; + } - .next, .prev { + .next, + .prev { position: absolute; top: 0; width: 100%; } - .next { left: 100%; } - .prev { left: -100%; } - .next.left, .prev.right { left: 0% } + .next { + left: 100%; + } + .prev { + left: -100%; + } + .next.left, + .prev.right { + left: 0; + } + + .active.left { + left: -100%; + } + .active.right { + left: 100%; + } - .active.left { left: -100% } - .active.right { left: 100% } +} - .nav { - width: auto; - .border-radius(0); - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; - &.right { right: 5px; left: auto; } - &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } - } -} \ No newline at end of file +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: #ccc; + text-align: center; + background: #999; + background: rgba(0,0,0,.5); + .border-radius(20px); + + // Reposition the right one + &.right { + left: auto; + right: 15px; + } + + // Hover state + &:hover { + color: #fff; + text-decoration: none; + background: #333; + background: rgba(0,0,0,.75); + } +} + +// Caption for text below images +// ----------------------------- + +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px 15px 5px; + background: #333; + background: rgba(0,0,0,.75); +} +.carousel-caption h4, +.carousel-caption p { + color: #fff; +} -- cgit v1.2.3 From 810bba97a418ae641d9360c232c1492610463dcf Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 15 Jan 2012 21:48:58 -0800 Subject: make accordions little bit smoother --- lib/accordion.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index babbe85f9..ab450d10e 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -4,18 +4,23 @@ .accordion { padding: 0; } + .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + margin-bottom: 1px; } + .accordion-body { - padding: 10px; margin-left: 0; - margin-bottom: @baseLineHeight / 2; +} + +.accordion-inner { + padding: 10px; border: 1px solid #ddd; border-top: 0; - display: none; } + .accordion .in { - display: block; + margin-bottom: @baseLineHeight / 2; } -- cgit v1.2.3 From 036b98535711941ba64d9bb507f57ca60ec3cdc3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 15 Jan 2012 21:50:04 -0800 Subject: fix margin --- lib/accordion.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index ab450d10e..8485ee427 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -8,11 +8,10 @@ .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; - margin-bottom: 1px; } .accordion-body { - margin-left: 0; + margin: 0 0 1px 0; } .accordion-inner { -- cgit v1.2.3 From 87bd0e0b88b9c5a836bfde1478839e542c74ac05 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 15 Jan 2012 21:54:58 -0800 Subject: do some trickery to get borders looking right --- lib/accordion.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index 8485ee427..c5fd657e0 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -8,16 +8,19 @@ .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + border-bottom: 0; } .accordion-body { + border-bottom: 1px solid #ddd; margin: 0 0 1px 0; } .accordion-inner { padding: 10px; border: 1px solid #ddd; - border-top: 0; + border-bottom: 0; + margin-bottom: 0; } .accordion .in { -- cgit v1.2.3 From 7ec4e91324e6e490291f3de22e1127c4fa55f82a Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 15 Jan 2012 21:58:45 -0800 Subject: reorder properties --- lib/accordion.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index c5fd657e0..7bd0b8278 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -12,15 +12,15 @@ } .accordion-body { - border-bottom: 1px solid #ddd; margin: 0 0 1px 0; + border-bottom: 1px solid #ddd; } .accordion-inner { padding: 10px; + margin-bottom: 0; border: 1px solid #ddd; border-bottom: 0; - margin-bottom: 0; } .accordion .in { -- cgit v1.2.3 From f1a88eede391cbb4beaadce60768a351724d7633 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 16 Jan 2012 17:27:30 -0800 Subject: fix js link in docs nav, restyle accordion with new css --- lib/accordion.less | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index babbe85f9..25e8fec63 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -4,17 +4,21 @@ .accordion { padding: 0; } +.accordion-group { + margin-bottom: @baseLineHeight / 2; + background-color: #eee; + .border-radius(4px); +} .accordion-heading { - padding: 5px 10px; - border: 1px solid #ddd; + display: block; + padding: 9px 15px; } .accordion-body { - padding: 10px; - margin-left: 0; - margin-bottom: @baseLineHeight / 2; - border: 1px solid #ddd; - border-top: 0; display: none; + padding: 15px; + margin-left: 0; + border-top: 1px solid #ddd; + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); } .accordion .in { display: block; -- cgit v1.2.3 From 51f5b7b8af6e0f6ef0dbe86528209cd664af240a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jan 2012 23:24:59 -0800 Subject: cleanup accordion css and add comments --- lib/accordion.less | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index b7542b18f..a57683e7b 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -1,10 +1,13 @@ // ACCORDION // --------- + +// Parent container .accordion { margin-bottom: @baseLineHeight; } +// Group == heading + body .accordion-group { background-color: #f5f5f5; .border-radius(4px); @@ -13,16 +16,12 @@ padding: 8px 15px; border-bottom: 0; } - .accordion-body { - margin: 0 0 2px; + margin-bottom: 2px; } +// Inner needs the styles because you can't animate properly with any styles on the element .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } - -.accordion .in { - margin-bottom: @baseLineHeight / 2; -} -- cgit v1.2.3 From 47b8184bbb5784eb373ffbb905c8a1756eba3c6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jan 2012 23:39:18 -0800 Subject: scope table styles to a class, .table, instead of on the generic element as a smarter default --- lib/tables.less | 51 +++++++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 26 deletions(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 1edd9e3b8..29e1e2d46 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -4,39 +4,38 @@ // ---------------------------------------- - // BASELINE STYLES // --------------- -table { +.table { width: 100%; margin-bottom: @baseLineHeight; -} -th, -td { - padding: 8px; - line-height: @baseLineHeight; - text-align: left; - border-top: 1px solid #ddd; -} -th { - font-weight: bold; - vertical-align: bottom; -} -td { - vertical-align: top; -} - -// Remove top border from thead by default -thead:first-child tr th, -thead:first-child tr td { - border-top: 0; + // Cells + th, + td { + padding: 8px; + line-height: @baseLineHeight; + text-align: left; + border-top: 1px solid #ddd; + } + th { + font-weight: bold; + vertical-align: bottom; + } + td { + vertical-align: top; + } + // Remove top border from thead by default + thead:first-child tr th, + thead:first-child tr td { + border-top: 0; + } + // Account for multiple tbody instances + tbody + tbody { + border-top: 2px solid #ddd; + } } -// Account for multiple tbody instances -tbody + tbody { - border-top: 2px solid #ddd; -} // CONDENSED TABLE W/ HALF PADDING -- cgit v1.2.3 From dd4140319ab4380dd21f5e90e65ef855c54c3420 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jan 2012 23:52:49 -0800 Subject: revamp the mixins file to organize things a bit more, make placeholder text use a new variable instead of relying solely on @grayLight --- lib/mixins.less | 97 +++++++++++++++++++++++++++++++++++--------------- lib/progress-bars.less | 2 +- lib/variables.less | 4 +++ 3 files changed, 73 insertions(+), 30 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 67e0c27de..bcc67954a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -3,7 +3,12 @@ // ----------------------------------------------------------------- -// Clearfix for clearing floats like a boss h5bp.com/q +// UTILITY MIXINS +// -------------------------------------------------- + +// Clearfix +// ------------------------- +// For clearing floats like a boss h5bp.com/q .clearfix() { zoom: 1; &:before, @@ -19,6 +24,7 @@ } // Center-align a block level element +// ------------------------- .center-block() { display: block; margin-left: auto; @@ -26,12 +32,14 @@ } // IE7 inline-block +// ------------------------- .ie7-inline-block() { *display: inline; /* IE7 inline-block hack */ *zoom: 1; } // Sizing shortcuts +// ------------------------- .size(@height: 5px, @width: 5px) { width: @width; height: @height; @@ -40,8 +48,9 @@ .size(@size, @size); } -// Input placeholder text -.placeholder(@color: @grayLight) { +// Placeholder text +// ------------------------- +.placeholder(@color: @placeHolderText) { :-moz-placeholder { color: @color; } @@ -50,7 +59,11 @@ } } -// Font Stacks + + +// FONTS +// -------------------------------------------------- + #font { #family { .serif() { @@ -82,20 +95,28 @@ } } -// Grid System + + +// GRID SYSTEM +// -------------------------------------------------- + +// Site container +// ------------------------- .fixed-container() { width: @siteWidth; margin-left: auto; margin-right: auto; .clearfix(); } + +// Columns and offseting +// ------------------------- .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { float: left; @@ -107,6 +128,11 @@ .columns(@columnSpan); } + + +// CSS3 PROPERTIES +// -------------------------------------------------- + // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; @@ -170,15 +196,6 @@ transform: translate(@x, @y); } -// User select -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - // Background clipping // Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { @@ -187,6 +204,15 @@ background-clip: @clip; } +// Background sizing +.background-size(@size){ + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} + + // Box sizing .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; @@ -194,6 +220,15 @@ box-sizing: @boxmodel; } +// User select +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -o-user-select: @select; + user-select: @select; +} + // Resize anything .resizable(@direction: both) { resize: @direction; // Options: horizontal, vertical, both @@ -210,6 +245,18 @@ column-gap: @columnGap; } +// Opacity +.opacity(@opacity: 100) { + filter: e(%("alpha(opacity=%d)", @opacity)); + -moz-opacity: @opacity / 100; + opacity: @opacity / 100; +} + + + +// BACKGROUNDS +// -------------------------------------------------- + // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { .background(@color: @white, @alpha: 1) { @@ -301,14 +348,13 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } -// Opacity -.opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; -} -// Popover arrows + +// COMPONENT MIXINS +// -------------------------------------------------- + +// POPOVER ARROWS +// ------------------------- // For tipsies and popovers #popoverArrow { .top(@arrowWidth: 5px) { @@ -344,10 +390,3 @@ border-right: @arrowWidth solid @black; } } - -.background-size(@width, @height){ - -webkit-background-size: @width @height; - -moz-background-size: @width @height; - -o-background-size: @width @height; - background-size: @width @height; -} diff --git a/lib/progress-bars.less b/lib/progress-bars.less index fd9d3f427..e8557a99e 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -55,7 +55,7 @@ // Striped bars .progress.striped .bar { #gradient > .striped(#62c462); - .background-size(40px, 40px); + .background-size(40px 40px); } // Call animation for the active one diff --git a/lib/variables.less b/lib/variables.less index 3f32c36f4..3709d598d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -68,3 +68,7 @@ // Visuals @primaryButtonColor: @blue; + + + +@placeHolderText: @grayLight; -- cgit v1.2.3 From a920fa2993fa91f3ad62e154eaa6ff7b2481f615 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jan 2012 00:12:58 -0800 Subject: re-org variables --- lib/variables.less | 98 ++++++++++++++++++++++++------------------------------ 1 file changed, 44 insertions(+), 54 deletions(-) (limited to 'lib') diff --git a/lib/variables.less b/lib/variables.less index 3709d598d..8afe00032 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -3,53 +3,56 @@ // ----------------------------------------------------- -// LINK COLORS -// ----------- - -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15); - - -// GRAYS -// ----- - -@black: #000; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; - - -// ACCENT COLORS -// ------------- - -@blue: #049CDB; -@blueDark: #0064CD; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; +// GLOBAL VALUES +// -------------------------------------------------- + +// Links +@linkColor: #08c; +@linkColorHover: darken(@linkColor, 15); + +// Grays +@black: #000; +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; +@white: #fff; + +// Accent colors +@blue: #049CDB; +@blueDark: #0064CD; +@green: #46a546; +@red: #9d261d; +@yellow: #ffc40d; +@orange: #f89406; +@pink: #c3325f; +@purple: #7a43b6; + +// Grid system +// Modify the grid styles in mixins.less +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; -// GRID -// ---- +// Typography +@baseFontSize: 13px; +@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseLineHeight: 18px; -// Modify the grid styles in mixins.less -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Buttons +@primaryButtonColor: @blue; -// Fluid width sidebar -@fluidSidebarWidth: 220px; -// Z-INDEX -// ------- +// COMPONENT VARIABLES +// -------------------------------------------------- +// Z-index master list +// Used for a bird's eye view of components dependent on the z-axis @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @@ -57,18 +60,5 @@ @zindexModalBackdrop: 1040; @zindexModal: 1050; - -// THEME VARIABLES -// --------------- - -// Typography -@baseFontSize: 13px; -@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@baseLineHeight: 18px; - -// Visuals -@primaryButtonColor: @blue; - - - +// Input placeholder text color @placeHolderText: @grayLight; -- cgit v1.2.3 From f2fadf1f0a3f444893fec394fd0180d03e1058a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jan 2012 00:24:10 -0800 Subject: rename navbar variables, change navbar search placeholder to mixin --- lib/bootstrap.less | 2 +- lib/navbar.less | 25 ++++++++++--------------- lib/variables.less | 11 +++++++++-- 3 files changed, 20 insertions(+), 18 deletions(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index fec87a339..67642d1c4 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -32,8 +32,8 @@ @import "close.less"; // Components: Nav -@import "navbar.less"; @import "navs.less"; +@import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/lib/navbar.less b/lib/navbar.less index 0d01fe524..94bc65241 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -1,22 +1,21 @@ // NAVBAR (FIXED AND STATIC) // ------------------------- -// Navbar variables -@navBarHeight: 40px; -@navBarBgStart: #333; -@navBarBgEnd: #222; -// Common styles +// COMMON STYLES +// ------------- + .navbar { overflow: visible; } // gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { - background-color: @navBarBgEnd; - #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + background-color: @navbarBackground; + #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); .box-shadow(@shadow); } + // Text and links .navbar { // Hover and active states @@ -75,20 +74,16 @@ #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); - background-color: #444; - background-color: rgba(255,255,255,.3); + background: #444; + background: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } + .placeholder(@grayLighter); + // Hover states &:hover { color: @white; diff --git a/lib/variables.less b/lib/variables.less index 8afe00032..807a9ea0d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -51,6 +51,9 @@ // COMPONENT VARIABLES // -------------------------------------------------- +// Input placeholder text color +@placeHolderText: @grayLight; + // Z-index master list // Used for a bird's eye view of components dependent on the z-axis @zindexDropdown: 1000; @@ -60,5 +63,9 @@ @zindexModalBackdrop: 1040; @zindexModal: 1050; -// Input placeholder text color -@placeHolderText: @grayLight; +// Navbar +@navBarHeight: 40px; +@navbarBackground: #222; +@navbarBackgroundHighlight: #333; + + -- cgit v1.2.3 From d12560c0ee77e69011012095b04332aeb97b9c42 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jan 2012 00:30:49 -0800 Subject: make button active state clearer by lightening the inner shadow and removing the background image --- lib/buttons.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index a7492f9fd..e53dce7af 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -68,7 +68,8 @@ // Active and Disabled states &.active, &:active { - @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); + background-image: none; + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } &.disabled { -- cgit v1.2.3 From ab8f2e2767be77120fedb07269dc7db078101dba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jan 2012 00:35:14 -0800 Subject: don't scope placeholder text color to just inputs --- lib/forms.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 703accff8..e956b0046 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -336,12 +336,7 @@ select:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -input:-moz-placeholder { - color: @grayLight; -} -input::-webkit-input-placeholder { - color: @grayLight; -} +.placeholder(@grayLight); -- cgit v1.2.3 From 87113396dfbf7bfcb41c52702c6d8c861ab215c9 Mon Sep 17 00:00:00 2001 From: Kevin Martensson Date: Wed, 18 Jan 2012 14:02:18 +0100 Subject: Make dropdown menus scalable. --- lib/button-groups.less | 2 +- lib/dropdowns.less | 2 +- lib/navbar.less | 2 +- lib/navs.less | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/button-groups.less b/lib/button-groups.less index e9724ba8c..8f4bbc510 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -88,7 +88,7 @@ // Reposition menu on open and round all corners .btn-group.open .dropdown-menu { display: block; - top: 30px; + margin-top: 1px; .border-radius(5px); &.large { top: 40px; } } diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 08054713c..d0316f145 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -30,7 +30,7 @@ // The dropdown menu (ul) .dropdown-menu { position: absolute; - top: 40px; + top: 100%; z-index: @zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu diff --git a/lib/navbar.less b/lib/navbar.less index 94bc65241..f38459a72 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -191,7 +191,7 @@ // Menu position and menu carets .navbar .dropdown-menu { - top: 41px; + margin-top: 1px; .border-radius(4px); &:before { content: ''; diff --git a/lib/navs.less b/lib/navs.less index 432ab3cbd..edc0d238f 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -177,7 +177,7 @@ // Position the menu .pills .dropdown-menu, .tabs .dropdown-menu { - top: 33px; + margin-top: 1px; border-width: 1px; } .pills .dropdown-menu { @@ -239,7 +239,7 @@ // COMMON STYLES -// ------------- +// ------------- // Clear any floats .tabbable { -- cgit v1.2.3 From 25ac318d33329a0fb532d5f9ec922ad76d791959 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 19 Jan 2012 20:33:22 +0000 Subject: Remove unnecessary CSS properties from the clearfix mixin. --- lib/mixins.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index bcc67954a..5a3952f3a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -10,13 +10,11 @@ // ------------------------- // For clearing floats like a boss h5bp.com/q .clearfix() { - zoom: 1; + *zoom: 1; &:before, &:after { display: table; - *display: inline; content: ""; - zoom: 1; } &:after { clear: both; -- cgit v1.2.3 From 8825443d6e6ff28a97e092f46b42ec508e58cb05 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 19 Jan 2012 21:02:00 +0000 Subject: Remove search input cancel button in WebKit-OSX. On input elements with a `type` of `search`, WebKit on OS X will display a cancel button after text has been entered. This can look ugly or be poorly position when you've added other styles to the input (especially additional padding). --- lib/reset.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/reset.less b/lib/reset.less index 28638b6b3..8fe04d6d1 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -140,10 +140,11 @@ input[type="search"] { // Appearance in Safari/Chrome -moz-box-sizing: content-box; box-sizing: content-box; } -input[type="search"]::-webkit-search-decoration { +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 } textarea { overflow: auto; // Remove vertical scrollbar in IE6-9 vertical-align: top; // Readability and alignment cross-browser -} \ No newline at end of file +} -- cgit v1.2.3 From 782c994060a984c10d73fdd3cc8e3fe33a2e4477 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 20 Jan 2012 21:16:40 +0000 Subject: Remove global reset in favour of contextual reset. Rather than having a partial reset with individual elements having their styles built back up, only elements without replacement styles have specific properties 'reset'. This commit also includes: a correction to the font mixin arguments used on forms (the output is now valid CSS); the removal of `overflow-y:scroll` from the `html` element which is now known to cause some problems for jQuery modal plugins in Firefox. --- lib/forms.less | 13 ++++++++-- lib/reset.less | 69 ++++++++++++++++++---------------------------------- lib/scaffolding.less | 2 -- lib/tables.less | 9 +++++++ lib/type.less | 31 +++++++++++++++++------ 5 files changed, 66 insertions(+), 58 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e956b0046..0cc7f2035 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,17 +8,25 @@ // Make all forms have space below them form { - margin-bottom: @baseLineHeight; + 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 * 1.5; font-size: @baseFontSize * 1.5; line-height: @baseLineHeight * 2; color: @grayDark; + border: 0; border-bottom: 1px solid #eee; -webkit-margin-collapse: separate; } @@ -26,9 +34,10 @@ legend { // Set font for forms label, input, +button, select, textarea { - #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); } // Identify controls by their labels diff --git a/lib/reset.less b/lib/reset.less index 8fe04d6d1..31e7160f2 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -1,50 +1,10 @@ // Reset.less -// Props to Eric Meyer (meyerweb.com) for his CSS reset file. -// We're using an adapted version here that cuts out some of the reset HTML -// elements we will never need here (i.e., dfn, samp, etc). +// Adapted from Normalize.css http://github.com/necolas/normalize.css // ------------------------------------------------------------------------ - -// ERIC MEYER RESET -// -------------------------------------------------- - -html, body { margin: 0; padding: 0; } -h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } -table { - max-width: 100%; - border-collapse: collapse; - border-spacing: 0; -} -ol, ul { list-style: none; } -q:before, q:after, blockquote:before, blockquote:after { content: ""; } - - -// Normalize.css -// Pulling in select resets form the normalize.css project -// -------------------------------------------------- - // Display in IE6-9 and FF3 // ------------------------- -// Source: http://github.com/necolas/normalize.css -html { - overflow-y: scroll; - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -// Focus states -a:focus { - outline: thin dotted; -} -// Hover & Active -a:hover, -a:active { - outline: 0; -} -// Display in IE6-9 and FF3 -// ------------------------- -// Source: http://github.com/necolas/normalize.css article, aside, details, @@ -60,7 +20,7 @@ section { // Display block in IE6-9 and FF3 // ------------------------- -// Source: http://github.com/necolas/normalize.css + audio, canvas, video { @@ -71,14 +31,32 @@ video { // Prevents modern browsers from displaying 'audio' without controls // ------------------------- -// Source: http://github.com/necolas/normalize.css + audio:not([controls]) { display: none; } +// Base settings +// ------------------------- + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +// Focus states +a:focus { + outline: thin dotted; +} +// Hover & Active +a:hover, +a:active { + outline: 0; +} + // Prevents sub and sup affecting line-height in all browsers // ------------------------- -// Source: http://github.com/necolas/normalize.css + sub, sup { position: relative; @@ -95,7 +73,7 @@ sub { // Img border in a's and image quality // ------------------------- -// Source: http://github.com/necolas/normalize.css + img { max-width: 100%; height: auto; @@ -105,7 +83,6 @@ img { // Forms // ------------------------- -// Source: http://github.com/necolas/normalize.css // Font size in all browsers, margin changes, misc consistency button, diff --git a/lib/scaffolding.less b/lib/scaffolding.less index a0d54a886..d6fac06f0 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -60,8 +60,6 @@ body { // Links a { - font-weight: inherit; - line-height: inherit; color: @linkColor; text-decoration: none; &:hover { diff --git a/lib/tables.less b/lib/tables.less index 29e1e2d46..98b2b9f92 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -4,6 +4,15 @@ // ---------------------------------------- +// BASE TABLES +// ----------------- + +table { + max-width: 100%; + border-collapse: collapse; + border-spacing: 0; +} + // BASELINE STYLES // --------------- diff --git a/lib/type.less b/lib/type.less index 707d2215d..e2049fb71 100644 --- a/lib/type.less +++ b/lib/type.less @@ -7,7 +7,7 @@ // --------- p { - margin-bottom: @baseLineHeight / 2; + margin: 0 0 @baseLineHeight / 2; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; @@ -17,15 +17,16 @@ p { } } - // HEADINGS // -------- h1, h2, h3, h4, h5, h6 { + margin: 0; font-weight: bold; color: @grayDark; text-rendering: optimizelegibility; // Fix the character spacing for headings small { + font-weight: normal; color: @grayLight; } } @@ -74,6 +75,7 @@ h6 { // Unordered and Ordered lists ul, ol { + padding: 0; margin: 0 0 @baseLineHeight / 2 25px; } ul ul, @@ -124,13 +126,10 @@ hr { // Emphasis strong { - font-style: inherit; font-weight: bold; } em { font-style: italic; - font-weight: inherit; - line-height: inherit; } .muted { color: @grayLight; @@ -146,8 +145,8 @@ abbr { // Blockquotes blockquote { - padding-left: 15px; - margin-bottom: @baseLineHeight; + padding: 0 0 0 15px; + margin: 0 0 @baseLineHeight; border-left: 5px solid #eee; p { margin-bottom: 0; @@ -176,11 +175,19 @@ blockquote { } } +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + // Addresses address { display: block; margin-bottom: @baseLineHeight; line-height: @baseLineHeight; + font-style: normal; } // Inline and block code styles @@ -220,4 +227,12 @@ pre { padding: 0; background-color: transparent; } -} \ No newline at end of file +} + +small { + font-size: 100%; +} + +cite { + font-style: normal; +} -- cgit v1.2.3 From 719713ca8730d92d3510e6d4a7cc542fd57fdeef Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 20 Jan 2012 20:28:40 -0800 Subject: fix typo --- lib/tables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 29e1e2d46..5dad3e896 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -132,7 +132,7 @@ table { // TABLESORTER // ----------- -// Support for the tablesorter jQuerdy plugin +// Support for the tablesorter jQuery plugin table { // Tablesorting styles w/ jQuery plugin -- cgit v1.2.3 From e0238bfb08b67c089c1c609e9e68e5252e0ba992 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Sat, 21 Jan 2012 15:24:06 -0800 Subject: clean up variable usage with colors --- lib/breadcrumbs.less | 2 +- lib/button-groups.less | 2 +- lib/buttons.less | 4 ++-- lib/carousel.less | 10 +++++----- lib/dropdowns.less | 4 ++-- lib/navbar.less | 10 +++++----- lib/navs.less | 22 +++++++++++----------- lib/tables.less | 4 ++-- lib/tooltip.less | 2 +- lib/type.less | 6 +++--- lib/variables.less | 5 +++-- 11 files changed, 36 insertions(+), 35 deletions(-) (limited to 'lib') diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less index 2fa9921ac..19b8081e1 100644 --- a/lib/breadcrumbs.less +++ b/lib/breadcrumbs.less @@ -4,7 +4,7 @@ .breadcrumb { padding: 7px 14px; margin: 0 0 @baseLineHeight; - #gradient > .vertical(#ffffff, #f5f5f5); + #gradient > .vertical(@white, #f5f5f5); border: 1px solid #ddd; .border-radius(3px); .box-shadow(inset 0 1px 0 @white); diff --git a/lib/button-groups.less b/lib/button-groups.less index e9724ba8c..253469f88 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -110,7 +110,7 @@ .info, .success { .caret { - border-top-color: #fff; + border-top-color: @white; .opacity(75); } } diff --git a/lib/buttons.less b/lib/buttons.less index e53dce7af..5da34a525 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -34,9 +34,9 @@ padding: 5px 10px 6px; font-size: @baseFontSize; line-height: normal; - color: #333; + color: @grayDark; text-shadow: 0 1px 1px rgba(255,255,255,.75); - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient + #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient border: 1px solid #ccc; border-bottom-color: #bbb; .border-radius(4px); diff --git a/lib/carousel.less b/lib/carousel.less index a9399ef63..1a18d44b6 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -70,7 +70,7 @@ line-height: 30px; color: #ccc; text-align: center; - background: #999; + background: @grayLight; background: rgba(0,0,0,.5); .border-radius(20px); @@ -82,9 +82,9 @@ // Hover state &:hover { - color: #fff; + color: @white; text-decoration: none; - background: #333; + background: @grayDark; background: rgba(0,0,0,.75); } } @@ -98,10 +98,10 @@ right: 0; bottom: 0; padding: 10px 15px 5px; - background: #333; + background: @grayDark; background: rgba(0,0,0,.75); } .carousel-caption h4, .carousel-caption p { - color: #fff; + color: @white; } diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 08054713c..40b4d7e87 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -14,7 +14,7 @@ vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid #000; + border-top: 4px solid @black; .opacity(30); content: "\2193"; } @@ -79,7 +79,7 @@ .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: #fff; + color: @white; text-decoration: none; background-color: @linkColor; } diff --git a/lib/navbar.less b/lib/navbar.less index 94bc65241..8064490f7 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -164,7 +164,7 @@ .navbar .nav .active > a { color: @white; text-decoration: none; - background-color: #222; + background-color: @grayDarker; background-color: rgba(0,0,0,.5); } @@ -174,7 +174,7 @@ width: 1px; margin: 0 5px; overflow: hidden; - background-color: #222; + background-color: @grayDarker; border-right: 1px solid #444; } @@ -209,7 +209,7 @@ display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; - border-bottom: 6px solid #fff; + border-bottom: 6px solid @white; position: absolute; top: -6px; left: 10px; @@ -219,7 +219,7 @@ // Dropdown toggle caret .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { - border-top-color: #fff; + border-top-color: @white; } .navbar .nav .active .caret { .opacity(100); @@ -234,7 +234,7 @@ // Dropdown link on hover .navbar .nav .active > .dropdown-toggle:hover { - color: #fff; + color: @white; } // Right aligned menus need alt position diff --git a/lib/navs.less b/lib/navs.less index 432ab3cbd..4db77af4f 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -18,7 +18,7 @@ } .nav > li > a:hover { text-decoration: none; - background-color: #eee; + background-color: @grayLighter; } @@ -97,7 +97,7 @@ border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { - border-color: #eee #eee #ddd; + border-color: @grayLighter @grayLighter #ddd; } } // Active state, and it's :hover to override normal :hover @@ -201,13 +201,13 @@ // ------------------------- .tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret { - border-top-color: #333; + border-top-color: @grayDark; } // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: #000; + color: @black; cursor: pointer; } @@ -216,20 +216,20 @@ .tabs .open .dropdown-toggle, .pills .open .dropdown-toggle, .nav > .open.active > a:hover { - color: #fff; - background-color: #999; - border-color: #999; + color: @white; + background-color: @grayLight; + border-color: @grayLight; } .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { - border-top-color: #fff; + border-top-color: @white; .opacity(100); } // Dropdowns in stacked tabs .tabs.stacked .open > a:hover { - border-color: #999; + border-color: @grayLight; } @@ -312,7 +312,7 @@ .border-radius(4px 0 0 4px); } .tabs-left .tabs > li > a:hover { - border-color: #eee #ddd #eee #eee; + border-color: @grayLighter #ddd @grayLighter @grayLighter; } .tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { @@ -330,7 +330,7 @@ .border-radius(0 4px 4px 0); } .tabs-right .tabs > li > a:hover { - border-color: #eee #eee #eee #ddd; + border-color: @grayLighter @grayLighter @grayLighter #ddd; } .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { diff --git a/lib/tables.less b/lib/tables.less index 5dad3e896..14e4ea44a 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -144,7 +144,7 @@ table { margin-top: 7px; border-width: 0 4px 4px; border-style: solid; - border-color: #000 transparent; + border-color: @black transparent; visibility: hidden; } } @@ -174,7 +174,7 @@ table { border-bottom: none; border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid #000; + border-top: 4px solid @black; visibility:visible; .box-shadow(none); //can't add boxshadow to downward facing arrow :( .opacity(60); diff --git a/lib/tooltip.less b/lib/tooltip.less index b21c6bb7a..5111a193f 100644 --- a/lib/tooltip.less +++ b/lib/tooltip.less @@ -22,7 +22,7 @@ .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: white; + color: @white; text-align: center; text-decoration: none; background-color: @black; diff --git a/lib/type.less b/lib/type.less index 707d2215d..a94a4956e 100644 --- a/lib/type.less +++ b/lib/type.less @@ -119,7 +119,7 @@ hr { margin: @baseLineHeight 0; border: 0; border-top: 1px solid #e5e5e5; - border-bottom: 1px solid #fff; + border-bottom: 1px solid @white; } // Emphasis @@ -148,7 +148,7 @@ abbr { blockquote { padding-left: 15px; margin-bottom: @baseLineHeight; - border-left: 5px solid #eee; + border-left: 5px solid @grayLighter; p { margin-bottom: 0; #font > .shorthand(16px,300,@baseLineHeight * 1.25); @@ -168,7 +168,7 @@ blockquote { padding-left: 0; padding-right: 15px; border-left: 0; - border-right: 5px solid #eee; + border-right: 5px solid @grayLighter; p, small { text-align: right; diff --git a/lib/variables.less b/lib/variables.less index 807a9ea0d..df0d2255d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -13,6 +13,7 @@ // Grays @black: #000; +@grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @@ -65,7 +66,7 @@ // Navbar @navBarHeight: 40px; -@navbarBackground: #222; -@navbarBackgroundHighlight: #333; +@navbarBackground: @grayDarker; +@navbarBackgroundHighlight: @grayDark; -- cgit v1.2.3 From 0f2dd75c975b56f082b82a464065c3b2ccc7af86 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Sat, 21 Jan 2012 22:35:03 -0800 Subject: remove tabs --- lib/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/variables.less b/lib/variables.less index df0d2255d..0a67521df 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -13,7 +13,7 @@ // Grays @black: #000; -@grayDarker: #222; +@grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; -- cgit v1.2.3 From a583f055b382ae2f721e49dea61340257e1482d0 Mon Sep 17 00:00:00 2001 From: Olivier Laviale Date: Sun, 22 Jan 2012 22:32:16 +0100 Subject: Using variables rather than numeric values --- lib/scaffolding.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index a0d54a886..7ad8a7b16 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -24,9 +24,9 @@ body { // Fluid layouts (left aligned, with sidebar, min- & max-width content) .fluid-container { position: relative; - min-width: 940px; - padding-left: 20px; - padding-right: 20px; + min-width: @siteWidth; + padding-left: @gridGutterWidth; + padding-right: @gridGutterWidth; .clearfix(); } @@ -35,17 +35,17 @@ body { width: @fluidSidebarWidth; margin: 0 20px 18px; } -.sidebar-left { padding-left: @fluidSidebarWidth + 40; } -.sidebar-right { padding-right: @fluidSidebarWidth + 40; } +.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } +.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } // Float the sidebars accordingly .sidebar-left .fluid-sidebar { float: left; - margin-left: (@fluidSidebarWidth + 20) * -1; + margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; } .sidebar-right .fluid-sidebar { float: right; - margin-right: (@fluidSidebarWidth + 20) * -1; + margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; } // The main content area -- cgit v1.2.3 From 155b72e8730e9b8badb5fa80c8d7f8990f10cc82 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:02:56 -0800 Subject: share -> share-alt --- lib/sprites.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/sprites.less b/lib/sprites.less index aec08a5a2..4a49bb8b4 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -109,7 +109,7 @@ i { .arrow-right { background-position: -264px -96px; } .arrow-up { background-position: -288px -96px; } .arrow-down { background-position: -312px -96px; } -.share { background-position: -336px -96px; } +.share-alt { background-position: -336px -96px; } .resize-full { background-position: -360px -96px; } .resize-small { background-position: -384px -96px; } .plus { background-position: -408px -96px; } -- cgit v1.2.3 From b8c0388f8af8ae93a514efaa352f63ecdffde279 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:07:17 -0800 Subject: fix sans-serif order in forms.less and rebuild --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e956b0046..e728b9d72 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -28,7 +28,7 @@ label, input, select, textarea { - #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); + #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); } // Identify controls by their labels -- cgit v1.2.3 From 36d56fb1ba803358e8244189fbef883290af87d0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:12:26 -0800 Subject: don't use negative margin - use first child to set to 0 --- lib/scaffolding.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7ad8a7b16..66e5cc32f 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -75,11 +75,15 @@ a { // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { - margin-left: -@gridGutterWidth; .clearfix(); } -// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) +[class*="span"]:first-child{ + margin-left: 0; +} + +// Find all .span# classes within .row and give them the necessary properties for grid columns +// (supported by all browsers back to IE7) // Credit to @dhg for the idea [class*="span"] { .gridColumn(); -- cgit v1.2.3 From 36d2679f8358f91d8a2c746e0f14b3500b73c163 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:31:58 -0800 Subject: give default valuse for border-radius-custom --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 5a3952f3a..a54f6762f 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -137,7 +137,7 @@ -moz-border-radius: @radius; border-radius: @radius; } -.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { +.border-radius-custom(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0) { -webkit-border-top-left-radius: @topLeft; -moz-border-radius-topleft: @topLeft; border-top-left-radius: @topLeft; -- cgit v1.2.3 From 1209a3756c88043008950f74dd287b837e00f7d8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jan 2012 20:50:35 -0800 Subject: :focus:required:invalid: http://www.alistapart.com/articles/forward-thinking-form-validation --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e728b9d72..bdc6e3e07 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -302,9 +302,9 @@ textarea[readonly] { // HTML5 invalid states // Shares styles with the .control-group.error above -input:invalid, -textarea:invalid, -select:invalid { +input:focus:required:invalid, +textarea:focus:required:invalid, +select:focus:required:invalid { color: #b94a48; border-color: #ee5f5b; &:focus { -- cgit v1.2.3 From 00d925819405ef46fb09d4bef83761ea121a9364 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 11:35:39 -0800 Subject: revert to negative margin on grid row --- lib/scaffolding.less | 5 +---- lib/thumbnails.less | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 13f55026d..ff029e841 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -73,13 +73,10 @@ a { // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { + margin-left: @gridGutterWidth * -1; .clearfix(); } -[class*="span"]:first-child{ - margin-left: 0; -} - // Find all .span# classes within .row and give them the necessary properties for grid columns // (supported by all browsers back to IE7) // Credit to @dhg for the idea diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 4f9c5f76d..0ba749059 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -8,7 +8,7 @@ } .thumbnails > li { float: left; - margin: 0 0 20px 20px; + margin: 0 0 @baseLineHeight 20px; } .thumbnail { display: block; -- cgit v1.2.3 From ff113acba88806380b995fba894d77b562ca0e0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 12:21:00 -0800 Subject: cut margin in half on default forms --- lib/forms.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 85bf26163..bf3dbe64c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -463,13 +463,16 @@ select:focus:required:invalid { // Margin to space out fieldsets .control-group { - margin-bottom: @baseLineHeight; + margin-bottom: @baseLineHeight / 2; } // Horizontal-specific styles // -------------------------- .form-horizontal { + .control-group { + margin-bottom: @baseLineHeight; + } // Float the labels left .control-group > label { float: left; -- cgit v1.2.3 From 1fa2801c2f8ad1e3c319fd6fc0d2e8baddccf6cc Mon Sep 17 00:00:00 2001 From: Olivier Laviale Date: Mon, 23 Jan 2012 21:22:08 +0100 Subject: .alert-message no longer exists --- lib/buttons.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 5da34a525..f13a9acbf 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -102,7 +102,6 @@ } } // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .alert-message, :root .btn { border-radius: 0 \0; } -- cgit v1.2.3 From cf716bbeccf3ea94dc16d65a3b5800bc22e1472d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Oko=C5=84ski?= Date: Mon, 23 Jan 2012 22:03:09 +0100 Subject: Set matching line-height for .close inside .alert --- lib/alerts.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index 53a43c6e4..da585af31 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -20,6 +20,7 @@ *margin-top: 3px; /* IE7 spacing */ position: relative; right: -21px; + line-height: 18px; } // Alternate styles -- cgit v1.2.3 From 1954cf001926a94f7a4d51f16beaf9f2ba671d13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 13:46:26 -0800 Subject: comment in forms' --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index bf3dbe64c..be53c60cb 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -470,6 +470,7 @@ select:focus:required:invalid { // -------------------------- .form-horizontal { + // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; } -- cgit v1.2.3 From cd5ffbe39626303a395448a6c9a507f3ad04ff5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 13:50:55 -0800 Subject: fix up the modals in responsive a bit --- lib/responsive.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index f5c23df3c..416a8da7b 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -97,11 +97,12 @@ // Modals .modal { - position: fixed; + position: absolute; top: 20px; left: 20px; right: 20px; width: auto; + margin: 0; &.fade.in { top: auto; } } .modal-header .close { -- cgit v1.2.3 From eab4d34ea06a3a76bba59faa5412affb8877b44c Mon Sep 17 00:00:00 2001 From: Kevin Martensson Date: Tue, 24 Jan 2012 17:55:01 +0100 Subject: Remove specific top value from large btn-dropdown. --- lib/button-groups.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/button-groups.less b/lib/button-groups.less index 93fbb7f18..4be4aca71 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -90,7 +90,6 @@ display: block; margin-top: 1px; .border-radius(5px); - &.large { top: 40px; } } .btn-group.open .dropdown-toggle { background-image: none; -- cgit v1.2.3 From b0bd1d82035c22031e75627df0d3853c9d1e285c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 10:45:29 -0800 Subject: add bottom-up styles to the dropdown menus --- lib/dropdowns.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'lib') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2c32f180..06114b254 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -54,6 +54,13 @@ *border-right-width: 2px; *border-bottom-width: 2px; + // Allow for dropdowns to go bottom up (aka, dropup-menu) + &.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } + // Dividers (basically an hr) within the dropdown .divider { height: 1px; -- cgit v1.2.3 From e829001e5cb488a7708878b074205fc41e82fc82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 12:28:20 -0800 Subject: attempt to fix select list alignment in Firefox by removing padding. not quite fixed 100%, but getting there. --- lib/forms.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index be53c60cb..1f424abaa 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -107,7 +107,6 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - padding: 0; vertical-align: middle; background-color: @white; } -- cgit v1.2.3 From 8ff621aa26dee69088b527089cdd719bce68be31 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:07:30 -0800 Subject: fix broken index page heading, update variables and less pages --- lib/type.less | 10 +++++++--- lib/variables.less | 6 +++--- 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 2c6e7db6a..d828ab6c9 100644 --- a/lib/type.less +++ b/lib/type.less @@ -175,6 +175,7 @@ blockquote { } } +// Quotes q:before, q:after, blockquote:before, @@ -195,13 +196,16 @@ code, pre { padding: 0 3px 2px; #font > #family > .monospace; - font-size: 12px; + font-size: @baseFontSize - 2; color: @grayDark; .border-radius(3px); } code { - padding: 1px 3px; + padding: 3px 4px; background-color: lighten(@orange, 40%); + color: #d14; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; } pre { display: block; @@ -210,7 +214,7 @@ pre { font-size: 12px; line-height: @baseLineHeight; background-color: #f5f5f5; - border: 1px solid #ccc; + border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); .border-radius(4px); white-space: pre; diff --git a/lib/variables.less b/lib/variables.less index 0a67521df..674a358bf 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -9,7 +9,7 @@ // Links @linkColor: #08c; -@linkColorHover: darken(@linkColor, 15); +@linkColorHover: darken(@linkColor, 15%); // Grays @black: #000; @@ -21,8 +21,8 @@ @white: #fff; // Accent colors -@blue: #049CDB; -@blueDark: #0064CD; +@blue: #049cdb; +@blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; -- cgit v1.2.3 From c2312220e4e1da3939c9fa79e97d79f693058ea2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:19:01 -0800 Subject: fix code type size --- lib/type.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index d828ab6c9..211111761 100644 --- a/lib/type.less +++ b/lib/type.less @@ -196,7 +196,7 @@ code, pre { padding: 0 3px 2px; #font > #family > .monospace; - font-size: @baseFontSize - 2; + font-size: @baseFontSize - 1; color: @grayDark; .border-radius(3px); } -- cgit v1.2.3 From 40e92221a616bfe4e9500bcf2b72c86844f7f03f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:54:35 -0800 Subject: revamp alert message and error state color/text/bg to be variables --- lib/alerts.less | 24 ++++++++++++------------ lib/forms.less | 12 ++++++------ lib/mixins.less | 2 +- lib/variables.less | 26 ++++++++++++++++++++++---- 4 files changed, 41 insertions(+), 23 deletions(-) (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index 53a43c6e4..20e935fa9 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -6,13 +6,13 @@ padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: #fcf8e3; - border: 1px solid #f3edd2; + background-color: @warningBackground; + border: 1px solid @warningBorder; .border-radius(4px); } .alert, .alert-heading { - color: #c09853; + color: @warningText; } // Adjust close link position @@ -26,31 +26,31 @@ // ---------------- .alert-success { - background-color: #dff0d8; - border-color: #cfe8c4; + background-color: @successBackground; + border-color: @successBorder; } .alert-success, .alert-success .alert-heading { - color: #468847; + color: @successText; } .alert-danger, .alert-error { - background-color: #f2dede; - border-color: #e9c7c7; + background-color: @errorBackground; + border-color: @errorBorder; } .alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading { - color: #B94A48; + color: @errorText; } .alert-info { - background-color: #d9edf7; - border-color: #bfe1f2; + background-color: @infoBackground; + border-color: @infoBorder; } .alert-info, .alert-info .alert-heading { - color: #3a87ad; + color: @infoText; } diff --git a/lib/forms.less b/lib/forms.less index 1f424abaa..2b24fb2f0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -295,17 +295,17 @@ textarea[readonly] { border-color: @textColor; } } -// Error -.control-group.error { - .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); -} // Warning .control-group.warning { - .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); + .formFieldState(@warningText, @warningBorder, @warningBackground); +} +// Error +.control-group.error { + .formFieldState(@errorText, @errorBorder, @errorBackground); } // Success .control-group.success { - .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); + .formFieldState(@successText, @successBorder, @successBackground); } // HTML5 invalid states diff --git a/lib/mixins.less b/lib/mixins.less index a54f6762f..e64b80ad3 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -48,7 +48,7 @@ // Placeholder text // ------------------------- -.placeholder(@color: @placeHolderText) { +.placeholder(@color: @placeholderText) { :-moz-placeholder { color: @color; } diff --git a/lib/variables.less b/lib/variables.less index 674a358bf..3c4f562ca 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -52,11 +52,9 @@ // COMPONENT VARIABLES // -------------------------------------------------- -// Input placeholder text color -@placeHolderText: @grayLight; - // Z-index master list // Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @@ -64,9 +62,29 @@ @zindexModalBackdrop: 1040; @zindexModal: 1050; +// Input placeholder text color +@placeholderText: @grayLight; + // Navbar -@navBarHeight: 40px; +@navbarHeight: 40px; @navbarBackground: @grayDarker; @navbarBackgroundHighlight: @grayDark; +// Form states and alerts +@warningText: #c09853; +@warningBackground: #fcf8e3; +@warningBorder: #f3edd2; + +@errorText: #b94a48; +@errorBackground: #f2dede; +@errorBorder: #e9c7c7; + +@successText: #468847; +@successBackground: #dff0d8; +@successBorder: #cfe8c4; + +@infoText: #3a87ad; +@infoBackground: #d9edf7; +@infoBorder: #bfe1f2; + -- cgit v1.2.3 From a03fbc18cb50c7735b80e3ced6a6ebbe2ea05d2b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 20:30:26 -0800 Subject: allow for text in progress bars --- lib/progress-bars.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'lib') diff --git a/lib/progress-bars.less b/lib/progress-bars.less index e8557a99e..c1a3f9792 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -46,6 +46,10 @@ .progress .bar { width: 0%; height: 18px; + color: #fff; + font-size: 12px; + text-align: center; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); -- cgit v1.2.3 From a5c1d1f1828c333e373cdc5da5da2f6d946ad45e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 20:45:38 -0800 Subject: adding actual images to carousel to ensure you can see things are animating; updated styles of carousel controls to work on light and dark backgrounds and use opacity for effects --- lib/carousel.less | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/carousel.less b/lib/carousel.less index 1a18d44b6..27c1ba660 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -68,11 +68,13 @@ font-size: 60px; font-weight: 100; line-height: 30px; - color: #ccc; + color: #fff; text-align: center; - background: @grayLight; - background: rgba(0,0,0,.5); - .border-radius(20px); + background: @grayDarker; + border: 3px solid #fff; + .border-radius(23px); + .opacity(50); + .transition(all .2s linear); // Reposition the right one &.right { @@ -84,8 +86,7 @@ &:hover { color: @white; text-decoration: none; - background: @grayDark; - background: rgba(0,0,0,.75); + .opacity(90); } } -- cgit v1.2.3 From f2fe2b1798380ab65e88281ab4db47965cd5aaf8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 21:11:20 -0800 Subject: remove top margin from alert close, chance close line height to 18px (baseLineHeight) --- lib/alerts.less | 1 - lib/close.less | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/alerts.less b/lib/alerts.less index 1895dfbd0..23c17e704 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -17,7 +17,6 @@ // Adjust close link position .alert .close { - *margin-top: 3px; /* IE7 spacing */ position: relative; right: -21px; line-height: 18px; diff --git a/lib/close.less b/lib/close.less index f2c5157c9..a0e5edba1 100644 --- a/lib/close.less +++ b/lib/close.less @@ -5,7 +5,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: 12px; + line-height: @baseLineHeight; color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); -- cgit v1.2.3 From 6ab56051fdf916f03efb8aa6675e50bdd1cc3155 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:35:34 -0800 Subject: fix up docs css for responsive and subnav, fix forms error states --- lib/forms.less | 6 +++--- lib/type.less | 7 ++++++- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 2b24fb2f0..e35b23da0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -297,15 +297,15 @@ textarea[readonly] { } // Warning .control-group.warning { - .formFieldState(@warningText, @warningBorder, @warningBackground); + .formFieldState(@warningText, @warningText, @warningBackground); } // Error .control-group.error { - .formFieldState(@errorText, @errorBorder, @errorBackground); + .formFieldState(@errorText, @errorText, @errorBackground); } // Success .control-group.success { - .formFieldState(@successText, @successBorder, @successBackground); + .formFieldState(@successText, @successText, @successBackground); } // HTML5 invalid states diff --git a/lib/type.less b/lib/type.less index 211111761..548c222f1 100644 --- a/lib/type.less +++ b/lib/type.less @@ -16,6 +16,12 @@ p { color: @grayLight; } } +.lead { + margin-bottom: @baseLineHeight; + font-size: 20px; + font-weight: 200; + line-height: @baseLineHeight * 1.5; +} // HEADINGS // -------- @@ -202,7 +208,6 @@ pre { } code { padding: 3px 4px; - background-color: lighten(@orange, 40%); color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; -- cgit v1.2.3 From b8fa6cfacf61a02ab769b9031253c7b06111fa7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 01:22:29 -0800 Subject: move css builder and downloader to dedicated page, start to update remaining sections on LESS docs page --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index e35b23da0..100b0ab91 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -166,14 +166,14 @@ textarea { input, textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); } input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } -- cgit v1.2.3 From d8041f7c8f5f6fcb7777383429464f39879ba916 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 08:34:20 -0800 Subject: fix margin on input buttons in modals --- lib/modals.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/modals.less b/lib/modals.less index fe3f295b0..d6efccd39 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -60,5 +60,6 @@ .btn { float: right; margin-left: 5px; + margin-bottom: 0; // account for input[type=submit] which gets the bottom margin like all other inputs } } -- cgit v1.2.3 From b01de5fc56ab031df8a08be9ce720c68ced7a5c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 09:51:03 -0800 Subject: updated icons to require a base class .icon --- lib/sprites.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/sprites.less b/lib/sprites.less index 4a49bb8b4..0d51125c2 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -11,7 +11,7 @@ // class to add width, height, and background-position. Your resulting HTML // will look like . -i { +.icon { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; background-repeat: no-repeat; -- cgit v1.2.3 From 29b4ba0fc5a07ecbde11054dfa4406384a360d32 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 09:53:53 -0800 Subject: fix modal examples on js page, update modal close button positioning --- lib/modals.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/modals.less b/lib/modals.less index d6efccd39..0368e01e1 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -44,7 +44,7 @@ padding: 5px 15px; border-bottom: 1px solid #eee; // Close icon - .close { margin-top: 7px; } + .close { margin-top: 2px; } } .modal-body { padding: 15px; -- cgit v1.2.3 From 9553b1e3e9457a48b6da3724c906a36f935aa526 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:02:52 -0800 Subject: update docs to include separate responsive css, update docs to highlight proper file name, updated makefile to build responsive separately --- lib/bootstrap.less | 3 --- lib/responsive.less | 8 ++++++++ 2 files changed, 8 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 67642d1c4..8d307d427 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -57,6 +57,3 @@ // Utility classes @import "utilities.less"; // Has to be last to override when necessary - -// Responsive -@import "responsive.less"; \ No newline at end of file diff --git a/lib/responsive.less b/lib/responsive.less index 416a8da7b..452116ea0 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,6 +3,14 @@ // ------------------------------------------------------------- +// REPEAT VARIABLES & MIXINS +// ------------------------- +// Required since we compile the responsive stuff separately + +@import "variables.less"; // Modify this for custom colors, font-sizes, etc +@import "mixins.less"; + + // RESPONSIVE CLASSES // ------------------ -- cgit v1.2.3 From 4a3ad1aa891f65547bd2e3e6de8862e3b26f47c9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:48:08 -0800 Subject: update responsive to use latest grid mixins --- lib/responsive.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 452116ea0..2999eef4d 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -165,11 +165,11 @@ @siteWidth: 748px; // Bring grid mixins to recalculate widths - .columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + .columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } - .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + .offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } // 16cols at 30px wide with 16px gutters @@ -219,11 +219,11 @@ @siteWidth: 1170px; // Bring grid mixins to recalculate widths - .columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + .columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } - .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + .offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } .container { -- cgit v1.2.3 From 6cbf2f402432187f79aea1a938a08f1ce876fd2d Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Wed, 25 Jan 2012 10:59:45 -0800 Subject: s/#fff/@white/ --- lib/carousel.less | 2 +- lib/progress-bars.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/carousel.less b/lib/carousel.less index 27c1ba660..8ada01f20 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -71,7 +71,7 @@ color: #fff; text-align: center; background: @grayDarker; - border: 3px solid #fff; + border: 3px solid @white; .border-radius(23px); .opacity(50); .transition(all .2s linear); diff --git a/lib/progress-bars.less b/lib/progress-bars.less index c1a3f9792..ff754b817 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -46,7 +46,7 @@ .progress .bar { width: 0%; height: 18px; - color: #fff; + color: @white; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); -- cgit v1.2.3 From 0b2dd16e7293fa11f453abf67395493cbfe18935 Mon Sep 17 00:00:00 2001 From: Jon Stevens Date: Wed, 25 Jan 2012 11:02:28 -0800 Subject: missed a white --- lib/carousel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/carousel.less b/lib/carousel.less index 8ada01f20..b0e95bfe9 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -68,7 +68,7 @@ font-size: 60px; font-weight: 100; line-height: 30px; - color: #fff; + color: @white; text-align: center; background: @grayDarker; border: 3px solid @white; -- cgit v1.2.3 From d3c5dd4e6acc421e06ef72680e794cfd9d52a04a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:21:44 -0800 Subject: updated comments in forms.less and added uneditable-textarea class to extend uneditable-input --- lib/forms.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 100b0ab91..178c21018 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -63,6 +63,10 @@ select, border: 1px solid #ccc; .border-radius(3px); } +.uneditable-textarea { + width: auto; + height: auto; +} // Mini reset for unique input types input[type=image], @@ -72,7 +76,7 @@ input[type=radio] { height: auto; padding: 0; margin: 3px 0; - *margin-top: 0; /* IE6-7 */ + *margin-top: 0; /* IE7 */ line-height: normal; border: none; cursor: pointer; @@ -99,7 +103,7 @@ input[type=submit] { // Set the height of select and file controls to match text inputs select, input[type=file] { - height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size + height: @baseLineHeight * 1.5; /* 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: @baseLineHeight * 1.5; } -- cgit v1.2.3 From b8511568637dfa4decb3f0475436a3dfa637a57d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:26:45 -0800 Subject: change form fields back to inline-block to allow for inline-help text in default form markup --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 178c21018..70a065bdb 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -52,7 +52,7 @@ input, textarea, select, .uneditable-input { - display: block; + display: inline-block; width: 210px; height: @baseLineHeight; padding: 4px; -- cgit v1.2.3 From 58d08a2db3e2ed1b789a5290ced2f0327c9c163b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:35:08 -0800 Subject: enable support for form states on select elements --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 70a065bdb..3b35a172c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -283,6 +283,7 @@ textarea[readonly] { } // Style inputs accordingly input, + select, textarea { color: @textColor; border-color: @borderColor; -- cgit v1.2.3 From 06017b26ca5a9c835edb9d42188431fa30c7e499 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:47:36 -0800 Subject: fix bottom visual bug on carousel images --- lib/carousel.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'lib') diff --git a/lib/carousel.less b/lib/carousel.less index b0e95bfe9..254a9f60c 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -20,6 +20,12 @@ .transition(.6s ease-in-out left); } + // Account for jankitude on images + .item > img { + display: block; + line-height: 1; + } + .active, .next, .prev { display: block; } -- cgit v1.2.3 From 86191d898b2520611b537892e33be3b179f83199 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 11:51:13 -0800 Subject: height auto on mutli select --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 3b35a172c..355a33a30 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -118,7 +118,7 @@ select { // Make multiple select elements height not fixed select[multiple], select[size] { - height: inherit; + height: auto; } // Remove shadow from image inputs -- cgit v1.2.3 From 2b2c72b9aae6db9505d0fdb3abc1832de8e0ce7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 12:04:19 -0800 Subject: fix select alignment and height --- lib/forms.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 355a33a30..7451f36ef 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -103,15 +103,15 @@ input[type=submit] { // Set the height of select and file controls to match text inputs select, input[type=file] { - height: @baseLineHeight * 1.5; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + height: 28px; /* 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: @baseLineHeight * 1.5; + line-height: 28px; } // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - vertical-align: middle; + vertical-align: baseline; background-color: @white; } -- cgit v1.2.3 From 0777e391ee19cbc3bda7637dcbb17b5b171afac5 Mon Sep 17 00:00:00 2001 From: Krister Kari Date: Thu, 26 Jan 2012 01:03:36 +0200 Subject: Drop khtml gradient, shorten old webkit gradient --- lib/mixins.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index e64b80ad3..793c000ab 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -279,10 +279,9 @@ #gradient { .horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard @@ -291,10 +290,9 @@ } .vertical(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard -- cgit v1.2.3 From b6b7d1343b74713a60e86401d8b625f097a7b8dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 15:03:44 -0800 Subject: finish the rest of the less page mixins docs --- lib/mixins.less | 35 +++++++++-------------------------- lib/scaffolding.less | 2 +- 2 files changed, 10 insertions(+), 27 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index e64b80ad3..4ebb94cfc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -100,7 +100,7 @@ // Site container // ------------------------- -.fixed-container() { +.container-fixed() { width: @siteWidth; margin-left: auto; margin-right: auto; @@ -137,23 +137,6 @@ -moz-border-radius: @radius; border-radius: @radius; } -.border-radius-custom(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0) { - -webkit-border-top-left-radius: @topLeft; - -moz-border-radius-topleft: @topLeft; - border-top-left-radius: @topLeft; - -webkit-border-top-right-radius: @topRight; - -moz-border-radius-topright: @topRight; - border-top-right-radius: @topRight; - -webkit-border-bottom-right-radius: @bottomRight; - -moz-border-radius-bottomright: @bottomRight; - border-bottom-right-radius: @bottomRight; - -webkit-border-bottom-left-radius: @bottomLeft; - -moz-border-radius-bottomleft: @bottomLeft; - border-bottom-left-radius: @bottomLeft; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -} // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { @@ -172,19 +155,19 @@ } // Transformations -.rotate(@degrees: 5deg) { +.rotate(@degrees) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); -ms-transform: rotate(@degrees); -o-transform: rotate(@degrees); transform: rotate(@degrees); } -.scale(@value: 1.5) { - -webkit-transform: scale(@value); - -moz-transform: scale(@value); - -ms-transform: scale(@value); - -o-transform: scale(@value); - transform: scale(@value); +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); } .translate(@x: 0, @y: 0) { -webkit-transform: translate(@x, @y); @@ -234,7 +217,7 @@ } // CSS3 Content Columns -.content-columns(@columnCount, @columnGap: 20px) { +.content-columns(@columnCount, @columnGap: @gridColumnGutter) { -webkit-column-count: @columnCount; -moz-column-count: @columnCount; column-count: @columnCount; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ff029e841..7002b0408 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -18,7 +18,7 @@ body { // Container (centered, fixed-width layouts) .container { - .fixed-container(); + .container-fixed(); } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -- cgit v1.2.3 From 0db2d45350a67bc1a98c0f2d1c4706e3bd25ca50 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 15:04:41 -0800 Subject: update mixins to use slightly diff variables within some parametric mixins --- lib/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 4ebb94cfc..327e21813 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -304,7 +304,7 @@ background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback } - .radial(@centerColor: #555, @outsideColor: #333) { + .radial(@innerColor: #555, @outerColor: #333) { background-color: @outsideColor; background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor)); background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor); @@ -313,7 +313,7 @@ background-repeat: no-repeat; // Opera cannot do radial gradients yet } - .striped(@color,@angle: -45deg) { + .striped(@color, @angle: -45deg) { background-color: @color; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); -- cgit v1.2.3 From e877d125d7a2c673fec4e63600c2d8544c3128f6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 20:02:32 -0800 Subject: fix button group shadows, update js docs to fix alert js file link --- lib/button-groups.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/button-groups.less b/lib/button-groups.less index 4be4aca71..17957f1d6 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -81,7 +81,7 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } -- cgit v1.2.3 From f62c9379fb60bfb70435517b4569f586ec729d5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 20:07:27 -0800 Subject: remove all tablesorter assets and css --- lib/tables.less | 54 ------------------------------------------------------ 1 file changed, 54 deletions(-) (limited to 'lib') diff --git a/lib/tables.less b/lib/tables.less index 4010f63ec..809c2f60e 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -136,57 +136,3 @@ table { .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } } - - - -// TABLESORTER -// ----------- -// Support for the tablesorter jQuery plugin - -table { - // Tablesorting styles w/ jQuery plugin - .header { - cursor: pointer; - &:after { - content: ""; - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: @black transparent; - visibility: hidden; - } - } - // Style the sorted column headers (THs) - .headerSortUp, - .headerSortDown { - background-color: #f7f7f9; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - } - // Style the ascending (reverse alphabetical) column header - .header:hover { - &:after { - visibility:visible; - } - } - // Style the descending (alphabetical) column header - .headerSortDown, - .headerSortDown:hover { - &:after { - visibility:visible; - .opacity(60); - } - } - // Style the ascending (reverse alphabetical) column header - .headerSortUp { - &:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @black; - visibility:visible; - .box-shadow(none); //can't add boxshadow to downward facing arrow :( - .opacity(60); - } - } -} -- cgit v1.2.3 From b6b19866ac82089b9d3964f7fe9bbb3457306495 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 20:32:19 -0800 Subject: remove some old -moz- prefixes from mixins while we're at it, dropping FF3.6 support --- lib/mixins.less | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index a1dc94626..2eab8f36e 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -134,14 +134,12 @@ // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; - -moz-border-radius: @radius; border-radius: @radius; } // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; box-shadow: @shadow; } @@ -178,10 +176,9 @@ } // Background clipping -// Heads up: FF 3.6 and under need padding instead of padding-box +// Heads up: FF 3.6 and under need "padding" instead of "padding-box" .background-clip(@clip) { -webkit-background-clip: @clip; - -moz-background-clip: @clip; background-clip: @clip; } @@ -228,9 +225,8 @@ // Opacity .opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; + opacity: @opacity / 100; + filter: e(%("alpha(opacity=%d)", @opacity)); } @@ -245,9 +241,7 @@ } .border(@color: @white, @alpha: 1) { border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + .background-clip(padding-box); } } -- cgit v1.2.3 From 94ea3b62f09c840db5efe5e48815d011ca7e43d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 21:28:24 -0800 Subject: fix forms examples and allow for inputs in labels --- lib/forms.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 7451f36ef..3acb8c5dc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -68,6 +68,13 @@ select, height: auto; } +// Inputs within a label +label input, +label textarea, +label select { + display: block; +} + // Mini reset for unique input types input[type=image], input[type=checkbox], @@ -474,6 +481,10 @@ select:focus:required:invalid { // -------------------------- .form-horizontal { + // Legend collapses margin, so we're relegated to padding + legend + .control-group { + padding-top: @baseLineHeight * 1.5; + } // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; -- cgit v1.2.3 From 0ef4b6419fd83170dd62049a2850c5e8466635c9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 10:00:09 -0800 Subject: overhaul frontpage jumbotron, add js for twitter buttons back in, fix up some form ids and classes, straighten out the use of primary button variable --- lib/buttons.less | 2 +- lib/forms.less | 6 ++++++ lib/mixins.less | 3 +++ lib/variables.less | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index f13a9acbf..d97f044cf 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -59,7 +59,7 @@ &.primary { color: @white; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@blue, @blueDark) + .gradientBar(@primaryButtonBackground, spin(@primaryButtonBackground, 15)); } // Transitions diff --git a/lib/forms.less b/lib/forms.less index 3acb8c5dc..744649f90 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -133,10 +133,16 @@ input[type=image] { .box-shadow(none); } +// Make textarea height behave textarea { height: auto; } +// Hidden inputs +input[type=hidden] { + display: none; +} + // CHECKBOXES & RADIOS diff --git a/lib/mixins.less b/lib/mixins.less index 2eab8f36e..b58571e6a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -134,12 +134,14 @@ // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; + -moz-border-radius: @radius; border-radius: @radius; } // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; box-shadow: @shadow; } @@ -179,6 +181,7 @@ // Heads up: FF 3.6 and under need "padding" instead of "padding-box" .background-clip(@clip) { -webkit-background-clip: @clip; + -moz-background-clip: @clip; background-clip: @clip; } diff --git a/lib/variables.less b/lib/variables.less index 3c4f562ca..5ed896cc0 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -45,7 +45,7 @@ @baseLineHeight: 18px; // Buttons -@primaryButtonColor: @blue; +@primaryButtonBackground: @linkColor; -- cgit v1.2.3 From 29f0e4c28b56e684a9be9931dcf77b418cb63ae0 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:01:03 -0500 Subject: Removes filters as a way to provide gradients for IE<=9 - Lets us use rounded corners in IE9 - Makes hover / active states work correctly in IE<=9 Only change for non-IE is that moving from hover -> not hovering no longer animates (was a subtle blend) due to mismatch between the bottom of the gradient and the background color. Refactor: moves the primary button background to match the others. --- lib/buttons.less | 53 ++++++++++++++++++++++++++++++++--------------------- lib/mixins.less | 12 ++---------- 2 files changed, 34 insertions(+), 31 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index d97f044cf..7f5a91b99 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -1,9 +1,10 @@ // BUTTON STYLES // ------------- -// Shared colors for buttons and alerts .btn { // Set text color + &.primary, + &.primary:hover, &.danger, &.danger:hover, &.success, @@ -13,17 +14,36 @@ text-shadow: 0 -1px 0 rgba(0,0,0,.25); color: @white } + &.primary { + .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 15)); + } // Danger and error appear as red &.danger { - .gradientBar(#ee5f5b, #c43c35); + .buttonBackground(#ee5f5b, #c43c35); } // Success appears as green &.success { - .gradientBar(#62c462, #57a957); + .buttonBackground(#62c462, #57a957); } // Info appears as a neutral blue &.info { - .gradientBar(#5bc0de, #339bb9); + .buttonBackground(#5bc0de, #339bb9); + } +} + +.buttonBackground(@startColor, @endColor) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + .gradientBar(@startColor, @endColor); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:active, &.active { + background-color: @endColor; + } + + &:active, + &.active { + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves + background-color: darken(@endColor, 10%) e("\9"); } } @@ -47,7 +67,12 @@ &:hover { color: @grayDark; text-decoration: none; + background-color: darken(@white, 10%); background-position: 0 -15px; + + // transition is only when going to hover, otherwise the background + // behind the gradient (there for IE<=9 fallback) gets mismatched + .transition(background-position .1s linear); } // Focus state for keyboard and accessibility @@ -55,27 +80,18 @@ outline: 1px dotted #666; } - // Primary Button Type - &.primary { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@primaryButtonBackground, spin(@primaryButtonBackground, 15)); - } - - // Transitions - .transition(.1s linear all); - // Active and Disabled states &.active, &:active { background-image: none; @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); + background-color: darken(@white, 10%); + background-color: darken(@white, 15%) e("\9"); } &.disabled { cursor: default; background-image: none; - .reset-filter(); .opacity(65); .box-shadow(none); } @@ -84,7 +100,6 @@ // def because IE8 and below will drop it ;_; cursor: default; background-image: none; - .reset-filter(); .opacity(65); .box-shadow(none); } @@ -101,10 +116,6 @@ font-size: @baseFontSize - 2px; } } -// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .btn { - border-radius: 0 \0; -} // Help Firefox not be a jerk about adding extra padding to buttons button.btn, @@ -113,4 +124,4 @@ input[type=submit].btn { padding: 0; border: 0; } -} \ No newline at end of file +} diff --git a/lib/mixins.less b/lib/mixins.less index b58571e6a..b8c969ea8 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -266,10 +266,9 @@ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down } .vertical(@startColor: #555, @endColor: #333) { - background-color: @endColor; + background-color: mix(@startColor, @endColor, 60%); background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ @@ -277,7 +276,6 @@ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down } .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -289,7 +287,7 @@ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: @endColor; + background-color: @midColor; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); @@ -297,7 +295,6 @@ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@innerColor: #555, @outerColor: #333) { background-color: @outsideColor; @@ -319,11 +316,6 @@ } } -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - // COMPONENT MIXINS -- cgit v1.2.3 From 7117db499f0b02da32a8d08f6371cab1f6b53338 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:26:14 -0500 Subject: Makes default button the tiniest bit of gray for IE<=9 --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index b8c969ea8..dd331ebf2 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -287,7 +287,7 @@ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: @midColor; + background-color: mix(@midColor, @endColor, 80%); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); -- cgit v1.2.3 From cd907067b81eb5b46cd416a3e65fb2858c4603f9 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:51:03 -0500 Subject: Fixes background color for disabled buttons to match pre-IE fix (which prevents hover effects) --- lib/buttons.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 7f5a91b99..228b6c06d 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -36,7 +36,11 @@ .gradientBar(@startColor, @endColor); // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active { + &:hover, &:active, &.active, &.disabled { + background-color: @endColor; + } + + &[disabled] { background-color: @endColor; } @@ -92,6 +96,7 @@ &.disabled { cursor: default; background-image: none; + background-color: darken(@white, 10%); .opacity(65); .box-shadow(none); } @@ -100,6 +105,7 @@ // def because IE8 and below will drop it ;_; cursor: default; background-image: none; + background-color: darken(@white, 10%); .opacity(65); .box-shadow(none); } -- cgit v1.2.3 From edef89f30efd73e5fca9952eef48136f8264aa93 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 11:10:07 -0800 Subject: move around some comments in buttons.less, update labels to use correct variables, add snippet to docs about IE9 --- lib/buttons.less | 15 +++++++++++++-- lib/labels.less | 6 +++--- 2 files changed, 16 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 228b6c06d..cebacd049 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -1,6 +1,10 @@ // BUTTON STYLES // ------------- + +// Colors +// ------ + .btn { // Set text color &.primary, @@ -31,6 +35,9 @@ } } + +// Mixin for generating button backgrounds +// --------------------------------------- .buttonBackground(@startColor, @endColor) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 .gradientBar(@startColor, @endColor); @@ -40,18 +47,22 @@ background-color: @endColor; } + // called out separately because IE8 would ignore otherwise &[disabled] { background-color: @endColor; } + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves &:active, &.active { - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves background-color: darken(@endColor, 10%) e("\9"); } } -// Base .btn styles + +// Base styles +// ----------- + .btn { // Button Base display: inline-block; diff --git a/lib/labels.less b/lib/labels.less index 114bc85b5..06dc7f3c0 100644 --- a/lib/labels.less +++ b/lib/labels.less @@ -9,8 +9,8 @@ text-transform: uppercase; background-color: @grayLight; .border-radius(3px); - &.important { background-color: #c43c35; } + &.important { background-color: @errorText; } &.warning { background-color: @orange; } - &.success { background-color: @green; } - &.notice { background-color: lighten(@blue, 25%); } + &.success { background-color: @successText; } + &.info { background-color: @infoText; } } -- cgit v1.2.3 From c13de3db607dad06ce992e78ffdb8c2fa6871e70 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 13:56:18 -0500 Subject: Fixes off-by-1px between checkbox and form label (all browsers) --- lib/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 744649f90..4aec1ec1a 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -162,7 +162,7 @@ input[type=hidden] { // Move the options list down to align with labels .controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 6px; // has to be padding because margin collaspes + padding-top: 5px; // has to be padding because margin collaspes } // Radios and checkboxes on same line -- cgit v1.2.3 From f76444c8585f3a720e0af2cedd33acddc718b962 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 14:11:05 -0500 Subject: Clears border-radius on checkboxes because they look bad on IE --- lib/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4aec1ec1a..b2bd7b8cc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -87,6 +87,7 @@ input[type=radio] { line-height: normal; border: none; cursor: pointer; + .border-radius(0); } // Reset the file input to browser defaults -- cgit v1.2.3 From b9413460afe2bdfac18889953447622d13eb1968 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 16:02:27 -0500 Subject: Makes inputs and buttons align middle so they line up in all browsers --- lib/buttons.less | 7 ++++--- lib/forms.less | 8 ++++---- lib/reset.less | 3 +-- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index cebacd049..240e117e2 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -66,9 +66,9 @@ .btn { // Button Base display: inline-block; - padding: 5px 10px 6px; + padding: 4px 10px 4px; font-size: @baseFontSize; - line-height: normal; + line-height: @baseLineHeight; color: @grayDark; text-shadow: 0 1px 1px rgba(255,255,255,.75); #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient @@ -129,8 +129,9 @@ .border-radius(5px); } &.small { - padding: 7px 9px 7px; + padding: 5px 9px 5px; font-size: @baseFontSize - 2px; + line-height: @baseLineHeight - 2px; } } diff --git a/lib/forms.less b/lib/forms.less index b2bd7b8cc..4ee636683 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -119,7 +119,6 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied - vertical-align: baseline; background-color: @white; } @@ -377,9 +376,9 @@ select:focus:required:invalid { } .help-inline { - *position: relative; /* IE6-7 */ - *top: -5px; /* IE6-7 */ - display: inline; + display: inline-block; + margin-bottom: 9px; + vertical-align: middle; padding-left: 5px; } @@ -469,6 +468,7 @@ select:focus:required:invalid { input, textarea, select, + .help-inline, .uneditable-input { display: inline-block; margin-bottom: 0; diff --git a/lib/reset.less b/lib/reset.less index 31e7160f2..ef4dc8af6 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -91,8 +91,7 @@ select, textarea { margin: 0; font-size: 100%; - vertical-align: baseline; - *vertical-align: middle; + vertical-align: middle; } button, input { -- cgit v1.2.3 From 78652a707f8ae2d98b1cd434b4bca546d2948236 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 13:51:12 -0800 Subject: allow icons in small buttons --- lib/button-groups.less | 5 +++++ lib/buttons.less | 3 +++ 2 files changed, 8 insertions(+) (limited to 'lib') diff --git a/lib/button-groups.less b/lib/button-groups.less index 17957f1d6..5fb0a8e97 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -114,3 +114,8 @@ } } +// Small button dropdowns +.btn.small .caret { + margin-top: 4px; +} + diff --git a/lib/buttons.less b/lib/buttons.less index cebacd049..118af568a 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -132,6 +132,9 @@ padding: 7px 9px 7px; font-size: @baseFontSize - 2px; } + &.small .icon { + margin-top: -2px; + } } // Help Firefox not be a jerk about adding extra padding to buttons -- cgit v1.2.3 From 2aa99d17d52cffe7fd4a1aad18a46cfc2ba91185 Mon Sep 17 00:00:00 2001 From: Linmiao Xu Date: Thu, 26 Jan 2012 14:36:30 -0800 Subject: Fix icon margin in large buttons. --- lib/buttons.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'lib') diff --git a/lib/buttons.less b/lib/buttons.less index 118af568a..2cbcc1d4f 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -128,6 +128,9 @@ line-height: normal; .border-radius(5px); } + &.large .icon { + margin-top: 1px; + } &.small { padding: 7px 9px 7px; font-size: @baseFontSize - 2px; -- cgit v1.2.3 From 8a6be6601dfb826e32a5004b7b0f09756ebb975b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 14:40:19 -0800 Subject: make accordion links block level --- lib/accordion.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/accordion.less b/lib/accordion.less index a57683e7b..1ebd5b1a1 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -13,9 +13,12 @@ .border-radius(4px); } .accordion-heading { - padding: 8px 15px; border-bottom: 0; } +.accordion-heading .accordion-toggle { + display: block; + padding: 8px 15px; +} .accordion-body { margin-bottom: 2px; } -- cgit v1.2.3 From 7a6737512a18f56bb95a0024fdbd4a8823034b76 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 14:50:55 -0800 Subject: break scaffolding down into smaller less files --- lib/bootstrap.less | 2 ++ lib/grid.less | 41 +++++++++++++++++++++++++ lib/layouts.less | 43 ++++++++++++++++++++++++++ lib/scaffolding.less | 86 ++-------------------------------------------------- 4 files changed, 88 insertions(+), 84 deletions(-) create mode 100644 lib/grid.less create mode 100644 lib/layouts.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 8d307d427..40ebd7f2f 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -18,6 +18,8 @@ // Grid system and page structure @import "scaffolding.less"; +@import "grid.less"; +@import "layouts.less"; // Base CSS @import "type.less"; diff --git a/lib/grid.less b/lib/grid.less new file mode 100644 index 000000000..d5b5f487d --- /dev/null +++ b/lib/grid.less @@ -0,0 +1,41 @@ +// GRID SYSTEM +// ----------- +// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there +.row { + margin-left: @gridGutterWidth * -1; + .clearfix(); +} + +// Find all .span# classes within .row and give them the necessary properties for grid columns +// (supported by all browsers back to IE7) +// Credit to @dhg for the idea +[class*="span"] { + .gridColumn(); +} + +// Default columns +.span1 { .columns(1); } +.span2 { .columns(2); } +.span3 { .columns(3); } +.span4 { .columns(4); } +.span5 { .columns(5); } +.span6 { .columns(6); } +.span7 { .columns(7); } +.span8 { .columns(8); } +.span9 { .columns(9); } +.span10 { .columns(10); } +.span11 { .columns(11); } +.span12 { .columns(12); } + +// Offset column options +.offset1 { .offset(1); } +.offset2 { .offset(2); } +.offset3 { .offset(3); } +.offset4 { .offset(4); } +.offset5 { .offset(5); } +.offset6 { .offset(6); } +.offset7 { .offset(7); } +.offset8 { .offset(8); } +.offset9 { .offset(9); } +.offset10 { .offset(10); } +.offset11 { .offset(11); } diff --git a/lib/layouts.less b/lib/layouts.less new file mode 100644 index 000000000..14435c9d1 --- /dev/null +++ b/lib/layouts.less @@ -0,0 +1,43 @@ +// +// Layouts +// Fixed-width and fluid (with sidebar) layouts +// -------------------------------------------- + + +// Container (centered, fixed-width layouts) +.container { + .container-fixed(); +} + +// Fluid layouts (left aligned, with sidebar, min- & max-width content) +.fluid-container { + position: relative; + min-width: @siteWidth; + padding-left: @gridGutterWidth; + padding-right: @gridGutterWidth; + .clearfix(); +} + +// Sidebars (left and right options) +.fluid-sidebar { + width: @fluidSidebarWidth; + margin: 0 20px 18px; +} +.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } +.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } + +// Float the sidebars accordingly +.sidebar-left .fluid-sidebar { + float: left; + margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; +} +.sidebar-right .fluid-sidebar { + float: right; + margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; +} + +// The main content area +.fluid-content { + float: left; + width: 100%; +} diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7002b0408..3eced0ef0 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -16,49 +16,10 @@ body { background-color: @white; } -// Container (centered, fixed-width layouts) -.container { - .container-fixed(); -} - -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.fluid-container { - position: relative; - min-width: @siteWidth; - padding-left: @gridGutterWidth; - padding-right: @gridGutterWidth; - .clearfix(); -} - -// Sidebars (left and right options) -.fluid-sidebar { - width: @fluidSidebarWidth; - margin: 0 20px 18px; -} -.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } -.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } - -// Float the sidebars accordingly -.sidebar-left .fluid-sidebar { - float: left; - margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} - -// The main content area -.fluid-content { - float: left; - width: 100%; -} - -// BASE STYLES -// ----------- +// LINKS +// ----- -// Links a { color: @linkColor; text-decoration: none; @@ -67,46 +28,3 @@ a { text-decoration: underline; } } - - -// GRID SYSTEM -// ----------- -// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there -.row { - margin-left: @gridGutterWidth * -1; - .clearfix(); -} - -// Find all .span# classes within .row and give them the necessary properties for grid columns -// (supported by all browsers back to IE7) -// Credit to @dhg for the idea -[class*="span"] { - .gridColumn(); -} - -// Default columns -.span1 { .columns(1); } -.span2 { .columns(2); } -.span3 { .columns(3); } -.span4 { .columns(4); } -.span5 { .columns(5); } -.span6 { .columns(6); } -.span7 { .columns(7); } -.span8 { .columns(8); } -.span9 { .columns(9); } -.span10 { .columns(10); } -.span11 { .columns(11); } -.span12 { .columns(12); } - -// Offset column options -.offset1 { .offset(1); } -.offset2 { .offset(2); } -.offset3 { .offset(3); } -.offset4 { .offset(4); } -.offset5 { .offset(5); } -.offset6 { .offset(6); } -.offset7 { .offset(7); } -.offset8 { .offset(8); } -.offset9 { .offset(9); } -.offset10 { .offset(10); } -.offset11 { .offset(11); } -- cgit v1.2.3 From f82db4b95bf12bc6c04a5ecc3d4a649ba9800db0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 14:53:35 -0800 Subject: separate code from type css files --- lib/bootstrap.less | 1 + lib/code.less | 44 ++++++++++++++++++++++++++++++++++++++++++++ lib/scaffolding.less | 1 - lib/type.less | 43 +------------------------------------------ 4 files changed, 46 insertions(+), 43 deletions(-) create mode 100644 lib/code.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 40ebd7f2f..ede31c035 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,6 +23,7 @@ // Base CSS @import "type.less"; +@import "code.less"; @import "forms.less"; @import "tables.less"; diff --git a/lib/code.less b/lib/code.less new file mode 100644 index 000000000..0cc3db857 --- /dev/null +++ b/lib/code.less @@ -0,0 +1,44 @@ +// Code.less +// Code typography styles for the and 
     elements
+// --------------------------------------------------------
+
+// Inline and block code styles
+code,
+pre {
+  padding: 0 3px 2px;
+  #font > #family > .monospace;
+  font-size: @baseFontSize - 1;
+  color: @grayDark;
+  .border-radius(3px);
+}
+code {
+  padding: 3px 4px;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+pre {
+  display: block;
+  padding: (@baseLineHeight - 1) / 2;
+  margin: 0 0 @baseLineHeight / 2;
+  font-size: 12px;
+  line-height: @baseLineHeight;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc; // fallback for IE7-8
+  border: 1px solid rgba(0,0,0,.15);
+  .border-radius(4px);
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+
+  // Make prettyprint styles more spaced out for readability
+  &.prettyprint {
+    margin-bottom: @baseLineHeight;
+  }
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    background-color: transparent;
+  }
+}
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 3eced0ef0..3c1826830 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -1,4 +1,3 @@
-//
 // Scaffolding
 // Basic and global styles for generating a grid system, structural layout, and page templates
 // -------------------------------------------------------------------------------------------
diff --git a/lib/type.less b/lib/type.less
index 548c222f1..087224fd0 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -197,51 +197,10 @@ address {
   font-style: normal;
 }
 
-// Inline and block code styles
-code,
-pre {
-  padding: 0 3px 2px;
-  #font > #family > .monospace;
-  font-size: @baseFontSize - 1;
-  color: @grayDark;
-  .border-radius(3px);
-}
-code {
-  padding: 3px 4px;
-  color: #d14;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-}
-pre {
-  display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
-  font-size: 12px;
-  line-height: @baseLineHeight;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc; // fallback for IE7-8
-  border: 1px solid rgba(0,0,0,.15);
-  .border-radius(4px);
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-
-  // Make prettyprint styles more spaced out for readability
-  &.prettyprint {
-    margin-bottom: @baseLineHeight;
-  }
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    background-color: transparent;
-  }
-}
-
+// Misc
 small {
   font-size: 100%;
 }
-
 cite {
   font-style: normal;
 }
-- 
cgit v1.2.3


From d8e1001836f869436df2de2905411b2236c8cbad Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jan 2012 15:39:37 -0800
Subject: fix legend margin collapse

---
 lib/forms.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'lib')

diff --git a/lib/forms.less b/lib/forms.less
index 4ee636683..9e2e1dc1b 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -28,7 +28,6 @@ legend {
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
-  -webkit-margin-collapse: separate;
 }
 
 // Set font for forms
@@ -490,7 +489,8 @@ select:focus:required:invalid {
 .form-horizontal {
   // Legend collapses margin, so we're relegated to padding
   legend + .control-group {
-    padding-top: @baseLineHeight * 1.5;
+    margin-top: @baseLineHeight;
+    -webkit-margin-top-collapse: separate;
   }
   // Increase spacing between groups
   .control-group {
-- 
cgit v1.2.3


From ef4e3bc0f7549e327c45792884a264faab402400 Mon Sep 17 00:00:00 2001
From: Linmiao Xu 
Date: Thu, 26 Jan 2012 15:51:11 -0800
Subject: Move hero-unit css out of pattern.less and include it. Fixes #1185.

---
 lib/bootstrap.less |  1 +
 lib/hero-unit.less | 20 ++++++++++++++++++++
 lib/patterns.less  | 17 -----------------
 3 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 lib/hero-unit.less

(limited to 'lib')

diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index ede31c035..bc9f84373 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -57,6 +57,7 @@
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";
+@import "hero-unit.less";
 
 // Utility classes
 @import "utilities.less"; // Has to be last to override when necessary
diff --git a/lib/hero-unit.less b/lib/hero-unit.less
new file mode 100644
index 000000000..cba1cc46c
--- /dev/null
+++ b/lib/hero-unit.less
@@ -0,0 +1,20 @@
+// HERO UNIT
+// ---------
+
+.hero-unit {
+  padding: 60px;
+  margin-bottom: 30px;
+  background-color: #f5f5f5;
+  .border-radius(6px);
+  h1 {
+    margin-bottom: 0;
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+  p {
+    font-size: 18px;
+    font-weight: 200;
+    line-height: @baseLineHeight * 1.5;
+  }
+}
diff --git a/lib/patterns.less b/lib/patterns.less
index 7a039ce26..d94b921e4 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -6,23 +6,6 @@
 // PAGE HEADERS
 // ------------
 
-.hero-unit {
-  padding: 60px;
-  margin-bottom: 30px;
-  background-color: #f5f5f5;
-  .border-radius(6px);
-  h1 {
-    margin-bottom: 0;
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-  p {
-    font-size: 18px;
-    font-weight: 200;
-    line-height: @baseLineHeight * 1.5;
-  }
-}
 footer {
   padding-top: @baseLineHeight - 1;
   margin-top: @baseLineHeight - 1;
-- 
cgit v1.2.3


From af96da6e895974dd4bd6fb19cf0c6d7e16bf050d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jan 2012 16:27:37 -0800
Subject: adding white sprites

---
 lib/sprites.less | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'lib')

diff --git a/lib/sprites.less b/lib/sprites.less
index 0d51125c2..c85d63e8f 100644
--- a/lib/sprites.less
+++ b/lib/sprites.less
@@ -20,6 +20,9 @@
   width: 14px;
   height: 14px;
 }
+.icon.white {
+  background-image: url(docs/assets/img/glyphicons-halflings-sprite-white.png);
+}
 
 .glass              { background-position: 0      0; }
 .music              { background-position: -24px  0; }
-- 
cgit v1.2.3


From 7a3d04d5bed9b9ddf5a3c78466b7115a0260b75e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jan 2012 19:10:09 -0800
Subject: scope icons to .icon

---
 lib/sprites.less | 180 +++++++++++++++++++++++++++----------------------------
 1 file changed, 90 insertions(+), 90 deletions(-)

(limited to 'lib')

diff --git a/lib/sprites.less b/lib/sprites.less
index c85d63e8f..ef9295288 100644
--- a/lib/sprites.less
+++ b/lib/sprites.less
@@ -24,98 +24,98 @@
   background-image: url(docs/assets/img/glyphicons-halflings-sprite-white.png);
 }
 
-.glass              { background-position: 0      0; }
-.music              { background-position: -24px  0; }
-.search             { background-position: -48px  0; }
-.envelope           { background-position: -72px  0; }
-.heart              { background-position: -96px  0; }
-.star               { background-position: -120px 0; }
-.star-empty         { background-position: -144px 0; }
-.user               { background-position: -168px 0; }
-.film               { background-position: -192px 0; }
-.th-large           { background-position: -216px 0; }
-.th                 { background-position: -240px 0; }
-.th-list            { background-position: -264px 0; }
-.ok                 { background-position: -288px 0; }
-.remove             { background-position: -312px 0; }
-.zoom-in            { background-position: -336px 0; }
-.zoom-out           { background-position: -360px 0; }
-.off                { background-position: -384px 0; }
-.signal             { background-position: -408px 0; }
-.cog                { background-position: -432px 0; }
-.trash              { background-position: -456px 0; }
+.icon.glass              { background-position: 0      0; }
+.icon.music              { background-position: -24px  0; }
+.icon.search             { background-position: -48px  0; }
+.icon.envelope           { background-position: -72px  0; }
+.icon.heart              { background-position: -96px  0; }
+.icon.star               { background-position: -120px 0; }
+.icon.star-empty         { background-position: -144px 0; }
+.icon.user               { background-position: -168px 0; }
+.icon.film               { background-position: -192px 0; }
+.icon.th-large           { background-position: -216px 0; }
+.icon.th                 { background-position: -240px 0; }
+.icon.th-list            { background-position: -264px 0; }
+.icon.ok                 { background-position: -288px 0; }
+.icon.remove             { background-position: -312px 0; }
+.icon.zoom-in            { background-position: -336px 0; }
+.icon.zoom-out           { background-position: -360px 0; }
+.icon.off                { background-position: -384px 0; }
+.icon.signal             { background-position: -408px 0; }
+.icon.cog                { background-position: -432px 0; }
+.icon.trash              { background-position: -456px 0; }
 
-.home               { background-position: 0      -24px; }
-.file               { background-position: -24px  -24px; }
-.time               { background-position: -48px  -24px; }
-.road               { background-position: -72px  -24px; }
-.download-alt       { background-position: -96px  -24px; }
-.download           { background-position: -120px -24px; }
-.upload             { background-position: -144px -24px; }
-.inbox              { background-position: -168px -24px; }
-.play-circle        { background-position: -192px -24px; }
-.repeat             { background-position: -216px -24px; }
-.refresh            { background-position: -240px -24px; }
-.calendar           { background-position: -264px -24px; }
-.lock               { background-position: -288px -24px; }
-.flag               { background-position: -312px -24px; }
-.headphones         { background-position: -336px -24px; }
-.volume-off         { background-position: -360px -24px; }
-.volume-down        { background-position: -384px -24px; }
-.volume-up          { background-position: -408px -24px; }
-.qrcode             { background-position: -432px -24px; }
-.barcode            { background-position: -456px -24px; }
+.icon.home               { background-position: 0      -24px; }
+.icon.file               { background-position: -24px  -24px; }
+.icon.time               { background-position: -48px  -24px; }
+.icon.road               { background-position: -72px  -24px; }
+.icon.download-alt       { background-position: -96px  -24px; }
+.icon.download           { background-position: -120px -24px; }
+.icon.upload             { background-position: -144px -24px; }
+.icon.inbox              { background-position: -168px -24px; }
+.icon.play-circle        { background-position: -192px -24px; }
+.icon.repeat             { background-position: -216px -24px; }
+.icon.refresh            { background-position: -240px -24px; }
+.icon.calendar           { background-position: -264px -24px; }
+.icon.lock               { background-position: -288px -24px; }
+.icon.flag               { background-position: -312px -24px; }
+.icon.headphones         { background-position: -336px -24px; }
+.icon.volume-off         { background-position: -360px -24px; }
+.icon.volume-down        { background-position: -384px -24px; }
+.icon.volume-up          { background-position: -408px -24px; }
+.icon.qrcode             { background-position: -432px -24px; }
+.icon.barcode            { background-position: -456px -24px; }
 
-.tag                { background-position: 0      -48px; }
-.tags               { background-position: -24px  -48px; }
-.book               { background-position: -48px  -48px; }
-.bookmark           { background-position: -72px  -48px; }
-.print              { background-position: -96px  -48px; }
-.camera             { background-position: -120px -48px; }
-.font               { background-position: -144px -48px; }
-.bold               { background-position: -168px -48px; }
-.italic             { background-position: -192px -48px; }
-.text-height        { background-position: -216px -48px; }
-.text-width         { background-position: -240px -48px; }
-.align-left         { background-position: -264px -48px; }
-.align-center       { background-position: -288px -48px; }
-.align-right        { background-position: -312px -48px; }
-.align-justify      { background-position: -336px -48px; }
-.list               { background-position: -360px -48px; }
-.indent-left        { background-position: -384px -48px; }
-.indent-right       { background-position: -408px -48px; }
-.facetime-video     { background-position: -432px -48px; }
-.picture            { background-position: -456px -48px; }
+.icon.tag                { background-position: 0      -48px; }
+.icon.tags               { background-position: -24px  -48px; }
+.icon.book               { background-position: -48px  -48px; }
+.icon.bookmark           { background-position: -72px  -48px; }
+.icon.print              { background-position: -96px  -48px; }
+.icon.camera             { background-position: -120px -48px; }
+.icon.font               { background-position: -144px -48px; }
+.icon.bold               { background-position: -168px -48px; }
+.icon.italic             { background-position: -192px -48px; }
+.icon.text-height        { background-position: -216px -48px; }
+.icon.text-width         { background-position: -240px -48px; }
+.icon.align-left         { background-position: -264px -48px; }
+.icon.align-center       { background-position: -288px -48px; }
+.icon.align-right        { background-position: -312px -48px; }
+.icon.align-justify      { background-position: -336px -48px; }
+.icon.list               { background-position: -360px -48px; }
+.icon.indent-left        { background-position: -384px -48px; }
+.icon.indent-right       { background-position: -408px -48px; }
+.icon.facetime-video     { background-position: -432px -48px; }
+.icon.picture            { background-position: -456px -48px; }
 
-.pencil             { background-position: 0      -72px; }
-.map-marker         { background-position: -24px  -72px; }
-.adjust             { background-position: -48px  -72px; }
-.tint               { background-position: -72px  -72px; }
-.edit               { background-position: -96px  -72px; }
-.share              { background-position: -120px -72px; }
-.check              { background-position: -144px -72px; }
-.move               { background-position: -168px -72px; }
-.step-backward      { background-position: -192px -72px; }
-.fast-backward      { background-position: -216px -72px; }
-.backward           { background-position: -240px -72px; }
-.play               { background-position: -264px -72px; }
-.pause              { background-position: -288px -72px; }
-.stop               { background-position: -312px -72px; }
-.forward            { background-position: -336px -72px; }
-.fast-forward       { background-position: -360px -72px; }
-.step-forward       { background-position: -384px -72px; }
-.eject              { background-position: -408px -72px; }
-.chevron-left       { background-position: -432px -72px; }
-.chevron-right      { background-position: -456px -72px; }
+.icon.pencil             { background-position: 0      -72px; }
+.icon.map-marker         { background-position: -24px  -72px; }
+.icon.adjust             { background-position: -48px  -72px; }
+.icon.tint               { background-position: -72px  -72px; }
+.icon.edit               { background-position: -96px  -72px; }
+.icon.share              { background-position: -120px -72px; }
+.icon.check              { background-position: -144px -72px; }
+.icon.move               { background-position: -168px -72px; }
+.icon.step-backward      { background-position: -192px -72px; }
+.icon.fast-backward      { background-position: -216px -72px; }
+.icon.backward           { background-position: -240px -72px; }
+.icon.play               { background-position: -264px -72px; }
+.icon.pause              { background-position: -288px -72px; }
+.icon.stop               { background-position: -312px -72px; }
+.icon.forward            { background-position: -336px -72px; }
+.icon.fast-forward       { background-position: -360px -72px; }
+.icon.step-forward       { background-position: -384px -72px; }
+.icon.eject              { background-position: -408px -72px; }
+.icon.chevron-left       { background-position: -432px -72px; }
+.icon.chevron-right      { background-position: -456px -72px; }
 
-.arrow-left         { background-position: -240px -96px; }
-.arrow-right        { background-position: -264px -96px; }
-.arrow-up           { background-position: -288px -96px; }
-.arrow-down         { background-position: -312px -96px; }
-.share-alt          { background-position: -336px -96px; }
-.resize-full        { background-position: -360px -96px; }
-.resize-small       { background-position: -384px -96px; }
-.plus               { background-position: -408px -96px; }
-.minus              { background-position: -432px -96px; }
-.asterisk           { background-position: -456px -96px; }
+.icon.arrow-left         { background-position: -240px -96px; }
+.icon.arrow-right        { background-position: -264px -96px; }
+.icon.arrow-up           { background-position: -288px -96px; }
+.icon.arrow-down         { background-position: -312px -96px; }
+.icon.share-alt          { background-position: -336px -96px; }
+.icon.resize-full        { background-position: -360px -96px; }
+.icon.resize-small       { background-position: -384px -96px; }
+.icon.plus               { background-position: -408px -96px; }
+.icon.minus              { background-position: -432px -96px; }
+.icon.asterisk           { background-position: -456px -96px; }
 
-- 
cgit v1.2.3


From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Thu, 26 Jan 2012 21:48:46 -0800
Subject: moving structure around + more work on builder...

---
 lib/accordion.less            |  30 ---
 lib/alerts.less               |  69 ------
 lib/bootstrap.less            |  63 ------
 lib/breadcrumbs.less          |  22 --
 lib/button-groups.less        | 121 ----------
 lib/buttons.less              | 151 -------------
 lib/carousel.less             | 114 ----------
 lib/close.less                |  18 --
 lib/code.less                 |  44 ----
 lib/component-animations.less |  18 --
 lib/dropdowns.less            | 110 ---------
 lib/forms.less                | 514 ------------------------------------------
 lib/grid.less                 |  41 ----
 lib/hero-unit.less            |  20 --
 lib/labels.less               |  16 --
 lib/layouts.less              |  43 ----
 lib/mixins.less               | 360 -----------------------------
 lib/modals.less               |  65 ------
 lib/navbar.less               | 251 ---------------------
 lib/navs.less                 | 338 ---------------------------
 lib/pager.less                |  25 --
 lib/pagination.less           |  54 -----
 lib/patterns.less             |  13 --
 lib/popovers.less             |  49 ----
 lib/print.less                |  18 --
 lib/progress-bars.less        |  99 --------
 lib/reset.less                | 126 -----------
 lib/responsive.less           | 268 ----------------------
 lib/scaffolding.less          |  29 ---
 lib/sprites.less              | 121 ----------
 lib/tables.less               | 138 ------------
 lib/thumbnails.less           |  33 ---
 lib/tooltip.less              |  35 ---
 lib/type.less                 | 206 -----------------
 lib/utilities.less            |  23 --
 lib/variables.less            |  90 --------
 lib/wells.less                |  17 --
 37 files changed, 3752 deletions(-)
 delete mode 100644 lib/accordion.less
 delete mode 100644 lib/alerts.less
 delete mode 100644 lib/bootstrap.less
 delete mode 100644 lib/breadcrumbs.less
 delete mode 100644 lib/button-groups.less
 delete mode 100644 lib/buttons.less
 delete mode 100644 lib/carousel.less
 delete mode 100644 lib/close.less
 delete mode 100644 lib/code.less
 delete mode 100644 lib/component-animations.less
 delete mode 100644 lib/dropdowns.less
 delete mode 100644 lib/forms.less
 delete mode 100644 lib/grid.less
 delete mode 100644 lib/hero-unit.less
 delete mode 100644 lib/labels.less
 delete mode 100644 lib/layouts.less
 delete mode 100644 lib/mixins.less
 delete mode 100644 lib/modals.less
 delete mode 100644 lib/navbar.less
 delete mode 100644 lib/navs.less
 delete mode 100644 lib/pager.less
 delete mode 100644 lib/pagination.less
 delete mode 100644 lib/patterns.less
 delete mode 100644 lib/popovers.less
 delete mode 100644 lib/print.less
 delete mode 100644 lib/progress-bars.less
 delete mode 100644 lib/reset.less
 delete mode 100644 lib/responsive.less
 delete mode 100644 lib/scaffolding.less
 delete mode 100644 lib/sprites.less
 delete mode 100644 lib/tables.less
 delete mode 100644 lib/thumbnails.less
 delete mode 100644 lib/tooltip.less
 delete mode 100644 lib/type.less
 delete mode 100644 lib/utilities.less
 delete mode 100644 lib/variables.less
 delete mode 100644 lib/wells.less

(limited to 'lib')

diff --git a/lib/accordion.less b/lib/accordion.less
deleted file mode 100644
index 1ebd5b1a1..000000000
--- a/lib/accordion.less
+++ /dev/null
@@ -1,30 +0,0 @@
-// ACCORDION
-// ---------
-
-
-// Parent container
-.accordion {
-  margin-bottom: @baseLineHeight;
-}
-
-// Group == heading + body
-.accordion-group {
-  background-color: #f5f5f5;
-  .border-radius(4px);
-}
-.accordion-heading {
-  border-bottom: 0;
-}
-.accordion-heading .accordion-toggle {
-  display: block;
-  padding: 8px 15px;
-}
-.accordion-body {
-  margin-bottom: 2px;
-}
-
-// Inner needs the styles because you can't animate properly with any styles on the element
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid #e5e5e5;
-}
diff --git a/lib/alerts.less b/lib/alerts.less
deleted file mode 100644
index 23c17e704..000000000
--- a/lib/alerts.less
+++ /dev/null
@@ -1,69 +0,0 @@
-// ALERT STYLES
-// ------------
-
-// Base alert styles
-.alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: @warningBackground;
-  border: 1px solid @warningBorder;
-  .border-radius(4px);
-}
-.alert,
-.alert-heading {
-  color: @warningText;
-}
-
-// Adjust close link position
-.alert .close {
-  position: relative;
-  right: -21px;
-  line-height: 18px;
-}
-
-// Alternate styles
-// ----------------
-
-.alert-success {
-  background-color: @successBackground;
-  border-color: @successBorder;  
-}
-.alert-success,
-.alert-success .alert-heading {
-  color: @successText;
-}
-.alert-danger,
-.alert-error {
-  background-color: @errorBackground;
-  border-color: @errorBorder;
-}
-.alert-danger,
-.alert-error,
-.alert-danger .alert-heading,
-.alert-error .alert-heading {
-  color: @errorText;
-}
-.alert-info {
-  background-color: @infoBackground;
-  border-color: @infoBorder;
-}
-.alert-info,
-.alert-info .alert-heading {
-  color: @infoText;
-}
-
-
-// Block alerts
-// ------------------------
-.alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
-}
-.alert-block > p,
-.alert-block > ul {
-  margin-bottom: 0;
-}
-.alert-block p + p {
-  margin-top: 5px;
-}
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
deleted file mode 100644
index bc9f84373..000000000
--- a/lib/bootstrap.less
+++ /dev/null
@@ -1,63 +0,0 @@
-/*!
- * Bootstrap @VERSION
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: @DATE
- */
-
-// CSS Reset
-@import "reset.less";
-
-// Core variables and mixins
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
-@import "mixins.less";
-
-// Grid system and page structure
-@import "scaffolding.less";
-@import "grid.less";
-@import "layouts.less";
-
-// Base CSS
-@import "type.less";
-@import "code.less";
-@import "forms.less";
-@import "tables.less";
-
-// Components: common
-@import "sprites.less";
-@import "dropdowns.less";
-@import "wells.less";
-@import "component-animations.less";
-@import "close.less";
-
-// Components: Nav
-@import "navs.less";
-@import "navbar.less";
-@import "breadcrumbs.less";
-@import "pagination.less";
-@import "pager.less";
-
-// Components: Popovers
-@import "modals.less";
-@import "tooltip.less";
-@import "popovers.less";
-
-// Components: Buttons & Alerts
-@import "buttons.less";
-@import "button-groups.less";
-@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
-
-// Components: Misc
-@import "thumbnails.less";
-@import "labels.less";
-@import "progress-bars.less";
-@import "accordion.less";
-@import "carousel.less";
-@import "hero-unit.less";
-
-// Utility classes
-@import "utilities.less"; // Has to be last to override when necessary
diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less
deleted file mode 100644
index 19b8081e1..000000000
--- a/lib/breadcrumbs.less
+++ /dev/null
@@ -1,22 +0,0 @@
-// BREADCRUMBS
-// -----------
-
-.breadcrumb {
-  padding: 7px 14px;
-  margin: 0 0 @baseLineHeight;
-  #gradient > .vertical(@white, #f5f5f5);
-  border: 1px solid #ddd;
-  .border-radius(3px);
-  .box-shadow(inset 0 1px 0 @white);
-  li {
-    display: inline;
-    text-shadow: 0 1px 0 @white;
-  }
-  .divider {
-    padding: 0 5px;
-    color: @grayLight;
-  }
-  .active a {
-    color: @grayDark;
-  }
-}
diff --git a/lib/button-groups.less b/lib/button-groups.less
deleted file mode 100644
index 5fb0a8e97..000000000
--- a/lib/button-groups.less
+++ /dev/null
@@ -1,121 +0,0 @@
-// BUTTON GROUPS
-// -------------
-
-
-// Make the div behave like a button
-.btn-group {
-  position: relative;
-  .clearfix(); // clears the floated buttons
-}
-
-// Space out series of button groups
-.btn-group + .btn-group {
-  margin-left: 5px;
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
-  .btn-group {
-    display: inline-block;
-  }
-}
-
-// Float them, remove border radius, then re-add to first and last elements
-.btn-group .btn {
-  position: relative;
-  float: left;
-  margin-left: -1px;
-  .border-radius(0);
-}
-// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group .btn:first-child {
-  margin-left: 0;
-     -webkit-border-top-left-radius: 4px;
-         -moz-border-radius-topleft: 4px;
-             border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-      -moz-border-radius-bottomleft: 4px;
-          border-bottom-left-radius: 4px;
-}
-.btn-group .btn:last-child,
-.btn-group .dropdown-toggle {
-     -webkit-border-top-right-radius: 4px;
-         -moz-border-radius-topright: 4px;
-             border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-      -moz-border-radius-bottomright: 4px;
-          border-bottom-right-radius: 4px;
-}
-// Reset corners for large buttons
-.btn-group .btn.large:first-child {
-  margin-left: 0;
-     -webkit-border-top-left-radius: 6px;
-         -moz-border-radius-topleft: 6px;
-             border-top-left-radius: 6px;
-  -webkit-border-bottom-left-radius: 6px;
-      -moz-border-radius-bottomleft: 6px;
-          border-bottom-left-radius: 6px;
-}
-.btn-group .btn.large:last-child,
-.btn-group .large.dropdown-toggle {
-     -webkit-border-top-right-radius: 6px;
-         -moz-border-radius-topright: 6px;
-             border-top-right-radius: 6px;
-  -webkit-border-bottom-right-radius: 6px;
-      -moz-border-radius-bottomright: 6px;
-          border-bottom-right-radius: 6px;
-}
-
-// On hover/focus/active, bring the proper btn to front
-.btn-group .btn:hover,
-.btn-group .btn:focus,
-.btn-group .btn:active {
-  z-index: 2;
-}
-
-
-// Split button dropdowns
-// ----------------------
-
-// Give the line between buttons some depth
-.btn-group .dropdown-toggle {
-  padding-left: 8px;
-  padding-right: 8px;
-  @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-}
-
-// Reposition menu on open and round all corners
-.btn-group.open .dropdown-menu {
-  display: block;
-  margin-top: 1px;
-  .border-radius(5px);
-}
-.btn-group.open .dropdown-toggle {
-  background-image: none;
-  @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-}
-
-// Reposition the caret
-.btn .caret {
-  margin-top: 6px;
-  margin-left: 0;
-}
-
-// Account for other colors
-.primary,
-.danger,
-.info,
-.success {
-  .caret {
-    border-top-color: @white;
-    .opacity(75);
-  }
-}
-
-// Small button dropdowns
-.btn.small .caret {
-  margin-top: 4px;
-}
-
diff --git a/lib/buttons.less b/lib/buttons.less
deleted file mode 100644
index d7f533783..000000000
--- a/lib/buttons.less
+++ /dev/null
@@ -1,151 +0,0 @@
-// BUTTON STYLES
-// -------------
-
-
-// Colors
-// ------
-
-.btn {
-  // Set text color
-  &.primary,
-  &.primary:hover,
-  &.danger,
-  &.danger:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover {
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    color: @white
-  }
-  &.primary {
-    .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 15));
-  }
-  // Danger and error appear as red
-  &.danger {
-    .buttonBackground(#ee5f5b, #c43c35);
-  }
-  // Success appears as green
-  &.success {
-    .buttonBackground(#62c462, #57a957);
-  }
-  // Info appears as a neutral blue
-  &.info {
-    .buttonBackground(#5bc0de, #339bb9);
-  }
-}
-
-
-// Mixin for generating button backgrounds
-// ---------------------------------------
-.buttonBackground(@startColor, @endColor) {
-  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  .gradientBar(@startColor, @endColor);
-
-  // in these cases the gradient won't cover the background, so we override
-  &:hover, &:active, &.active, &.disabled {
-    background-color: @endColor;
-  }
-
-  // called out separately because IE8 would ignore otherwise
-  &[disabled] {
-    background-color: @endColor;
-  }
-
-  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
-  &:active,
-  &.active {
-    background-color: darken(@endColor, 10%) e("\9");
-  }
-}
-
-
-// Base styles
-// -----------
-
-.btn {
-  // Button Base
-  display: inline-block;
-  padding: 4px 10px 4px;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-  color: @grayDark;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  .border-radius(4px);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-  cursor: pointer;
-
-  &:hover {
-    color: @grayDark;
-    text-decoration: none;
-    background-color: darken(@white, 10%);
-    background-position: 0 -15px;
-
-    // transition is only when going to hover, otherwise the background
-    // behind the gradient (there for IE<=9 fallback) gets mismatched
-    .transition(background-position .1s linear);
-  }
-
-  // Focus state for keyboard and accessibility
-  &:focus {
-    outline: 1px dotted #666;
-  }
-
-  // Active and Disabled states
-  &.active,
-  &:active {
-    background-image: none;
-    @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
-    background-color: darken(@white, 10%);
-    background-color: darken(@white, 15%) e("\9");
-  }
-  &.disabled {
-    cursor: default;
-    background-image: none;
-    background-color: darken(@white, 10%);
-    .opacity(65);
-    .box-shadow(none);
-  }
-  &[disabled] {
-    // disabled pseudo can't be included with .disabled
-    // def because IE8 and below will drop it ;_;
-    cursor: default;
-    background-image: none;
-    background-color: darken(@white, 10%);
-    .opacity(65);
-    .box-shadow(none);
-  }
-
-  // Button Sizes
-  &.large {
-    padding: 9px 14px 9px;
-    font-size: @baseFontSize + 2px;
-    line-height: normal;
-    .border-radius(5px);
-  }
-  &.large .icon {
-    margin-top: 1px;
-  }
-  &.small {
-    padding: 5px 9px 5px;
-    font-size: @baseFontSize - 2px;
-    line-height: @baseLineHeight - 2px;
-  }
-  &.small .icon {
-    margin-top: -2px;
-  }
-}
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-button.btn,
-input[type=submit].btn {
-  &::-moz-focus-inner {
-  	padding: 0;
-  	border: 0;
-  }
-}
diff --git a/lib/carousel.less b/lib/carousel.less
deleted file mode 100644
index 254a9f60c..000000000
--- a/lib/carousel.less
+++ /dev/null
@@ -1,114 +0,0 @@
-// CAROUSEL
-// --------
-
-.carousel {
-  position: relative;
-  line-height: 1;
-}
-
-.carousel-inner {
-  overflow: hidden;
-  width: 100%;
-  position: relative;
-}
-
-.carousel {
-
-  .item {
-    display: none;
-    position: relative;
-    .transition(.6s ease-in-out left);
-  }
-
-  // Account for jankitude on images
-  .item > img {
-    display: block;
-    line-height: 1;
-  }
-
-  .active, 
-  .next, 
-  .prev { display: block; }
-
-  .active {
-    left: 0;
-  }
-
-  .next, 
-  .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  .next {
-    left: 100%;
-  }
-  .prev {
-    left: -100%;
-  }
-  .next.left, 
-  .prev.right {
-    left: 0;
-  }
-
-  .active.left {
-    left: -100%;
-  }
-  .active.right {
-    left: 100%;
-  }
-
-}
-
-// Left/right controls for nav
-// ---------------------------
-
-.carousel-control {
-  position: absolute;
-  top: 40%;
-  left: 15px;
-  width: 40px;
-  height: 40px;
-  margin-top: -20px;
-  font-size: 60px;
-  font-weight: 100;
-  line-height: 30px;
-  color: @white;
-  text-align: center;
-  background: @grayDarker;
-  border: 3px solid @white;
-  .border-radius(23px);
-  .opacity(50);
-  .transition(all .2s linear);
-
-  // Reposition the right one
-  &.right {
-    left: auto;
-    right: 15px;
-  }
-
-  // Hover state
-  &:hover {
-    color: @white;
-    text-decoration: none;
-    .opacity(90);
-  }
-}
-
-// Caption for text below images
-// -----------------------------
-
-.carousel-caption {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 10px 15px 5px;
-  background: @grayDark;
-  background: rgba(0,0,0,.75);
-}
-.carousel-caption h4,
-.carousel-caption p {
-  color: @white;
-}
diff --git a/lib/close.less b/lib/close.less
deleted file mode 100644
index a0e5edba1..000000000
--- a/lib/close.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// CLOSE ICONS
-// -----------
-
-.close {
-  float: right;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: @baseLineHeight;
-  color: @black;
-  text-shadow: 0 1px 0 rgba(255,255,255,1);
-  .opacity(20);
-  &:hover {
-    color: @black;
-    text-decoration: none;
-    .opacity(40);
-    cursor: pointer;
-  }
-}
diff --git a/lib/code.less b/lib/code.less
deleted file mode 100644
index 0cc3db857..000000000
--- a/lib/code.less
+++ /dev/null
@@ -1,44 +0,0 @@
-// Code.less
-// Code typography styles for the  and 
     elements
-// --------------------------------------------------------
-
-// Inline and block code styles
-code,
-pre {
-  padding: 0 3px 2px;
-  #font > #family > .monospace;
-  font-size: @baseFontSize - 1;
-  color: @grayDark;
-  .border-radius(3px);
-}
-code {
-  padding: 3px 4px;
-  color: #d14;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-}
-pre {
-  display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
-  font-size: 12px;
-  line-height: @baseLineHeight;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc; // fallback for IE7-8
-  border: 1px solid rgba(0,0,0,.15);
-  .border-radius(4px);
-  white-space: pre;
-  white-space: pre-wrap;
-  word-break: break-all;
-
-  // Make prettyprint styles more spaced out for readability
-  &.prettyprint {
-    margin-bottom: @baseLineHeight;
-  }
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    background-color: transparent;
-  }
-}
diff --git a/lib/component-animations.less b/lib/component-animations.less
deleted file mode 100644
index 4f2a4fd11..000000000
--- a/lib/component-animations.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// COMPONENT ANIMATIONS
-// --------------------
-
-.fade {
-  .transition(opacity .15s linear);
-  opacity: 0;
-  &.in {
-    opacity: 1;
-  }
-}
-
-.collapse {
-  .transition(height .35s ease);
-  position:relative;
-  overflow:hidden;
-  height: 0;
-  &.in { height: auto; }
-}
diff --git a/lib/dropdowns.less b/lib/dropdowns.less
deleted file mode 100644
index 06114b254..000000000
--- a/lib/dropdowns.less
+++ /dev/null
@@ -1,110 +0,0 @@
-// DROPDOWN MENUS
-// --------------
-
-// Use the .menu class on any 
  •  element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-.dropdown {
-  position: relative;
-}
-// Dropdown arrow/caret
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
-  vertical-align: top;
-  border-left:  4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top:   4px solid @black;
-  .opacity(30);
-  content: "\2193";
-}
-.dropdown .caret {
-  margin-top: 8px;
-  margin-left: 2px;
-  *margin-top: 7px;
-}
-.dropdown:hover .caret,
-.open.dropdown .caret {
-  .opacity(100);
-}
-// The dropdown menu (ul)
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  z-index: @zindexDropdown;
-  float: left;
-  display: none; // none by default, but block on "open" of the menu
-  min-width: 160px;
-  max-width: 220px;
-  _width: 160px;
-  padding: 4px 0;
-  margin: 0; // override default ul
-  list-style: none;
-  background-color: @white;
-  border-color: #ccc;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 1px;
-  .border-radius(0 0 5px 5px);
-  .box-shadow(0 5px 10px rgba(0,0,0,.2));
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
-  zoom: 1; // do we need this?
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
-
-  // Allow for dropdowns to go bottom up (aka, dropup-menu)
-  &.bottom-up {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: 2px;
-  }
-
-  // Dividers (basically an hr) within the dropdown
-  .divider {
-    height: 1px;
-    margin: 5px 1px;
-    overflow: hidden;
-    background-color: #e5e5e5;
-    border-bottom: 1px solid @white;
-  }
-
-  // Links within the dropdown menu
-  a {
-    display: block;
-    padding: 3px 15px;
-    clear: both;
-    font-weight: normal;
-    line-height: 18px;
-    color: @gray;
-    white-space: nowrap;
-  }
-}
-
-// Hover state
-.dropdown-menu li > a:hover,
-.dropdown-menu .active > a,
-.dropdown-menu .active > a:hover {
-  color: @white;
-  text-decoration: none;
-  background-color: @linkColor;
-}
-
-// Open state for the dropdown
-.dropdown.open {
-  .dropdown-toggle {
-    color: @white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
-  .dropdown-menu {
-    display: block;
-  }
-}
-
-// Typeahead
-.typeahead {
-  margin-top: 2px; // give it some space to breathe
-  .border-radius(4px);
-}
diff --git a/lib/forms.less b/lib/forms.less
deleted file mode 100644
index 9e2e1dc1b..000000000
--- a/lib/forms.less
+++ /dev/null
@@ -1,514 +0,0 @@
-// Forms.less
-// Base styles for various input types, form layouts, and states
-// -------------------------------------------------------------
-
-
-// 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 * 1.5;
-  font-size: @baseFontSize * 1.5;
-  line-height: @baseLineHeight * 2;
-  color: @grayDark;
-  border: 0;
-  border-bottom: 1px solid #eee;
-}
-
-// Set font for forms
-label,
-input,
-button,
-select,
-textarea {
-  #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
-}
-
-// Identify controls by their labels
-label {
-  display: block;
-  margin-bottom: 5px;
-  color: @grayDark;
-}
-
-// Inputs, Textareas, Selects
-input,
-textarea,
-select,
-.uneditable-input {
-  display: inline-block;
-  width: 210px;
-  height: @baseLineHeight;
-  padding: 4px;
-  margin-bottom: 9px;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-  color: @gray;
-  border: 1px solid #ccc;
-  .border-radius(3px);
-}
-.uneditable-textarea {
-  width: auto;
-  height: auto;
-}
-
-// Inputs within a label
-label input,
-label textarea,
-label select {
-  display: block;
-}
-
-// Mini reset for unique input types
-input[type=image],
-input[type=checkbox],
-input[type=radio] {
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 3px 0;
-  *margin-top: 0; /* IE7 */
-  line-height: normal;
-  border: none;
-  cursor: pointer;
-  .border-radius(0);
-}
-
-// Reset the file input to browser defaults
-input[type=file] {
-  padding: initial;
-  line-height: initial;
-  border: initial;
-  background-color: @white;
-  background-color: initial;
-  .box-shadow(none);
-}
-
-// Help out input buttons
-input[type=button],
-input[type=reset],
-input[type=submit] {
-  width: auto;
-  height: auto;
-}
-
-// Set the height of select and file controls to match text inputs
-select,
-input[type=file] {
-  height: 28px; /* 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: 28px;
-}
-
-// Chrome on Linux and Mobile Safari need background-color
-select {
-  width: 220px; // default input width + 10px of padding that doesn't get applied
-  background-color: @white;
-}
-
-// Make multiple select elements height not fixed
-select[multiple],
-select[size] {
-  height: auto;
-}
-
-// Remove shadow from image inputs
-input[type=image] {
-  .box-shadow(none);
-}
-
-// Make textarea height behave
-textarea {
-  height: auto;
-}
-
-// Hidden inputs
-input[type=hidden] {
-  display: none;
-}
-
-
-
-// CHECKBOXES & RADIOS
-// -------------------
-
-// Indent the labels to position radios/checkboxes as hanging
-.radio,
-.checkbox {
-  padding-left: 18px;
-}
-.radio input[type=radio],
-.checkbox input[type=checkbox] {
-  float: left;
-  margin-left: -18px;
-}
-
-// 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
-.radio.inline,
-.checkbox.inline {
-  display: inline-block;
-  margin-bottom: 0;
-}
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
-  margin-left: 10px; // space out consecutive inline controls
-}
-
-
-
-// FOCUS STATE
-// -----------
-
-input,
-textarea {
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @transition: border linear .2s, box-shadow linear .2s;
-  .transition(@transition);
-}
-input:focus,
-textarea:focus {
-  border-color: rgba(82,168,236,.8);
-  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-  .box-shadow(@shadow);
-  outline: 0;
-}
-input[type=file]:focus,
-input[type=checkbox]:focus,
-select:focus {
-  .box-shadow(none); // override for file inputs
-  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
-}
-
-
-
-// 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 {
-  float: none;
-  margin-left: 0;
-}
-
-// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
-.inputColumns(@columnSpan: 1) {
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
-}
-input,
-textarea,
-.uneditable-input {
-  // Default columns
-  &.span1     { .inputColumns(1); }
-  &.span2     { .inputColumns(2); }
-  &.span3     { .inputColumns(3); }
-  &.span4     { .inputColumns(4); }
-  &.span5     { .inputColumns(5); }
-  &.span6     { .inputColumns(6); }
-  &.span7     { .inputColumns(7); }
-  &.span8     { .inputColumns(8); }
-  &.span9     { .inputColumns(9); }
-  &.span10    { .inputColumns(10); }
-  &.span11    { .inputColumns(11); }
-  &.span12    { .inputColumns(12); }
-}
-
-.selectColumns(@columnSpan: 1) {
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
-}
-select {
-  &.span1     { .selectColumns(1); }
-  &.span2     { .selectColumns(2); }
-  &.span3     { .selectColumns(3); }
-  &.span4     { .selectColumns(4); }
-  &.span5     { .selectColumns(5); }
-  &.span6     { .selectColumns(6); }
-  &.span7     { .selectColumns(7); }
-  &.span8     { .selectColumns(8); }
-  &.span9     { .selectColumns(9); }
-  &.span10    { .selectColumns(10); }
-  &.span11    { .selectColumns(11); }
-  &.span12    { .selectColumns(12); }
-}
-
-
-
-// DISABLED STATE
-// --------------
-
-// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-  background-color: #f5f5f5;
-  border-color: #ddd;
-  cursor: not-allowed;
-}
-
-
-
-
-// FORM FIELD FEEDBACK STATES
-// --------------------------
-
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label,
-  .help-block,
-  .help-inline {
-    color: @textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: @textColor;
-    border-color: @borderColor;
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      .box-shadow(0 0 6px lighten(@borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: @textColor;
-    background-color: @backgroundColor;
-    border-color: @textColor;
-  }
-}
-// Warning
-.control-group.warning {
-  .formFieldState(@warningText, @warningText, @warningBackground);
-}
-// Error
-.control-group.error {
-  .formFieldState(@errorText, @errorText, @errorBackground);
-}
-// Success
-.control-group.success {
-  .formFieldState(@successText, @successText, @successBackground);
-}
-
-// HTML5 invalid states
-// Shares styles with the .control-group.error above
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));    
-  }
-}
-
-
-
-// FORM ACTIONS
-// ------------
-
-.form-actions {
-  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
-  margin-top: @baseLineHeight;
-  margin-bottom: @baseLineHeight;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-}
-
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
-  display: block;
-  background-color: @white;
-  border-color: #eee;
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
-}
-
-// Placeholder text gets special styles; can't be bundled together though for some reason
-.placeholder(@grayLight);
-
-
-
-// HELP TEXT
-// ---------
-
-.help-block {
-  margin-top: 5px;
-  margin-bottom: 0;
-  color: @grayLight;
-}
-
-.help-inline {
-  display: inline-block;
-  margin-bottom: 9px;
-  vertical-align: middle;
-  padding-left: 5px;
-}
-
-
-
-// INPUT GROUPS
-// ------------
-
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
-.input-append {
-  margin-bottom: 5px;
-  .clearfix(); // Clear the float to prevent wrapping
-  input,
-  .uneditable-input {
-    .border-radius(0 3px 3px 0);
-  }
-  .uneditable-input {
-    border-left-color: #ccc;
-  }
-  .add-on {
-    float: left;
-    display: block;
-    width: auto;
-    min-width: 16px;
-    height: @baseLineHeight;
-    margin-right: -1px;
-    padding: 4px 4px 4px 5px;
-    font-weight: normal;
-    line-height: @baseLineHeight;
-    color: @grayLight;
-    text-align: center;
-    text-shadow: 0 1px 0 @white;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    .border-radius(3px 0 0 3px);
-  }
-  .active {
-    background-color: lighten(@green, 30);
-    border-color: @green;
-  }
-}
-.input-prepend {
-  .add-on {
-    *margin-top: 1px; /* IE6-7 */
-  }
-}
-.input-append {
-  input,
-  .uneditable-input {
-    float: left;
-    .border-radius(3px 0 0 3px);
-  }
-  .uneditable-input {
-    border-right-color: #ccc;    
-  }
-  .add-on {
-    margin-right: 0;
-    margin-left: -1px;
-    .border-radius(0 3px 3px 0);
-  }
-}
-
-
-
-// SEARCH FORM
-// -----------
-
-.search-query {
-  padding-left: 14px;
-  padding-right: 14px;
-  margin-bottom: 0; // remove the default margin on all inputs
-  .border-radius(14px);
-}
-
-
-
-// HORIZONTAL & VERTICAL FORMS
-// ---------------------------
-
-// Common properties
-// -----------------
-
-.form-search,
-.form-inline,
-.form-horizontal {
-  input,
-  textarea,
-  select,
-  .help-inline,
-  .uneditable-input {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-}
-.form-search label,
-.form-inline label {
-  display: inline-block;
-}
-
-// Margin to space out fieldsets
-.control-group {
-  margin-bottom: @baseLineHeight / 2;
-}
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
-  // Legend collapses margin, so we're relegated to padding
-  legend + .control-group {
-    margin-top: @baseLineHeight;
-    -webkit-margin-top-collapse: separate;
-  }
-  // Increase spacing between groups
-  .control-group {
-    margin-bottom: @baseLineHeight;
-  }
-  // Float the labels left
-  .control-group > label {
-    float: left;
-    width: 140px;
-    padding-top: 5px;
-    text-align: right;
-  }
-  // Move over all input controls and content
-  .controls {
-    margin-left: 160px;
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-actions {
-    padding-left: 160px;
-  }
-}
diff --git a/lib/grid.less b/lib/grid.less
deleted file mode 100644
index d5b5f487d..000000000
--- a/lib/grid.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// GRID SYSTEM
-// -----------
-// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
-.row {
-  margin-left: @gridGutterWidth * -1;
-  .clearfix();
-}
-
-// Find all .span# classes within .row and give them the necessary properties for grid columns 
-// (supported by all browsers back to IE7)
-// Credit to @dhg for the idea
-[class*="span"] {
-  .gridColumn();
-}
-
-// Default columns
-.span1     { .columns(1); }
-.span2     { .columns(2); }
-.span3     { .columns(3); }
-.span4     { .columns(4); }
-.span5     { .columns(5); }
-.span6     { .columns(6); }
-.span7     { .columns(7); }
-.span8     { .columns(8); }
-.span9     { .columns(9); }
-.span10    { .columns(10); }
-.span11    { .columns(11); }
-.span12    { .columns(12); }
-
-// Offset column options
-.offset1   { .offset(1); }
-.offset2   { .offset(2); }
-.offset3   { .offset(3); }
-.offset4   { .offset(4); }
-.offset5   { .offset(5); }
-.offset6   { .offset(6); }
-.offset7   { .offset(7); }
-.offset8   { .offset(8); }
-.offset9   { .offset(9); }
-.offset10  { .offset(10); }
-.offset11  { .offset(11); }
diff --git a/lib/hero-unit.less b/lib/hero-unit.less
deleted file mode 100644
index cba1cc46c..000000000
--- a/lib/hero-unit.less
+++ /dev/null
@@ -1,20 +0,0 @@
-// HERO UNIT
-// ---------
-
-.hero-unit {
-  padding: 60px;
-  margin-bottom: 30px;
-  background-color: #f5f5f5;
-  .border-radius(6px);
-  h1 {
-    margin-bottom: 0;
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-  p {
-    font-size: 18px;
-    font-weight: 200;
-    line-height: @baseLineHeight * 1.5;
-  }
-}
diff --git a/lib/labels.less b/lib/labels.less
deleted file mode 100644
index 06dc7f3c0..000000000
--- a/lib/labels.less
+++ /dev/null
@@ -1,16 +0,0 @@
-// LABELS
-// ------
-
-.label {
-  padding: 1px 3px 2px;
-  font-size: @baseFontSize * .75;
-  font-weight: bold;
-  color: @white;
-  text-transform: uppercase;
-  background-color: @grayLight;
-  .border-radius(3px);
-  &.important { background-color: @errorText; }
-  &.warning   { background-color: @orange; }
-  &.success   { background-color: @successText; }
-  &.info      { background-color: @infoText; }
-}
diff --git a/lib/layouts.less b/lib/layouts.less
deleted file mode 100644
index 14435c9d1..000000000
--- a/lib/layouts.less
+++ /dev/null
@@ -1,43 +0,0 @@
-//
-// Layouts
-// Fixed-width and fluid (with sidebar) layouts
-// --------------------------------------------
-
-
-// Container (centered, fixed-width layouts)
-.container {
-  .container-fixed();
-}
-
-// Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.fluid-container {
-  position: relative;
-  min-width: @siteWidth;
-  padding-left: @gridGutterWidth;
-  padding-right: @gridGutterWidth;
-  .clearfix();
-}
-
-// Sidebars (left and right options)
-.fluid-sidebar {
-  width: @fluidSidebarWidth;
-  margin: 0 20px 18px;
-}
-.sidebar-left   { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
-.sidebar-right  { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
-
-// Float the sidebars accordingly
-.sidebar-left .fluid-sidebar {
-  float: left;
-  margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-.sidebar-right .fluid-sidebar {
-  float: right;
-  margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-
-// The main content area
-.fluid-content {
-  float: left;
-  width: 100%;
-}
diff --git a/lib/mixins.less b/lib/mixins.less
deleted file mode 100644
index dd331ebf2..000000000
--- a/lib/mixins.less
+++ /dev/null
@@ -1,360 +0,0 @@
-// Mixins.less
-// Snippets of reusable CSS to develop faster and keep code readable
-// -----------------------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// -------------------------
-// For clearing floats like a boss h5bp.com/q
-.clearfix() {
-  *zoom: 1;
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-  }
-  &:after {
-    clear: both;
-  }
-}
-
-// Center-align a block level element
-// -------------------------
-.center-block() {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-// IE7 inline-block
-// -------------------------
-.ie7-inline-block() {
-  *display: inline; /* IE7 inline-block hack */
-  *zoom: 1;
-}
-
-// Sizing shortcuts
-// -------------------------
-.size(@height: 5px, @width: 5px) {
-  width: @width;
-  height: @height;
-}
-.square(@size: 5px) {
-  .size(@size, @size);
-}
-
-// Placeholder text
-// -------------------------
-.placeholder(@color: @placeholderText) {
-  :-moz-placeholder {
-    color: @color;
-  }
-  ::-webkit-input-placeholder {
-    color: @color;
-  }
-}
-
-
-
-// FONTS
-// --------------------------------------------------
-
-#font {
-  #family {
-    .serif() {
-      font-family: Georgia, "Times New Roman", Times, serif;
-    }
-    .sans-serif() {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-    .monospace() {
-      font-family: Menlo, Monaco, "Courier New", monospace;
-    }
-  }
-  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
-    #font > #family > .serif;
-    #font > .shorthand(@size, @weight, @lineHeight);
-  }
-  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
-    #font > #family > .sans-serif;
-    #font > .shorthand(@size, @weight, @lineHeight);
-  }
-  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
-    #font > #family > .monospace;
-    #font > .shorthand(@size, @weight, @lineHeight);
-  }
-}
-
-
-
-// GRID SYSTEM
-// --------------------------------------------------
-
-// Site container
-// -------------------------
-.container-fixed() {
-  width: @siteWidth;
-  margin-left: auto;
-  margin-right: auto;
-  .clearfix();
-}
-
-// Columns and offseting
-// -------------------------
-.columns(@columns: 1) {
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-.offset(@columns: 1) {
-  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
-  float: left;
-  margin-left: @gridGutterWidth;
-}
-// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
-.makeColumn(@columnSpan: 1) {
-  .gridColumn();
-  .columns(@columnSpan);
-}
-
-
-
-// CSS3 PROPERTIES
-// --------------------------------------------------
-
-// Border Radius
-.border-radius(@radius: 5px) {
-  -webkit-border-radius: @radius;
-     -moz-border-radius: @radius;
-          border-radius: @radius;
-}
-
-// Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-  -webkit-box-shadow: @shadow;
-     -moz-box-shadow: @shadow;
-          box-shadow: @shadow;
-}
-
-// Transitions
-.transition(@transition) {
-  -webkit-transition: @transition;
-     -moz-transition: @transition;
-      -ms-transition: @transition;
-       -o-transition: @transition;
-          transition: @transition;
-}
-
-// Transformations
-.rotate(@degrees) {
-  -webkit-transform: rotate(@degrees);
-     -moz-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
-       -o-transform: rotate(@degrees);
-          transform: rotate(@degrees);
-}
-.scale(@ratio) {
-  -webkit-transform: scale(@ratio);
-     -moz-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
-       -o-transform: scale(@ratio);
-          transform: scale(@ratio);
-}
-.translate(@x: 0, @y: 0) {
-  -webkit-transform: translate(@x, @y);
-     -moz-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
-       -o-transform: translate(@x, @y);
-          transform: translate(@x, @y);
-}
-
-// Background clipping
-// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-.background-clip(@clip) {
-  -webkit-background-clip: @clip;
-     -moz-background-clip: @clip;
-          background-clip: @clip;
-}
-
-// Background sizing
-.background-size(@size){
-  -webkit-background-size: @size;
-     -moz-background-size: @size;
-       -o-background-size: @size;
-          background-size: @size;
-}
-
-
-// Box sizing
-.box-sizing(@boxmodel) {
-  -webkit-box-sizing: @boxmodel;
-     -moz-box-sizing: @boxmodel;
-          box-sizing: @boxmodel;
-}
-
-// User select
-// For selecting text on the page
-.user-select(@select) {
-  -webkit-user-select: @select;
-     -moz-user-select: @select;
-       -o-user-select: @select;
-          user-select: @select;
-}
-
-// Resize anything
-.resizable(@direction: both) {
-  resize: @direction; // Options: horizontal, vertical, both
-  overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
-  -webkit-column-count: @columnCount;
-     -moz-column-count: @columnCount;
-          column-count: @columnCount;
-  -webkit-column-gap: @columnGap;
-     -moz-column-gap: @columnGap;
-          column-gap: @columnGap;
-}
-
-// Opacity
-.opacity(@opacity: 100) {
-  opacity: @opacity / 100;
-   filter: e(%("alpha(opacity=%d)", @opacity));
-}
-
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-#translucent {
-  .background(@color: @white, @alpha: 1) {
-    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-  }
-  .border(@color: @white, @alpha: 1) {
-    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-    .background-clip(padding-box);
-  }
-}
-
-// Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor) {
-  #gradient > .vertical(@primaryColor, @secondaryColor);
-  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
-  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-}
-
-// Gradients
-#gradient {
-  .horizontal(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
-    background-repeat: repeat-x;
-  }
-  .vertical(@startColor: #555, @endColor: #333) {
-    background-color: mix(@startColor, @endColor, 60%);
-    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(top, @startColor, @endColor); // The standard
-    background-repeat: repeat-x;
-  }
-  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
-    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
-  }
-  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
-    background-color: mix(@midColor, @endColor, 80%);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
-    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
-    background-repeat: no-repeat;
-  }
-  .radial(@innerColor: #555, @outerColor: #333)  {
-    background-color: @outsideColor;
-    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor));
-    background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor);
-    background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor);
-    background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor);
-    background-repeat: no-repeat;
-    // Opera cannot do radial gradients yet
-  }
-  .striped(@color, @angle: -45deg) {
-    background-color: @color;
-    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
-    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-    background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
-  }
-}
-
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// POPOVER ARROWS
-// -------------------------
-// For tipsies and popovers
-#popoverArrow {
-  .top(@arrowWidth: 5px) {
-    bottom: 0;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-top: @arrowWidth solid @black;
-  }
-  .left(@arrowWidth: 5px) {
-    top: 50%;
-    right: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid @black;
-  }
-  .bottom(@arrowWidth: 5px) {
-    top: 0;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid @black;
-  }
-  .right(@arrowWidth: 5px) {
-    top: 50%;
-    left: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid @black;
-  }
-}
diff --git a/lib/modals.less b/lib/modals.less
deleted file mode 100644
index 0368e01e1..000000000
--- a/lib/modals.less
+++ /dev/null
@@ -1,65 +0,0 @@
-// MODALS
-// ------
-
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @zindexModalBackdrop;
-  background-color: @black;
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  .opacity(80);
-}
-
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: @zindexModal;
-  max-height: 500px;
-  overflow: auto;
-  width: 560px;
-  margin: -250px 0 0 -280px;
-  background-color: @white;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.3);
-  *border: 1px solid #999; /* IE6-7 */
-  .border-radius(6px);
-  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  .background-clip(padding-box);
-  &.fade {
-    .transition(e('opacity .3s linear, top .3s ease-out'));
-    top: -25%;
-  }
-  &.fade.in { top: 50%; }
-}
-.modal-header {
-  padding: 5px 15px;
-  border-bottom: 1px solid #eee;
-  // Close icon
-  .close { margin-top: 2px; }
-}
-.modal-body {
-  padding: 15px;
-}
-.modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  .border-radius(0 0 6px 6px);
-  .box-shadow(inset 0 1px 0 @white);
-  .clearfix();
-  .btn {
-    float: right;
-    margin-left: 5px;
-    margin-bottom: 0; // account for input[type=submit] which gets the bottom margin like all other inputs
-  }
-}
diff --git a/lib/navbar.less b/lib/navbar.less
deleted file mode 100644
index dba95e5cd..000000000
--- a/lib/navbar.less
+++ /dev/null
@@ -1,251 +0,0 @@
-// NAVBAR (FIXED AND STATIC)
-// -------------------------
-
-
-// COMMON STYLES
-// -------------
-
-.navbar {
-  overflow: visible;
-}
-// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
-.navbar-inner {
-  background-color: @navbarBackground;
-  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
-}
-
-// Text and links
-.navbar {
-  // Hover and active states
-  .brand:hover {
-    color: @white;
-    text-decoration: none;
-  }
-  // Website or project name
-  .brand {
-    float: left;
-    display: block;
-    padding: 8px 20px 12px;
-    margin-left: -20px; // negative indent to left-align the text down the page
-    font-size: 20px;
-    font-weight: 200;
-    line-height: 1;
-    color: @white;
-  }
-  // Plain text in topbar
-  p {
-    margin: 0;
-    line-height: 40px;
-    a:hover {
-      color: @white;
-      background-color: transparent;
-    }
-  }
-  // Buttons in navbar
-  .btn,
-  .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
-  }
-  .btn-group .btn {
-    margin-top: 0;
-  }
-}
-
-// Navbar forms
-.navbar-form {
-  margin-bottom: 0; // remove default bottom margin
-  input,
-  select {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-}
-
-// Navbar search
-.navbar-search {
-  position: relative;
-  float: left;
-  margin-top: 6px;
-  margin-bottom: 0;
-  .search-query {
-    padding: 4px 9px;
-    #font > .sans-serif(13px, normal, 1);
-    color: @white;
-    color: rgba(255,255,255,.75);
-    background: #444;
-    background: rgba(255,255,255,.3);
-    border: 1px solid #111;
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
-    .box-shadow(@shadow);
-    .transition(none);
-
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    .placeholder(@grayLighter);
-
-    // Hover states
-    &:hover {
-      color: @white;
-      background-color: @grayLight;
-      background-color: rgba(255,255,255,.5);
-    }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
-    &:focus,
-    &.focused {
-      padding: 5px 10px;
-      color: @grayDark;
-      text-shadow: 0 1px 0 @white;
-      background-color: @white;
-      border: 0;
-      .box-shadow(0 0 3px rgba(0,0,0,.15));
-      outline: 0;
-    }
-  }
-}
-
-
-// Static navbar
-.navbar-static {
-  margin-bottom: @baseLineHeight;
-}
-.navbar-static .navbar-inner {
-  padding-left:  20px;
-  padding-right: 20px;
-  .border-radius(4px);
-}
-
-// Fixed navbar
-.navbar-fixed {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: @zindexFixedNavbar;
-}
-
-
-
-// NAVIGATION
-// ----------
-
-.navbar .nav {
-  position: relative;
-  left: 0;
-  display: block;
-  float: left;
-  margin: 0 10px 0 0;
-}
-.navbar .nav.pull-right {
-  float: right; // redeclare due to specificity
-}
-.navbar .nav > li {
-  display: block;
-  float: left;
-}
-
-// Links
-.navbar .nav > li > a {
-  float: none;
-  padding: 10px 10px 11px;
-  line-height: 19px;
-  color: @grayLight;
-  text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-}
-// Hover
-.navbar .nav > li > a:hover {
-  background-color: transparent;
-  color: @white;
-  text-decoration: none;
-}
-
-// Active nav items
-.navbar .nav .active > a {
-  color: @white;
-  text-decoration: none;
-  background-color: @grayDarker;
-  background-color: rgba(0,0,0,.5);
-}
-
-// Dividers (basically a vertical hr)
-.navbar .vertical-divider {
-  height: 40px;
-  width: 1px;
-  margin: 0 5px;
-  overflow: hidden;
-  background-color: @grayDarker;
-  border-right: 1px solid #444;
-}
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right {
-  margin-left: 10px;
-  margin-right: 0;
-}
-
-
-
-// Dropdown menus
-// --------------
-
-// Menu position and menu carets
-.navbar .dropdown-menu {
-  margin-top: 1px;
-  .border-radius(4px);
-  &:before {
-    content: '';
-    display: inline-block;
-    border-left:   7px solid transparent;
-    border-right:  7px solid transparent;
-    border-bottom: 7px solid #ccc;
-    border-bottom-color: rgba(0,0,0,.2);
-    position: absolute;
-    top: -7px;
-    left: 9px;
-  }
-  &:after {
-    content: '';
-    display: inline-block;
-    border-left:   6px solid transparent;
-    border-right:  6px solid transparent;
-    border-bottom: 6px solid @white;
-    position: absolute;
-    top: -6px;
-    left: 10px;
-  }
-}
-
-// Dropdown toggle caret
-.navbar .nav .dropdown-toggle .caret,
-.navbar .nav .open.dropdown .caret {
-  border-top-color: @white;
-}
-.navbar .nav .active .caret {
-  .opacity(100);
-}
-
-// Remove background color from open dropdown
-.navbar .nav .open > .dropdown-toggle,
-.navbar .nav .active > .dropdown-toggle,
-.navbar .nav .open.active > .dropdown-toggle {
-  background-color: transparent;
-}
-
-// Dropdown link on hover
-.navbar .nav .active > .dropdown-toggle:hover {
-  color: @white;
-}
-
-// Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
-  right: 0;
-  &:before {
-    left: auto;
-    right: 12px;
-  }
-  &:after {
-    left: auto;
-    right: 13px;
-  }
-}
diff --git a/lib/navs.less b/lib/navs.less
deleted file mode 100644
index cd356d9bb..000000000
--- a/lib/navs.less
+++ /dev/null
@@ -1,338 +0,0 @@
-// NAVIGATIONS
-// -----------
-
-
-
-// BASE CLASS
-// ----------
-
-.nav {
-  margin-left: 0;
-  margin-bottom: @baseLineHeight;
-  list-style: none;
-}
-
-// Make links block level
-.nav > li > a {
-  display: block;
-}
-.nav > li > a:hover {
-  text-decoration: none;
-  background-color: @grayLighter;
-}
-
-
-
-// NAV LIST
-// --------
-
-.nav.list {
-  padding-left: 14px;
-  padding-right: 14px;
-  margin-bottom: 0;
-}
-.nav.list > li > a,
-.nav.list .nav-header {
-  display: block;
-  padding: 3px 15px;
-  margin-left:  -15px;
-  margin-right: -15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.nav.list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-.nav.list > li + .nav-header {
-  margin-top: 9px;
-}
-.nav.list .active > a {
-  color: @white;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
-  background-color: @linkColor;
-}
-
-
-
-// TABS AND PILLS
-// -------------
-
-// Common styles
-.tabs,
-.pills {
-  .clearfix();
-}
-.tabs > li,
-.pills > li {
-  float: left;
-}
-.tabs > li > a,
-.pills > li > a {
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-right: 2px;
-  line-height: 14px; // keeps the overall height an even number
-}
-
-// TABS
-// ----
-
-// Give the tabs something to sit on
-.tabs {
-  border-bottom: 1px solid #ddd;
-}
-
-// Make the list-items overlay the bottom border
-.tabs > li {
-  margin-bottom: -1px;
-}
-
-// Actual tabs (as links)
-.tabs > li > a {
-  padding-top: 9px;
-  padding-bottom: 9px;
-  border: 1px solid transparent;
-  .border-radius(4px 4px 0 0);
-  &:hover {
-    border-color: @grayLighter @grayLighter #ddd;
-  }
-}
-// Active state, and it's :hover to override normal :hover
-.tabs > .active > a,
-.tabs > .active > a:hover {
-  color: @gray;
-  background-color: @white;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-
-// PILLS
-// -----
-
-// Links rendered as pills
-.pills > li > a {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  .border-radius(5px);
-}
-
-// Active state
-.pills .active > a,
-.pills .active > a:hover {
-  color: @white;
-  background-color: @linkColor;
-}
-
-
-
-// STACKED NAV
-// -----------
-
-// Stacked tabs and pills
-.nav.stacked > li {
-  float: none;
-}
-.nav.stacked > li > a {
-  margin-right: 0; // no need for the gap between nav items
-}
-
-// Tabs
-.tabs.stacked {
-  border-bottom: 0;
-}
-.tabs.stacked > li > a {
-  border: 1px solid #ddd;
-  .border-radius(0);
-}
-.tabs.stacked > li:first-child > a {
-  .border-radius(4px 4px 0 0);
-}
-.tabs.stacked > li:last-child > a {
-  .border-radius(0 0 4px 4px);
-}
-.tabs.stacked > li > a:hover {
-  border-color: #ddd;
-  z-index: 2;
-}
-
-// Pills
-.pills.stacked > li > a {
-  margin-bottom: 3px;
-}
-.pills.stacked > li:last-child > a {
-  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
-}
-
-
-
-// DROPDOWNS
-// ---------
-
-// Position the menu
-.pills .dropdown-menu,
-.tabs .dropdown-menu {
-  margin-top: 1px;
-  border-width: 1px;
-}
-.pills .dropdown-menu {
-  .border-radius(4px);
-}
-
-// Default dropdown links
-// -------------------------
-// Make carets use linkColor to start
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
-  border-top-color: @linkColor;
-  margin-top: 6px;
-}
-.tabs .dropdown-toggle:hover .caret,
-.pills .dropdown-toggle:hover .caret {
-  border-top-color: @linkColorHover;
-}
-
-// Active dropdown links
-// -------------------------
-.tabs .active .dropdown-toggle .caret,
-.pills .active .dropdown-toggle .caret {
-  border-top-color: @grayDark;
-}
-
-// Active:hover dropdown links
-// -------------------------
-.nav > .dropdown.active > a:hover {
-  color: @black;
-  cursor: pointer;
-}
-
-// Open dropdowns
-// -------------------------
-.tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle,
-.nav > .open.active > a:hover {
-  color: @white;
-  background-color: @grayLight;
-  border-color: @grayLight;
-}
-.nav .open .caret,
-.nav .open.active .caret,
-.nav .open a:hover .caret {
-  border-top-color: @white;
-  .opacity(100);
-}
-
-// Dropdowns in stacked tabs
-.tabs.stacked .open > a:hover {
-  border-color: @grayLight;
-}
-
-
-
-// TABBABLE
-// --------
-
-
-// COMMON STYLES
-// -------------
-
-// Clear any floats
-.tabbable {
-  .clearfix();
-}
-
-// Remove border on bottom, left, right
-.tabs-below .tabs,
-.tabs-right .tabs,
-.tabs-left .tabs {
-  border-bottom: 0;
-}
-
-// Show/hide tabbable areas
-.tab-content > .tab-pane,
-.pill-content > .pill-pane {
-  display: none;
-}
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
-}
-
-
-// BOTTOM
-// ------
-
-.tabs-below .tabs {
-  border-top: 1px solid #ddd;
-}
-.tabs-below .tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-.tabs-below .tabs > li > a {
-  .border-radius(0 0 4px 4px);
-  &:hover {
-    border-bottom-color: transparent;
-    border-top-color: #ddd;
-  }
-}
-.tabs-below .tabs .active > a,
-.tabs-below .tabs .active > a:hover {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-// LEFT & RIGHT
-// ------------
-
-// Common styles
-.tabs-left .tabs > li,
-.tabs-right .tabs > li {
-  float: none;
-}
-.tabs-left .tabs > li > a,
-.tabs-right .tabs > li > a {
-  min-width: 74px;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-// Tabs on the left
-.tabs-left .tabs {
-  float: left;
-  margin-right: 19px;
-  border-right: 1px solid #ddd;
-}
-.tabs-left .tabs > li > a {
-  margin-right: -1px;
-  .border-radius(4px 0 0 4px);
-}
-.tabs-left .tabs > li > a:hover {
-  border-color: @grayLighter #ddd @grayLighter @grayLighter;
-}
-.tabs-left .tabs .active > a,
-.tabs-left .tabs .active > a:hover {
-  border-color: #ddd transparent #ddd #ddd;
-}
-
-// Tabs on the right
-.tabs-right .tabs {
-  float: right;
-  margin-left: 19px;
-  border-left: 1px solid #ddd;
-}
-.tabs-right .tabs > li > a {
-  margin-left: -1px;
-  .border-radius(0 4px 4px 0);
-}
-.tabs-right .tabs > li > a:hover {
-  border-color: @grayLighter @grayLighter @grayLighter #ddd;
-}
-.tabs-right .tabs .active > a,
-.tabs-right .tabs .active > a:hover {
-  border-color: #ddd #ddd #ddd transparent;
-}
diff --git a/lib/pager.less b/lib/pager.less
deleted file mode 100644
index de009afda..000000000
--- a/lib/pager.less
+++ /dev/null
@@ -1,25 +0,0 @@
-// PAGER
-// -----
-
-.pager {
-  margin-left: 0;
-  margin-bottom: @baseLineHeight;
-  list-style: none;
-  text-align: center;
-  .clearfix();
-}
-.pager li {
-  display: inline;
-}
-.pager a {
-  display: inline-block;
-  padding: 6px 15px;
-  background-color: #f5f5f5;
-  .border-radius(15px);
-}
-.pager .next a {
-  float: right;
-}
-.pager .previous a {
-  float: left;
-}
diff --git a/lib/pagination.less b/lib/pagination.less
deleted file mode 100644
index 8ecb2a401..000000000
--- a/lib/pagination.less
+++ /dev/null
@@ -1,54 +0,0 @@
-// PAGINATION
-// ----------
-
-.pagination {
-  height: @baseLineHeight * 2;
-  margin: @baseLineHeight 0;
- }
-.pagination ul {
-  display: inline-block;
-  .ie7-inline-block();
-  margin-left: 0;
-  margin-bottom: 0;
-  .border-radius(3px);
-  .box-shadow(0 1px 2px rgba(0,0,0,.05));
-}
-.pagination li {
-    display: inline;
-  }
-.pagination a {
-  float: left;
-  padding: 0 14px;
-  line-height: (@baseLineHeight * 2) - 2;
-  text-decoration: none;
-  border: 1px solid #ddd;
-  border-left-width: 0;
-}
-.pagination a:hover,
-.pagination .active a {
-  background-color: #f5f5f5;
-}
-.pagination .active a {
-  color: @grayLight;
-}
-.pagination .disabled a,
-.pagination .disabled a:hover {
-  color: @grayLight;
-  background-color: transparent;
-  cursor: default;
-}
-.pagination li:first-child a {
-  border-left-width: 1px;
-  .border-radius(3px 0 0 3px);
-}
-.pagination li:last-child a {
-  .border-radius(0 3px 3px 0);
-}
-
-// Centered
-.pagination-centered {
-  text-align: center;
-}
-.pagination-right {
-  text-align: right;
-}
diff --git a/lib/patterns.less b/lib/patterns.less
deleted file mode 100644
index d94b921e4..000000000
--- a/lib/patterns.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// Patterns.less
-// Repeatable UI elements outside the base styles provided from the scaffolding
-// ----------------------------------------------------------------------------
-
-
-// PAGE HEADERS
-// ------------
-
-footer {
-  padding-top: @baseLineHeight - 1;
-  margin-top: @baseLineHeight - 1;
-  border-top: 1px solid #eee;
-}
diff --git a/lib/popovers.less b/lib/popovers.less
deleted file mode 100644
index 6de314d86..000000000
--- a/lib/popovers.less
+++ /dev/null
@@ -1,49 +0,0 @@
-// POPOVERS
-// --------
-
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: @zindexPopover;
-  display: none;
-  padding: 5px;
-  &.top    { margin-top:  -5px; }
-  &.right  { margin-left:  5px; }
-  &.bottom { margin-top:   5px; }
-  &.left   { margin-left: -5px; }
-  &.top .arrow    { #popoverArrow > .top(); }
-  &.right .arrow  { #popoverArrow > .right(); }
-  &.bottom .arrow { #popoverArrow > .bottom(); }
-  &.left .arrow   { #popoverArrow > .left();  }
-  .arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-  .inner {
-    padding: 3px;
-    width: 280px;
-    overflow: hidden;
-    background: @black; // has to be full background declaration for IE fallback
-    background: rgba(0,0,0,.8);
-    .border-radius(6px);
-    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  }
-  .title {
-    padding: 9px 15px;
-    line-height: 1;
-    background-color: #f5f5f5;
-    border-bottom:1px solid #eee;
-    .border-radius(3px 3px 0 0);
-  }
-  .content {
-    padding: 14px;
-    background-color: @white;
-    .border-radius(0 0 3px 3px);
-    .background-clip(padding-box);
-    p, ul, ol {
-      margin-bottom: 0;
-    }
-  }
-}
\ No newline at end of file
diff --git a/lib/print.less b/lib/print.less
deleted file mode 100644
index 4fd45e282..000000000
--- a/lib/print.less
+++ /dev/null
@@ -1,18 +0,0 @@
-/*!
- * Bootstrap @VERSION for Print
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: @DATE
- */
-
-
-// HIDE UNECESSARY COMPONENTS
-// --------------------------
-
-.navbar-fixed {
-  display: none;
-}
\ No newline at end of file
diff --git a/lib/progress-bars.less b/lib/progress-bars.less
deleted file mode 100644
index ff754b817..000000000
--- a/lib/progress-bars.less
+++ /dev/null
@@ -1,99 +0,0 @@
-// PROGRESS BARS
-// -------------
-
-
-// ANIMATIONS
-// ----------
-
-// Webkit
-@-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
-}
-
-// Temporarily commented out since LESS won't compile with this
-// @-moz-keyframes progress-bar-stripes {
-//   from  { background-position: 0 0; }
-//   to    { background-position: 40px 0; }
-// }
-
-// Spec
-@keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
-}
-
-
-
-// THE BARS
-// --------
-
-// Common styles
-.progress,
-.progress .bar {
-  .border-radius(4px);
-}
-
-// Outer container
-.progress {
-  height: 18px;
-  margin-bottom: 18px;
-  #gradient > .vertical(#f5f5f5, #f9f9f9);
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
-}
-
-// Bar of progress
-.progress .bar {
-  width: 0%;
-  height: 18px;
-  color: @white;
-  font-size: 12px;
-  text-align: center;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  #gradient > .vertical(#149bdf, #0480be);
-  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
-  .box-sizing(border-box);
-  .transition(width .6s ease);
-}
-
-// Striped bars
-.progress.striped .bar {
-  #gradient > .striped(#62c462);
-  .background-size(40px 40px);
-}
-
-// Call animation for the active one
-.progress.active .bar {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-     -moz-animation: progress-bar-stripes 2s linear infinite;
-          animation: progress-bar-stripes 2s linear infinite;
-}
-
-
-
-// COLORS
-// ------
-
-// Danger (red)
-.progress.danger .bar {
-  #gradient > .vertical(#ee5f5b, #c43c35);
-}
-.progress.danger.striped .bar {
-  #gradient > .striped(#ee5f5b);
-}
-
-// Success (green)
-.progress.success .bar {
-  #gradient > .vertical(#62c462, #57a957);
-}
-.progress.success.striped .bar {
-  #gradient > .striped(#62c462);
-}
-
-// Info (teal)
-.progress.info .bar {
-  #gradient > .vertical(#5bc0de, #339bb9);
-}
-.progress.info.striped .bar {
-  #gradient > .striped(#5bc0de);
-}
diff --git a/lib/reset.less b/lib/reset.less
deleted file mode 100644
index ef4dc8af6..000000000
--- a/lib/reset.less
+++ /dev/null
@@ -1,126 +0,0 @@
-// Reset.less
-// Adapted from Normalize.css http://github.com/necolas/normalize.css
-// ------------------------------------------------------------------------
-
-// Display in IE6-9 and FF3
-// -------------------------
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section {
-  display: block;
-}
-
-// Display block in IE6-9 and FF3
-// -------------------------
-
-audio,
-canvas,
-video {
-  display: inline-block;
-  *display: inline;
-  *zoom: 1;
-}
-
-// Prevents modern browsers from displaying 'audio' without controls
-// -------------------------
-
-audio:not([controls]) {
-    display: none;
-}
-
-// Base settings
-// -------------------------
-
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-}
-// Focus states
-a:focus {
-  outline: thin dotted;
-}
-// Hover & Active
-a:hover,
-a:active {
-  outline: 0;
-}
-
-// Prevents sub and sup affecting line-height in all browsers
-// -------------------------
-
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-
-// Img border in a's and image quality
-// -------------------------
-
-img {
-  max-width: 100%;
-  height: auto;
-  border: 0;
-  -ms-interpolation-mode: bicubic;
-}
-
-// Forms
-// -------------------------
-
-// Font size in all browsers, margin changes, misc consistency
-button,
-input,
-select,
-textarea {
-  margin: 0;
-  font-size: 100%;
-  vertical-align: middle;
-}
-button,
-input {
-  *overflow: visible; // Inner spacing ie IE6/7
-  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
-  padding: 0;
-  border: 0;
-}
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  cursor: pointer; // Cursors on all buttons applied consistently
-  -webkit-appearance: button; // Style clicable inputs in iOS
-}
-input[type="search"] { // Appearance in Safari/Chrome
-  -webkit-appearance: textfield;
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
-}
-textarea {
-  overflow: auto; // Remove vertical scrollbar in IE6-9
-  vertical-align: top; // Readability and alignment cross-browser
-}
diff --git a/lib/responsive.less b/lib/responsive.less
deleted file mode 100644
index 2999eef4d..000000000
--- a/lib/responsive.less
+++ /dev/null
@@ -1,268 +0,0 @@
-// Responsive.less
-// For phone and tablet devices
-// -------------------------------------------------------------
-
-
-// REPEAT VARIABLES & MIXINS
-// -------------------------
-// Required since we compile the responsive stuff separately
-
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
-@import "mixins.less";
-
-
-// RESPONSIVE CLASSES
-// ------------------
-
-// Hide from screenreaders and browsers
-// Credit: HTML5BP
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
-  // Make the nav work for small devices
-  .navbar {
-    .nav {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 180px;
-      padding-top: 40px;
-      list-style: none;
-    }
-    .nav,
-    .nav > li:last-child a {
-      .border-radius(0 0 4px 0);
-    }
-    .nav > li {
-      float: none;
-      display: none;
-    }
-    .nav > li > a {
-      float: none;
-      background-color: #222;
-    }
-    .nav > .active {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .nav > .active > a {
-      background-color: transparent;
-    }
-    .nav > .active > a:hover {
-      background-color: #333;
-    }
-    .nav > .active > a:after {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-top: 8px;
-      margin-left: 6px;
-      text-indent: -99999px;
-      vertical-align: top;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid @white;
-      .opacity(100);
-      content: "↓";
-    }
-    .nav:hover > li {
-      display: block;
-    }
-    .nav:hover > li > a:hover {
-      background-color: #333;
-    }
-  }
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 0;
-  }
-
-  // Modals
-  .modal {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    right: 20px;
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-  .modal-header .close {
-    padding: 10px;
-  }
-
-}
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-@media (max-width: 768px) {
-  
-  // Unfix the navbar
-  .navbar-fixed {
-    position: absolute;
-  }
-  .navbar-fixed .nav {
-    float: none;
-  }
-
-  // Remove width from containers
-  .container {
-    width: auto;
-    padding: 0 20px;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  .row > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
-
-}
-
-
-// PORTRAIT TABLET TO DEFAULT DESKTOP
-// ----------------------------------
-
-@media (min-width: 768px) and (max-width: 940px) {
-
-  // Reset grid variables
-  @gridColumns:       16;
-  @gridColumnWidth:   44px;
-  @gridGutterWidth:   20px;
-  @siteWidth:         748px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-
-  // 16cols at 30px wide with 16px gutters
-  .container {
-    width: @siteWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
-}
-
-// LARGE DESKTOP & UP
-// ------------------
-/*
-@media (min-width: 1210px) {
-
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-
-  .container {
-    width: @siteWidth;
-  }
-  .row {
-    margin-left: @gridGutterWidth * -1;
-  }
-  [class*="span"] {
-    margin-left: @gridGutterWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
-}
-*/
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
deleted file mode 100644
index 3c1826830..000000000
--- a/lib/scaffolding.less
+++ /dev/null
@@ -1,29 +0,0 @@
-// Scaffolding
-// Basic and global styles for generating a grid system, structural layout, and page templates
-// -------------------------------------------------------------------------------------------
-
-
-// STRUCTURAL LAYOUT
-// -----------------
-
-body {
-  margin: 0;
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-  color: @gray;
-  background-color: @white;
-}
-
-
-// LINKS
-// -----
-
-a {
-  color: @linkColor;
-  text-decoration: none;
-  &:hover {
-    color: @linkColorHover;
-    text-decoration: underline;
-  }
-}
diff --git a/lib/sprites.less b/lib/sprites.less
deleted file mode 100644
index ef9295288..000000000
--- a/lib/sprites.less
+++ /dev/null
@@ -1,121 +0,0 @@
-// SPRITES
-// Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
-
-
-// ICONS
-// -----
-
-// As of v2.0.0, the  tag is reserved for icons from the Glyphicons set.
-// All icons receive the styles of the  tag and are then given a unique
-// class to add width, height, and background-position. Your resulting HTML
-// will look like .
-
-.icon {
-  background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
-  background-position: 0 0;
-  background-repeat: no-repeat;
-  display: inline-block;
-  vertical-align: text-top;
-  width: 14px;
-  height: 14px;
-}
-.icon.white {
-  background-image: url(docs/assets/img/glyphicons-halflings-sprite-white.png);
-}
-
-.icon.glass              { background-position: 0      0; }
-.icon.music              { background-position: -24px  0; }
-.icon.search             { background-position: -48px  0; }
-.icon.envelope           { background-position: -72px  0; }
-.icon.heart              { background-position: -96px  0; }
-.icon.star               { background-position: -120px 0; }
-.icon.star-empty         { background-position: -144px 0; }
-.icon.user               { background-position: -168px 0; }
-.icon.film               { background-position: -192px 0; }
-.icon.th-large           { background-position: -216px 0; }
-.icon.th                 { background-position: -240px 0; }
-.icon.th-list            { background-position: -264px 0; }
-.icon.ok                 { background-position: -288px 0; }
-.icon.remove             { background-position: -312px 0; }
-.icon.zoom-in            { background-position: -336px 0; }
-.icon.zoom-out           { background-position: -360px 0; }
-.icon.off                { background-position: -384px 0; }
-.icon.signal             { background-position: -408px 0; }
-.icon.cog                { background-position: -432px 0; }
-.icon.trash              { background-position: -456px 0; }
-
-.icon.home               { background-position: 0      -24px; }
-.icon.file               { background-position: -24px  -24px; }
-.icon.time               { background-position: -48px  -24px; }
-.icon.road               { background-position: -72px  -24px; }
-.icon.download-alt       { background-position: -96px  -24px; }
-.icon.download           { background-position: -120px -24px; }
-.icon.upload             { background-position: -144px -24px; }
-.icon.inbox              { background-position: -168px -24px; }
-.icon.play-circle        { background-position: -192px -24px; }
-.icon.repeat             { background-position: -216px -24px; }
-.icon.refresh            { background-position: -240px -24px; }
-.icon.calendar           { background-position: -264px -24px; }
-.icon.lock               { background-position: -288px -24px; }
-.icon.flag               { background-position: -312px -24px; }
-.icon.headphones         { background-position: -336px -24px; }
-.icon.volume-off         { background-position: -360px -24px; }
-.icon.volume-down        { background-position: -384px -24px; }
-.icon.volume-up          { background-position: -408px -24px; }
-.icon.qrcode             { background-position: -432px -24px; }
-.icon.barcode            { background-position: -456px -24px; }
-
-.icon.tag                { background-position: 0      -48px; }
-.icon.tags               { background-position: -24px  -48px; }
-.icon.book               { background-position: -48px  -48px; }
-.icon.bookmark           { background-position: -72px  -48px; }
-.icon.print              { background-position: -96px  -48px; }
-.icon.camera             { background-position: -120px -48px; }
-.icon.font               { background-position: -144px -48px; }
-.icon.bold               { background-position: -168px -48px; }
-.icon.italic             { background-position: -192px -48px; }
-.icon.text-height        { background-position: -216px -48px; }
-.icon.text-width         { background-position: -240px -48px; }
-.icon.align-left         { background-position: -264px -48px; }
-.icon.align-center       { background-position: -288px -48px; }
-.icon.align-right        { background-position: -312px -48px; }
-.icon.align-justify      { background-position: -336px -48px; }
-.icon.list               { background-position: -360px -48px; }
-.icon.indent-left        { background-position: -384px -48px; }
-.icon.indent-right       { background-position: -408px -48px; }
-.icon.facetime-video     { background-position: -432px -48px; }
-.icon.picture            { background-position: -456px -48px; }
-
-.icon.pencil             { background-position: 0      -72px; }
-.icon.map-marker         { background-position: -24px  -72px; }
-.icon.adjust             { background-position: -48px  -72px; }
-.icon.tint               { background-position: -72px  -72px; }
-.icon.edit               { background-position: -96px  -72px; }
-.icon.share              { background-position: -120px -72px; }
-.icon.check              { background-position: -144px -72px; }
-.icon.move               { background-position: -168px -72px; }
-.icon.step-backward      { background-position: -192px -72px; }
-.icon.fast-backward      { background-position: -216px -72px; }
-.icon.backward           { background-position: -240px -72px; }
-.icon.play               { background-position: -264px -72px; }
-.icon.pause              { background-position: -288px -72px; }
-.icon.stop               { background-position: -312px -72px; }
-.icon.forward            { background-position: -336px -72px; }
-.icon.fast-forward       { background-position: -360px -72px; }
-.icon.step-forward       { background-position: -384px -72px; }
-.icon.eject              { background-position: -408px -72px; }
-.icon.chevron-left       { background-position: -432px -72px; }
-.icon.chevron-right      { background-position: -456px -72px; }
-
-.icon.arrow-left         { background-position: -240px -96px; }
-.icon.arrow-right        { background-position: -264px -96px; }
-.icon.arrow-up           { background-position: -288px -96px; }
-.icon.arrow-down         { background-position: -312px -96px; }
-.icon.share-alt          { background-position: -336px -96px; }
-.icon.resize-full        { background-position: -360px -96px; }
-.icon.resize-small       { background-position: -384px -96px; }
-.icon.plus               { background-position: -408px -96px; }
-.icon.minus              { background-position: -432px -96px; }
-.icon.asterisk           { background-position: -456px -96px; }
-
diff --git a/lib/tables.less b/lib/tables.less
deleted file mode 100644
index 809c2f60e..000000000
--- a/lib/tables.less
+++ /dev/null
@@ -1,138 +0,0 @@
-//
-// Tables.less
-// Tables for, you guessed it, tabular data
-// ----------------------------------------
-
-
-// BASE TABLES
-// -----------------
-
-table {
-  max-width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-// BASELINE STYLES
-// ---------------
-
-.table {
-  width: 100%;
-  margin-bottom: @baseLineHeight;
-  // Cells
-  th,
-  td {
-    padding: 8px;
-    line-height: @baseLineHeight;
-    text-align: left;
-    border-top: 1px solid #ddd;
-  }
-  th {
-    font-weight: bold;
-    vertical-align: bottom;
-  }
-  td {
-    vertical-align: top;
-  }
-  // Remove top border from thead by default
-  thead:first-child tr th,
-  thead:first-child tr td {
-    border-top: 0;
-  }
-  // Account for multiple tbody instances
-  tbody + tbody {
-    border-top: 2px solid #ddd;
-  }
-}
-
-
-
-// CONDENSED TABLE W/ HALF PADDING
-// -------------------------------
-
-.table-condensed {
-  th,
-  td {
-    padding: 4px 5px;
-  }
-}
-
-
-// BORDERED VERSION
-// ----------------
-
-.table-bordered {
-  border: 1px solid #ddd;
-  border-collapse: separate; // Done so we can round those corners!
-  .border-radius(4px);
-  th + th,
-  td + td,
-  th + td,
-  td + th {
-    border-left: 1px solid #ddd;
-  }
-  // Prevent a double border
-  thead:first-child tr:first-child th,
-  tbody:first-child tr:first-child th,
-  tbody:first-child tr:first-child td {
-    border-top: 0;
-  }
-  // For first th or td in the first row in the first thead or tbody
-  thead:first-child tr:first-child th:first-child,
-  tbody:first-child tr:first-child td:first-child {
-    .border-radius(4px 0 0 0);
-  }
-  thead:first-child tr:first-child th:last-child,
-  tbody:first-child tr:first-child td:last-child {
-    .border-radius(0 4px 0 0);
-  }
-  // For first th or td in the first row in the first thead or tbody
-  thead:last-child tr:last-child th:first-child,
-  tbody:last-child tr:last-child td:first-child {
-    .border-radius(0 0 0 4px);
-  }
-  thead:last-child tr:last-child th:last-child,
-  tbody:last-child tr:last-child td:last-child {
-    .border-radius(0 0 4px 0);
-  }
-}
-
-
-// ZEBRA-STRIPING
-// --------------
-
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped {
-  tbody {
-    tr:nth-child(odd) td,
-    tr:nth-child(odd) th {
-      background-color: #f9f9f9;
-    }
-  }
-}
-
-
-
-// TABLE CELL SIZING
-// -----------------
-
-// Change the columns
-.tableColumns(@columnSpan: 1) {
-  float: none;
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
-  margin-left: 0;
-}
-table {
-  .span1     { .tableColumns(1); }
-  .span2     { .tableColumns(2); }
-  .span3     { .tableColumns(3); }
-  .span4     { .tableColumns(4); }
-  .span5     { .tableColumns(5); }
-  .span6     { .tableColumns(6); }
-  .span7     { .tableColumns(7); }
-  .span8     { .tableColumns(8); }
-  .span9     { .tableColumns(9); }
-  .span10    { .tableColumns(10); }
-  .span11    { .tableColumns(11); }
-  .span12    { .tableColumns(12); }
-}
diff --git a/lib/thumbnails.less b/lib/thumbnails.less
deleted file mode 100644
index 0ba749059..000000000
--- a/lib/thumbnails.less
+++ /dev/null
@@ -1,33 +0,0 @@
-// THUMBNAILS
-// ----------
-
-.thumbnails {
-  margin-left: -20px;
-  list-style: none;
-  .clearfix();
-}
-.thumbnails > li {
-  float: left;
-  margin: 0 0 @baseLineHeight 20px;
-}
-.thumbnail {
-  display: block;
-  padding: 4px;
-  line-height: 1;
-  border: 1px solid #ddd;
-  .border-radius(4px);
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
-}
-// Add a hover state for linked versions only
-a.thumbnail:hover {
-  border-color: @linkColor;
-  .box-shadow(0 1px 4px rgba(0,105,214,.25));
-}
-// Images and captions
-.thumbnail > img {
-  display: block;
-  max-width: 100%;
-}
-.thumbnail .caption {
-  padding: 9px;
-}
diff --git a/lib/tooltip.less b/lib/tooltip.less
deleted file mode 100644
index 5111a193f..000000000
--- a/lib/tooltip.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// TOOLTIP
-// ------=
-
-.tooltip {
-  position: absolute;
-  z-index: @zindexTooltip;
-  display: block;
-  visibility: visible;
-  padding: 5px;
-  font-size: 11px;
-  .opacity(0);
-  &.in     { .opacity(80); }
-  &.top    { margin-top:  -2px; }
-  &.right  { margin-left:  2px; }
-  &.bottom { margin-top:   2px; }
-  &.left   { margin-left: -2px; }
-  &.top .tooltip-arrow    { #popoverArrow > .top(); }
-  &.left .tooltip-arrow   { #popoverArrow > .left(); }
-  &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
-  &.right .tooltip-arrow  { #popoverArrow > .right(); }
-}
-.tooltip-inner {
-  max-width: 200px;
-  padding: 3px 8px;
-  color: @white;
-  text-align: center;
-  text-decoration: none;
-  background-color: @black;
-  .border-radius(4px);
-}
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
diff --git a/lib/type.less b/lib/type.less
deleted file mode 100644
index 087224fd0..000000000
--- a/lib/type.less
+++ /dev/null
@@ -1,206 +0,0 @@
-// Typography.less
-// Headings, body text, lists, code, and more for a versatile and durable typography system
-// ----------------------------------------------------------------------------------------
-
-
-// BODY TEXT
-// ---------
-
-p {
-  margin: 0 0 @baseLineHeight / 2;
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-  small {
-    font-size: @baseFontSize - 2;
-    color: @grayLight;
-  }
-}
-.lead {
-  margin-bottom: @baseLineHeight;
-  font-size: 20px;
-  font-weight: 200;
-  line-height: @baseLineHeight * 1.5;
-}
-
-// HEADINGS
-// --------
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  font-weight: bold;
-  color: @grayDark;
-  text-rendering: optimizelegibility; // Fix the character spacing for headings
-  small {
-    font-weight: normal;
-    color: @grayLight;
-  }
-}
-h1 {
-  font-size: 30px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h3 {
-  line-height: @baseLineHeight * 1.5;
-  font-size: 18px;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: @baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-
-
-// LISTS
-// -----
-
-// Unordered and Ordered lists
-ul, ol {
-  padding: 0;
-  margin: 0 0 @baseLineHeight / 2 25px;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin-bottom: 0;
-}
-ul {
-  list-style: disc;
-}
-ol {
-  list-style: decimal;
-}
-li {
-  line-height: @baseLineHeight;
-}
-ul.unstyled {
-  margin-left: 0;
-  list-style: none;
-}
-
-// Description Lists
-dl {
-  margin-bottom: @baseLineHeight;
-}
-dt,
-dd {
-  line-height: @baseLineHeight;
-}
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-left: @baseLineHeight / 2;
-}
-
-// MISC
-// ----
-
-// Horizontal rules
-hr {
-  margin: @baseLineHeight 0;
-  border: 0;
-  border-top: 1px solid #e5e5e5;
-  border-bottom: 1px solid @white;
-}
-
-// Emphasis
-strong {
-  font-weight: bold;
-}
-em {
-  font-style: italic;
-}
-.muted {
-  color: @grayLight;
-}
-
-// Abbreviations and acronyms
-abbr {
-  font-size: 90%;
-  text-transform: uppercase;
-  border-bottom: 1px dotted #ddd;
-  cursor: help;
-}
-
-// Blockquotes
-blockquote {
-  padding: 0 0 0 15px;
-  margin: 0 0 @baseLineHeight;
-  border-left: 5px solid @grayLighter;
-  p {
-    margin-bottom: 0;
-    #font > .shorthand(16px,300,@baseLineHeight * 1.25);
-  }
-  small {
-    display: block;
-    line-height: @baseLineHeight;
-    color: @grayLight;
-    &:before {
-      content: '\2014 \00A0';
-    }
-  }
-
-  // Float right with text-align: right
-  &.pull-right {
-    float: right;
-    padding-left: 0;
-    padding-right: 15px;
-    border-left: 0;
-    border-right: 5px solid @grayLighter;
-    p,
-    small {
-      text-align: right;
-    }
-  }
-}
-
-// Quotes
-q:before,
-q:after,
-blockquote:before, 
-blockquote:after {
-  content: "";
-}
-
-// Addresses
-address {
-  display: block;
-  margin-bottom: @baseLineHeight;
-  line-height: @baseLineHeight;
-  font-style: normal;
-}
-
-// Misc
-small {
-  font-size: 100%;
-}
-cite {
-  font-style: normal;
-}
diff --git a/lib/utilities.less b/lib/utilities.less
deleted file mode 100644
index d60d22031..000000000
--- a/lib/utilities.less
+++ /dev/null
@@ -1,23 +0,0 @@
-// UTILITY CLASSES
-// ---------------
-
-// Quick floats
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
-
-// Toggling content
-.hide {
-  display: none;
-}
-.show {
-  display: block;
-}
-
-// Visibility
-.invisible {
-  visibility: hidden;
-}
diff --git a/lib/variables.less b/lib/variables.less
deleted file mode 100644
index 5ed896cc0..000000000
--- a/lib/variables.less
+++ /dev/null
@@ -1,90 +0,0 @@
-// Variables.less
-// Variables to customize the look and feel of Bootstrap
-// -----------------------------------------------------
-
-
-
-// GLOBAL VALUES
-// --------------------------------------------------
-
-// Links
-@linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
-
-// Grays
-@black:                 #000;
-@grayDarker:            #222;
-@grayDark:              #333;
-@gray:                  #555;
-@grayLight:             #999;
-@grayLighter:           #eee;
-@white:                 #fff;
-
-// Accent colors
-@blue:                  #049cdb;
-@blueDark:              #0064cd;
-@green:                 #46a546;
-@red:                   #9d261d;
-@yellow:                #ffc40d;
-@orange:                #f89406;
-@pink:                  #c3325f;
-@purple:                #7a43b6;
-
-// Grid system
-// Modify the grid styles in mixins.less
-@gridColumns:           12;
-@gridColumnWidth:       60px;
-@gridGutterWidth:       20px;
-@siteWidth:             (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Fluid width sidebar
-@fluidSidebarWidth:     220px;
-
-// Typography
-@baseFontSize:          13px;
-@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
-@baseLineHeight:        18px;
-
-// Buttons
-@primaryButtonBackground:    @linkColor;
-
-
-
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-// Z-index master list
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-@zindexDropdown:        1000;
-@zindexPopover:         1010;
-@zindexTooltip:         1020;
-@zindexFixedNavbar:     1030;
-@zindexModalBackdrop:   1040;
-@zindexModal:           1050;
-
-// Input placeholder text color
-@placeholderText:       @grayLight;
-
-// Navbar
-@navbarHeight:                    40px;
-@navbarBackground:                @grayDarker;
-@navbarBackgroundHighlight:       @grayDark;
-
-// Form states and alerts
-@warningText:             #c09853;
-@warningBackground:       #fcf8e3;
-@warningBorder:           #f3edd2;
-
-@errorText:               #b94a48;
-@errorBackground:         #f2dede;
-@errorBorder:             #e9c7c7;
-
-@successText:             #468847;
-@successBackground:       #dff0d8;
-@successBorder:           #cfe8c4;
-
-@infoText:                #3a87ad;
-@infoBackground:          #d9edf7;
-@infoBorder:              #bfe1f2;
-
-
diff --git a/lib/wells.less b/lib/wells.less
deleted file mode 100644
index 244b8ca10..000000000
--- a/lib/wells.less
+++ /dev/null
@@ -1,17 +0,0 @@
-// WELLS
-// -----
-
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #eee;
-  border: 1px solid rgba(0,0,0,.05);
-  .border-radius(4px);
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-  blockquote {
-    border-color: #ddd;
-    border-color: rgba(0,0,0,.15);
-  }
-}
-- 
cgit v1.2.3