summaryrefslogtreecommitdiffstats
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/parts/_header.scss299
1 files changed, 203 insertions, 96 deletions
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 41cd977..ecc5fa3 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -9,11 +9,6 @@ $header-height: 30px;
height: auto;
position: relative;
padding-bottom: 10px;
- >.alignright{
- position: absolute;
- top: 30px;
- right: 0;
- }
}
a{
color: $color-gray01;
@@ -30,115 +25,233 @@ $header-height: 30px;
float: none;
}
}
- .menu{
- float: left;
- margin-left: 30px;
- @media screen and (max-width: 1040px){
- float: none;
- margin-left: 0;
- margin-top: 15px;
+}
+#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;
+ }
+ }
+ &:hover{
+ >a{
+ color: $color-main;
+ }
}
- >li{
- margin-left: 50px;
- @include inline-block;
+ >a{
+ padding: 38px 30px 38px 0;
+ margin-top: -38px;
+ background: image-url('detail.png') right center no-repeat;
@media screen and (max-width: 1040px){
- margin-left: 0;
- margin-right: 50px;
- &:last-of-type{
- margin-right: 0;
+ 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{
- >a{
- color: $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;
- &:only-child{
- padding-right: 0;
- }
+ background: image-url('detail-sub.png') right center no-repeat;
+ display: block;
+ padding: 5px 30px 5px 15px;
+ &:hover{
+ color: $color-gray01;
}
&:only-child{
- padding-right: 0;
background: none;
+ padding-right: 15px;
}
}
}
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);
+ top: 0;
+ left: 100%;
+ }
+ }
+ li{
+ position: relative;
+ &:hover{
+ >ul{
+ display: block;
}
- 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;
- }
- }
+ }
+ }
+ }
+ 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;
@@ -147,9 +260,6 @@ $header-height: 30px;
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;
@@ -177,9 +287,6 @@ $header-height: 30px;
margin-right: 0;
}
}
- @media screen and (max-width: 600px){
- display: none;
- }
a{
@include border-radius(50%);
@include inline-block;
@@ -242,4 +349,4 @@ $header-height: 30px;
}
}
}
-}
+} \ No newline at end of file
generated by cgit v1.1-2-g2b99 at 2024-11-21 16:59:42 +0100