Jaybe
101 lines
3.1 KiB
SCSS
101 lines
3.1 KiB
SCSS
$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;} |