summaryrefslogtreecommitdiffstats
path: root/sass/parts/_header.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/parts/_header.scss')
-rw-r--r--sass/parts/_header.scss383
1 files changed, 261 insertions, 122 deletions
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 3c13875..9548dfe 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -1,171 +1,310 @@
-header{
- height: 30px;
+$header-height: 30px;
+
+#header{
+ height: $header-height;
padding: 30px 0;
- border-bottom: 1px solid $gray04;
- line-height: 30px;
+ border-bottom: 1px solid $color-gray04;
+ line-height: $header-height;
@media screen and (max-width: 1040px){
height: auto;
position: relative;
padding-bottom: 10px;
- >.right{
- position: absolute;
- top: 30px;
- right: 0;
- }
}
a{
- color: $gray01;
- @include transition(0.3s);
+ color: $color-gray01;
+ @include transition(color 0.3s);
&:hover{
- color: $main;
+ color: $color-main;
}
}
h1{
+ float: left;
font-weight: 300;
font-size: 30px;
@media screen and (max-width: 1040px){
- float: none !important;
+ float: none;
}
}
- nav{
- margin-left: 30px;
- @media screen and (max-width: 1040px){
- margin-left: 0;
- margin-top: 15px;
- float: none !important;
+}
+#main-nav{
+ 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;
}
- >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;
+ }
}
- >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 0;
+ margin-top: -38px;
+ &:after{
+ content: "\f078";
+ color: $color-gray03;
+ font: 12px $font-icon;
+ padding-left: 10px;
+ }
+ &:only-child{
+ &:after{
+ content: "";
}
}
+ @media screen and (max-width: 1040px){
+ padding: 18px 0;
+ }
+ }
+ }
+ 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{
- >a{
- color: $main;
+ background: #d5d5d5;
+ }
+ &:first-of-type{
+ border-top: none;
+ ul{
+ @include border-radius(0 0 5px 5px);
}
}
+ &:last-of-type{
+ border-bottom: none;
+ }
>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;
- /* Todo */
- &:only-child{
- padding-right: 0;
- }
+ display: block;
+ padding: 5px 15px;
+ &:after{
+ content: "\f054";
+ color: $color-gray02;
+ font: 12px $font-icon;
+ padding-left: 10px;
+ }
+ &:hover{
+ color: $color-gray01;
}
&:only-child{
- padding-right: 0;
- background: none;
+ &:after{
+ content: "";
+ }
}
}
}
ul{
- position: absolute;
- top: 60px;
- left: -15px;
- z-index: 10;
- white-space: nowrap;
- background: $gray04;
- border: 1px solid $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);
+ top: 0;
+ left: 100%;
+ }
+ }
+ li{
+ position: relative;
+ &:hover{
+ >ul{
+ display: block;
}
- li{
- @include border-shadow($background, $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: $gray01;
- }
- &:only-child{
- background: none;
- padding-right: 15px;
- }
- }
+ }
+ }
+ }
+ select{
+ display: none;
+ margin-bottom: 10px;
+ @media screen and (max-width: 600px){
+ display: block;
+ }
+ }
+}
+#mobile-nav{
+ display: none;
+ height: 37px;
+ position: relative;
+ @media screen and (max-width: 600px){
+ display: block;
+ }
+ a{
+ display: block;
+ }
+ .container{
+ display: none;
+ }
+ .menu{
+ position: relative;
+ width: 100%;
+ .button{
+ background: #f2f2f2;
+ border: 1px solid $color-gray04;
+ color: #999;
+ padding: 0 60px 0 10px;
+ position: relative;
+ @include border-radius(5px);
+ &:hover{
+ color: #999;
+ }
+ &.on{
+ color: #666;
+ @include border-radius(5px 5px 5px 0);
+ &:before{
+ content: "\f077";
}
+ }
+ &:before{
+ content: "\f078";
+ color: $color-gray04;
+ font: 16px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ right: 40px;
+ }
+ }
+ .container{
+ background: #f2f2f2;
+ border: 1px solid #ddd;
+ border-top: none;
+ position: absolute;
+ top: 31px;
+ z-index: 1;
+ @include border-radius(0 0 5px 5px);
+ ul{
+ list-style: none;
ul{
- top: 0;
- left: 100%;
+ margin-left: 20px;
}
}
- li{
- position: relative;
- &:hover{
- >ul{
- display: block;
- }
- }
+ a{
+ padding: 0 10px;
}
}
- select{
- display: none;
- margin-bottom: 10px;
- @media screen and (max-width: 600px){
- display: block;
+ }
+ .search{
+ position: absolute;
+ top: 0;
+ right: 0;
+ .button{
+ background: $color-gray04;
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 1px;
+ right: -1px;
+ @include border-radius(0 5px 5px 0);
+ &:before{
+ content: "\f002";
+ color: #f2f2f2;
+ font: 20px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ left: 7px;
}
+ &.on{
+ background: $color-gray03;
+ &:before{
+ content: "\f00d";
+ }
+ }
+ }
+ .container{
+ position: absolute;
+ right: 51px;
+ z-index: 1;
}
+ input[type="text"]{
+ background: #fff;
+ border: 1px solid $color-gray04;
+ border-right: none;
+ color: $color-gray02;
+ font: 13px $font-default;
+ height: 30px;
+ width: 100%;
+ padding: 0 10px;
+ @include border-radius(5px 0 0 5px);
+ }
+ }
+}
+#sub-nav{
+ @media screen and (max-width: 1040px){
+ position: absolute;
+ top: 30px;
+ right: 0;
+ }
+ @media screen and (max-width: 600px){
+ display: none;
}
.search{
+ float: left;
+ margin-top: 1px;
+ position: relative;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-top: 15px;
+ }
+ &:before{
+ content: "\f002";
+ color: $color-gray03;
+ font: 18px $font-icon;
+ line-height: 30px;
+ position: absolute;
+ top: 0;
+ right: 125px;
+ }
input[type="text"]{
- background: image-url('search.png') 10px center no-repeat #f2f2f2;
- color: $gray02;
- border: 1px solid $gray04;
- font: 13px $default;
+ background: #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);
- @media screen and (max-width: 600px){
- width: 60px;
- }
&:focus, &:active{
- background: image-url('search.png') 10px center no-repeat #fff;
- width: 150px;
- border-top: 1px solid $gray03;
- color: $gray01;
+ background: #fff;
+ border-top: 1px solid $color-gray03;
+ color: $color-gray01;
outline: none;
- @media screen and (max-width: 600px){
- width: 100px;
- }
}
}
}
.social{
+ float: left;
margin-right: 15px;
- @media screen and (max-width: 600px){
- display: none;
+ @media screen and (max-width: 1040px){
+ float: none;
+ margin-right: 0;
+ a:last-of-type{
+ margin-right: 0;
+ }
}
a{
@include border-radius(50%);
@@ -179,28 +318,28 @@ header{
opacity: 1;
}
&.facebook{
- background: image-url('facebook.png') center no-repeat #3B5998;
+ 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('google.png') center no-repeat #C83D20;
+ 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('twitter.png') center no-repeat #55CFF8;
+ 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('github.png') center no-repeat rgb(175,182,202);
+ 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%);
@@ -214,21 +353,21 @@ header{
}
}
&.pinterest{
- background: image-url('pinterest.png') center no-repeat rgb(190,64,55);
+ 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('delicious.png') center no-repeat rgb(50,113,203);
+ 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('rss.png') center no-repeat #EF7522;
+ background: image-url('social/rss.png') center no-repeat #EF7522;
border: 1px solid #EF7522;
&:hover{
border: 1px solid darken(#EF7522, 10%);
generated by cgit v1.1-2-g2b99 at 2024-11-21 18:38:18 +0100