From 7d7156bff9818c8d50affffb750b6019a9f20f26 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 23 Aug 2011 20:16:39 -0700 Subject: optimized grid system from @necolas --- lib/preboot.less | 14 ++------------ lib/scaffolding.less | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+), 12 deletions(-) (limited to 'lib') diff --git a/lib/preboot.less b/lib/preboot.less index 370cbcdb8..399d50825 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -36,6 +36,7 @@ @gridColumns: 16; @gridColumnWidth: 40px; @gridGutterWidth: 20px; +@extraSpace: 40px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Color Scheme @@ -125,21 +126,10 @@ .clearfix(); } .columns(@columnSpan: 1) { - float: left; width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); - margin-left: @gridGutterWidth; - &:first-child { - margin-left: 0; - } -} -.offsetMath(@extraSpace: 40px) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace !important; } .offset(@columnOffset: 1) { - .offsetMath(40px); - &:first-child { - .offsetMath(20px); - } + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; } // Border Radius diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b1900f012..a75a47c5f 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -9,6 +9,29 @@ .row { .clearfix(); + margin: 0 -20px; + + // Default columns + .span1, + .span2, + .span3, + .span4, + .span5, + .span6, + .span7, + .span8, + .span9, + .span10, + .span11, + .span12, + .span13, + .span14, + .span15, + .span16 { + float: left; + margin-left: 20px; + *display: inline; // IE6 double margin bug fix. + } // Default columns .span1 { .columns(1); } -- cgit v1.2.3 From 0739583a46833b4813524e69726f79fe1b009542 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 24 Aug 2011 15:55:08 -0700 Subject: optimize btn for outputted code + line-height: normal for firefox with adjusted padding --- lib/preboot.less | 26 +++++---------------- lib/scaffolding.less | 65 +++++++++++++++++++++++++++++----------------------- 2 files changed, 42 insertions(+), 49 deletions(-) (limited to 'lib') diff --git a/lib/preboot.less b/lib/preboot.less index 399d50825..964f677a6 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -171,26 +171,12 @@ } // Buttons -// .button(@color: #fff, @padding: 4px 14px, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @borderColor: rgba(0,0,0,.1), @borderRadius: 4px) { -// display: inline-block; -// #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%)); -// padding: @padding; -// text-shadow: @textShadow; -// color: @textColor; -// font-size: @fontSize; -// line-height: @baseline; -// border: 1px solid; -// border-color: #ccc #ccc #bbb; -// border-color: borderColor borderColor fadein(@borderColor, 15%); -// .border-radius(@borderRadius); -// @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: @textColor; -// text-decoration: none; -// } -// } +.btnColoring(@primaryColor, @secondaryColor) { + #gradient > .vertical(@primaryColor, @secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + 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%); +} // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { diff --git a/lib/scaffolding.less b/lib/scaffolding.less index a75a47c5f..5dc054f93 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -118,73 +118,80 @@ a { } // Buttons -.btnColor(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - 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%); -} - .btn { - // .button(#1174C6); + // Button Base cursor: pointer; display: inline-block; #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 4px 14px; + padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; font-size: 13px; - line-height: @baseline; + line-height: normal; 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; } + + // Transitions .transition(.1s linear all); + + // Colored Button Types &.primary, - &.danger { + &.danger, + &.danger:hover, + &.primary:hover { color: #fff; - &:hover { - color: #fff; - } } + &.primary { - .btnColor(@blue, @blueDark) + .btnColoring(@blue, @blueDark) } + &.danger { - .btnColor(lighten(@red, 15%), @red) - } - &.large { - font-size: 16px; - line-height: 28px; - .border-radius(6px); - } - &.small { - padding-right: 9px; - padding-left: 9px; - font-size: 11px; + .btnColoring(lighten(@red, 15%), @red) } + + // Active and Disabled states &.disabled { + cursor: default; background-image: none; .opacity(65); - cursor: default; } - // this can't be included with the .disabled def because IE8 and below will drop it ;_; &:disabled { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; background-image: none; .opacity(65); - cursor: default; } + &:active { @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } + + // Button Sizes + &.large { + font-size: 16px; + line-height: normal; + padding: 9px 14px 9px; + .border-radius(6px); + } + + &.small { + padding: 7px 9px 7px; + font-size: 11px; + } + } // Help Firefox not be a jerk about adding extra padding to buttons -- cgit v1.2.3 From 2d99e3f8a61ef9d4a40cd0cad109d0d89ae3c661 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 00:13:40 -0700 Subject: base import of normalize into the reset css, tweaks to selector specificity across the board --- lib/forms.less | 308 +++++++++++++++++++++++++-------------------------- lib/patterns.less | 1 + lib/reset.less | 132 +++++++++++++++++++++- lib/scaffolding.less | 8 +- lib/type.less | 5 +- 5 files changed, 293 insertions(+), 161 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4265f8e59..cfcdb3f17 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,174 +8,176 @@ form { margin-bottom: @baseline; +} - // Groups of fields with labels on top (legends) - fieldset { - margin-bottom: @baseline; - padding-top: @baseline; - legend { - display: block; - margin-left: 150px; - font-size: 20px; - line-height: 1; - *margin: 0 0 5px 145px; /* IE6-7 */ - *line-height: 1.5; /* IE6-7 */ - color: @grayDark; - } +// Groups of fields with labels on top (legends) +fieldset { + margin-bottom: @baseline; + padding-top: @baseline; + legend { + display: block; + margin-left: 150px; + font-size: 20px; + line-height: 1; + *margin: 0 0 5px 145px; /* IE6-7 */ + *line-height: 1.5; /* IE6-7 */ + color: @grayDark; } +} - // Parent element that clears floats and wraps labels and fields together - .clearfix { - margin-bottom: @baseline; - } +// Parent element that clears floats and wraps labels and fields together +.clearfix { + margin-bottom: @baseline; +} - // Set font for forms - label, input, select, textarea { - #font > .sans-serif(normal,13px,normal); - } +// Set font for forms +label, +input, +select, +textarea { + #font > .sans-serif(normal,13px,normal); +} - // Float labels left - label { - padding-top: 6px; - font-size: 13px; - line-height: 18px; - float: left; - width: 130px; - text-align: right; - color: @grayDark; - } +// Float labels left +label { + padding-top: 6px; + font-size: 13px; + line-height: 18px; + float: left; + width: 130px; + text-align: right; + color: @grayDark; +} - // Shift over the inside div to align all label's relevant content - div.input { - margin-left: 150px; - } +// Shift over the inside div to align all label's relevant content +div.input { + margin-left: 150px; +} - // Checkboxs and radio buttons - input[type=checkbox], - input[type=radio] { - cursor: pointer; - } +// Checkboxs and radio buttons +input[type=checkbox], +input[type=radio] { + cursor: pointer; +} - // Inputs, Textareas, Selects - input[type=text], - input[type=password], - textarea, - select, - .uneditable-input { - display: inline-block; - width: 210px; - margin: 0; - padding: 4px; - font-size: 13px; - line-height: @baseline; - height: @baseline; - color: @gray; - border: 1px solid #ccc; - .border-radius(3px); - } - select, - input[type=file] { - height: @baseline * 1.5; - line-height: @baseline * 1.5; - } - textarea { - height: auto; - } - .uneditable-input { - background-color: #eee; - display: block; - border-color: #ccc; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.075)); - } +// Inputs, Textareas, Selects +input[type=text], +input[type=password], +textarea, +select, +.uneditable-input { + display: inline-block; + width: 210px; + padding: 4px; + font-size: 13px; + line-height: @baseline; + height: @baseline; + color: @gray; + border: 1px solid #ccc; + .border-radius(3px); +} +select, +input[type=file] { + height: @baseline * 1.5; + line-height: @baseline * 1.5; +} +textarea { + height: auto; +} +.uneditable-input { + background-color: #eee; + display: block; + border-color: #ccc; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.075)); +} - // Placeholder text gets special styles; can't be bundled together though for some reason - :-moz-placeholder { - color: @grayLight; - } - ::-webkit-input-placeholder { - color: @grayLight; - } +// 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 +input[type=text], +input[type=password], +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, +textarea:focus { + outline: none; + 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); +} - // Focus states +// Error styles +form div.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[type=text], input[type=password], - 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, - textarea:focus { - outline: none; - 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); - } - - // Error styles - div.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; + 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[type=text], - input[type=password], - textarea { + } + .input-prepend, + .input-append { + span.add-on { + background: lighten(@red, 50%); 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%); - } + color: darken(@error-text, 10%); } } +} - // Form element 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: scroll; - } +// Form element 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: scroll; +} - // Turn off focus for disabled (read-only) form elements - input[readonly]:focus, - textarea[readonly]:focus, - input.disabled { - background: #f5f5f5; - border-color: #ddd; - .box-shadow(none); - } +// Turn off focus for disabled (read-only) form elements +input[readonly]:focus, +textarea[readonly]:focus, +input.disabled { + background: #f5f5f5; + border-color: #ddd; + .box-shadow(none); } // Actions (the buttons) @@ -261,13 +263,11 @@ form { border-color: @green; } } - .input-prepend { .add-on { *margin-top: 1px; /* IE6-7 */ } } - .input-append { input[type=text] { float: left; @@ -320,7 +320,7 @@ form { } // Stacked forms -form.form-stacked { +.form-stacked { padding-left: 20px; fieldset { padding-top: @baseline / 2; @@ -364,4 +364,4 @@ form.form-stacked { margin-left: -20px; padding-left: 20px; } -} +} \ No newline at end of file diff --git a/lib/patterns.less b/lib/patterns.less index fd728e6e7..0fbdc9d86 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -558,6 +558,7 @@ footer { .border-radius(0 0 6px 6px); .box-shadow(inset 0 1px 0 #fff); .clearfix(); + margin-bottom: 0; .btn { float: right; margin-left: 10px; diff --git a/lib/reset.less b/lib/reset.less index db1682202..28802f559 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -4,7 +4,7 @@ // 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; } @@ -13,9 +13,133 @@ ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } -// HTML5 -// ----- +// Normalize.css +// Pulling in select resets form the normalize.css project +// -------------------------------------------------- -header, section, footer, article, aside { +// 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; +} + +// Display in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { display: block; +} + +// Display block in IE6-9 and FF3 +// ------------------------- +// Source: http://github.com/necolas/normalize.css +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +// Prevents modern browsers from displaying 'audio' without controls +// ------------------------- +// Source: http://github.com/necolas/normalize.css +audio:not([controls]) { + display: none; +} + +// Prevents sub and sup affecting line-height in all browsers +// ------------------------- +// Source: http://github.com/necolas/normalize.css +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +// Img border in a's and image quality +// ------------------------- +// Source: http://github.com/necolas/normalize.css +img { + border: 0; + -ms-interpolation-mode: bicubic; +} + +// Forms +// ------------------------- +// Source: http://github.com/necolas/normalize.css + +// Font size in all browsers, margin changes, misc consistency +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + 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 +} +button::-moz-focus-inner, +input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 + border: 0; + padding: 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 { + -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 +} +// 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 50f6c96cf..137230672 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -152,6 +152,7 @@ a { 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 ;_; @@ -159,10 +160,13 @@ a { background-image: none; .opacity(65); cursor: default; - color: #fff; + .box-shadow(none); + &.primary { + color: #fff; + } } &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } } diff --git a/lib/type.less b/lib/type.less index 1091d149b..7ee69f2f5 100644 --- a/lib/type.less +++ b/lib/type.less @@ -130,7 +130,7 @@ em { line-height: inherit; } .muted { - color: @grayLighter; + color: @grayLight; } // Blockquotes @@ -181,5 +181,8 @@ pre { border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); + white-space: pre; white-space: pre-wrap; + word-wrap: break-word; + } \ No newline at end of file -- cgit v1.2.3 From 50f484eed6e9161cb7e50531b0fa3f16ada549e0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 02:00:07 -0700 Subject: big update to change the alerts, normal and block level, to have simpler css and new colors independent of the base color scheme --- lib/patterns.less | 153 ++++++++++++++++++++++++++------------------------- lib/scaffolding.less | 4 +- 2 files changed, 79 insertions(+), 78 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index ec42b033c..466727cc4 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -292,95 +292,96 @@ footer { // ERROR STYLES // ------------ -// One-liner alert bars -.alert-message { - // TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_; - #gradient > .vertical(transparent, rgba(0,0,0,0.15)); - filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')"; - background-color: @grayLighter; - margin-bottom: @baseline; - padding: 8px 15px; - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); - border-bottom: 1px solid rgba(0,0,0,.3); - .border-radius(4px); - p { - color: #fff; - margin-bottom: 0; - + p { - margin-top: 5px; - } - } - &.error { - #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%)); - border-bottom-color: lighten(@red, 5%); - } - &.warning { - #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%)); - border-bottom-color: @yellow; - } - &.success { - #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%)); - border-bottom-color: @green; - } - &.info { - #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%)); - border-bottom-color: @blue; - } - .close { - float: right; - margin-top: -2px; - color: #000; - font-size: 20px; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { - text-decoration: none; - .opacity(40); - } - } +// Setup a mixin to colorize different alerts +.alertTheme(@primaryColor, @secondaryColor) { + #gradient > .vertical(@primaryColor, @secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); + border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); } -// Block-level Alerts -.block-message { +// Base alert styles +.alert { + .alertTheme(#fceec1, #eedc94); margin-bottom: @baseline; - padding: 14px; + padding: 7px 14px; color: @grayDark; - color: rgba(0,0,0,.8); - *color: @grayDark; /* IE 6-7 */ - text-shadow: 0 1px 0 rgba(255,255,255,.25); - .border-radius(6px); - p { - color: @grayDark; - color: rgba(0,0,0,.8); - *color: @grayDark; /* IE 6-7 */ - margin-right: 30px; - margin-bottom: 0; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + border-width: 1px; + border-style: solid; + .border-radius(4px); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + // Remove extra margin from content + h5 { + line-height: @baseline; } - ul { + p { margin-bottom: 0; } - strong { - display: block; + div { + margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; } - &.error { - background: lighten(@red, 55%); - border: 1px solid lighten(@red, 50%); + // Provide actions with buttons + .btn { + .box-shadow(0 1px 0 rgba(255,255,255,.25)); } - &.warning { - background: lighten(@yellow, 35%); - border: 1px solid lighten(@yellow, 25%) +} +// Alternate alerts +.alert-error, +.alert-success, +.alert-info, +.alert-error h5, +.alert-success h5, +.alert-info h5 { + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.3); +} +.alert-error { .alertTheme(#f56a66, #d6463e); } +.alert-success { .alertTheme(#62c462, #57a957); } +.alert-info { .alertTheme(#6bd0ee, #36b3d9); } +// Close action +.close { + float: right; + margin-top: -2px; + color: @black; + font-size: 20px; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); } - &.success { - background: lighten(@green, 45%); - border: 1px solid lighten(@green, 35%) +} +// Block-level alerts +.alert-block { + background-image: none; + background-color: lighten(#fceec1, 5%); + padding: 14px; + border-color: #fceec1; + .box-shadow(none); + p { + margin-right: 30px; } - &.info { - background: lighten(@blue, 45%); - border: 1px solid lighten(@blue, 40%); + .alert-actions { + margin-top: 5px; } } +.alert-block.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); +} +.alert-block.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); +} +.alert-block.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); +} // NAVIGATION diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 5dc054f93..f5bc68868 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -9,7 +9,7 @@ .row { .clearfix(); - margin: 0 -20px; + margin-left: -20px; // Default columns .span1, @@ -28,9 +28,9 @@ .span14, .span15, .span16 { + display: inline; float: left; margin-left: 20px; - *display: inline; // IE6 double margin bug fix. } // Default columns -- cgit v1.2.3 From 0e9d7c1c4d9552dda438d6eb5d2f175a99fd4501 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 25 Aug 2011 13:31:46 -0700 Subject: update alert and button styling aproach --- lib/patterns.less | 193 ++++++++++++++++++++++++++++++++++----------------- lib/preboot.less | 51 +++++++++++--- lib/scaffolding.less | 88 +---------------------- 3 files changed, 175 insertions(+), 157 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 466727cc4..2d946e39d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -288,21 +288,96 @@ 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%)); + padding: 5px 14px 6px; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + color: #333; + font-size: 13px; + line-height: normal; + 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); -// ERROR STYLES -// ------------ + &:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.disabled { + cursor: default; + background-image: none; + .opacity(65); + } + + &:disabled { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .opacity(65); + } + + &:active { + @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } -// Setup a mixin to colorize different alerts -.alertTheme(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); + // Primary Button Type + &.primary, + &.primary:hover { + color:#fff; + .gradientBar(@blue, @blueDark) + } + + + // Button Sizes + &.large { + font-size: 16px; + line-height: normal; + padding: 9px 14px 9px; + .border-radius(6px); + } + + &.small { + padding: 7px 9px 7px; + font-size: 11px; + } + +} + +// 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; + } } + + +// ERROR STYLES +// ------------ + // Base alert styles .alert { - .alertTheme(#fceec1, #eedc94); + .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; color: @grayDark; @@ -311,6 +386,7 @@ footer { border-style: solid; .border-radius(4px); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + // Remove extra margin from content h5 { line-height: @baseline; @@ -323,66 +399,59 @@ footer { margin-bottom: 2px; line-height: 28px; } - // Provide actions with buttons .btn { + // Provide actions with buttons .box-shadow(0 1px 0 rgba(255,255,255,.25)); } -} -// Alternate alerts -.alert-error, -.alert-success, -.alert-info, -.alert-error h5, -.alert-success h5, -.alert-info h5 { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); -} -.alert-error { .alertTheme(#f56a66, #d6463e); } -.alert-success { .alertTheme(#62c462, #57a957); } -.alert-info { .alertTheme(#6bd0ee, #36b3d9); } -// Close action -.close { - float: right; - margin-top: -2px; - color: @black; - font-size: 20px; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { + .close { + float: right; + margin-top: -2px; color: @black; - text-decoration: none; - .opacity(40); - } -} -// Block-level alerts -.alert-block { - background-image: none; - background-color: lighten(#fceec1, 5%); - padding: 14px; - border-color: #fceec1; - .box-shadow(none); - p { - margin-right: 30px; + font-size: 20px; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } } - .alert-actions { - margin-top: 5px; + + &.alert-block, + &.alert-block:hover { + background-image: none; + background-color: lighten(#fceec1, 5%); + padding: 14px; + border-color: #fceec1; + .box-shadow(none); + + p { + margin-right: 30px; + } + .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%); + } } } -.alert-block.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); -} -.alert-block.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); -} -.alert-block.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); -} - // NAVIGATION // ---------- diff --git a/lib/preboot.less b/lib/preboot.less index 964f677a6..cec847852 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -170,14 +170,6 @@ column-gap: @columnGap; } -// Buttons -.btnColoring(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - 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%); -} - // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { .background(@color: @white, @alpha: 1) { @@ -189,6 +181,49 @@ } } +// Gradient Bar Colors for buttons and allerts +.gradientBar(@primaryColor, @secondaryColor) { + #gradient > .vertical(@primaryColor, @secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + 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%); +} + +// Shared colors for buttons and alerts + +.btn, +.alert { + + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + + &.danger, + &.danger:hover, + &.error, + &.error:hover { + .gradientBar(#f56a66, #d6463e); + } + + &.success, + &.success:hover { + .gradientBar(#62c462, #57a957); + } + + &.info, + &.info:hover { + .gradientBar(#6bd0ee, #36b3d9); + } + +} + // Gradients #gradient { .horizontal (@startColor: #555, @endColor: #333) { diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f5bc68868..ad5cc7644 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -115,90 +115,4 @@ a { color: @linkColorHover; text-decoration: underline; } -} - -// Buttons -.btn { - // Button Base - cursor: pointer; - display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; - font-size: 13px; - line-height: normal; - 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; - } - - // Transitions - .transition(.1s linear all); - - // Colored Button Types - &.primary, - &.danger, - &.danger:hover, - &.primary:hover { - color: #fff; - } - - &.primary { - .btnColoring(@blue, @blueDark) - } - - &.danger { - .btnColoring(lighten(@red, 15%), @red) - } - - // Active and Disabled states - &.disabled { - cursor: default; - background-image: none; - .opacity(65); - } - - &:disabled { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .opacity(65); - } - - &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } - - // Button Sizes - &.large { - font-size: 16px; - line-height: normal; - padding: 9px 14px 9px; - .border-radius(6px); - } - - &.small { - padding: 7px 9px 7px; - font-size: 11px; - } - -} - -// 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 -- cgit v1.2.3 From 04b8e667d0a8caaf241570721bbf7afb7a5e1b2d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 25 Aug 2011 13:52:04 -0700 Subject: clean up btn selectors a bit --- lib/patterns.less | 14 ++++++-------- lib/preboot.less | 10 +++------- 2 files changed, 9 insertions(+), 15 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 2d946e39d..b96a97198 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -315,6 +315,12 @@ footer { text-decoration: none; } + // Primary Button Type + &.primary { + color:#fff; + .gradientBar(@blue, @blueDark) + } + // Transitions .transition(.1s linear all); @@ -338,14 +344,6 @@ footer { .box-shadow(@shadow); } - // Primary Button Type - &.primary, - &.primary:hover { - color:#fff; - .gradientBar(@blue, @blueDark) - } - - // Button Sizes &.large { font-size: 16px; diff --git a/lib/preboot.less b/lib/preboot.less index cec847852..344876873 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -206,19 +206,15 @@ } &.danger, - &.danger:hover, - &.error, - &.error:hover { + &.error { .gradientBar(#f56a66, #d6463e); } - &.success, - &.success:hover { + &.success { .gradientBar(#62c462, #57a957); } - &.info, - &.info:hover { + &.info { .gradientBar(#6bd0ee, #36b3d9); } -- cgit v1.2.3 From ce615d016a8ac380dae871358cfc7e745b5e20c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:41:45 -0700 Subject: merged in my pending changes from 1.2-wip branch, resolve diffs as best as i could, update docs and alerts to use original classes, updated docs to include smaller section for layouts --- lib/patterns.less | 5 ++--- lib/preboot.less | 4 +--- 2 files changed, 3 insertions(+), 6 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index b96a97198..be5394df5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -374,7 +374,7 @@ input[type=submit].btn { // ------------ // Base alert styles -.alert { +.alert-message { .gradientBar(#fceec1, #eedc94); // warning by default margin-bottom: @baseline; padding: 7px 14px; @@ -416,8 +416,7 @@ input[type=submit].btn { } } - &.alert-block, - &.alert-block:hover { + &.block-message { background-image: none; background-color: lighten(#fceec1, 5%); padding: 14px; diff --git a/lib/preboot.less b/lib/preboot.less index 344876873..5191c5cc5 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -192,8 +192,7 @@ // Shared colors for buttons and alerts .btn, -.alert { - +.alert-message { &.danger, &.danger:hover, &.error, @@ -217,7 +216,6 @@ &.info { .gradientBar(#6bd0ee, #36b3d9); } - } // Gradients -- cgit v1.2.3 From 7d821f18acf04cddd1067ee612773ce2f98cb4ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:44:23 -0700 Subject: resolve issue #87 in this branch --- lib/scaffolding.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ad5cc7644..6b7fa799f 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -81,20 +81,20 @@ body { } // Container (centered, fixed-width layouts) -div.container { +.container { width: 940px; margin: 0 auto; } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -div.container-fluid { +.container-fluid { padding: 0 20px; .clearfix(); - div.sidebar { + .sidebar { float: left; width: 220px; } - div.content { + .content { min-width: 700px; max-width: 1180px; margin-left: 240px; -- cgit v1.2.3 From 0758f64045645849b21164149428719a005da1cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 22:52:21 -0700 Subject: updated classnames in the docs for the alerts, updated colors on error and info alerts/buttons --- lib/preboot.less | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'lib') diff --git a/lib/preboot.less b/lib/preboot.less index 5191c5cc5..eb43301fa 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -188,11 +188,10 @@ 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%); } - // Shared colors for buttons and alerts - .btn, .alert-message { + // Set text color &.danger, &.danger:hover, &.error, @@ -203,18 +202,18 @@ &.info:hover { color: @white } - + // Danger and error appear as red &.danger, &.error { - .gradientBar(#f56a66, #d6463e); + .gradientBar(#ee5f5b, #c43c35); } - + // Success appears as green &.success { .gradientBar(#62c462, #57a957); } - + // Info appears as a neutral blue &.info { - .gradientBar(#6bd0ee, #36b3d9); + .gradientBar(#5bc0de, #339bb9); } } -- cgit v1.2.3 From ab77d7abd39f44cbf281826c8721228e21c05ed3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:19:01 -0700 Subject: spacing --- lib/reset.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib') diff --git a/lib/reset.less b/lib/reset.less index 28802f559..e79b77b40 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -134,6 +134,7 @@ 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 -- cgit v1.2.3 From 0fcda16209bc2a094a22c5652b7b9d62b0e3a077 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Aug 2011 23:31:16 -0700 Subject: be more specific in gradient mixin --- lib/preboot.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'lib') diff --git a/lib/preboot.less b/lib/preboot.less index eb43301fa..75e75020b 100644 --- a/lib/preboot.less +++ b/lib/preboot.less @@ -234,12 +234,12 @@ 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(@startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(@startColor, @endColor); // IE10 + 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-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@startColor, @endColor); // The standard + 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 } .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; -- cgit v1.2.3 From 273659c8e754b924b1bdcab5d34b0498ce2036bd Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 26 Aug 2011 11:13:47 -0700 Subject: update everything to 1.1.1 --- lib/bootstrap.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 6547f0397..aa0e24b96 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v1.1.0 + * Bootstrap v1.1.1 * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 -- cgit v1.2.3