모바일 화면 - 로그인 페이지 디자인 반영
This commit is contained in:
현성필
@@ -8835,42 +8835,93 @@ select.form-control {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 768px) {
|
||||
.login-page {
|
||||
background: #ebfbff;
|
||||
min-height: calc(100vh - 44px);
|
||||
padding: 40px 20px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
.login-card {
|
||||
padding: 0;
|
||||
}
|
||||
.login-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 24px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.login-message {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.login-form .form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.login-form .form-input {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
border-color: #dadada;
|
||||
}
|
||||
.login-form .form-input::placeholder {
|
||||
font-size: 14px;
|
||||
color: #8c959f;
|
||||
}
|
||||
.login-form .form-checkbox {
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
.login-form .form-checkbox input[type=checkbox] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.login-form .form-checkbox label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: #212529;
|
||||
line-height: 20px;
|
||||
}
|
||||
.login-button {
|
||||
height: 70px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 32px;
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login-links {
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
.login-links a, .login-links .link-separator {
|
||||
.login-links a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
}
|
||||
.login-links .link-separator {
|
||||
font-size: 14px;
|
||||
color: #515961;
|
||||
}
|
||||
.login-alert {
|
||||
max-width: 335px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.account-recovery-page {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -274,54 +274,120 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 576px) {
|
||||
// Responsive adjustments - Figma Mobile Design (sm: 768px)
|
||||
@include respond-to('sm') {
|
||||
.login-page {
|
||||
// Figma: 전체 배경 #ebfbff, 풀 높이
|
||||
background: #ebfbff;
|
||||
min-height: calc(100vh - 44px); // 모바일 헤더 높이 제외
|
||||
padding: 40px 20px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 24px;
|
||||
// Figma: 64px × 64px
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-message {
|
||||
font-size: 18px;
|
||||
// Figma: 14px Regular, #212529
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
// Figma: 335px × 44px, border-radius 8px, border #dadada
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
border-color: #dadada;
|
||||
|
||||
&::placeholder {
|
||||
// Figma: 14px, #8c959f
|
||||
font-size: 14px;
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
// Figma: 우측 정렬
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
gap: 6px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
// Figma: 20px
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
// Figma: 13px
|
||||
font-size: 13px;
|
||||
color: #212529;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 70px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 32px;
|
||||
// Figma: 335px × 44px, #0049b4, 16px Bold, border-radius 8px
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-links {
|
||||
gap: 20px;
|
||||
// Figma: 14px Regular, #515961
|
||||
gap: 12px;
|
||||
|
||||
a, .link-separator {
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
}
|
||||
|
||||
.link-separator {
|
||||
font-size: 14px;
|
||||
color: #515961;
|
||||
}
|
||||
}
|
||||
|
||||
.login-alert {
|
||||
max-width: 335px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user