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 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) (limited to 'lib/preboot.less') 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 -- 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 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) (limited to 'lib/preboot.less') 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 { -- 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/preboot.less | 51 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 43 insertions(+), 8 deletions(-) (limited to 'lib/preboot.less') 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) { -- 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/preboot.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'lib/preboot.less') 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/preboot.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib/preboot.less') 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 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/preboot.less') 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 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/preboot.less') 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