blog/sass/parts/_header.scss

246 lines
5.1 KiB
SCSS
Raw Normal View History

2012-06-03 11:40:57 +00:00
$header-height: 30px;
#header{
height: $header-height;
padding: 30px 0;
border-bottom: 1px solid $color-gray04;
line-height: $header-height;
@media screen and (max-width: 1040px){
height: auto;
position: relative;
padding-bottom: 10px;
>.alignright{
position: absolute;
top: 30px;
right: 0;
}
}
a{
color: $color-gray01;
@include transition(color 0.3s);
&:hover{
color: $color-main;
}
}
h1{
float: left;
font-weight: 300;
font-size: 30px;
@media screen and (max-width: 1040px){
float: none;
}
}
.menu{
float: left;
margin-left: 30px;
@media screen and (max-width: 1040px){
float: none;
margin-left: 0;
margin-top: 15px;
}
>ul{
@media screen and (max-width: 600px){
display: none;
}
>li{
margin-left: 50px;
@include inline-block;
@media screen and (max-width: 1040px){
margin-left: 0;
margin-right: 50px;
&:last-of-type{
margin-right: 0;
}
}
&:hover{
>a{
color: $color-main;
}
}
>a{
padding: 38px 30px 38px 0;
margin-top: -38px;
background: image-url('detail.png') right center no-repeat;
@media screen and (max-width: 1040px){
padding: 18px 30px 18px 0;
&:only-child{
padding-right: 0;
}
}
&:only-child{
padding-right: 0;
background: none;
}
}
}
ul{
position: absolute;
top: 60px;
left: -15px;
z-index: 10;
white-space: nowrap;
background: $color-gray04;
border: 1px solid $color-gray03;
list-style: none;
display: none;
@media screen and (max-width: 1040px){
top: 40px;
}
@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
@include border-radius(0 0 5px 5px);
ul{
@include border-radius(0 5px 5px 5px);
}
li{
@include border-shadow($color-background, $color-gray03);
&:hover{
background: #d5d5d5;
}
&:first-of-type{
border-top: none;
ul{
@include border-radius(0 0 5px 5px);
}
}
&:last-of-type{
border-bottom: none;
}
>a{
background: image-url('detail-sub.png') right center no-repeat;
display: block;
padding: 5px 30px 5px 15px;
&:hover{
color: $color-gray01;
}
&:only-child{
background: none;
padding-right: 15px;
}
}
}
ul{
top: 0;
left: 100%;
}
}
li{
position: relative;
&:hover{
>ul{
display: block;
}
}
}
}
select{
display: none;
margin-bottom: 10px;
@media screen and (max-width: 600px){
display: block;
}
}
}
.search{
float: left;
margin-top: 1px;
@media screen and (max-width: 1040px){
float: none;
margin-top: 15px;
}
@media screen and (max-width: 600px){
margin-top: 40px;
}
input[type="text"]{
background: image-url('search.png') 10px center no-repeat #f2f2f2;
color: $color-gray02;
border: 1px solid $color-gray04;
font: 13px $font-default;
padding: 6px 15px 6px 35px;
width: 100px;
@include transition(0.3s);
@include border-radius(15px);
&:focus, &:active{
background: image-url('search.png') 10px center no-repeat #fff;
border-top: 1px solid $color-gray03;
color: $color-gray01;
outline: none;
}
}
}
.social{
float: left;
margin-right: 15px;
@media screen and (max-width: 1040px){
float: none;
margin-right: 0;
a:last-of-type{
margin-right: 0;
}
}
@media screen and (max-width: 600px){
display: none;
}
a{
@include border-radius(50%);
@include inline-block;
text-indent: -9999px;
margin-right: 15px;
opacity: 0.5;
@include square(28px);
@include transition(0.3s);
&:hover{
opacity: 1;
}
&.facebook{
background: image-url('social/facebook.png') center no-repeat #3B5998;
border: 1px solid #3B5998;
&:hover{
border: 1px solid darken(#3B5998, 10%);
}
}
&.google{
background: image-url('social/google.png') center no-repeat #C83D20;
border: 1px solid #C83D20;
&:hover{
border: 1px solid darken(#C83D20, 10%);
}
}
&.twitter{
background: image-url('social/twitter.png') center no-repeat #55CFF8;
border: 1px solid #55CFF8;
&:hover{
border: 1px solid darken(#55CFF8, 10%);
}
}
&.github{
background: image-url('social/github.png') center no-repeat rgb(175,182,202);
border: 1px solid rgb(175,182,202);
&:hover{
border: 1px solid darken(rgb(175,182,202), 10%);
}
}
&.pinterest{
background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55);
border: 1px solid rgb(190,64,55);
&:hover{
border: 1px solid darken(rgb(190,64,55), 10%);
}
}
&.delicious{
background: image-url('social/delicious.png') center no-repeat rgb(50,113,203);
border: 1px solid rgb(50,113,203);
&:hover{
border: 1px solid darken(rgb(50,113,203), 10%);
}
}
&.rss{
background: image-url('social/rss.png') center no-repeat #EF7522;
border: 1px solid #EF7522;
&:hover{
border: 1px solid darken(#EF7522, 10%);
}
}
}
}
}