로그인 (미디어쿼리적용)
This commit is contained in:
khk
parent
41fb1b14a0
commit
9c82e023e2
|
|
@ -1,3 +1,8 @@
|
|||
$desktop-l-width: 1440px;
|
||||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
$mob-l-width: 640px;
|
||||
|
||||
.login {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
|
|
@ -37,16 +42,16 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $main;
|
||||
overflow: hidden;
|
||||
|
||||
&_wrap {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transform: translateX(100vw);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(100%);
|
||||
top: 0%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
|
|
@ -135,6 +140,9 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
&_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;
|
||||
|
|
@ -146,7 +154,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
border-radius: 100px;
|
||||
color: #00dbed;
|
||||
width: $base * 5;
|
||||
|
||||
// next버튼 숨김
|
||||
display: none;
|
||||
&:before {
|
||||
content: '';
|
||||
border-top: 1px solid white;
|
||||
|
|
@ -170,8 +179,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
&_slide {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: transform $time/3 $ease-in-out;
|
||||
transition-delay: $time/3;
|
||||
pointer-events: none;
|
||||
|
|
@ -192,7 +201,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
transition-delay: $time/2 !important;
|
||||
}
|
||||
.slider_inner {
|
||||
transform: scale(0.6);
|
||||
transform: scale(0.7);
|
||||
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
|
|
@ -255,19 +264,50 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
|
||||
::ng-deep .login-form-box {
|
||||
position: absolute;
|
||||
height: 60vh;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
width: 30vw;
|
||||
height: 70%;
|
||||
top: 15%;
|
||||
right: 15%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
width: 34vw;
|
||||
}
|
||||
.mat-form-field {
|
||||
&:last-child {
|
||||
&:last-child,
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mat-form-field-infix {
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
input {
|
||||
line-height: 1em;
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
.mat-form-field-label-wrapper {
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
font-size: 0.9em;
|
||||
top: -1em;
|
||||
}
|
||||
}
|
||||
.mat-form-field-subscript-wrapper {
|
||||
.mat-error {
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mat-focused,
|
||||
&:not(.mat-form-field-hide-placeholder) {
|
||||
.mat-form-field-label-wrapper {
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,10 +111,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
this.protocolService.disconnect();
|
||||
this.store.dispatch(logoutInitialize());
|
||||
|
||||
this.rotateInfomationIntervalObject = setInterval(() => {
|
||||
/*this.rotateInfomationIntervalObject = setInterval(() => {
|
||||
this.rotateInfomationIndex =
|
||||
(this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
|
||||
}, 8000);
|
||||
}, 8000);*/
|
||||
|
||||
this.defatulLoginBtnText = this.translateService.instant('accounts.login');
|
||||
this.defatulWaitingTime = 5 * 60; // sec
|
||||
|
|
|
|||
|
|
@ -1,7 +1,38 @@
|
|||
$desktop-l-width: 1440px;
|
||||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
$mob-l-width: 640px;
|
||||
$login-max-height: 800px;
|
||||
// 태블릿
|
||||
@mixin tab {
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일 large
|
||||
@mixin mob-large {
|
||||
@media screen and (max-width: #{$mob-l-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include tab {
|
||||
.login-form {
|
||||
width: 34vw;
|
||||
min-width: 34vw;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.mat-title {
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
position: relative;
|
||||
transform: scale(1);
|
||||
width: 540px;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -9,14 +40,6 @@
|
|||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px;
|
||||
@media all and (max-height: 800px), (max-width: 1400px) {
|
||||
width: 380px;
|
||||
min-width: 380px;
|
||||
}
|
||||
@media all and (max-height: 1000px), (max-width: 1600px) {
|
||||
width: 420px;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
.mat-title {
|
||||
margin: 10px 0 40px 0;
|
||||
|
|
@ -28,11 +51,10 @@
|
|||
display: inline-flex;
|
||||
background-size: 100% auto;
|
||||
flex: 1 1 auto;
|
||||
@media all and (max-height: 800px), (max-width: 1400px) {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
/*@media all and (max-height: 800px), (max-width: 1400px) {
|
||||
width: 14vh;
|
||||
margin: 10px 0 10px 0;
|
||||
}*/
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -54,7 +76,7 @@
|
|||
}
|
||||
|
||||
.auto-login {
|
||||
font-size: 13px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
|
@ -134,3 +156,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// 모바일 large
|
||||
@include mob-large {
|
||||
}
|
||||
|
||||
@include tab {
|
||||
.login-form {
|
||||
font-size: 0.9em;
|
||||
padding: 12%;
|
||||
.mat-title {
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
.mat-form-field .mat-form-field-infix input {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.policy {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-left: -12%;
|
||||
font-size: 0.9em;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user