diff --git a/_less/bitcoin.less b/_less/bitcoin.less index d0022dec..4f6b0856 100644 --- a/_less/bitcoin.less +++ b/_less/bitcoin.less @@ -38,6 +38,7 @@ img.icon { box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.1); background-image: url(innerbg.png); padding-top: 2em; + padding-bottom: 1em; } color: #fff; diff --git a/_less/bootstrap.less b/_less/bootstrap.less index 8a7c124e..b1d0d95c 100644 --- a/_less/bootstrap.less +++ b/_less/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v1.1.1 + * Bootstrap @VERSION * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 diff --git a/_less/forms.less b/_less/forms.less index 88ae08d8..ed07cf0a 100644 --- a/_less/forms.less +++ b/_less/forms.less @@ -26,7 +26,7 @@ fieldset { } // Parent element that clears floats and wraps labels and fields together -.clearfix { +form .clearfix { margin-bottom: @baseline; } @@ -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/_less/patterns.less b/_less/patterns.less index d0e4cda1..413f8217 100644 --- a/_less/patterns.less +++ b/_less/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,16 +420,16 @@ footer { } } + // BUTTON STYLES // ------------- - // Base .btn styles .btn { // 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; @@ -325,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 @@ -351,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 @@ -369,7 +506,6 @@ input[type=submit].btn { } - // ERROR STYLES // ------------ @@ -419,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); @@ -450,74 +587,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 // ---------- @@ -532,31 +601,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; } } @@ -602,33 +671,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; } } @@ -686,20 +755,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; } @@ -723,9 +792,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; @@ -748,4 +816,4 @@ input[type=submit].btn { margin-bottom: 0; } } -} +} \ No newline at end of file diff --git a/_less/preboot.less b/_less/preboot.less index 75e75020..a922f569 100644 --- a/_less/preboot.less +++ b/_less/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 @@ -229,6 +229,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; @@ -240,6 +241,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; @@ -255,13 +257,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/_less/reset.less b/_less/reset.less index e79b77b4..9e2c6bef 100644 --- a/_less/reset.less +++ b/_less/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/_less/scaffolding.less b/_less/scaffolding.less index ded9a1e5..c07686ab 100644 --- a/_less/scaffolding.less +++ b/_less/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; @@ -116,89 +108,3 @@ a { text-decoration: underline; } } - -// Buttons -.btn { - display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 4px 14px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; - font-size: 13px; - line-height: @baseline; - 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); - &:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; - } -} -.primary { - #gradient > .vertical(#049CDB, #0064CD); - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border: 1px solid darken(#0064CD, 10%); - border-bottom-color: darken(#0064CD, 15%); - &:hover { - color: #fff; - } -} - -.btn { - //.button(#1174C6); - .transition(.1s linear all); - &.primary { - //#gradient > .vertical(@blue, @blueDark); - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: @blueDark @blueDark darken(@blueDark, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); - &:hover { - color: #fff; - } - } - &.large { - font-size: 16px; - line-height: 28px; - .border-radius(6px); - } - &.small { - padding-right: 9px; - padding-left: 9px; - font-size: 11px; - } - &.disabled { - background-image: none; - .opacity(65); - cursor: default; - .box-shadow(none); - } - - // this can't be included with the .disabled def because IE8 and below will drop it ;_; - &:disabled { - background-image: none; - .opacity(65); - cursor: default; - .box-shadow(none); - &.primary { - color: #fff; - } - } - &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } -} - -// 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; - } -}