For the quickest and easiest start, just copy this snippet into your webpage.
Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:
.btn
<a>
<button>
<input>
Fancy larger or smaller buttons? Have at it!
<ul class="tabs"> @@ -1073,7 +1098,7 @@ × - Holy gaucamole! Best check yo self, you’re not looking too good. + Holy guacamole! Best check yo self, you’re not looking too good. × @@ -1099,7 +1124,7 @@ × - Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Take this action Or do this diff --git a/examples/hero.html b/examples/hero.html index a0025f2de2..ef773c5d01 100644 --- a/examples/hero.html +++ b/examples/hero.html @@ -12,7 +12,7 @@ - + @@ -27,7 +27,7 @@ Project name - + Home About Contact diff --git a/lib/adaptive.less b/lib/adaptive.less new file mode 100644 index 0000000000..ef3054d3e8 --- /dev/null +++ b/lib/adaptive.less @@ -0,0 +1,57 @@ +/* Responsive.less + * Adjusted grid styles to handle some common screen sizes + * ------------------------------------------------------- */ + + +// MOBILE PORTRAIT & LANDSCAPE +// --------------------------- +// For devices narrower than 480px +@media only screen and (max-width: 480px) { + + // Remove fixed width of containers + .container { + width: auto; + padding: 0 10px; + } + + // Undo the floating of columns + .row { + margin-left: 0; + } + .row [class^="span"] { + float: none; + width: 100%; + display: block; + margin-left: 0; + } + + // Stack form elements instead of floating them + fieldset legend { + margin-left: 0; + } + label { + float: none; + width: auto; + text-align: left; + } + div.input { + margin-left: 0; + width: 100%; + } + .input-xxlarge, + input.xxlarge, + textarea.xxlarge, + select.xxlarge { + width: 80%; + } + + // Adjust modal + .modal-backdrop { + padding: 10px; + } + .modal { + width: 100%; + margin: 0; + left: auto; + } +} \ No newline at end of file diff --git a/lib/bootstrap.less b/lib/bootstrap.less index aa0e24b969..c31bd725da 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v1.1.1 + * Bootstrap v1.2.0 * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 diff --git a/lib/forms.less b/lib/forms.less index 88ae08d8a8..a16844ab1e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -61,29 +61,58 @@ input[type=radio] { } // Inputs, Textareas, Selects -input[type=text], -input[type=password], +input, textarea, select, .uneditable-input { display: inline-block; width: 210px; + height: @baseline; padding: 4px; font-size: 13px; line-height: @baseline; - height: @baseline; color: @gray; border: 1px solid #ccc; .border-radius(3px); } + +/* mini reset for non-html5 file types */ +input[type=checkbox], +input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; /* IE6-7 */ + line-height: normal; + border: none; +} + +input[type=file] { + background-color: #fff; + padding: initial; + border: initial; + line-height: initial; + .box-shadow(none); +} + +input[type=button], +input[type=reset], +input[type=submit] { + width: auto; + height: auto; +} + select, input[type=file] { height: @baseline * 1.5; line-height: @baseline * 1.5; } + textarea { height: auto; } + .uneditable-input { background-color: #eee; display: block; @@ -100,15 +129,13 @@ textarea { } // Focus states -input[type=text], -input[type=password], +input, select, textarea { @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); } -input[type=text]:focus, -input[type=password]:focus, +input:focus, textarea:focus { outline: none; border-color: rgba(82,168,236,.8); @@ -128,8 +155,7 @@ form div.error { span.help-block { color: @red; } - input[type=text], - input[type=password], + input, textarea { border-color: @error-text; .box-shadow(0 0 3px rgba(171,41,32,.25)); @@ -221,7 +247,7 @@ input.disabled { // Inline Fields (input fields that appear as inline objects .inline-inputs { color: @gray; - span, input[type=text] { + span, input { display: inline-block; } input.mini { @@ -238,8 +264,7 @@ input.disabled { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { - input[type=text], - input[type=password] { + input { .border-radius(0 3px 3px 0); } .add-on { @@ -270,8 +295,7 @@ input.disabled { } } .input-append { - input[type=text], - input[type=password] { + input { float: left; .border-radius(3px 0 0 3px); } diff --git a/lib/patterns.less b/lib/patterns.less index 1a3f4a1f06..57e682da84 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -16,14 +16,6 @@ z-index: 10000; overflow: visible; - // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present - .fill { - background:#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); - } - // Links get text shadow a { color: @grayLight; @@ -32,7 +24,7 @@ // Hover and active states a:hover, - ul li.active a { + ul .active a { background-color: #333; background-color: rgba(255,255,255,.05); color: @white; @@ -41,7 +33,7 @@ // Website name h3 { - position:relative; + position: relative; a { float: left; display: block; @@ -60,191 +52,330 @@ margin: 5px 0 0 0; position: relative; .opacity(100); - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - width: 220px; - padding: 4px 9px; - color: #fff; - 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); + } + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: #fff; + 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: #fff; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: none; - background-color: #fff; - color: @grayDark; - text-shadow: 0 1px 0 #fff; - 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: #fff; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: none; + background-color: #fff; + color: @grayDark; + text-shadow: 0 1px 0 #fff; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); } } +} - // Navigation - ul { +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +// For backwards compatability, include .topbar .fill +.topbar-inner, +.topbar .fill { + 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); +} + + +// NAVIGATION +// ---------- + +// 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; + margin: 0 10px 0 0; + position: relative; + left: 0; + > li { display: block; float: left; - margin: 0 10px 0 0; - position: relative; - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - } - li { - display: block; - float: left; - font-size: 13px; - a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - text-decoration: none; - &:hover { - color: #fff; - text-decoration: none; - } - } - &.active a { - background-color: #222; - background-color: rgba(0,0,0,.5); - } + } + a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + text-decoration: none; + &:hover { + color: #fff; + text-decoration: none; } + } + .active a { + background-color: #222; + background-color: rgba(0,0,0,.5); + } - // Dropdowns - &.primary-nav li ul { - left: 0; - } - &.secondary-nav li ul { + // Secondary (floated right) nav in topbar + &.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; + // backwards compatibility + .menu-dropdown, + .dropdown-menu { right: 0; } - li.menu { - position: relative; - a.menu { - &:after { - width: 0px; - height: 0px; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; - margin-top: 8px; - margin-left: 4px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #fff; - .opacity(50); - } - } + } + // 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: #fff; &.open { - a.menu, - a:hover { - background-color: #444; - background-color: rgba(255,255,255,.1); - *background-color: #444; /* IE6-7 */ - color: #fff; - } - ul { - display: block; - li { - a { - background-color: transparent; - font-weight: normal; - &:hover { - background-color: rgba(255,255,255,.1); - *background-color: #444; /* IE6-7 */ - color: #fff; - } - } - &.active a { - background-color: rgba(255,255,255,.1); - font-weight: bold; - } - } - } + background: #444; + background: rgba(255,255,255,.05); } } - li ul { - background-color: #333; - float: left; - display: none; - position: absolute; - top: 40px; - min-width: 160px; - max-width: 220px; - _width: 160px; - margin-left: 0; - margin-right: 0; - padding: 0; - text-align: left; - border: 0; - zoom: 1; - .border-radius(0 0 5px 5px); - .box-shadow(0 1px 2px rgba(0,0,0,0.6)); - li { - float: none; - clear: both; - display: block; - background: none; - font-size: 12px; - a { - display: block; - padding: 6px 15px; - clear: both; - font-weight: normal; - line-height: 19px; - color: #bbb; - &:hover { - background-color: #333; - background-color: rgba(255,255,255,.25); - color: #fff; - } - } - - // Dividers (basically an hr) - &.divider { - height: 1px; - overflow: hidden; - background: #222; - background: rgba(0,0,0,.2); - border-bottom: 1px solid rgba(255,255,255,.1); - margin: 5px 0; - } - - // Section separaters - span { - clear: both; - display: block; - background: rgba(0,0,0,.2); - padding: 6px 15px; - cursor: default; - color: @gray; - border-top: 1px solid rgba(0,0,0,.2); - } + li a { + color: #999; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + &:hover { + #gradient > .vertical(#292929,#191919); + color: #fff; } } + .divider { + background-color: #222; + border-color: #444; + } + } +} + +// For backwards compatability 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; + display: inline-block; + content: "↓"; + text-indent: -99999px; + vertical-align: top; + margin-top: 8px; + margin-left: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #fff; + .opacity(50); +} +// The dropdown menu (ul) +// .menu-dropdown for backwards compatibility +.menu-dropdown, +.dropdown-menu { + background-color: #fff; + float: left; + display: none; // None by default, but block on "open" of the menu + position: absolute; + top: 40px; + min-width: 160px; + max-width: 220px; + _width: 160px; + margin-left: 0; // override default ul styles + margin-right: 0; + padding: 6px 0; + zoom: 1; // do we need this? + 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); + + // 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 #fff; + } +} + +.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 #fff; + // Hover state + &:hover { + #gradient > .vertical(#eeeeee, #dddddd); + color: @grayDark; + text-decoration: none; + @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 +// .open for backwards compatibility +.open, +.dropdown.open { + // .menu for backwards compatibility + .menu, + .dropdown-toggle { + color: #fff; + background: #ccc; + background: rgba(0,0,0,.3); + } + // .menu-dropdown for backwards compatibility + .menu-dropdown, + .dropdown-menu { + display: block; + } +} + + +// Tabs and Pills +.tabs, +.pills { + margin: 0 0 20px; + padding: 0; + list-style: none; + .clearfix(); + > li { + float: left; + > a { + display: block; + } + } +} + +// Basic Tabs +.tabs { + width: 100%; + border-bottom: 1px solid #ddd; + > li { + position: relative; // For the dropdowns mostly + top: 1px; + > a { + margin-right: 2px; + padding: 0 15px; + line-height: (@baseline * 2) - 1; + .border-radius(4px 4px 0 0); + &:hover { + background-color: #eee; + border-bottom: 1px solid #ddd; + text-decoration: none; + } + } + &.active > a { + background-color: #fff; + padding: 0 14px; + border: 1px solid #ddd; + border-bottom: 0; + color: @gray; + } + } + // 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 a.menu:after, + .dropdown.open .dropdown-toggle:after { + border-top-color: #555; + } +} + +// Basic pill nav +.pills { + a { + margin: 5px 3px 5px 0; + padding: 0 15px; + text-shadow: 0 1px 1px #fff; + line-height: 30px; + .border-radius(15px); + &:hover { + background: @linkColorHover; + color: #fff; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + } + } + .active a { + background: @linkColor; + color: #fff; + text-shadow: 0 1px 1px rgba(0,0,0,.25); } } @@ -276,6 +407,7 @@ footer { border-top: 1px solid #eee; } + // PAGE HEADERS // ------------ @@ -288,6 +420,7 @@ footer { } } + // BUTTON STYLES // ------------- @@ -296,7 +429,7 @@ footer { // Button Base cursor: pointer; display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); + #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; @@ -324,23 +457,25 @@ footer { .transition(.1s linear all); // Active and Disabled states + &: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] { // 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); - } - - &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(none); } // Button Sizes @@ -350,12 +485,15 @@ footer { padding: 9px 14px 9px; .border-radius(6px); } - &.small { padding: 7px 9px 7px; font-size: 11px; } - +} +// 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 @@ -368,7 +506,6 @@ input[type=submit].btn { } - // ERROR STYLES // ------------ @@ -418,6 +555,7 @@ input[type=submit].btn { &.block-message { background-image: none; background-color: lighten(#fceec1, 5%); + .reset-filter(); padding: 14px; border-color: #fceec1; .box-shadow(none); @@ -448,74 +586,6 @@ input[type=submit].btn { } } -// NAVIGATION -// ---------- - -// Common tab and pill styles -.tabs, -.pills { - margin: 0 0 20px; - padding: 0; - .clearfix(); - li { - display: inline; - a { - float: left; - width: auto; - } - } -} - -// Basic Tabs -.tabs { - width: 100%; - border-bottom: 1px solid @grayLight; - li { - a { - margin-bottom: -1px; - margin-right: 2px; - padding: 0 15px; - line-height: (@baseline * 2) - 1; - .border-radius(3px 3px 0 0); - &:hover { - background-color: @grayLighter; - border-bottom: 1px solid @grayLight; - } - } - &.active a { - background-color: #fff; - padding: 0 14px; - border: 1px solid #ccc; - border-bottom: 0; - color: @gray; - } - } -} - -// Basic pill nav -.pills { - li { - a { - margin: 5px 3px 5px 0; - padding: 0 15px; - text-shadow: 0 1px 1px #fff; - line-height: 30px; - .border-radius(15px); - &:hover { - background: @linkColorHover; - color: #fff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - } - } - &.active a { - background: @linkColor; - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - } - } -} - // PAGINATION // ---------- @@ -530,31 +600,31 @@ input[type=submit].btn { 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: (@baseline * 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; - } - } + } + li { + display: inline; + } + a { + float: left; + padding: 0 14px; + line-height: (@baseline * 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; } } @@ -608,33 +678,33 @@ input[type=submit].btn { .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); .background-clip(padding-box); - .modal-header { - border-bottom: 1px solid #eee; - padding: 5px 20px; - .close { - position: absolute; - right: 10px; - top: 10px; - color: #999; - line-height:10px; - font-size: 18px; - } +} +.modal-header { + border-bottom: 1px solid #eee; + padding: 5px 20px; + .close { + position: absolute; + right: 10px; + top: 10px; + color: #999; + line-height:10px; + font-size: 18px; } - .modal-body { - padding: 20px; - } - .modal-footer { - background-color: #f5f5f5; - padding: 14px 20px 15px; - border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 #fff); - .clearfix(); - margin-bottom: 0; - .btn { - float: right; - margin-left: 10px; - } +} +.modal-body { + padding: 20px; +} +.modal-footer { + background-color: #f5f5f5; + padding: 14px 20px 15px; + border-top: 1px solid #ddd; + .border-radius(0 0 6px 6px); + .box-shadow(inset 0 1px 0 #fff); + .clearfix(); + margin-bottom: 0; + .btn { + float: right; + margin-left: 10px; } } @@ -692,20 +762,20 @@ input[type=submit].btn { &.left .twipsy-arrow { #popoverArrow > .left(); } &.below .twipsy-arrow { #popoverArrow > .below(); } &.right .twipsy-arrow { #popoverArrow > .right(); } - .twipsy-inner { - padding: 3px 8px; - background-color: #000; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - .border-radius(4px); - } - .twipsy-arrow { - position: absolute; - width: 0; - height: 0; - } +} +.twipsy-inner { + padding: 3px 8px; + background-color: #000; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + .border-radius(4px); +} +.twipsy-arrow { + position: absolute; + width: 0; + height: 0; } @@ -729,9 +799,8 @@ input[type=submit].btn { height: 0; } .inner { - background-color: #333; - background-color: rgba(0,0,0,.8); - *background-color: #333; /* IE 6-7 */ + background: #333; + background: rgba(0,0,0,.8); padding: 3px; overflow: hidden; width: 280px; diff --git a/lib/preboot.less b/lib/preboot.less index df079f550b..48544a988c 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -36,7 +36,7 @@ @gridColumns: 16; @gridColumnWidth: 40px; @gridGutterWidth: 20px; -@extraSpace: 40px; +@extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Color Scheme @@ -231,6 +231,7 @@ 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 + 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; @@ -242,6 +243,7 @@ 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 } .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -257,13 +259,19 @@ 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(@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); + 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 } } +// Reset filters for IE +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} + // Opacity .opacity(@opacity: 100) { filter: e(%("alpha(opacity=%d)", @opacity)); diff --git a/lib/reset.less b/lib/reset.less index e79b77b401..9e2c6befe7 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -133,14 +133,4 @@ input[type="search"]::-webkit-search-decoration { textarea { overflow: auto; // Remove vertical scrollbar in IE6-9 vertical-align: top; // Readability and alignment cross-browser -} - -// Tables -// ------------------------- -// Source: http://github.com/necolas/normalize.css - -// Remove spacing between table cells -table { - border-collapse: collapse; - border-spacing: 0; } \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ab87567a0e..af4f3a8b37 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -9,28 +9,14 @@ .row { .clearfix(); - margin-left: -20px; + margin-left: -1 * @gridGutterWidth; - // Default columns - .span1, - .span2, - .span3, - .span4, - .span5, - .span6, - .span7, - .span8, - .span9, - .span10, - .span11, - .span12, - .span13, - .span14, - .span15, - .span16 { + // 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"] { display: inline; float: left; - margin-left: 20px; + margin-left: @gridGutterWidth; } // Default columns @@ -64,6 +50,12 @@ .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; } } @@ -77,7 +69,6 @@ body { margin: 0; #font > .sans-serif(normal,@basefont,@baseline); color: @gray; - text-rendering: optimizeLegibility; } // Container (centered, fixed-width layouts) @@ -90,11 +81,12 @@ body { .container-fluid { padding: 0 20px; .clearfix(); - .sidebar { + > .sidebar { float: left; width: 220px; } - .content { + // TODO in v2: rename this and .popover .content to be more specific + > .content { min-width: 700px; max-width: 1180px; margin-left: 240px;
Holy gaucamole! Best check yo self, you’re not looking too good.
Holy guacamole! Best check yo self, you’re not looking too good.
Holy gaucamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.