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/patterns.less | 1 + 1 file changed, 1 insertion(+) (limited to 'lib/patterns.less') 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; -- 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 +++++++++++++++++++++++++++--------------------------- 1 file changed, 77 insertions(+), 76 deletions(-) (limited to 'lib/patterns.less') 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 -- 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 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 131 insertions(+), 62 deletions(-) (limited to 'lib/patterns.less') 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 // ---------- -- 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 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'lib/patterns.less') 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; -- 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 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'lib/patterns.less') 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; -- cgit v1.2.3