From 4e6275d0fe0880d32633a2c139dad8d3e2745bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Nov 2011 01:28:42 -0800 Subject: [PATCH] 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(-) diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less index 89a7aef13a..2fa9921ac8 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 f590101cd0..845eec185e 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] { + padding: initial; + line-height: initial; + border: initial; background-color: @white; background-color: initial; - padding: initial; - border: initial; - line-height: 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 670b17384b..d77ecf6215 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 672431beb6..53d6cd4089 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 d97a1bab3b..d82a0bbd07 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 bc1229bd90..2fcc4f2b38 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 ed335eeedf..570bc906c4 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 { + padding: 3px; + width: 280px; + overflow: hidden; 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); + 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 983f14f3dc..8bff573352 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 7b8aa369a4..179ef26387 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 b02087fbd2..4aed466b11 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 7e6c0bf39e..3ff08a6766 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 5d168db3e6..4193eda5fb 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 f5b5ff272d..8e25fd9c51 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);