ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

로그인- 반응형(inputbox 수정)

Browse Source
This commit is contained in:
khk 2020-02-05 11:46:16 +09:00
parent eb4dfdc6e5
commit fb5dda3eb9
4 changed files with 76 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
View File

@ -3,6 +3,12 @@ $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;
@ -84,7 +90,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transform: scale(0.70);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
opacity $time/4 step-end;
opacity: 0;
@ -264,52 +270,60 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
::ng-deep .login-form-box {
position: absolute;
width: 30vw;
width: 26vw;
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) {
@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 {
&: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;
}
padding-top: 20px;
.mat-form-field-wrapper {
padding-bottom: 0;
.mat-form-field-infix {
padding-top: 0;
border: 0;
}
.mat-form-field-label-wrapper {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
font-size: 0.9em;
top: -1em;
}
top: -1.4em;
}
.mat-form-field-subscript-wrapper {
.mat-error {
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
.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;
}
}
}
}
&.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;
}
}
}
}
.error-container {
padding-top: 10px;
}
}

1
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -275,6 +275,7 @@ $daesang-grey: (
cursor: pointer;
}
//snackbar
.cdk-global-overlay-wrapper {
align-items: center !important;
justify-content: center !important;

37
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
View File

@ -3,15 +3,22 @@ $tablet-l-width: 1024px;
$tablet-s-width: 768px;
$mob-l-width: 640px;
$login-max-height: 800px;
@mixin desktop-m {
@media screen and (max-width: #{$desktop-l-width}) {
@content;
}
}
// 태블릿
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) {
@media screen and (max-width: #{$tablet-l-width}) {
@content;
}
}
// 모바일 large
@mixin mob-large {
@mixin mob-l {
@media screen and (max-width: #{$mob-l-width}) {
@content;
}
@ -31,7 +38,7 @@ $login-max-height: 800px;
font-size: 14px;
.mat-title {
margin: 10px 0 40px 0;
margin: 10px 0 10px 0;
text-indent: -10000000px;
width: 140px;
height: 140px;
@ -39,6 +46,7 @@ $login-max-height: 800px;
display: inline-flex;
background-size: 100% auto;
flex: 1 1 auto;
background-position-x: center;
}
form {
@ -47,10 +55,10 @@ $login-max-height: 800px;
mat-form-field {
width: 100%;
&.login-id {
margin-bottom: 10px;
&.login-pw {
margin-top: 10px;
@media screen and (max-width: #{$tablet-s-width}) {
margin-bottom: 0;
margin-top: 0;
}
}
}
@ -130,8 +138,9 @@ $login-max-height: 800px;
opacity: 0.7;
padding: 6px;
border-radius: 100px;
width: 68%;
color: #2d3a4a;
width: 72%;
color: #333333;
font-size: 0.86em;
&:hover {
opacity: 1;
}
@ -146,8 +155,13 @@ $login-max-height: 800px;
}
}
}
// 모바일 large
@include mob-large {
@include desktop-m {
.login-form {
.mat-title {
background-size: 86% auto;
}
}
}
@include tab {
@ -173,7 +187,8 @@ $login-max-height: 800px;
width: 100%;
margin-left: -12%;
font-size: 0.9em;
padding: 6px;
padding: 0px;
line-height: 3em;
}
}
}

7
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -11,8 +11,8 @@ $tablet-l-width: 1024px;
display: inline-flex;
margin-right: 20px;
justify-items: center;
width: 80px;
justify-content: space-between;
flex: 0 0 auto;
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
margin-right: 10px;
}
@ -20,8 +20,11 @@ $tablet-l-width: 1024px;
width: 24px;
height: 24px;
line-height: normal;
margin-right: 6px;
margin-right: 12px;
color: rgb(0, 0, 0, 0.7);
@media screen and (max-width: #{$tablet-l-width}) {
margin-right: 6px;
}
.mat-icon {
font-size: 20px;
color: rgb(0, 0, 0, 0.87);