blog/themes/classic/sass/default/partials/_navigation.scss
Brandon Mathis 814be44c15 1. Improved responsive navigation styling when email subscription is present
2. Refactored subscription styling to be more DRY
3. Added an image for email subscriptions
4. Added assets directory to the gitignore for stashing working files
5. Improved gem list in the Gemfile
2011-06-11 15:23:54 -04:00

138 lines
3.9 KiB
SCSS

body > nav {
position: relative;
background-color: $nav-bg;
@include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
border: {
top: 1px solid $nav-border-top;
bottom: 1px solid $nav-border-bottom; }
padding-top: .35em;
padding-bottom: .35em;
//position: absolute; left: 0; right: 0; top: 0;
form {
@include background-clip(padding-box);
margin: 0; padding: 0;
.search {
padding: .3em .5em 0;
font-size: .85em;
line-height: 1.1em;
width: 95%;
@include border-radius(.5em);
@include background-clip(padding-box);
@include box-shadow(lighten($nav-bg, 2) 0 1px);
background-color: lighten($nav-bg, 15);
border: 1px solid $nav-border;
color: #888;
&:focus {
color: #444;
border-color: #80b1df;
@include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset);
background-color: #fff;
outline: none;
}
}
}
fieldset[role=site-search]{ float: right; width: 48%; }
fieldset[role=mobile-nav]{ float: left; width: 48%;
select{ width: 100%; font-size: .8em; border: 1px solid #888;}
}
ul { display: none; }
@media only screen and (min-width: 550px) {
font-size: .9em;
ul {
@include horizontal-list(0);
float: left;
display: block;
padding-top: .25em;
}
ul[role=subscription] {
margin-left: .8em;
float: right;
li:last-child a { padding-right: 0; }
}
ul li {
margin: 0;
}
a {
@include link-colors($nav-color, $nav-color-hover, $visited: $nav-color);
@extend .sans;
text-shadow: lighten($nav-bg, 12) 0 1px;
float: left;
text-decoration: none;
font-size: .9em;
padding: .1em 0;
line-height: 1.5em;
}
li + li {
border-left: 1px solid $nav-border-left;
margin-left: .8em;
a {
padding-left: .8em;
border-left: 1px solid $nav-border-right;
}
}
form {
float: right;
text-align: left;
padding-left: .8em;
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px;
.search {
width: 93%;
font-size: .95em;
line-height: 1.2em;
}
}
ul[data-subscription$=email] + form {
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 48px;
.search { width: 91%; }
}
fieldset[role=mobile-nav] { display: none; }
fieldset[role=site-search]{ width: 100%; }
}
@media only screen and (min-width: 992px) {
form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px;
}
ul[data-subscription$=email] + form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 48px;
}
}
}
.no-placeholder {
body > nav .search {
background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
text-indent: 1.3em;
}
}
@mixin mask-subscription-nav($feed: 'rss.png'){
position: relative; top: 0px;
text-indent: -999999em;
background-color: $nav-border-right;
border: 0;
padding: 0;
&,&:after { @include mask-image($feed); }
&:after {
content: "";
position: absolute; top: -1px; left: 0;
background-color: lighten($nav-color, 25);
}
&:hover:after { background-color: lighten($nav-color, 20); }
}
.maskImage {
body > nav {
@media only screen and (min-width: 550px) {
ul[data-subscription$=email] + form {
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px;
}
}
@media only screen and (min-width: 992px) {
ul[data-subscription$=email] + form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px;
}
}
}
ul[role=subscription] { li, a { border: 0; padding: 0; }}
a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
}