Jaybe
618 lines
16 KiB
SCSS
618 lines
16 KiB
SCSS
body{background:rgb(var(--bs-white-spring));}
|
|
|
|
|
|
//왼쪽메뉴
|
|
.left-side{
|
|
overflow:hidden;
|
|
display:flex;
|
|
flex-direction:column;
|
|
position:fixed;
|
|
width:40px;
|
|
height:100vh;
|
|
padding:42px 0;
|
|
box-sizing:border-box;
|
|
border-radius:0;
|
|
background:rgb(var(--bs-dark-metal));
|
|
transition:all .5s;
|
|
z-index: 99;
|
|
&.active{
|
|
width:240px;
|
|
border-radius:0 0 40px 0;
|
|
.nav-wrap {
|
|
width: 240px;
|
|
}
|
|
}
|
|
.btn-menu{
|
|
display:block;
|
|
width:40px;
|
|
height:35px;
|
|
position:absolute;
|
|
top:40px;
|
|
left:-1px;
|
|
padding:0;
|
|
font-size:0;
|
|
&:before{
|
|
content:'\F479';
|
|
display:block;
|
|
font-family:bootstrap-icons !important;
|
|
font-size:2rem;
|
|
color:rgb(var(--bs-white));
|
|
}
|
|
}
|
|
.logo{
|
|
color:rgb(var(--bs-white));
|
|
min-height:35px;
|
|
margin:0 0 0 45px;
|
|
line-height:35px;
|
|
}
|
|
.btn-top{
|
|
position:fixed;
|
|
right:2px;
|
|
bottom:4px;
|
|
a{
|
|
display:block;
|
|
margin:3px 0;
|
|
background-color:rgb(var(--bs-dark));
|
|
border-radius:5px;
|
|
text-align:center;
|
|
color:rgb(var(--bs-gray-100));
|
|
font-size:200%;
|
|
i.bi{
|
|
vertical-align:bottom;
|
|
&:before{
|
|
vertical-align:-.225em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 왼쪽메뉴리스트(통합광고관리/통합DB관리/회계관리/시차관리/이벤트/회원관리)
|
|
.nav-wrap{
|
|
width: 40px;
|
|
margin-top:30px;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
transition:all .5s;
|
|
flex:1;
|
|
&::-webkit-scrollbar{
|
|
width:6px;
|
|
background:transparent
|
|
;}
|
|
&::-webkit-scrollbar-thumb{
|
|
border-radius:3px;
|
|
background:rgb(var(--bs-silver-aluminium));
|
|
}
|
|
.nav{
|
|
width: 240px;
|
|
// overflow-y: auto;
|
|
> li{
|
|
position:relative;
|
|
padding:15px 0 0 10px;
|
|
font-size:1.063rem;
|
|
transition:all .2s;
|
|
&:not(:last-child){
|
|
margin:0 0 30px;
|
|
}
|
|
&:has(div){
|
|
&:after{
|
|
content:'';
|
|
position:absolute;
|
|
top:23px;
|
|
right:30px;
|
|
width:10px;
|
|
height:10px;
|
|
border-right:2px solid rgb(var(--bs-white));
|
|
border-bottom:2px solid rgb(var(--bs-white));
|
|
transform:rotate(45deg);
|
|
transition:all .2s;
|
|
}
|
|
}
|
|
&:has([aria-expanded="true"]){
|
|
background:rgb(var(--bs-white));
|
|
&:before{
|
|
content:'';
|
|
position:absolute;
|
|
width:6px;
|
|
height:100%;
|
|
top:0;
|
|
left:0;
|
|
background:rgb(var(--bs-red-primary));
|
|
}
|
|
&:after{
|
|
top:26px;
|
|
border-color:rgb(var(--bs-dark-metal));
|
|
transform:rotate(225deg);
|
|
}
|
|
button{
|
|
color:rgb(var(--bs-dark-metal));
|
|
&[aria-expanded="true"]{@include bold;}//common.scss mixin사용
|
|
}
|
|
}
|
|
|
|
}
|
|
button{
|
|
display:block;
|
|
padding:0 0 0 35px;
|
|
color:rgb(var(--bs-white));
|
|
transition: 0.2s;
|
|
&:hover{
|
|
color:rgb(var(--bs-red-lava));
|
|
}
|
|
> i.bi {
|
|
display:inline-block;
|
|
margin:5px 12px 0 -36px;
|
|
vertical-align:middle;
|
|
font-size:110%;
|
|
}
|
|
}
|
|
.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:rgb(var(--bs-gray-600));
|
|
transition: 0.3s;
|
|
&:hover{
|
|
color:rgb(var(--bs-red-lava));
|
|
text-indent: 0.4rem;
|
|
}
|
|
}
|
|
.active{
|
|
border-bottom:2px solid rgb(var(--bs-coral-light));
|
|
color:rgb(var(--bs-red-primary));
|
|
}
|
|
.active:before{
|
|
content:'';
|
|
position:absolute;
|
|
top:6px;
|
|
left:0;
|
|
width:3px;
|
|
height:3px;
|
|
border-radius:50%;
|
|
background:rgb(var(--bs-red-primary));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*이벤트 > 상세 페이지 버튼*/
|
|
.btn-wrap a {
|
|
button.btn-outline-danger{
|
|
padding:var(--bs-btn-padding-y) 15px;
|
|
// color:rgb(var(--bs-black));
|
|
border-radius: 14px;
|
|
&:hover{
|
|
color:var(--bs-btn-hover-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.section.position-relative{
|
|
.btn-wrap{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
a {
|
|
margin:0 0 0 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-contents-wrap{
|
|
flex:1;
|
|
padding:70px 5.7708vw;
|
|
margin-left:40px;
|
|
}
|
|
|
|
.ad-list{
|
|
.row{
|
|
text-align:left;
|
|
margin-right: 0;
|
|
}
|
|
.row:not(:first-child){
|
|
margin-top:24px;
|
|
}
|
|
.type{
|
|
flex:1;
|
|
margin-right:12px;
|
|
padding:2vw 2vw;
|
|
border:1px solid rgb(var(--bs-gray-dust));
|
|
border-radius:10px;
|
|
background:rgb(var(--bs-white));
|
|
}
|
|
.btn-more{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:143px;
|
|
color:rgb(var(--bs-white));
|
|
border-radius:10px;
|
|
background:rgb(var(--bs-dark-metal));
|
|
span{
|
|
padding:30px 0 0;
|
|
@include bg('ico_arrow.png', center, 0);//var.scss
|
|
}
|
|
}
|
|
.btn-primary{
|
|
background:rgb(var(--bs-red-primary));
|
|
}
|
|
.summary{
|
|
display:flex;
|
|
margin:0 0 28px;
|
|
strong{
|
|
min-width:210px;
|
|
margin:0 45px 0 0;
|
|
font-size:1.750rem;
|
|
@include bold;//var.scss
|
|
}
|
|
i{
|
|
display:inline-block;
|
|
width:28px;
|
|
height:28px;
|
|
margin:0 6px 0 0;
|
|
vertical-align:top;
|
|
}
|
|
.facebook{
|
|
@include bg('ico_facebook.png', center, 0);//var.scss
|
|
}
|
|
.kakao{
|
|
@include bg('ico_kakao.png', center, 0);//var.scss
|
|
}
|
|
.google{
|
|
@include bg('ico_google.png', center, 0);//var.scss
|
|
}
|
|
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;//var.scss
|
|
}
|
|
.percentage{
|
|
dd{
|
|
color:rgb(var(--bs-red-primary));
|
|
}
|
|
}
|
|
}
|
|
.ad-detail-info{
|
|
.col{
|
|
dt{
|
|
margin-bottom: 5px;
|
|
}
|
|
dd{
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
.detail{
|
|
dl{
|
|
box-sizing:border-box;
|
|
margin:0 22px 0 0;
|
|
padding:7px 10px;
|
|
text-align:left;
|
|
background:rgb(var(--bs-white-porcelain));
|
|
}
|
|
dd{
|
|
margin:8px 0 0;
|
|
color:rgb(var(--bs-gray-600));
|
|
}
|
|
}
|
|
}
|
|
.dayOff-contanier{
|
|
.form-select{font-size: 0.9rem;}
|
|
}
|
|
|
|
|
|
|
|
$input-pd:1.25rem; //20px
|
|
$icon-pd:3.75rem; //60px
|
|
|
|
@mixin effect($second:0.3s) {
|
|
transform: translateY(150%); visibility:hidden; transition: all linear $second;
|
|
&.effect{transform: translateY(0%); visibility:visible;}
|
|
}
|
|
|
|
|
|
//로그인,가입하기
|
|
.account-container{
|
|
margin:0 auto;
|
|
.card{
|
|
margin:7% auto 0;
|
|
--bs-card-border-color:transparent;
|
|
--bs-card-bg:inherit; max-width: 500px;
|
|
}
|
|
.card-title{
|
|
font-size:1.5rem;
|
|
margin:2.5rem 0;
|
|
}
|
|
.card-body{
|
|
padding:0;
|
|
}
|
|
.btn-outline-primary{
|
|
display: block;
|
|
width:100%;
|
|
margin-top:1.5rem;
|
|
border-radius:14px;
|
|
height:4.375rem;
|
|
text-align: center;
|
|
font-size:1.25rem;
|
|
--bs-btn-color:rgb(var(--bs-red-primary));
|
|
--bs-btn-border-color:rgb(var(--bs-red-primary));
|
|
&:hover{
|
|
--bs-btn-hover-bg:rgb(var(--bs-red-primary));
|
|
--bs-btn-hover-border-color:rgb(var(--bs-red-primary));
|
|
}
|
|
&:active{
|
|
background-color:var(--bs-btn-hover-bg);
|
|
border-color:var(--bs-btn-hover-bg);
|
|
}
|
|
}
|
|
|
|
form{
|
|
> div{transition:all linear 0.5s; @include effect;
|
|
&.effect {justify-content:flex-start;}
|
|
i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem; color:rgb(var(--bs-gray-boulder));}
|
|
}
|
|
.form-control{width:100%;height:4.375rem;padding:0 3.4rem;text-align:left;border-radius:14px;border: 1px solid rgb(var(--bs-gray-border));background-color: rgb(var(--bs-gray-softPeach));
|
|
&:-webkit-autofill,
|
|
&:-internal-autofill-selected {transition:background-color 5000s ease-in-out 0s;}
|
|
}
|
|
.form-check{
|
|
.form-check-input{margin-top:0;}
|
|
}
|
|
.icon a{
|
|
color:rgb(var(--bs-gray-boulder));
|
|
span.material-symbols-outlined{font-size:130%; vertical-align: middle; padding-right:0.25rem;}
|
|
&:hover{font-weight: 900; transition:0.2s;
|
|
span.material-symbols-outlined{transform: scale(1.4);}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//마이페이지
|
|
.myPage-container{
|
|
h1{
|
|
font-size:180%;
|
|
font-weight:bold;
|
|
}
|
|
.container{
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.card{
|
|
.card-body{
|
|
dl{
|
|
display:flex;
|
|
justify-content:flex-start;
|
|
margin:1rem 0;
|
|
align-items:center;
|
|
dt{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
width:110px;
|
|
padding-right:10px;
|
|
position:relative;
|
|
margin-right:0.5rem;
|
|
&:after{
|
|
content:':';
|
|
position:absolute;
|
|
right:0;
|
|
top:0;
|
|
}
|
|
}
|
|
dd{
|
|
flex:1;
|
|
}
|
|
}
|
|
&::after{content: ''; display: block; clear: both;}
|
|
}
|
|
}
|
|
button{float:right;}
|
|
}
|
|
.user-nav p{display: none;}
|
|
|
|
// 마이페이지&로그아웃 아이콘 변환
|
|
.util-nav{
|
|
display:block;
|
|
width:auto;
|
|
margin:0;
|
|
padding:0;
|
|
a {
|
|
display:block;
|
|
margin:25px 0;
|
|
width:40px;
|
|
height:20px;
|
|
transition:all .5s;
|
|
&::before {
|
|
content:'';
|
|
display:block;
|
|
width:40px;
|
|
height:20px;
|
|
margin:0 auto;
|
|
background-size:20px auto;
|
|
}
|
|
&:first-of-type, &:last-of-type {
|
|
&::before{
|
|
background-repeat:no-repeat;
|
|
background-position:50%, 0;
|
|
}
|
|
}
|
|
&:first-of-type {
|
|
&::before{
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
}
|
|
&:last-of-type {
|
|
&::before{
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-power' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 1v7h1V1z'/%3E%3Cpath d='M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
span{
|
|
display:none;
|
|
}
|
|
}
|
|
&.active {
|
|
display: flex;
|
|
justify-content:space-between;
|
|
width:240px;
|
|
padding:10px 40px 10px;
|
|
a{
|
|
display:inilne;
|
|
width:auto;
|
|
margin:0;
|
|
&::before {
|
|
content:none;
|
|
}
|
|
span {
|
|
display:block;
|
|
font-size:0.813rem;
|
|
color:rgb(var(--bs-silver-aluminium));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//메인페이지
|
|
.main-contents-wrap{
|
|
.ad-list{
|
|
.type{
|
|
transition: 0.4s;
|
|
&:hover{box-shadow:2px 2px 15px rgb(var(--bs-gray-pastel));}
|
|
}
|
|
.btn-more{transition:0.4s;
|
|
&:hover{
|
|
span{transition:0.2s; animation:moreBtn 1.3s infinite linear alternate;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//footer
|
|
.footer-info{
|
|
padding:1% 0;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
flex-direction:column;
|
|
font-size:0.75rem;
|
|
color:rgb(var(--bs-gray-boulder));
|
|
border-top:1px solid rgb(var(--bs-gray-soft));
|
|
background-color:rgb(var(--bs-gray-softPeach));
|
|
& > .footer-info-business {
|
|
margin:0 0 5px;
|
|
}
|
|
}
|
|
|
|
@include x-large{//1400px
|
|
.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;}
|
|
}
|
|
}
|
|
.btn-top{
|
|
span{display:none;}
|
|
}
|
|
}
|
|
@include large{//1200px
|
|
.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:rgb(var(--bs-dark-metal)); background:none;
|
|
span{padding:0; background:none;}
|
|
}
|
|
}
|
|
//메인페이지
|
|
.main-contents-wrap{
|
|
.ad-list{
|
|
.type:hover+.btn-more, .type:focus+.btn-more, .type:target+.btn-more{
|
|
span{animation:none;}
|
|
&::after{display:block; content:'더 보기'; position: absolute; bottom:-100%; left:5px; animation:moreBtn_mo .3s linear alternate; font-size:0.8rem; color:rgb(var(--bs-dark-metal));font-weight: bold;}
|
|
}
|
|
.btn-more{
|
|
width:auto;
|
|
background:rgb(var(--bs-dark-metal));
|
|
padding:5px 14px;
|
|
border-radius:4px;
|
|
span{
|
|
padding:0;
|
|
// background:url("/img/ico_arrow.png") no-repeat center 0;
|
|
color:transparent;
|
|
@include bg('ico_arrow.png', center, 0);
|
|
width:1.3rem;
|
|
height:0.85rem;
|
|
background-size:contain;
|
|
}
|
|
}
|
|
.btn-primary{background:rgb(var(--bs-red-primary));}
|
|
}
|
|
}
|
|
}
|
|
@include medium{//1024px
|
|
.wrap{min-width:580px;}
|
|
.main-contents-wrap{padding:30px 30px 30px 70px;margin-left:1em;}
|
|
.left-side{
|
|
height:100%;
|
|
padding:13px 0 10px;
|
|
.btn-menu{
|
|
top:13px;
|
|
}
|
|
}
|
|
.nav-wrap{
|
|
margin-top:20px;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
scroll-behavior:smooth;
|
|
.nav{width:240px;
|
|
> li {
|
|
padding:15px 0 0 12px;
|
|
}
|
|
> li:not(:last-child){
|
|
margin:0 0 10px;
|
|
padding:15px 0 0 13px;
|
|
}
|
|
> li:last-child{
|
|
margin:0 0 20px;
|
|
}
|
|
}
|
|
}
|
|
.util-nav{
|
|
a {
|
|
margin:40% 0 0;
|
|
}
|
|
&.active {
|
|
a{
|
|
&::before {
|
|
content:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ad-list{
|
|
.type{margin:0;}
|
|
}
|
|
}
|
|
@include small{//768px
|
|
.section.position-relative {
|
|
.btn-wrap{justify-content:flex-start;}
|
|
}
|
|
}
|