- 스타일 추가 / 수정
This commit is contained in:
minsik
parent
1908432913
commit
f9d1f8e2e0
@ -3,6 +3,7 @@
|
|||||||
height: calc(100vh - 47px);
|
height: calc(100vh - 47px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
.canvas-content {
|
.canvas-content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|||||||
@ -1,18 +1,21 @@
|
|||||||
.wrap{
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 1600px;
|
min-width: 1600px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.content{
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
padding-top: 46px;
|
padding-top: 46px;
|
||||||
|
background-color: #F4F4F7;
|
||||||
}
|
}
|
||||||
|
|
||||||
// header
|
// header
|
||||||
// nav item 공통
|
// nav item 공통
|
||||||
@mixin navitem(){
|
@mixin navitem() {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -23,7 +26,8 @@
|
|||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
transition: color .17s ease-in-out;
|
transition: color .17s ease-in-out;
|
||||||
}
|
}
|
||||||
header{
|
|
||||||
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -33,41 +37,50 @@ header{
|
|||||||
background-color: #1C1C1C;
|
background-color: #1C1C1C;
|
||||||
border-bottom: 1px solid #000;
|
border-bottom: 1px solid #000;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
.header-inner{
|
|
||||||
|
.header-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
.header-right{
|
|
||||||
|
.header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.logo{
|
|
||||||
a{
|
.logo {
|
||||||
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
width: 232px;
|
width: 232px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: url(/static/images/common/Logo.svg)no-repeat center;
|
background: url(/static/images/common/Logo.svg) no-repeat center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
nav{
|
|
||||||
|
nav {
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.nav-list{
|
|
||||||
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.nav-item{
|
|
||||||
|
.nav-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 62px;
|
margin-right: 62px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
a{
|
|
||||||
|
a {
|
||||||
@include navitem;
|
@include navitem;
|
||||||
}
|
}
|
||||||
button{
|
|
||||||
|
button {
|
||||||
@include navitem;
|
@include navitem;
|
||||||
&:after{
|
|
||||||
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -75,14 +88,16 @@ header{
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: url(/static/images/common/nav-arr.svg)no-repeat center;
|
background: url(/static/images/common/nav-arr.svg) no-repeat center;
|
||||||
transition: all .17s ease-in-out;
|
transition: all .17s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:last-child{
|
|
||||||
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.nav-depth2{
|
|
||||||
|
.nav-depth2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% - 2px);
|
top: calc(100% - 2px);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -94,22 +109,27 @@ header{
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: all .17s ease-in-out;
|
transition: all .17s ease-in-out;
|
||||||
.nav-depth2-item{
|
|
||||||
|
.nav-depth2-item {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
transition: all .17s ease-in-out;
|
transition: all .17s ease-in-out;
|
||||||
a{
|
|
||||||
|
a {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
&:last-child{
|
|
||||||
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
&.mouse{
|
|
||||||
|
&.mouse {
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&::before{
|
|
||||||
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
@ -122,24 +142,29 @@ header{
|
|||||||
border-left: 1px solid #464646;
|
border-left: 1px solid #464646;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mouse{
|
|
||||||
> a{
|
&.mouse {
|
||||||
|
> a {
|
||||||
color: rgba(255, 255, 255, 0.30);
|
color: rgba(255, 255, 255, 0.30);
|
||||||
}
|
}
|
||||||
> button{
|
|
||||||
|
> button {
|
||||||
color: rgba(255, 255, 255, 0.30);
|
color: rgba(255, 255, 255, 0.30);
|
||||||
&:after{
|
|
||||||
|
&:after {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
.nav-depth2{
|
&:hover {
|
||||||
|
.nav-depth2 {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
> button{
|
|
||||||
&:after{
|
> button {
|
||||||
|
&:after {
|
||||||
transform: translateY(-50%) rotate(90deg);
|
transform: translateY(-50%) rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -148,12 +173,14 @@ header{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.header-left{
|
|
||||||
|
.header-left {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.profile-box{
|
|
||||||
|
.profile-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -161,12 +188,14 @@ header{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.profile{
|
|
||||||
|
.profile {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
&::after{
|
|
||||||
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -174,11 +203,12 @@ header{
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: url(/static/images/common/profile_icon.svg)no-repeat center;
|
background: url(/static/images/common/profile_icon.svg) no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sign-out-box{
|
|
||||||
|
.sign-out-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -186,12 +216,14 @@ header{
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.sign-out{
|
|
||||||
|
.sign-out {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
&::after{
|
|
||||||
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -199,14 +231,16 @@ header{
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: url(../../public/static/images/common/signout_icon.svg)no-repeat center;
|
background: url(../../public/static/images/common/signout_icon.svg) no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.select-box{
|
|
||||||
|
.select-box {
|
||||||
min-width: 165px;
|
min-width: 165px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
>div{
|
|
||||||
|
> div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
0
src/styles/_main.scss
Normal file
0
src/styles/_main.scss
Normal file
@ -1,13 +1,26 @@
|
|||||||
@keyframes mountpop{
|
@keyframes mountpop {
|
||||||
from{opacity: 0; scale: 0.95;}
|
from {
|
||||||
to{opacity: 1; scale: 1;}
|
opacity: 0;
|
||||||
}
|
scale: 0.95;
|
||||||
@keyframes unmountpop{
|
}
|
||||||
from{opacity: 1; scale: 1;}
|
to {
|
||||||
to{opacity: 0; scale: 0.95;}
|
opacity: 1;
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-pop-wrap{
|
@keyframes unmountpop {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
scale: 0.95;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-pop-wrap {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 200px;
|
top: 200px;
|
||||||
right: 100px;
|
right: 100px;
|
||||||
@ -21,71 +34,113 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #272727;
|
background-color: #272727;
|
||||||
z-index: 9999999;
|
z-index: 9999999;
|
||||||
&.sm{
|
|
||||||
|
&.sm {
|
||||||
max-width: 450px;
|
max-width: 450px;
|
||||||
}
|
}
|
||||||
&.mount{
|
|
||||||
|
&.ssm {
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mount {
|
||||||
animation: mountpop .17s ease-in-out forwards;
|
animation: mountpop .17s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
&.unmount{
|
|
||||||
|
&.unmount {
|
||||||
animation: unmountpop .17s ease-in-out forwards;
|
animation: unmountpop .17s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-head{
|
|
||||||
|
.modal-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 24px;
|
padding: 10px 24px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
h1.title{
|
|
||||||
|
h1.title {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.modal-close{
|
|
||||||
|
.modal-close {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-indent: -999999999px;
|
text-indent: -999999999px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
|
background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-body{
|
|
||||||
|
.modal-body {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
.modal-btn-wrap{
|
|
||||||
|
.modal-btn-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
button{
|
|
||||||
|
button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-check-btn-wrap{
|
|
||||||
|
.modal-check-btn-wrap {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
.check-wrap-title{
|
|
||||||
|
.check-wrap-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
&.light{
|
|
||||||
|
&.light {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.flex-check-box{
|
|
||||||
|
.flex-check-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
&.for2{
|
|
||||||
button{
|
&.for2 {
|
||||||
|
button {
|
||||||
width: calc(50% - 5px);
|
width: calc(50% - 5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.btn {
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: calc(50% - 2.5px);
|
||||||
}
|
}
|
||||||
&.for-line{
|
}
|
||||||
button{
|
}
|
||||||
|
|
||||||
|
&.for-line {
|
||||||
|
button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.outer-line-wrap {
|
||||||
|
border-top: 1px solid #3C3C3C;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,3 +1 @@
|
|||||||
@import '_layout.scss';
|
@import '_main.scss';
|
||||||
@import '_contents.scss';
|
|
||||||
@import '_modal.scss';
|
|
||||||
Loading…
x
Reference in New Issue
Block a user