djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

회원 가입 스타일 수정

Browse Source
This commit is contained in:
현성필
2025-11-26 17:17:30 +09:00
parent e8f9212a13
commit d94760c160
10 changed files with 603 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+87 -13
View File
@@ -11246,9 +11246,8 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.org-info-notice {
padding: 24px;
border-radius: 8px;
margin-bottom: 32px;
margin-bottom: 16px;
}
.org-info-notice ul {
list-style: none;
@@ -11274,7 +11273,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
.org-form-group {
margin-bottom: 40px;
margin-bottom: 8px;
display: flex;
align-items: flex-start;
gap: 24px;
@@ -11299,10 +11298,17 @@ input[type=checkbox]:checked + .custom-checkbox {
min-width: 180px;
padding-top: 16px;
}
.org-form-label .required::before {
content: "* ";
color: #FF6B6B;
font-weight: 700;
.org-form-label .required-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
background: #3BA4ED;
color: #FFFFFF;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
line-height: 1.2;
}
@media (max-width: 768px) {
.org-form-label {
@@ -11317,6 +11323,41 @@ input[type=checkbox]:checked + .custom-checkbox {
flex-direction: column;
gap: 8px;
}
@media (max-width: 768px) {
.org-form-input-wrapper {
width: 100%;
}
}
.org-input-row {
display: flex;
align-items: center;
gap: 16px;
}
.org-input-row .org-form-input,
.org-input-row .org-compound-input,
.org-input-row .org-auth-input-group {
flex: 1;
min-width: 0;
}
.org-input-row .org-btn-check, .org-input-row .org-file-label {
flex-shrink: 0;
}
@media (max-width: 768px) {
.org-input-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.org-input-row .org-form-input,
.org-input-row .org-compound-input,
.org-input-row .org-auth-input-group {
width: 100%;
}
.org-input-row .org-btn-check, .org-input-row .org-file-label {
width: 100%;
}
}
.org-form-input {
width: 100%;
@@ -11352,6 +11393,7 @@ input[type=checkbox]:checked + .custom-checkbox {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.org-compound-input .org-form-input,
.org-compound-input .org-form-select {
@@ -11366,14 +11408,16 @@ input[type=checkbox]:checked + .custom-checkbox {
color: #64748B;
font-weight: 600;
user-select: none;
flex-shrink: 0;
}
@media (max-width: 768px) {
.org-compound-input {
flex-wrap: wrap;
width: 100%;
}
.org-compound-input .org-form-input,
.org-compound-input .org-form-select {
min-width: 80px;
flex: 1;
min-width: 0;
}
}
@@ -11483,14 +11527,21 @@ input[type=checkbox]:checked + .custom-checkbox {
.org-btn-check, .org-file-label {
padding: 16px 24px;
background: #FFFFFF;
color: #0049b4;
border: 2px solid #0049b4;
width: 172px;
background: #A4D6EA;
color: #FFFFFF;
border: 2px solid #A4D6EA;
text-align: center;
justify-content: center;
}
.org-btn-check:not(:disabled):hover, .org-file-label:not(:disabled):hover {
background: #0049b4;
color: #FFFFFF;
}
@media (max-width: 768px) {
.org-btn-check, .org-file-label {
width: 100%;
}
}
.org-file-upload {
display: flex;
@@ -11525,6 +11576,9 @@ input[type=checkbox]:checked + .custom-checkbox {
.org-file-label {
cursor: pointer;
background: #3BA4ED;
border-radius: 12px;
border: 2px solid #3BA4ED;
}
.org-file-label input[type=file] {
display: none;
@@ -11571,6 +11625,11 @@ input[type=checkbox]:checked + .custom-checkbox {
padding-top: 48px;
border-top: 1px solid #E2E8F0;
}
.org-action-buttons .btn {
width: 220px;
text-align: center;
justify-content: center;
}
@media (max-width: 768px) {
.org-action-buttons {
flex-direction: column;
@@ -11624,11 +11683,26 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
@media (max-width: 768px) {
.org-form-input {
width: 100%;
}
.org-compound-input {
width: 100%;
}
.org-compound-input .org-form-select,
.org-compound-input .org-form-input {
flex: 1;
min-width: 0;
width: auto;
font-size: 14px;
padding: 8px 16px;
}
.org-auth-input-group {
width: 100%;
}
.org-auth-input-group .org-form-input {
width: 100%;
}
}
.agreement-form {
background: #FFFFFF;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/pages/_org-register.scss
+92 -15
View File
@@ -112,9 +112,8 @@
// Info Notice
.org-info-notice {
padding: $spacing-lg;
border-radius: $border-radius-md;
margin-bottom: $spacing-xl;
margin-bottom: $spacing-md;
ul {
list-style: none;
@@ -145,7 +144,7 @@
// Form Groups
.org-form-group {
margin-bottom: $spacing-2xl;
margin-bottom: $spacing-sm;
display: flex;
align-items: flex-start;
gap: $spacing-lg;
@@ -170,12 +169,17 @@
min-width: 180px;
padding-top: $spacing-md;
.required {
&::before {
content: '* ';
color: $accent-orange;
font-weight: $font-weight-bold;
}
.required-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
background: #3BA4ED;
color: $white;
font-size: 12px;
font-weight: $font-weight-medium;
border-radius: 4px;
line-height: 1.2;
}
@include respond-to('sm') {
@@ -189,6 +193,44 @@
display: flex;
flex-direction: column;
gap: $spacing-sm;
@include respond-to('sm') {
width: 100%;
}
}
// Inline layout for input + button on same row
.org-input-row {
display: flex;
align-items: center;
gap: $spacing-md;
.org-form-input,
.org-compound-input,
.org-auth-input-group {
flex: 1;
min-width: 0;
}
.org-btn-check {
flex-shrink: 0;
}
@include respond-to('sm') {
flex-direction: column;
align-items: stretch;
gap: $spacing-sm;
.org-form-input,
.org-compound-input,
.org-auth-input-group {
width: 100%;
}
.org-btn-check {
width: 100%;
}
}
}
// Input Fields
@@ -232,6 +274,7 @@
display: flex;
align-items: center;
gap: $spacing-sm;
width: 100%;
.org-form-input,
.org-form-select {
@@ -249,14 +292,16 @@
color: $text-gray;
font-weight: $font-weight-semibold;
user-select: none;
flex-shrink: 0;
}
@include respond-to('sm') {
flex-wrap: wrap;
width: 100%;
.org-form-input,
.org-form-select {
min-width: 80px;
flex: 1;
min-width: 0;
}
}
}
@@ -380,14 +425,20 @@
.org-btn-check {
padding: $spacing-md $spacing-lg;
background: $white;
color: $primary-blue;
border: 2px solid $primary-blue;
width: 172px;
background: #A4D6EA;
color: $white;
border: 2px solid #A4D6EA;
text-align: center;
justify-content: center;
&:not(:disabled):hover {
background: $primary-blue;
color: $white;
}
@include respond-to('sm') {
width: 100%;
}
}
// File Upload
@@ -425,6 +476,9 @@
.org-file-label {
@extend .org-btn-check;
cursor: pointer;
background: #3BA4ED;
border-radius: 12px;
border: 2px solid #3BA4ED;
input[type="file"] {
display: none;
@@ -478,6 +532,12 @@
padding-top: $spacing-3xl;
border-top: 1px solid $border-gray;
.btn {
width: 220px;
text-align: center;
justify-content: center;
}
@include respond-to('sm') {
flex-direction: column;
margin-top: $spacing-2xl;
@@ -538,13 +598,30 @@
// Responsive Adjustments
@include respond-to('sm') {
.org-form-input {
width: 100%;
}
.org-compound-input {
width: 100%;
.org-form-select,
.org-form-input {
flex: 1;
min-width: 0;
width: auto;
font-size: $font-size-sm;
padding: $spacing-sm $spacing-md;
}
}
.org-auth-input-group {
width: 100%;
.org-form-input {
width: 100%;
}
}
}
// Agreement Form - Figma Design