From 2aeed35f24ad1ba3fa07c4d76fa3664dda91508a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2011 17:30:45 -0700 Subject: pull filter gradients out completely because IE can't render them correctly in half of all instances and they are performance problems with them; tweak alert message styles, particularly close button; --- lib/patterns.less | 35 ++++++++++++++++------------------- 1 file changed, 16 insertions(+), 19 deletions(-) (limited to 'lib/patterns.less') diff --git a/lib/patterns.less b/lib/patterns.less index eeb0107ab..229218eb6 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -276,13 +276,13 @@ div.page-header { // One-liner alert bars div.alert-message { - #gradient > .vertical(transparent, rgba(0,0,0,0.15)); +// #gradient > .vertical(rgba(0,0,0,.01), rgba(0,0,0,0.15)); background-color: @grayLighter; margin-bottom: @baseline; padding: 8px 15px; color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-bottom: 1px solid rgba(0,0,0,.25); + 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; @@ -292,29 +292,32 @@ div.alert-message { } } &.error { - background-color: lighten(@red, 25%); + #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%)); + border-bottom-color: lighten(@red, 5%); } &.warning { - background-color: lighten(@yellow, 15%); + #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%)); + border-bottom-color: @yellow; } &.success { - background-color: lighten(@green, 15%); + #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%)); + border-bottom-color: @green; } &.info { - background-color: lighten(@blue, 15%); + #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%)); + border-bottom-color: @blue; } - a.close { + .close { float: right; margin-top: -2px; - color: #fff; + color: #000; font-size: 20px; font-weight: bold; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - .opacity(50); - .border-radius(3px); + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); &:hover { text-decoration: none; - .opacity(50); + .opacity(40); } } } @@ -339,12 +342,6 @@ div.block-message { strong { display: block; } - a.close { - display: block; - color: @grayDark; - color: rgba(0,0,0,.5); - text-shadow: 0 1px 1px rgba(255,255,255,.75); - } &.error { background: lighten(@red, 55%); border: 1px solid lighten(@red, 50%); -- cgit v1.2.3 From 80e0e9c41309f0ac525aa6f67bccb91916637351 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2011 20:03:12 -0700 Subject: updated list html, tweaks to patterns --- lib/patterns.less | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) (limited to 'lib/patterns.less') diff --git a/lib/patterns.less b/lib/patterns.less index 229218eb6..6506287a2 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -261,7 +261,7 @@ div.topbar { // PAGE HEADERS // ------------ -div.page-header { +.page-header { margin-bottom: @baseline - 1; border-bottom: 1px solid #ddd; .box-shadow(0 1px 0 rgba(255,255,255,.5)); @@ -275,8 +275,7 @@ div.page-header { // ------------ // One-liner alert bars -div.alert-message { -// #gradient > .vertical(rgba(0,0,0,.01), rgba(0,0,0,0.15)); +.alert-message { background-color: @grayLighter; margin-bottom: @baseline; padding: 8px 15px; @@ -323,7 +322,7 @@ div.alert-message { } // Block-level Alerts -div.block-message { +.block-message { margin-bottom: @baseline; padding: 14px; color: @grayDark; @@ -365,8 +364,8 @@ div.block-message { // ---------- // Common tab and pill styles -ul.tabs, -ul.pills { +.tabs, +.pills { margin: 0 0 20px; padding: 0; .clearfix(); @@ -380,7 +379,7 @@ ul.pills { } // Basic Tabs -ul.tabs { +.tabs { width: 100%; border-bottom: 1px solid @grayLight; li { @@ -406,7 +405,7 @@ ul.tabs { } // Basic pill nav -ul.pills { +.pills { li { a { margin: 5px 3px 5px 0; @@ -433,12 +432,13 @@ ul.pills { // PAGINATION // ---------- -div.pagination { +.pagination { height: @baseline * 2; margin: @baseline 0; ul { float: left; margin: 0; + border: 1px solid #ddd; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); .box-shadow(0 1px 2px rgba(0,0,0,.075); @@ -448,6 +448,7 @@ div.pagination { float: left; padding: 0 14px; line-height: (@baseline * 2) - 2; + border-right: 1px solid #ddd; border-right: 1px solid rgba(0,0,0,.15); text-decoration: none; } @@ -487,7 +488,7 @@ div.pagination { // MODALS // ------ -div.modal-backdrop { +.modal-backdrop { background-color: rgba(0,0,0,.5); position: fixed; top: 0; @@ -496,7 +497,7 @@ div.modal-backdrop { bottom: 0; z-index: 1000; } -div.modal { +.modal { position: fixed; top: 50%; left: 50%; @@ -579,7 +580,7 @@ div.modal { // TWIPSY // ------ -div.twipsy { +.twipsy { display: block; position: absolute; visibility: visible; -- cgit v1.2.3 From 12efeccdf74b61b61b8d784b55fa857eb409b8b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2011 20:12:18 -0700 Subject: tweak pagination styles to include better border and box shadow --- lib/patterns.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'lib/patterns.less') diff --git a/lib/patterns.less b/lib/patterns.less index 6506287a2..fbe3df3ea 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -441,7 +441,7 @@ div.topbar { border: 1px solid #ddd; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.075); + .box-shadow(0 1px 2px rgba(0,0,0,.05); li { display: inline; a { @@ -505,10 +505,11 @@ div.topbar { width: 560px; margin: -280px 0 0 -250px; background-color: @white; + border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding); + .background-clip(padding-box); .modal-header { border-bottom: 1px solid #eee; padding: 5px 20px; @@ -647,7 +648,7 @@ div.topbar { background-color: @white; padding: 14px; .border-radius(0 0 3px 3px); - .background-clip(padding); + .background-clip(padding-box); p, ul, ol { margin-bottom: 0; } -- cgit v1.2.3 From 59aea3bafd6bba4928e6ba561f54a11feb596d32 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2011 20:17:10 -0700 Subject: give popovers and modals border colors you can see in IE8 and down --- lib/patterns.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'lib/patterns.less') diff --git a/lib/patterns.less b/lib/patterns.less index fbe3df3ea..1f8f28963 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -630,7 +630,8 @@ div.topbar { height: 0; } .inner { - background: rgba(0,0,0,.8); + background-color: #333; + background-color: rgba(0,0,0,.8); padding: 3px; overflow: hidden; width: 280px; @@ -638,7 +639,7 @@ div.topbar { .box-shadow(0 3px 7px rgba(0,0,0,0.3)); } .title { - background: #f5f5f5; + background-color: #f5f5f5; padding: 9px 15px; line-height: 1; .border-radius(3px 3px 0 0); -- cgit v1.2.3 From 027538e66d633b15c9074b14d206602ad8fb42a1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Aug 2011 20:30:58 -0700 Subject: fix topbar dropdown active and hover states --- lib/patterns.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'lib/patterns.less') diff --git a/lib/patterns.less b/lib/patterns.less index 1f8f28963..79b8b2de9 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -7,7 +7,7 @@ // ------ // Topbar for Branding and Nav -div.topbar { +.topbar { #gradient > .vertical(#333, #222); height: 40px; position: fixed; @@ -73,11 +73,13 @@ div.topbar { &::-webkit-input-placeholder { color: @grayLighter; } + // Hover states &:hover { background-color: #444; background-color: rgba(255,255,255,.5); color: #fff; } + // Focus states (we use .focused since IE8 and down doesn't support :focus) &:focus, &.focused { outline: none; @@ -151,7 +153,7 @@ div.topbar { &.open { a.menu, a:hover { - background-color: lighten(#00a0d1,5); + background-color: #333; background-color: rgba(255,255,255,.1); color: #fff; } -- cgit v1.2.3