354 lines
7.7 KiB
SCSS
354 lines
7.7 KiB
SCSS
$desktop-l-width: 1440px;
|
|
$tablet-l-width: 1024px;
|
|
$tablet-s-width: 768px;
|
|
$mob-l-width: 640px;
|
|
|
|
@mixin tab {
|
|
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
.login {
|
|
width: 100%;
|
|
background-size: cover;
|
|
height: calc(100% - 50px);
|
|
background: #eaeff1;
|
|
margin-top: 50px;
|
|
overflow: hidden;
|
|
/*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
|
background: linear-gradient(to top, #93a3af, #eaeff1);*/
|
|
|
|
.login-wrapper {
|
|
flex: 1 0 auto;
|
|
//background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
|
background-size: 100% auto;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
$main: #777;
|
|
$back: #aaa;
|
|
$accent: hsl(220, 50%, 40%);
|
|
|
|
$sans: 'Open Sans', sans-serif;
|
|
$heebo: 'Heebo', sans-serif;
|
|
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
|
|
|
|
$base: 3vh;
|
|
|
|
$time: 1800ms;
|
|
|
|
$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
|
|
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
|
|
@mixin word-break-keep {
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.slider {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: $main;
|
|
overflow: hidden;
|
|
|
|
&_wrap {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translateX(100%);
|
|
top: 0%;
|
|
left: 0;
|
|
right: auto;
|
|
overflow: hidden;
|
|
transition: transform $time/4 $ease-in-out;
|
|
transform-origin: 0% 50%;
|
|
transition-delay: $time/4;
|
|
opacity: 0;
|
|
&-hacked {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&_back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: auto 100%;
|
|
background-position: center;
|
|
background-repeat: none;
|
|
transition: filter $time/4 $ease-in-out;
|
|
}
|
|
|
|
&_inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0%;
|
|
background-size: auto 133.3333%;
|
|
background-position: center;
|
|
background-repeat: none;
|
|
transform: scale(0.7);
|
|
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
|
|
opacity $time/4 step-end;
|
|
opacity: 0;
|
|
box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
|
|
padding: $base * 3;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
&_header {
|
|
display: flex;
|
|
flex-flow: row;
|
|
width: 40%;
|
|
height: 20px;
|
|
justify-content: center;
|
|
font-size: $base * 0.6;
|
|
color: #ffffff;
|
|
.company-name {
|
|
flex: 0 0 auto;
|
|
padding-right: 20px;
|
|
}
|
|
.h-line {
|
|
flex: 1 1 auto;
|
|
align-self: center;
|
|
height: 2px;
|
|
border-bottom: 1px solid #ffffff;
|
|
}
|
|
}
|
|
&_content {
|
|
position: relative;
|
|
top: 64%;
|
|
width: 40%;
|
|
transform: translateY(-50%);
|
|
color: white;
|
|
font-family: $hangul;
|
|
opacity: 0;
|
|
transition: opacity $time/4;
|
|
h1 {
|
|
font-weight: 900;
|
|
font-size: $base * 1.24;
|
|
line-height: 1.2;
|
|
margin-bottom: $base/2;
|
|
pointer-events: none;
|
|
text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
|
|
@include word-break-keep();
|
|
}
|
|
p {
|
|
font-size: $base * 0.64;
|
|
line-height: $base * 0.9;
|
|
margin-bottom: $base/2;
|
|
@include word-break-keep();
|
|
}
|
|
}
|
|
&_link {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
font-family: $heebo;
|
|
font-size: 1.2rem;
|
|
letter-spacing: $base * 0.1;
|
|
font-weight: 100;
|
|
display: block;
|
|
bottom: 10%;
|
|
color: #ffffff;
|
|
padding: 10px 60px 10px 30px;
|
|
border-radius: 100px;
|
|
color: #00dbed;
|
|
width: $base * 5;
|
|
// next버튼 숨김
|
|
display: none;
|
|
&:before {
|
|
content: '';
|
|
border-top: 1px solid white;
|
|
border-right: 1px solid white;
|
|
display: block;
|
|
width: $base/3;
|
|
height: $base/3;
|
|
transform: translateX(0) translateY(-50%) rotate(45deg);
|
|
position: absolute;
|
|
font-family: $heebo;
|
|
font-weight: 100;
|
|
top: 50%;
|
|
left: $base * 4;
|
|
}
|
|
&:hover {
|
|
background-color: #134a67;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
&_slide {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: transform $time/3 $ease-in-out;
|
|
transition-delay: $time/3;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
|
|
&-active {
|
|
transform: translatex(0%);
|
|
z-index: 2;
|
|
.slider_wrap {
|
|
transform: translateX(0);
|
|
transform-origin: 100% 50%;
|
|
opacity: 1;
|
|
animation: none;
|
|
}
|
|
.slider_back {
|
|
filter: blur(#{$base * 0.2});
|
|
transition: filter $time/2 $ease-in-out;
|
|
transition-delay: $time/2 !important;
|
|
}
|
|
.slider_inner {
|
|
transform: scale(0.7);
|
|
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transition: transform $time/2 $ease-in-out,
|
|
box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
|
|
transition-delay: $time/2;
|
|
}
|
|
.slider_content {
|
|
opacity: 1;
|
|
transition-delay: $time * 3/4;
|
|
}
|
|
}
|
|
|
|
&:not(.slider_slide-active) .slider_wrap {
|
|
@keyframes hack {
|
|
0% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateX(-100vw);
|
|
opacity: 1;
|
|
}
|
|
51% {
|
|
transform: translateX(-100vw);
|
|
opacity: 0;
|
|
}
|
|
52% {
|
|
transform: translateX(100vw);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(100vw);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
animation-name: hack;
|
|
animation-duration: $time/2;
|
|
animation-delay: $time/4;
|
|
animation-timing-function: $ease-in-out;
|
|
}
|
|
|
|
&:nth-child(1) .slider_back,
|
|
&:nth-child(1) .slider_inner {
|
|
// background-image: url(/assets/images/login/bg_login01.png);
|
|
//background: #eee;
|
|
}
|
|
&:nth-child(2) .slider_back,
|
|
&:nth-child(2) .slider_inner {
|
|
// background-image: url(/assets/images/login/bg_login02.png);
|
|
//background: #aaa;
|
|
}
|
|
&:nth-child(3) .slider_back,
|
|
&:nth-child(3) .slider_inner {
|
|
// background-image: url(/assets/images/login/bg_login03.png);
|
|
//background: #888;
|
|
}
|
|
}
|
|
}
|
|
|
|
::ng-deep .login-form-box {
|
|
position: absolute;
|
|
width: 26vw;
|
|
height: 70%;
|
|
top: 15%;
|
|
right: 15%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
z-index: 100;
|
|
@media screen and (max-width: #{$desktop-l-width}) {
|
|
width: 28vw;
|
|
}
|
|
|
|
@media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
|
|
width: 34vw;
|
|
}
|
|
.mat-form-field {
|
|
padding-top: 20px;
|
|
.mat-form-field-wrapper {
|
|
padding-bottom: 0;
|
|
.mat-form-field-infix {
|
|
padding-top: 0;
|
|
border: 0;
|
|
}
|
|
.mat-form-field-label-wrapper {
|
|
top: -1.4em;
|
|
}
|
|
.mat-form-field-underline {
|
|
bottom: 0;
|
|
}
|
|
//min-size 반응형 적용
|
|
@include tab {
|
|
.mat-form-field-infix {
|
|
input {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
.mat-form-field-label-wrapper {
|
|
font-size: 0.9em;
|
|
}
|
|
.mat-form-field-subscript-wrapper {
|
|
.mat-error {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
&.mat-focused,
|
|
&:not(.mat-form-field-hide-placeholder) {
|
|
.mat-form-field-label-wrapper {
|
|
font-size: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.error-container {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 1400px) {
|
|
.slider {
|
|
&_content {
|
|
transform: translateY(-50%);
|
|
color: white;
|
|
font-family: $heebo;
|
|
opacity: 0;
|
|
transition: opacity $time/4;
|
|
h1 {
|
|
font-weight: 900;
|
|
font-size: $base * 1.2;
|
|
margin-bottom: $base;
|
|
}
|
|
p {
|
|
display: none;
|
|
}
|
|
}
|
|
&-active {
|
|
.slider_inner {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|