refactor: update styles in SASS files for improved responsiveness and consistency
This commit is contained in:
Rinjae
@@ -14,6 +14,13 @@
|
||||
- Spring Security (커스텀 인증)
|
||||
- JPA/Hibernate 5.6.15 with Envers (감사 추적)
|
||||
- MapStruct (DTO 매핑), Lombok (보일러플레이트 제거)
|
||||
- SASS/SCSS (CSS 전처리기) - 스타일 수정 시 반드시 SASS 파일 수정
|
||||
|
||||
**CSS/SASS 가이드:**
|
||||
- CSS 파일(`src/main/resources/static/css/main.css`)은 SASS에서 컴파일된 결과물
|
||||
- 스타일 수정 시 반드시 SASS 파일(`src/main/resources/static/sass/`)을 수정해야 함
|
||||
- CSS 파일 직접 수정 금지 - SASS 파일 수정 후 컴파일 필요
|
||||
- SASS 컴파일: `sass src/main/resources/static/sass/main.scss src/main/resources/static/css/main.css`
|
||||
|
||||
## Git 브랜치 전략
|
||||
|
||||
|
||||
@@ -1627,7 +1627,7 @@ hr {
|
||||
}
|
||||
.footer-right .footer-contact {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin: 0;
|
||||
@@ -1635,7 +1635,7 @@ hr {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.footer-right .footer-contact {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2629,15 +2629,15 @@ hr {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 60px;
|
||||
padding: 10px 24px;
|
||||
gap: 6px;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
@@ -2646,8 +2646,8 @@ hr {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.btn-upload {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10787,11 +10787,11 @@ select.form-control {
|
||||
.register-progress {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-progress {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -10799,11 +10799,11 @@ select.form-control {
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 50px;
|
||||
gap: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-steps {
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -10850,8 +10850,8 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
.progress-step-item .step-icon {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #e6e6e6;
|
||||
display: flex;
|
||||
@@ -10861,18 +10861,18 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-step-item .step-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.progress-step-item .step-icon .step-icon-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.progress-step-item .step-icon .step-icon-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.progress-step-item.active .step-icon {
|
||||
@@ -10902,11 +10902,11 @@ select.form-control {
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
padding: 50px 45px;
|
||||
padding: 30px 30px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.register-form-container {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
.register-form-container.with-sidebar {
|
||||
@@ -10975,21 +10975,21 @@ select.form-control {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
padding: 50px 40px;
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
gap: 16px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.icon-upload-box {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-preview-area {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.icon-preview-area img {
|
||||
@@ -11033,19 +11033,19 @@ select.form-control {
|
||||
text-align: center;
|
||||
}
|
||||
.icon-upload-info .upload-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #515961;
|
||||
margin: 0 0 11px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.icon-upload-info .upload-hint {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
}
|
||||
.icon-upload-info .upload-hint strong {
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ip-input-row {
|
||||
@@ -11077,14 +11077,15 @@ select.form-control {
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
width: 158px;
|
||||
height: 60px;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
@@ -11094,18 +11095,18 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.btn-add-ip {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-add-ip {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12765,37 +12766,38 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.app-info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
padding-top: 27px;
|
||||
margin-bottom: 64px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-card {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
gap: 24px;
|
||||
padding: 16px 0;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-icon {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 16px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #F8FAFC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 87px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.app-info-icon .app-icon-image {
|
||||
@@ -12814,14 +12816,14 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 24px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -12843,46 +12845,46 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.app-info-name {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-name {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-description {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
color: #515151;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-info-description {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.apikey-info-section {
|
||||
background: #F6F9FB;
|
||||
border-radius: 12px;
|
||||
padding: 48px 40px;
|
||||
margin-bottom: 40px;
|
||||
padding: 24px 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.apikey-info-section {
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -12892,6 +12894,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12910,20 +12913,20 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.info-label {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-label {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -12937,19 +12940,20 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding: 0 24px;
|
||||
background: #DDDDDD;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
color: #515151;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-value-box {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.info-value-box.with-copy {
|
||||
@@ -12958,7 +12962,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
|
||||
.info-row-with-action .info-value {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -12967,14 +12971,14 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 60px;
|
||||
width: 158px;
|
||||
padding: 0 24px;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
background: #A4D6EA;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@@ -12985,9 +12989,9 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-copy-action {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 16px;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -548,15 +548,15 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 60px;
|
||||
padding: 10px 24px;
|
||||
gap: 6px;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
@@ -565,7 +565,7 @@
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,14 +127,14 @@
|
||||
|
||||
.footer-contact {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,35 +276,36 @@
|
||||
.app-info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-xl;
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
padding-top: 27px;
|
||||
margin-bottom: $spacing-4xl;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: $spacing-lg 0;
|
||||
gap: $spacing-lg;
|
||||
padding: $spacing-md 0;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-icon {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: $border-radius-xl;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: $border-radius-lg;
|
||||
overflow: hidden;
|
||||
background: $gray-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 87px;
|
||||
margin-left: 40px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.app-icon-image {
|
||||
@@ -325,14 +326,14 @@
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.app-status-badge {
|
||||
display: inline-block;
|
||||
padding: $spacing-xs $spacing-lg;
|
||||
padding: 3px 12px;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-sm;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-semibold;
|
||||
width: fit-content;
|
||||
|
||||
@@ -358,24 +359,24 @@
|
||||
}
|
||||
|
||||
.app-info-name {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-dark;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-description {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
color: #515151;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: $font-size-base;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -388,19 +389,19 @@
|
||||
.apikey-info-section {
|
||||
background: #F6F9FB;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: $spacing-3xl $spacing-2xl;
|
||||
margin-bottom: $spacing-2xl;
|
||||
padding: 24px 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-lg;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xl;
|
||||
margin-bottom: $spacing-xl;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -410,6 +411,7 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -428,19 +430,19 @@
|
||||
.info-label {
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 15px;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: #212529;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
font-size: $font-size-base;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: $font-size-base;
|
||||
font-size: 14px;
|
||||
color: $text-dark;
|
||||
word-break: break-word;
|
||||
|
||||
@@ -454,18 +456,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding: 0 $spacing-lg;
|
||||
background: #DDDDDD;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
color: #515151;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: $gray-bg;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: 14px;
|
||||
color: $text-dark;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 50px;
|
||||
font-size: $font-size-base;
|
||||
padding: 0 $spacing-md;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&.with-copy {
|
||||
@@ -477,7 +480,7 @@
|
||||
.info-row-with-action {
|
||||
.info-value {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -487,14 +490,14 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-xs;
|
||||
height: 60px;
|
||||
width: 158px;
|
||||
padding: 0 $spacing-lg;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
background: #A4D6EA;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@@ -505,9 +508,9 @@
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 50px;
|
||||
font-size: $font-size-base;
|
||||
padding: 0 $spacing-md;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -72,11 +72,11 @@
|
||||
.register-progress {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
// Figma 모바일 (1290-4164): 스텝 영역 조정
|
||||
@include respond-to('sm') {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -84,11 +84,11 @@
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 50px;
|
||||
gap: 30px;
|
||||
|
||||
// Figma 모바일: gap 16px, 점선과 아이콘 사이 간격
|
||||
@include respond-to('sm') {
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -140,8 +140,8 @@
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: $border-radius-circle;
|
||||
background-color: #e6e6e6;
|
||||
display: flex;
|
||||
@@ -151,18 +151,18 @@
|
||||
|
||||
// Figma 모바일 (1290-4234): 24px 아이콘 + 10px 패딩 = 44px 원
|
||||
@include respond-to('sm') {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.step-icon-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
// Figma 모바일: 24px 아이콘
|
||||
@include respond-to('sm') {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -199,10 +199,10 @@
|
||||
// Form Container (Step 1) - extends common
|
||||
.register-form-container {
|
||||
@extend .common-section-box;
|
||||
padding: 50px 45px;
|
||||
padding: 30px 30px;
|
||||
|
||||
@include respond-to('md') {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// With Sidebar variant (Step 2)
|
||||
@@ -283,20 +283,20 @@
|
||||
background-color: $white;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 50px 40px;
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
gap: 16px;
|
||||
|
||||
@include respond-to('md') {
|
||||
padding: 30px 20px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-preview-area {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
@@ -342,20 +342,20 @@
|
||||
text-align: center;
|
||||
|
||||
.upload-title {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: #515961;
|
||||
margin: 0 0 11px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #515961;
|
||||
margin: 0;
|
||||
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -393,14 +393,15 @@
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
width: 158px;
|
||||
height: 60px;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: #3ba4ed;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
@@ -410,18 +411,18 @@
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
|
||||
@include respond-to('sm') {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user