내 정보 관리 - 스타일 적용
This commit is contained in:
현성필
@@ -3800,9 +3800,7 @@ select.form-control {
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 64px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-actions, .form-actions-center {
|
||||
@@ -3842,6 +3840,60 @@ select.form-control {
|
||||
margin-top: 40px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
.form-actions--with-withdrawal {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
width: 150px;
|
||||
padding: 8px;
|
||||
background: #E5F2F8;
|
||||
border-radius: 12px;
|
||||
color: #5F666C;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link:hover {
|
||||
background: rgb(208.9090909091, 231.9545454545, 242.5909090909);
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-actions--with-withdrawal .withdrawal-link {
|
||||
position: static;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.form-actions--with-withdrawal .form-actions-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-actions--with-withdrawal .form-actions-buttons {
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-actions--with-withdrawal {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
@@ -8465,31 +8517,6 @@ select.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.withdrawal-section {
|
||||
margin-top: 48px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
text-align: left;
|
||||
}
|
||||
.withdrawal-section .withdrawal-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.withdrawal-section .withdrawal-link:hover {
|
||||
color: #FF6B6B;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.withdrawal-section .withdrawal-link::before {
|
||||
content: ">";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.register-title-bar {
|
||||
padding: 18px 45px;
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -581,9 +581,7 @@ select.form-control {
|
||||
justify-content: center;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $spacing-4xl;
|
||||
padding-top: $spacing-2xl;
|
||||
border-top: 1px solid $border-gray;
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column-reverse;
|
||||
@@ -622,6 +620,64 @@ select.form-control {
|
||||
margin-top: $spacing-2xl;
|
||||
padding-top: $spacing-lg;
|
||||
}
|
||||
|
||||
// Modifier: with withdrawal link layout
|
||||
// [회원탈퇴(좌측)] <-- 공백 --> [버튼][버튼](가운데)]
|
||||
&--with-withdrawal {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.withdrawal-link {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
width: 150px;
|
||||
padding: $spacing-sm;
|
||||
background: #E5F2F8;
|
||||
border-radius: $border-radius-lg;
|
||||
color: #5F666C;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-regular;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: darken(#E5F2F8, 5%);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
position: static;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions-buttons {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Centered form actions (alias)
|
||||
|
||||
@@ -16,32 +16,5 @@
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Withdrawal Section - Account deactivation/withdrawal area
|
||||
// Withdrawal Link styles moved to components/_forms.scss (.form-actions--with-withdrawal)
|
||||
// -----------------------------------------------------------------------------
|
||||
.withdrawal-section {
|
||||
margin-top: $spacing-3xl;
|
||||
padding-top: $spacing-xl;
|
||||
border-top: 1px solid $border-gray;
|
||||
text-align: left;
|
||||
|
||||
.withdrawal-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
color: $text-gray;
|
||||
font-size: $font-size-sm;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $accent-orange;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '>';
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user