Jaybe
115 lines
4.6 KiB
SCSS
115 lines
4.6 KiB
SCSS
// D:\SourceData\zenith\zenith-project\public\static\css\zenith\_layout.scss 백업파일(현재삭제됨)
|
|
//제니스 안의 layout.scss 파일이 아님.
|
|
|
|
body{background:#f7f7f7;}
|
|
|
|
.left-side{display:flex; flex-direction:column; width:240px; height:100vh; box-sizing:border-box; padding:42px 0; border-radius:0 0 40px 0; background:$color-dark;
|
|
.btn-menu{display:none;}
|
|
.logo{margin:0 auto 40px;}
|
|
}
|
|
|
|
.nav-wrap{flex:1; overflow:auto;
|
|
&::-webkit-scrollbar{width:6px; background:transparent;}
|
|
&::-webkit-scrollbar-thumb{border-radius:3px; background:#aaa;}
|
|
.nav{
|
|
> li{position:relative; padding:15px 0 0 10px; font-size:1.063rem; transition:all .2s;
|
|
&:not(:last-child){margin:0 0 30px;}
|
|
&:has([aria-expanded="true"]){background:#fff;
|
|
&:before{position:absolute; top:0; left:0; width:6px; height:100%; content:''; background:$color-primary;}
|
|
button{color:$color-dark;
|
|
&[aria-expanded="true"]{@include bold;}
|
|
}
|
|
}
|
|
}
|
|
button{
|
|
display:block; padding:0 0 0 33px; color:#fff;
|
|
> i.bi {margin:0 10px 0 -37px; font-size:180%; vertical-align:middle;}
|
|
}
|
|
.btn-toggle-nav{padding:18px 0 0;
|
|
li{margin:0 0 12px 32px;}
|
|
a{position:relative; display:inline-block; padding:0 0 2px 10px; font-size:0.875rem; color:#929292;}
|
|
.active{color:$color-primary; border-bottom:2px solid #e58489;}
|
|
.active:before{position:absolute; top:6px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:$color-primary;}
|
|
}
|
|
}
|
|
}
|
|
.util-nav{display:flex; justify-content:space-between; margin:0 38px; padding:20px 0 0;
|
|
a{font-size:0.813rem; color:#aaa;}
|
|
}
|
|
|
|
.main-contents-wrap{flex:1; padding:80px 6.7708vw; margin-left: 200px;}
|
|
.ad-list{
|
|
.row{text-align:left;}
|
|
.row:not(:first-child){margin-top:24px;}
|
|
.type{flex:1; margin-right:12px; padding:1.8229vw 2.5vw; border:1px solid #d1d1d1; border-radius:$radius; background:#fff;}
|
|
.btn-more{display:flex; align-items:center; justify-content:center; width:143px; color:#fff; border-radius:$radius; background:$color-dark;
|
|
span{padding:30px 0 0; @include bg('ico_arrow.png', center, 0);}
|
|
}
|
|
.btn-primary{background:$color-primary;}
|
|
.summary{display:flex; margin:0 0 24px;
|
|
strong{min-width:210px; margin:0 45px 0 0; font-size:1.750rem; @include bold;}
|
|
i{display:inline-block; width:28px; height:28px; margin:0 6px 0 0; vertical-align:top;}
|
|
.facebook{@include bg('ico_facebook.png', center, 0);}
|
|
.kakao{@include bg('ico_kakao.png', center, 0);}
|
|
.google{@include bg('ico_google.png', center, 0);}
|
|
dl{display:flex; align-items:center; margin:0 45px 0 0;}
|
|
dt{margin:0 6px 0 0; font-size:1rem;}
|
|
dd{font-size:1.750rem; @include bold;}
|
|
.percentage{
|
|
dd{color:$color-primary;}
|
|
}
|
|
}
|
|
.detail{
|
|
dl{box-sizing:border-box; margin:0 22px 0 0; padding:7px 10px; text-align:left; background:#f2f2f2;}
|
|
dd{margin:8px 0 0; color:#929292;}
|
|
}
|
|
}
|
|
|
|
@include x-large{
|
|
.main-contents-wrap{padding:30px;}
|
|
.ad-list{
|
|
.type{padding:20px;}
|
|
}
|
|
.ad-detail-info{flex-wrap:wrap;
|
|
.col{flex:0 0 auto; width:25%;
|
|
&:nth-child(n+5){margin-top:15px;}
|
|
}
|
|
}
|
|
}
|
|
@include large{
|
|
.ad-list{
|
|
.row{position:relative;}
|
|
.summary{flex-wrap:wrap;
|
|
strong{width:100%; margin:0 0 10px;}
|
|
}
|
|
.btn-more{position:absolute; top:15px; right:20px; width:auto; color:$color-dark; background:none;
|
|
span{padding:0; background:none;}
|
|
}
|
|
}
|
|
.left-side{overflow:hidden;}
|
|
}
|
|
@include medium{
|
|
.wrap{min-width:580px;}
|
|
.main-contents-wrap{padding:30px 30px 30px 70px;}
|
|
.left-side{position:fixed; z-index:1; max-width:40px; height:100%; overflow:hidden; padding:20px 0; border-radius:0; transition:all .2s;
|
|
.logo{margin:0 0 20px 45px;}
|
|
&.open{max-width:240px; width:240px;}
|
|
.btn-menu{position:absolute; top:20px; left:10px; display:block; width:20px; height:20px; overflow:hidden; text-indent:-9999px; border-top:2px solid #fff;
|
|
&:before{position:absolute; top:7px; left:0; width:100%; height:2px; content:''; background:#fff;}
|
|
&:after{position:absolute; bottom:0; left:0; width:100%; height:2px; content:''; background:#fff;}
|
|
}
|
|
}
|
|
.nav-wrap{width:240px;
|
|
.nav{
|
|
> li:not(:last-child){margin:0 0 10px;}
|
|
button{display:block; padding:0 0 0 33px; color:#fff;}
|
|
}
|
|
}
|
|
.util-nav{width:156px;}
|
|
.ad-list{
|
|
.type{margin:0;}
|
|
}
|
|
}
|
|
@include small{
|
|
|
|
} |