init
This commit is contained in:
Jaybe
@@ -0,0 +1,101 @@
|
||||
$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;
|
||||
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;}
|
||||
@@ -0,0 +1,128 @@
|
||||
|
||||
@mixin chk_input { //chckbox input style
|
||||
width:1px;
|
||||
height:1px;
|
||||
position:absolute;
|
||||
right:0;
|
||||
text-indent: -999px;
|
||||
&:checked + label{
|
||||
border-color: rgb(var(--bs-red-origin));
|
||||
}
|
||||
&:checked + label i.bi-check2::before {
|
||||
content:"\f26f";
|
||||
color:rgb(var(--bs-red-origin));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chk_label($wd:20px,$h:20px){//chckbox label style
|
||||
width:$wd;
|
||||
height:$h;
|
||||
border-radius:50%;
|
||||
border:1px solid rgb(var(--bs-black));
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
&:hover{
|
||||
animation:flash 2s infinite;
|
||||
}
|
||||
i{
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.agree-container{
|
||||
margin:0 auto;
|
||||
.card{
|
||||
max-width: 500px;
|
||||
margin:0 auto;
|
||||
--bs-card-border-color:transparent;
|
||||
--bs-card-bg:inherit;
|
||||
}
|
||||
.card-title{
|
||||
font-size:1.5rem;
|
||||
margin:2.5rem 0;
|
||||
}
|
||||
.card-body{
|
||||
padding:0;
|
||||
}
|
||||
button:has(input[name="chk_all"]){
|
||||
width:100%;
|
||||
height:4.375rem;
|
||||
position:relative;
|
||||
padding:5px;
|
||||
margin-bottom:3.12rem;
|
||||
background-color:rgb(var(--bs-gray-softPeach));
|
||||
border-radius:14px;
|
||||
font-size:1.1rem;
|
||||
transition:all 0.2s ease-out;
|
||||
&:hover{
|
||||
box-shadow: 5px 5px 15px rgb(var(--bs-gray-border));
|
||||
transition:all 0.2s ease-out;
|
||||
}
|
||||
input{
|
||||
@include chk_input;
|
||||
}
|
||||
label{
|
||||
@include chk_label;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.agree-box{
|
||||
margin: 0 auto;
|
||||
position:relative;
|
||||
h2{
|
||||
padding-left:0.5rem;
|
||||
font-size:1.1rem;
|
||||
span{
|
||||
color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
}
|
||||
input{
|
||||
@include chk_input;
|
||||
}
|
||||
label{
|
||||
@include chk_label;
|
||||
}
|
||||
}
|
||||
textarea{
|
||||
overflow-y:auto;
|
||||
width:100%;
|
||||
height:9.37rem;
|
||||
margin:1.5rem auto;
|
||||
background-color:inherit;
|
||||
border-radius:8px;
|
||||
border:1px solid rgb(var(--bs-gray-border));
|
||||
line-height: 1.4;
|
||||
font-size:90%;
|
||||
color:rgb(var(--bs-gray-600));
|
||||
}
|
||||
.row:has(a.confirm_agree){
|
||||
margin:0;
|
||||
a.confirm_agree{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:4.375rem;
|
||||
margin-top:1.5rem;
|
||||
border-radius:14px;
|
||||
line-height:4.375rem;
|
||||
text-align:center;
|
||||
background-color:rgb(var(--bs-red-primary));
|
||||
font-size:1.25rem;
|
||||
color:rgb(var(--bs-white));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 반응형 사용
|
||||
@include mobile-500{
|
||||
.agree-container{
|
||||
.agree-box{
|
||||
label{
|
||||
i{
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.siteMap-container{
|
||||
.sitemap-wrap{display: flex; flex-wrap:wrap; position: relative;
|
||||
&::after{display: block; content: ''; position: absolute; top:4%; left: 50%; width: 2px; height: 92%; background-color: rgb(var(--bs-red-primary));}
|
||||
}
|
||||
|
||||
.section + .section{margin:0;}
|
||||
.section{width:48%; padding:5px;
|
||||
&:nth-child(odd){margin:3rem 2% 3rem 0;}
|
||||
&:nth-child(even){margin:3rem 0 3rem 2%;}
|
||||
|
||||
.content-title::after{display: none;}
|
||||
}
|
||||
|
||||
|
||||
.client-list .row .col{width:25%;
|
||||
button{ transition:all linear 0.2s;
|
||||
&:hover{background-color: rgb(var(--bs-red-primary)); color: rgb(var(--bs-white)); border-color: transparent; transition:all linear 0.2s;
|
||||
a{color:inherit;}
|
||||
}
|
||||
a{display: block;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile-500{
|
||||
.siteMap-container{
|
||||
.client-list .row .col{width:50%;}
|
||||
.client-list .row .col button{padding:0.6rem 0.7rem; font-size:90%;}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
// 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{
|
||||
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lepcha&display=swap');
|
||||
|
||||
$input-pd:1.25rem; //20px
|
||||
$icon-pd:3.75rem; //60px
|
||||
$boder-radius:1.875rem; //30px
|
||||
$theme-color: rgba(var(--bs-brown-quicksand), 0.8);
|
||||
$theme-color02:rgb(var(--bs-blue-soft));
|
||||
|
||||
@mixin effect($second:0.3s) {
|
||||
transform: translateY(150%); visibility:hidden; transition: all linear $second;
|
||||
&.effect{transform: translateY(0%); visibility:visible;}
|
||||
}
|
||||
// 로그인 시안 A
|
||||
.exam-container{height: 100vh; text-align: center; color:rgb(var(--bs-white)); background: linear-gradient(339deg, rgba(var(--bs-dark-green),0.8) 0%, rgb(var(--bs-orange-sand)) 100%, rgb(var(--bs-brown-taupe)) 50%); font-family: 'Noto Sans Lepcha', sans-serif;
|
||||
|
||||
.card{--bs-card-bg:inherit; width:100%; max-width:505px; border:none; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
|
||||
.card-body{--bs-card-bg: inherit;
|
||||
.card-title{font-size:3rem; font-weight:900; margin-bottom:3rem;}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
input.form-control{color:rgb(var(--bs-white)); background-color:rgba(var(--bs-brown-taupe), 0.3) !important; border-color:transparent; border-radius: $boder-radius; padding:$input-pd $input-pd $input-pd $icon-pd; margin-bottom:24px;
|
||||
&::placeholder{color:rgb(var(--bs-white));}
|
||||
&:focus{box-shadow:0 0 0 0.25rem $theme-color;}
|
||||
&:-webkit-autofill,
|
||||
&:-internal-autofill-selected {transition: background-color 5000s ease-in-out 0s; color: rgb(var(--bs-white)); -webkit-text-fill-color: rgb(var(--bs-white));}
|
||||
}
|
||||
|
||||
|
||||
> div{transition:all linear 0.5s; @include effect;
|
||||
i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem;}
|
||||
}
|
||||
|
||||
.form-check{text-align:left; padding-left: 2rem;
|
||||
span{display: inline-block; vertical-align: sub;}
|
||||
}
|
||||
.forgot{position: absolute; top:50%; transform: translateY(-50%); right:5%;
|
||||
&:hover{animation: flash 2s infinite;}
|
||||
}
|
||||
|
||||
a:hover,a:active{color:$theme-color;}
|
||||
}
|
||||
|
||||
.btn-primary{background-color:transparent; border-color:rgb(var(--bs-brown-quicksand)); border-radius: $boder-radius; padding:$input-pd; width:100%;
|
||||
&:active{--bs-btn-active-bg:rgb(var(--bs-white)); --bs-btn-active-color: rgb(var(--bs-brown-taupe)); border-color:transparent;}
|
||||
}
|
||||
.text-start{position: relative; @include effect;}
|
||||
|
||||
}
|
||||
|
||||
// 로그인 시안 B
|
||||
.exam02-container{height:100%; background-color:rgb(var(--bs-gray-100)); padding-bottom:5%;
|
||||
.btn{border-radius: 30px; font-size:0.8rem; margin:2rem auto; cursor: pointer;
|
||||
&:hover{background-color:inherit; color:var(--bs-btn-color);}
|
||||
|
||||
button{padding:0.9vw 2.2vw; position:relative;
|
||||
.item{position: absolute; top:3%; left: 0; width:3rem; height:3rem; background-color: $theme-color02; border-radius: 50%;}
|
||||
}
|
||||
}
|
||||
.card{width:80%; max-width:550px; border:none; padding:8% 5% 5%; box-shadow: 5px 5px 10px rgb(var(--bs-gray-pastel)); border-radius: 0 30px 30px 0; background: url('/img/login_bg.png') no-repeat 50%; background-size:cover;
|
||||
.card-body{--bs-card-bg: inherit;
|
||||
.card-title{font-size:1.8rem; font-weight:900; margin-bottom:3rem; text-align: center; color:$theme-color02; letter-spacing: 4px;}
|
||||
}
|
||||
}
|
||||
input:-internal-autofill-selected{background-color: transparent;}
|
||||
|
||||
|
||||
form {
|
||||
.form-control{
|
||||
background-color: transparent; border-width:0px 0px 1px 0px; border-color:rgb(var(--bs-black)); border-radius:0px; padding:0.93rem 0.75rem;
|
||||
}
|
||||
> div p {font-size:0.9rem; padding:0.75rem; font-weight:800; color:rgb(var(--bs-gray-cottonSeed));}
|
||||
|
||||
.btn-primary{width:100%; margin:4rem 0 2rem; padding:15px 0; border-radius: 30px; background-color:$theme-color02;}
|
||||
|
||||
.forgot{color:$theme-color02;}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// 가입하기 시안 B
|
||||
.exam02-container.toggle{
|
||||
&::after{display:block; content: ''; clear: both;}
|
||||
.btn{float:right;}
|
||||
.card{float:right; clear:both; box-shadow:0px 1px 15px rgb(var(--bs-gray-pastel)); border-radius:30px 0 0 30px;}
|
||||
}
|
||||
|
||||
//drag event
|
||||
.drag-over {border: dashed 3px rgb(var(--bs-white));}
|
||||
.hide {display: none;}
|
||||
|
||||
@keyframes flash { //text 깜빡임
|
||||
0%, 20%, 40%, to { opacity: 1; } 10%, 30% { opacity: 0; }
|
||||
}
|
||||
|
||||
// 반응형 사용
|
||||
@include mobile-500{
|
||||
.exam-container {
|
||||
.card {
|
||||
.card-body {
|
||||
.card-title{margin-bottom:2rem;}
|
||||
}
|
||||
}
|
||||
|
||||
form {padding:0 5%;
|
||||
> div {
|
||||
i{top:54%; font-size:1.2rem;}
|
||||
}
|
||||
.forgot {font-size:0.95rem;}
|
||||
}
|
||||
}
|
||||
|
||||
// login 시안 B
|
||||
.wrap:has(.exam02-container){min-width:unset;}
|
||||
.exam02-container{
|
||||
.btn{
|
||||
button{
|
||||
.item{width:2rem; height:2rem; left:-3%;}
|
||||
}
|
||||
}
|
||||
.card{width:85%;
|
||||
.card-body{
|
||||
.card-title{margin-bottom:2rem;}
|
||||
}
|
||||
}
|
||||
form{
|
||||
.btn-primary{margin:3vw 0 2rem;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mobile-415{
|
||||
$input-pd:0.93rem;
|
||||
$icon-pd:3.125rem;
|
||||
|
||||
.exam-container {
|
||||
form {
|
||||
.form-control {
|
||||
padding:$input-pd $input-pd $input-pd $icon-pd;
|
||||
}
|
||||
.btn-primary{
|
||||
padding:$input-pd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exam02-container{
|
||||
.btn{
|
||||
button{
|
||||
.item{width:1.8rem; height:1.8rem;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user