네모의 꿈 레이아웃 SCSS 추가 수정

This commit is contained in:
MinSoo Kim 2017-03-09 01:27:09 +09:00
parent b4c64b937d
commit 5606c90fbe

View file

@ -231,78 +231,81 @@ header.layout_frame .layout_menu{
background-color: $primary-color; background-color: $primary-color;
color: layoutGrayContrast($primary-color, 0.710); color: layoutGrayContrast($primary-color, 0.710);
} }
.layout_menu {
li.layout_dropdown {
display: block;
}
.layout_menu li.layout_dropdown { .layout_dropdown-content {
display: block; display: none;
position: absolute;
background-color: lighten($grey, 40%);
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.layout_dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
min-width: 160px;
display: block;
text-align: left;
box-sizing: border-box;
}
.
.layout_dropdown-content a:hover,
.layout_dropdown-content a:active,
.layout_dropdown-content a:focus {
display: block;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
.layout_dropdown:hover .layout_dropdown-content,
.layout_dropdown:active .layout_dropdown-content,
.layout_dropdown:focus .layout_dropdown-content,
.layout_dropdown a:hover ~ .layout_dropdown-content,
.layout_dropdown a:active ~ .layout_dropdown-content,
.layout_dropdown a:focus ~ .layout_dropdown-content,
.layout_dropdown layout_dropdown-content:hover,
.layout_dropdown layout_dropdown-content:active,
.layout_dropdown layout_dropdown-content:focus {
display: block;
}
} }
.layout_menu .layout_dropdown-content {
display: none;
position: absolute;
background-color: lighten($grey, 40%);
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.layout_menu .layout_dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
min-width: 160px;
display: block;
text-align: left;
box-sizing: border-box;
}
.
.layout_menu .layout_dropdown-content a:hover,
.layout_menu .layout_dropdown-content a:active,
.layout_menu .layout_dropdown-content a:focus {
display: block;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
.layout_menu .layout_dropdown:hover .layout_dropdown-content,
.layout_menu .layout_dropdown:active .layout_dropdown-content,
.layout_menu .layout_dropdown:focus .layout_dropdown-content,
.layout_menu .layout_dropdown a:hover ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:active ~ .layout_dropdown-content,
.layout_menu .layout_dropdown a:focus ~ .layout_dropdown-content,
.layout_menu .layout_dropdown layout_dropdown-content:hover,
.layout_menu .layout_dropdown layout_dropdown-content:active,
.layout_menu .layout_dropdown layout_dropdown-content:focus/* ,
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:hover),
.layout_menu .layout_dropdown .layout_dropdown-content:has(> a:focus) */ {
display: block;
}
#layout_fnb{ #layout_fnb{
background-color: transparent; background-color: transparent;
} }
.layout_footer .layout_menu li a, .layout_footer .dropbtn { .layout_footer {
color: lighten($grey, 10%); .layout_menu li a, .dropbtn {
font-weight: normal; color: lighten($grey, 10%);
text-decoration: none; font-weight: normal;
padding: 14px 0px; text-decoration: none;
} padding: 14px 0px;
.layout_footer .layout_menu li a>span { }
padding: 0px 16px; .layout_menu li a>span {
border-right: 1px solid lighten($grey, 10%); padding: 0px 16px;
} border-right: 1px solid lighten($grey, 10%);
.layout_footer .layout_menu li:first-child{ }
margin-left:-16px; .layout_menu li:first-child{
} margin-left:-16px;
.layout_footer .layout_menu li:last-child a>span { }
border-right: none; .layout_menu li:last-child a>span {
border-right: none;
}
.layout_menu li a:hover,
.layout_menu li a:focus,
.layout_menu li a:active{
background-color: transparent;
color: #fff;
}
} }
.layout_footer .layout_menu li a:hover,
.layout_footer .layout_menu li a:focus,
.layout_footer .layout_menu li a:active{
background-color: transparent;
color: #fff;
}
/* Language */ /* Language */
.layout_language{ .layout_language{
@ -502,14 +505,13 @@ header.layout_frame .layout_menu{
width:100%; width:100%;
height: auto; height: auto;
clear: both; clear: both;
} ul {
list-style-type: none;
.layout_menu ul { margin: 0;
list-style-type: none; padding: 0;
margin: 0; width: 100%;
padding: 0; height: auto;
width: 100%; }
height: auto;
} }
.layout_menu>ul>li, #layout_gnb>ul>li:first-child { .layout_menu>ul>li, #layout_gnb>ul>li:first-child {
@ -577,16 +579,16 @@ header.layout_frame .layout_menu{
.layout_language { .layout_language {
margin-top: 15px; margin-top: 15px;
} ul {
.layout_language ul { display: none;
display: none; float:none;
float:none; width:100%;
width:100%; }
} .toggle{
.layout_language .toggle{ display: block;
display: block; float: none;
float: none; width:100%;
width:100%; }
} }
/* PC only */ /* PC only */
.layout_pc { .layout_pc {