내 정보 관리 - 스타일 적용
This commit is contained in:
현성필
@@ -0,0 +1,66 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Alert Components
|
||||
// Used in: Form validation, system messages, notifications
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
border-radius: $border-radius-md;
|
||||
margin-bottom: $spacing-xl;
|
||||
|
||||
.alert-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning alert - yellow/amber style
|
||||
&.alert-warning {
|
||||
background: rgba($accent-yellow, 0.1);
|
||||
border: 1px solid rgba($accent-yellow, 0.3);
|
||||
color: #B89900;
|
||||
}
|
||||
|
||||
// Error alert - red/orange style
|
||||
&.alert-error {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
border: 1px solid rgba($accent-orange, 0.3);
|
||||
color: darken($accent-orange, 10%);
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// Success alert - green style
|
||||
&.alert-success {
|
||||
background: rgba($accent-green, 0.1);
|
||||
border: 1px solid rgba($accent-green, 0.3);
|
||||
color: darken($accent-green, 20%);
|
||||
}
|
||||
|
||||
// Info alert - blue style
|
||||
&.alert-info {
|
||||
background: rgba($primary-blue, 0.1);
|
||||
border: 1px solid rgba($primary-blue, 0.3);
|
||||
color: $secondary-blue;
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,7 @@ $apikey-border-color: #dadada;
|
||||
// -----------------------------------------------------------------------------
|
||||
// Common Container
|
||||
// -----------------------------------------------------------------------------
|
||||
.apikey-container {
|
||||
.common-container {
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 60px $spacing-lg 80px;
|
||||
@@ -31,7 +31,7 @@ $apikey-border-color: #dadada;
|
||||
// -----------------------------------------------------------------------------
|
||||
// Common Section Box (Background container)
|
||||
// -----------------------------------------------------------------------------
|
||||
.apikey-section-box {
|
||||
.common-section-box {
|
||||
background-color: $apikey-bg-color;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 30px 45px;
|
||||
@@ -44,7 +44,7 @@ $apikey-border-color: #dadada;
|
||||
// -----------------------------------------------------------------------------
|
||||
// Common Title Bar
|
||||
// -----------------------------------------------------------------------------
|
||||
.apikey-title-bar {
|
||||
.common-title-bar {
|
||||
background-color: $apikey-bg-color;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 14px 45px;
|
||||
@@ -54,7 +54,7 @@ $apikey-border-color: #dadada;
|
||||
padding: 12px $spacing-lg;
|
||||
}
|
||||
|
||||
.apikey-title {
|
||||
.common-title {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 28px;
|
||||
font-weight: $font-weight-bold;
|
||||
@@ -66,7 +66,7 @@ $apikey-border-color: #dadada;
|
||||
}
|
||||
}
|
||||
|
||||
.apikey-subtitle {
|
||||
.common-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #515151;
|
||||
|
||||
@@ -473,3 +473,99 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Input Action Button - Figma Design (node 985:1649)
|
||||
// Button at the end of input field (변경, 인증번호 받기, etc.)
|
||||
// -----------------------------------------------------------------------------
|
||||
.btn-input-action {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 172px;
|
||||
height: 60px;
|
||||
padding: 10px $spacing-lg;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
white-space: nowrap;
|
||||
|
||||
// "변경" button style - light blue (#a4d6ea)
|
||||
&.btn-change {
|
||||
background: #a4d6ea;
|
||||
|
||||
&:hover {
|
||||
background: darken(#a4d6ea, 10%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// "인증번호 받기/확인" button style - primary blue
|
||||
&.btn-auth {
|
||||
background: #A4D6EA;
|
||||
|
||||
&:hover {
|
||||
background: $secondary-blue;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: $border-gray;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
height: 52px;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Upload Button - File upload trigger button
|
||||
// Used in: Icon upload, file attachment areas
|
||||
// -----------------------------------------------------------------------------
|
||||
.btn-upload {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 60px;
|
||||
padding: 10px 24px;
|
||||
background-color: #3ba4ed;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #2b94dd;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -376,3 +376,255 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Form Row Layout - Horizontal Label-Field Layout
|
||||
// Used in: API Key registration, User profile forms
|
||||
// -----------------------------------------------------------------------------
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
//&:last-child {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
|
||||
@include respond-to('md') {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 214px;
|
||||
width: 214px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
padding-top: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.label-offset {
|
||||
margin-top: 15px;
|
||||
|
||||
@include respond-to('md') {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-text {
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #000000;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// Required indicator (asterisk style)
|
||||
&.required::after {
|
||||
content: '*';
|
||||
color: $accent-orange;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.required-badge {
|
||||
background-color: #3ba4ed;
|
||||
color: $white;
|
||||
font-size: 11px;
|
||||
font-weight: $font-weight-regular;
|
||||
padding: 3px 4px 4px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.form-field-wrapper {
|
||||
flex: 1;
|
||||
@include respond-to('sm') {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Character Counter - Text input character count display
|
||||
// -----------------------------------------------------------------------------
|
||||
.char-counter-wrapper {
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
|
||||
.char-counter {
|
||||
font-size: 14px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Section Divider - Section separator with border
|
||||
// Used for separating form sections (e.g., "법인 관리자 정보")
|
||||
// -----------------------------------------------------------------------------
|
||||
.section-divider {
|
||||
margin-top: $spacing-3xl;
|
||||
padding-top: $spacing-xl;
|
||||
border-top: 1px solid $border-gray;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Compound Input - Multi-part input fields (phone numbers, registration numbers)
|
||||
// Used in: updateCorporateManager.html, updateCorporateUser.html, etc.
|
||||
// -----------------------------------------------------------------------------
|
||||
.compound-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
width: 100%;
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: $text-gray;
|
||||
font-weight: $font-weight-semibold;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Phone number specific
|
||||
.phone-number {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Business registration number specific
|
||||
.biz-reg-number {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: $spacing-xs;
|
||||
|
||||
.separator {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Input with Button Pattern - Figma Design (node 985:1546)
|
||||
// Input field with action button at the end (e.g., phone number + "변경" button)
|
||||
// -----------------------------------------------------------------------------
|
||||
.input-with-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
|
||||
.compound-input,
|
||||
.auth-input-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
|
||||
.compound-input,
|
||||
.auth-input-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Auth Input Group - Input with timer for verification codes
|
||||
// -----------------------------------------------------------------------------
|
||||
.auth-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding-right: 100px; // Space for timer
|
||||
}
|
||||
|
||||
.auth-timer {
|
||||
position: absolute;
|
||||
right: $spacing-md;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $accent-orange;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Form Actions - Button container for form submissions
|
||||
// Used in: Partnership, API Key registration, User profile forms
|
||||
// -----------------------------------------------------------------------------
|
||||
.form-actions {
|
||||
display: flex;
|
||||
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;
|
||||
align-items: stretch;
|
||||
gap: $spacing-sm;
|
||||
margin-top: $spacing-3xl;
|
||||
padding-top: $spacing-xl;
|
||||
}
|
||||
|
||||
// Button base styles
|
||||
.btn,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary {
|
||||
min-width: 160px;
|
||||
padding: $spacing-md $spacing-2xl;
|
||||
|
||||
@include respond-to('sm') {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier: space-between layout
|
||||
&--between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// Modifier: no border top
|
||||
&--no-border {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Modifier: compact spacing
|
||||
&--compact {
|
||||
margin-top: $spacing-2xl;
|
||||
padding-top: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Centered form actions (alias)
|
||||
.form-actions-center {
|
||||
@extend .form-actions;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user