introduce .fill class to top-nav for overflow bug

This commit is contained in:
Jacob Thornton
2011-08-21 12:19:01 -07:00
parent 1d96417201
commit b18e76f990
6 changed files with 58 additions and 27 deletions

View File

@@ -8,8 +8,6 @@
// Topbar for Branding and Nav
div.topbar {
background:#222;
#gradient > .vertical(#333, #222);
height: 40px;
position: fixed;
top: 0;
@@ -17,8 +15,19 @@ div.topbar {
right: 0;
z-index: 10000;
overflow: visible;
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
.fill {
background:#222;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
#gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
}
// Links get text shadow
a {
@@ -36,15 +45,18 @@ div.topbar {
}
// Website name
h3 a {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
h3 {
position:relative;
a {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
}
// Search Form

View File

@@ -224,7 +224,7 @@
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
// filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@startColor: #555, @endColor: #333) {
@@ -237,7 +237,7 @@
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
// filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(@startColor, @endColor); // The standard
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {