diff options
| author | Jacob Thornton <[email protected]> | 2011-08-26 15:21:20 -0700 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2011-08-26 15:21:20 -0700 |
| commit | a63fb4d234941c58547ed902eb198abaee71b89c (patch) | |
| tree | c23ca33948c6cf4b9cbdc8afbbcf992590b8dadf /lib | |
| parent | 5193619ab0b5eaf937eaec01ba58f179dbc2484c (diff) | |
| parent | 273659c8e754b924b1bdcab5d34b0498ce2036bd (diff) | |
| download | bootstrap-a63fb4d234941c58547ed902eb198abaee71b89c.tar.xz bootstrap-a63fb4d234941c58547ed902eb198abaee71b89c.zip | |
Merge branch '1.1.1-wip'
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/bootstrap.less | 2 | ||||
| -rw-r--r-- | lib/forms.less | 306 | ||||
| -rw-r--r-- | lib/patterns.less | 202 | ||||
| -rw-r--r-- | lib/preboot.less | 82 | ||||
| -rw-r--r-- | lib/reset.less | 133 | ||||
| -rw-r--r-- | lib/scaffolding.less | 70 | ||||
| -rw-r--r-- | lib/type.less | 5 |
7 files changed, 515 insertions, 285 deletions
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 diff --git a/lib/forms.less b/lib/forms.less index b38163f33..88ae08d8a 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) @@ -262,13 +264,11 @@ form { border-color: @green; } } - .input-prepend { .add-on { *margin-top: 1px; /* IE6-7 */ } } - .input-append { input[type=text], input[type=password] { @@ -322,7 +322,7 @@ form { } // Stacked forms -form.form-stacked { +.form-stacked { padding-left: 20px; fieldset { padding-top: @baseline / 2; diff --git a/lib/patterns.less b/lib/patterns.less index 528e6ffdc..d0e4cda12 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -288,101 +288,168 @@ 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); + + &:hover { + background-position: 0 -15px; + color: #333; + text-decoration: none; + } + + // Primary Button Type + &.primary { + color:#fff; + .gradientBar(@blue, @blueDark) + } + + // 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); + } + + // 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 // ------------ -// One-liner alert bars +// Base alert styles .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; + .gradientBar(#fceec1, #eedc94); // warning by default 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); + padding: 7px 14px; + color: @grayDark; + 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; + } 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; + div { + margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; } - &.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; + .btn { + // Provide actions with buttons + .box-shadow(0 1px 0 rgba(255,255,255,.25)); } .close { float: right; margin-top: -2px; - color: #000; + 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); } } -} -// Block-level Alerts -.block-message { - margin-bottom: @baseline; - padding: 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; - } - ul { - margin-bottom: 0; - } - strong { - display: block; - } - &.error { - background: lighten(@red, 55%); - border: 1px solid lighten(@red, 50%); - } - &.warning { - background: lighten(@yellow, 35%); - border: 1px solid lighten(@yellow, 25%) - } - &.success { - background: lighten(@green, 45%); - border: 1px solid lighten(@green, 35%) - } - &.info { - background: lighten(@blue, 45%); - border: 1px solid lighten(@blue, 40%); + &.block-message { + 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%); + } } } - // NAVIGATION // ---------- @@ -557,6 +624,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/preboot.less b/lib/preboot.less index 370cbcdb8..75e75020b 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 @@ -180,28 +170,6 @@ column-gap: @columnGap; } -// 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; -// } -// } - // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { .background(@color: @white, @alpha: 1) { @@ -213,6 +181,42 @@ } } +// 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-message { + // Set text color + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + // Danger and error appear as red + &.danger, + &.error { + .gradientBar(#ee5f5b, #c43c35); + } + // Success appears as green + &.success { + .gradientBar(#62c462, #57a957); + } + // Info appears as a neutral blue + &.info { + .gradientBar(#5bc0de, #339bb9); + } +} + // Gradients #gradient { .horizontal (@startColor: #555, @endColor: #333) { @@ -230,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; diff --git a/lib/reset.less b/lib/reset.less index db1682202..e79b77b40 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,134 @@ 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 bc6e0d1e3..d1b621c13 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -9,6 +9,29 @@ .row { .clearfix(); + margin-left: -20px; + + // Default columns + .span1, + .span2, + .span3, + .span4, + .span5, + .span6, + .span7, + .span8, + .span9, + .span10, + .span11, + .span12, + .span13, + .span14, + .span15, + .span16 { + display: inline; + float: left; + margin-left: 20px; + } // Default columns .span1 { .columns(1); } @@ -58,13 +81,13 @@ 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(); .sidebar { @@ -95,16 +118,7 @@ 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); - cursor: pointer; display: inline-block; #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); padding: 4px 14px; @@ -122,20 +136,31 @@ a { 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, - &.danger { + &.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; } } - &.primary { - .btnColor(@blue, @blueDark) - } - &.danger { - .btnColor(lighten(@red, 15%), @red) - } &.large { font-size: 16px; line-height: 28px; @@ -150,6 +175,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 ;_; @@ -157,9 +183,13 @@ a { background-image: none; .opacity(65); cursor: default; + .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 |
