간단 설명
@charset "UTF-8";
/* common */
.dialog .dim,
#dim {background-color:#000; position:fixed; left:0; top:0; right:0; bottom:0; opacity:0; z-index:-1; pointer-events:none;
-webkit-transition:opacity .3s ease-in .2s, z-index 0s ease .5s;
transition: opacity .3s ease-in .2s, z-index 0s ease .5s;
}
.dialog.active .dim,
#dim.active {
z-index:150;
opacity:.7;
-webkit-transition:opacity .3s ease 0s, z-index 0s;
transition:opacity .3s ease 0s, z-index 0s;
-webkit-pointer-events:auto;
pointer-events:auto;
}
/* Accordion : 트랜지션 추가 예정 */
.accordion .content .item {display:none;}
.accordion .content.active .item {display:block;}
/* Transition-nav */
#gnb {
width:80%;
will-change: transform;
visibility:hidden;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
transition: transform .5s ease, visibility 0s linear .5s;
}
#container.active #gnb {
visibility:visible;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s;
transition:-webkit-transform .5s ease, visibility 0s linear 0s;
}
.menuClose {
visibility:hidden;
position:fixed; left:85%; top:17px;
z-index:160;
opacity:0;
pointer-events:none;
width:17px; height:17px;
font:0/0 a; text-align:center;
background-image:url('/static/images/common/icon_sprite.png');
background-position:-125px 0;
background-repeat:no-repeat;
background-size:360px auto;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s, opacity 0.3s;
transition: transform .5s ease, visibility 0s linear .5s, opacity 0.3s;
}
#container.active .menuClose {
visibility:visible;
opacity:1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;
transition:-webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;
}
/* Dialog */
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.dialog,
.dim {
display:block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.toast,
.dialog {
z-index:250;
position: fixed;
pointer-events: none;
/*-webkit-visibility: hidden;
visibility: hidden; 이거 쓰면 딤 사라질때 띡 사라짐*/
}
.dialog.active {
/*-webkit-visibility: visible;
visibility:visible;*/
}
.dialog a, .dialog button {
color: #74716D;
text-decoration: none;
outline: none;
}
.dialog a:hover, .dialog a:focus {
outline: none;
}
.btnDialog {
font-size:2rem;
padding:1rem 2.5rem;
color:#fff;
background-color:cadetblue;
}
.btnDialog:active,
.btnDialog:hover {
background-color:darkcyan;
}
.dialog .layout {
z-index:300;
background-color:#fff;
position:relative;
pointer-events:auto;
}
.dialog.active .layout {
opacity:1;
}
/* type1 : 아래에서 위로 서서히 */
.dialog.type1 .layout {
}
.dialog.type1.active .layout {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-name:dia1-open;
animation-name:dia1-open;
}
@-webkit-keyframes dia1-open {
0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); }
100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes dia1-open {
0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes diacon1 {
0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); }
100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes diacon1 {
0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
/* type2 : 가운데에서 서서히 나타남 */
.dialog.type2.active .layout {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
.dialog.type2.active .layout {
-webkit-animation-name: dia2-open;
animation-name: dia2-open;
}
@-webkit-keyframes dia2-open {
0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}
@keyframes dia2-open {
0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
/* Dialog toLeft : 오른쪽에서 나타남*/
.dialog.toLeft {
}
.dialog.toLeft .dim {
opacity:0;
-webkit-transition:opacity .5s ease-in .2s;
transition: opacity .5s ease-in .2s;
}
.dialog.toLeft.active .dim {
opacity:.7;
visibility: visible;
-webkit-transition:opacity .5s ease 0s;
transition:opacity .5s ease 0s;
}
.dialog.toLeft .layout {
opacity:1;
z-index:250;
pointer-events:none;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform .5s ease;
transition:transform .5s ease;
}
.dialog.toLeft.active .layout {
pointer-events:auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Dialog page.toTop : 아래에서 맨위까지*/
.dialog.page.toTop {
pointer-events:none;
}
.dialog.page.toTop.active {
pointer-events:auto;
}
.dialog.page.toTop .dim {
opacity:0;
-webkit-transition:opacity .5s ease-in .2s;
transition: opacity .5s ease-in .2s;
}
.dialog.page.toTop.active .dim {
opacity:.7;
-webkit-transition:opacity .5s ease 0s;
transition:opacity .5s ease 0s;
}
.dialog.page.toTop .layout {
opacity:0;
z-index:250;
pointer-events:none;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: all .5s ease;
transition:all .5s ease;
}
.dialog.page.toTop.active .layout {
opacity:1;
pointer-events:auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Dialog toTop : 맨밑에 딱 붙음 */
.dialog.toTop.active {
display:block;
}
.dialog.toTop .layout {
position:fixed; left:0; bottom:0; width:100%;
visibility:hidden;
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 1s;
transition:transform .5s ease, visibility 0s linear 1s;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.dialog.toTop.active .layout {
visibility:visible;
-webkit-transition: -webkit-transform .4s ease, visibility 0s linear 0s;
transition:transform .4s ease, visibility 0s linear 0s;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.dialog.toTop .layout .dialogClose {
display:none;
}
.dialog.toTop.active .layout .dialogClose {
display:block;
}
.dialog.toTop .dim {
opacity:0;
-webkit-transition:opacity .2s ease .4s;
transition: opacity .2s ease .4s;
}
.dialog.toTop.active .dim {
opacity:.7;
-webkit-transition: opacity .2s ease 0s;
transition: opacity .2s ease 0s;
-webkit-pointer-events:auto;
pointer-events:auto;
}
/* Dialog toBottom : 맨위에서 아래로 */
.dialog.toBottom.active {
display:block;
}
.dialog.toBottom .layout {
opacity:0;
z-index:250;
pointer-events:none;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: all .5s ease;
transition:all .5s ease;
}
.dialog.toBottom.active .layout {
opacity:1;
pointer-events:auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*.dialog.toBottom .layout .dialogClose {
display:none;
}
.dialog.toBottom.active .layout .dialogClose {
display:block;
}*/
.dialog.toBottom .dim {
opacity:0;
-webkit-transition:opacity .2s ease .4s;
transition: opacity .2s ease .4s;
}
.dialog.toBottom.active .dim {
opacity:.7;
-webkit-transition: opacity .2s ease 0s;
transition: opacity .2s ease 0s;
-webkit-pointer-events:auto;
pointer-events:auto;
}
.dialog.page .layout {position:relative;}
/* 일회용 Dialog : 나타났다 사라짐. 이건 딤없어야함*/
.toast .layout{
opacity:0;
}
.toast.active .layout {
opacity:1;
animation: animationFrames ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-webkit-animation: animationFrames ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-transition: -webkit-transform .5s ease-in-out;
transition:transform .5s ease-in-out;
}
@keyframes animationFrames{
0% {
opacity:1;
transform: translate3d(0,1500px,0) ;
}
30% {
opacity:1;
transform: translate3d(0,-10px,0) ;
}
60% {
opacity:1;
transform: translate3d(0,10px,0) ;
}
100% {
opacity:0;
transform: translate3d(0,-100%,0) ;
}
}
@-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: translate3d(0,1500px,0) ;
}
30% {
opacity:1;
-webkit-transform: translate3d(0,-10px,0) ;
}
60% {
opacity:1;
-webkit-transform: translate3d(0,10px,0) ;
}
100% {
opacity:0;
-webkit-transform: translate3d(0,-100%,0) ;
}
}
.toast.showAni .layout {
opacity:1;
animation: showAni ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-webkit-animation: showAni ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-transition: -webkit-transform .5s ease-in-out;
transition:transform .5s ease-in-out;
}
@keyframes showAni{
0% {
opacity:1;
transform: translate3d(0,1500px,0) ;
}
30% {
opacity:1;
transform: translate3d(0,-10px,0) ;
}
60% {
opacity:1;
-webkit-transform: translate3d(0,0,0) ;
}
}
@-webkit-keyframes showAni {
0% {
opacity:1;
transform: translate3d(0,1500px,0) ;
}
30% {
opacity:1;
transform: translate3d(0,-10px,0) ;
}
60% {
opacity:1;
-webkit-transform: translate3d(0,0,0) ;
}
}
.toast.hideAni .layout {
opacity:1;
animation: hideAni ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
-webkit-animation: hideAni ease 2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-transition: -webkit-transform .5s ease-in-out;
transition:transform .5s ease-in-out;
}
@keyframes hideAni{
0% {
opacity:1;
-webkit-transform: translate3d(0,0,0) ;
}
30% {
opacity:1;
transform: translate3d(0,10px,0) ;
}
100% {
opacity:0;
transform: translate3d(0,-100%,0) ;
}
}
@-webkit-keyframes hideAni {
0% {
opacity:1;
-webkit-transform: translate3d(0,0,0) ;
}
30% {
opacity:1;
transform: translate3d(0,10px,0) ;
}
100% {
opacity:0;
transform: translate3d(0,-100%,0) ;
}
}
.toast.active .layout {
}
.toast .layout .body {
display:inline-block;
width: 100%;
}
/* Dialog Center */
.dialog.toCenter {}
.dialog.toCenter .dim {position:absolute; opacity:0; display:block;}
.dialog.toCenter.active .dim {opacity:.7;}
.dialog.toCenter .layout {
visibility:hidden;
-webkit-transform:translate3d(0,1000px,0);
transform:translate3d(0,1000px,0);
-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
transition:transform .5s ease, visibility 0s linear .5s;
}
.dialog.toCenter.active .layout {
visibility:visible;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform .4s ease, visibility 0s linear 0s;
transition:-webkit-transform .4s ease, visibility 0s linear 0s;
}
/* 즐겨찾기 아이콘 */
/*
.bookmark.transition,
.bookmark.transition i,
.bookmark.transition i:after {display:inline-block; width:18px; height:18px; vertical-align:top; font:0/0 a; background-repeat:no-repeat; background-position:0 0; background-size:18px auto; pointer-events:none;}
.bookmark.transition {background-image:url('/static/images/common/star_blank_36x36.png'); }
.bookmark.transition i {position:relative; background-image:url('/static/images/common/star_active_36x36.png');}
.bookmark.transition.active i {opacity:1;}
.bookmark.transition i {
opacity:0;
-webkit-transition: all .5s ease;
transition:all .5s ease;
}
.bookmark.transition.active i {
opacity:1;
-webkit-transition: all .5s ease;
transition:all .5s ease;
}
.bookmark.transition i:after {
opacity:0;
position:absolute; left:0; top:0; right:0; bottom:0;
background-image:url('/static/images/common/star_active_36x36.png');
-webkit-transition: all .5s ease;
transition:all .5s ease;
-webkit-animation: bookmark 1s 1 ease;
animation: bookmark 1s 1 ease;
}
.bookmark.transition.active i:after {
content:'';
opacity:1;
position:absolute; left:0; top:0;
-webkit-animation: bookmark 1s 1 ease;
animation: bookmark 1s 1 ease;
}
@-webkit-keyframes bookmark {
0% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
50% { -webkit-transform:scale(1.4); transform:scale(1.4); opacity:1;}
100% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
}*/
'Static > style' 카테고리의 다른 글
shop.css (0) | 2021.02.19 |
---|---|
office.css (0) | 2021.02.19 |
module.css (0) | 2021.02.19 |
member.css (0) | 2021.02.19 |
media_query.css (0) | 2021.02.19 |