스타일 정리
This commit is contained in:
현성필
@@ -2153,6 +2153,331 @@ body {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.action-btn,
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: 16px 40px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.action-btn,
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.action-btn i,
|
||||
.action-btn-new i,
|
||||
.action-btn-primary i,
|
||||
.action-btn-secondary i,
|
||||
.action-btn-edit i,
|
||||
.action-btn-delete i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-btn-new,
|
||||
.action-btn-primary {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-new:hover,
|
||||
.action-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.action-btn-new:active,
|
||||
.action-btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn-secondary {
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.action-btn-secondary:hover {
|
||||
background: #F8FAFC;
|
||||
border-color: #4B9BFF;
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.action-btn-secondary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.action-btn-edit {
|
||||
background: #4B9BFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-edit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: #2E7FF7;
|
||||
}
|
||||
.action-btn-edit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn-delete {
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
}
|
||||
.action-btn-delete:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn.btn-list {
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.action-btn.btn-list:hover {
|
||||
background: #F8FAFC;
|
||||
border-color: #4B9BFF;
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.action-btn.btn-edit {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn.btn-edit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.action-btn.btn-delete {
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn.btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
padding: 8px 16px;
|
||||
background: rgba(75, 155, 255, 0.1);
|
||||
color: #4B9BFF;
|
||||
border: 1px solid rgba(75, 155, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.btn-copy:hover {
|
||||
background: rgba(75, 155, 255, 0.2);
|
||||
border-color: #4B9BFF;
|
||||
}
|
||||
.btn-copy i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: 8px 24px;
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.btn-action:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.btn-action i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 8px 24px;
|
||||
background: #FFFFFF;
|
||||
color: #64748B;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
border-color: #4B9BFF;
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.btn-cancel i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.status-badge.status-pending {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #FF6B6B;
|
||||
}
|
||||
.status-badge.status-completed {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
color: #6BCF7F;
|
||||
}
|
||||
.status-badge.status-active {
|
||||
background: rgba(75, 155, 255, 0.1);
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.status-badge.status-inactive {
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
color: #64748B;
|
||||
}
|
||||
.status-badge.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(163, 131.0721649485, 0);
|
||||
}
|
||||
.status-badge.status-failed {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #FF6B6B;
|
||||
}
|
||||
.status-badge.status-success {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
color: #6BCF7F;
|
||||
}
|
||||
|
||||
.status-badge-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.status-badge-header.status-pending {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #FF6B6B;
|
||||
}
|
||||
.status-badge-header.status-completed {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
color: #6BCF7F;
|
||||
}
|
||||
.status-badge-header.status-active {
|
||||
background: rgba(75, 155, 255, 0.1);
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.status-badge-header.status-inactive {
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
color: #64748B;
|
||||
}
|
||||
.status-badge-header.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(163, 131.0721649485, 0);
|
||||
}
|
||||
|
||||
.badge-sm {
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
background: transparent;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.badge-outline.status-pending {
|
||||
color: #FF6B6B;
|
||||
border-color: #FF6B6B;
|
||||
}
|
||||
.badge-outline.status-completed {
|
||||
color: #6BCF7F;
|
||||
border-color: #6BCF7F;
|
||||
}
|
||||
.badge-outline.status-active {
|
||||
color: #4B9BFF;
|
||||
border-color: #4B9BFF;
|
||||
}
|
||||
.badge-outline.status-inactive {
|
||||
color: #64748B;
|
||||
border-color: #64748B;
|
||||
}
|
||||
|
||||
.badge-icon i {
|
||||
margin-right: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 4px;
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.notification-badge.badge-primary {
|
||||
background: #4B9BFF;
|
||||
}
|
||||
.notification-badge.badge-success {
|
||||
background: #6BCF7F;
|
||||
}
|
||||
.notification-badge.badge-warning {
|
||||
background: #FFD93D;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
.notification-badge.badge-danger {
|
||||
background: #FF6B6B;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
@@ -2730,6 +3055,123 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.file-upload-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.file-upload-wrapper .file-name-display {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
cursor: default;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.file-upload-wrapper .file-name-display.has-file {
|
||||
color: #1A1A2E;
|
||||
background: rgba(75, 155, 255, 0.05);
|
||||
border-color: #4B9BFF;
|
||||
}
|
||||
.file-upload-wrapper .file-name-display:focus {
|
||||
outline: none;
|
||||
border-color: #4B9BFF;
|
||||
box-shadow: 0 0 0 3px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.file-upload-wrapper .file-upload-btn {
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.file-upload-wrapper .file-upload-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.file-upload-wrapper .file-upload-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.file-upload-wrapper .file-upload-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.file-upload-wrapper .file-upload-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn {
|
||||
padding: 16px;
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.file-upload-wrapper .file-remove-btn {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.file-upload-wrapper input[type=file] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-help-text {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.form-help-text p {
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.form-help-text p i {
|
||||
color: #4B9BFF;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -8241,23 +8683,6 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4B9BFF;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-copy:hover {
|
||||
background-color: #2E7FF7;
|
||||
}
|
||||
.btn-copy svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -8435,74 +8860,9 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action,
|
||||
.btn-secondary {
|
||||
padding: 16px 64px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-action,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action.btn-primary {
|
||||
background-color: #4B9BFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-action.btn-primary:hover {
|
||||
background-color: #2E7FF7;
|
||||
}
|
||||
.btn-action.btn-info {
|
||||
background-color: #00D4FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-action.btn-info:hover {
|
||||
background-color: rgb(0, 169.6, 204);
|
||||
}
|
||||
.btn-action.btn-danger {
|
||||
background-color: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-action.btn-danger:hover {
|
||||
background-color: #ff3838;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-cancel {
|
||||
background-color: #F8FAFC;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.btn-secondary:hover,
|
||||
.btn-cancel:hover {
|
||||
background-color: #E2E8F0;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 16px 64px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: #FEE2E2;
|
||||
color: #991B1B;
|
||||
border: 1px solid #FCA5A5;
|
||||
}
|
||||
.btn-cancel:hover {
|
||||
background-color: #FCA5A5;
|
||||
color: #7F1D1D;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-secondary,
|
||||
.btn-cancel {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -8795,55 +9155,6 @@ select.form-control {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.notice-actions .action-btn {
|
||||
padding: 16px 40px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.notice-actions .action-btn {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.notice-actions .action-btn.btn-list {
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.notice-actions .action-btn.btn-list:hover {
|
||||
background: #F8FAFC;
|
||||
border-color: #4B9BFF;
|
||||
}
|
||||
.notice-actions .action-btn.btn-edit {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
.notice-actions .action-btn.btn-edit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.notice-actions .action-btn.btn-delete {
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
.notice-actions .action-btn.btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.notice-actions .action-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.notice-navigation {
|
||||
background: #FFFFFF;
|
||||
@@ -9122,24 +9433,6 @@ select.form-control {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.inquiry-table .table-row .col-status .status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inquiry-table .table-row .col-status .status-badge.status-pending {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #FF6B6B;
|
||||
}
|
||||
.inquiry-table .table-row .col-status .status-badge.status-completed {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
color: #6BCF7F;
|
||||
}
|
||||
.inquiry-table .table-row .col-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -9162,97 +9455,6 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: 16px 40px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.action-btn-new i,
|
||||
.action-btn-primary i,
|
||||
.action-btn-secondary i,
|
||||
.action-btn-edit i,
|
||||
.action-btn-delete i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.action-btn-new,
|
||||
.action-btn-primary {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-new:hover,
|
||||
.action-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.action-btn-new:active,
|
||||
.action-btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn-secondary {
|
||||
background: #FFFFFF;
|
||||
color: #1A1A2E;
|
||||
border: 1px solid #E2E8F0;
|
||||
}
|
||||
.action-btn-secondary:hover {
|
||||
background: #F8FAFC;
|
||||
border-color: #4B9BFF;
|
||||
color: #4B9BFF;
|
||||
}
|
||||
.action-btn-secondary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.action-btn-edit {
|
||||
background: #4B9BFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-edit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: #2E7FF7;
|
||||
}
|
||||
.action-btn-edit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.action-btn-delete {
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.action-btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
}
|
||||
.action-btn-delete:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.inquiry-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -9324,24 +9526,6 @@ select.form-control {
|
||||
padding: 40px 24px 16px;
|
||||
}
|
||||
}
|
||||
.inquiry-detail-card .detail-header .status-badge-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.inquiry-detail-card .detail-header .status-badge-header.status-pending {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #FF6B6B;
|
||||
}
|
||||
.inquiry-detail-card .detail-header .status-badge-header.status-completed {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
color: #6BCF7F;
|
||||
}
|
||||
.inquiry-detail-card .detail-header .inquiry-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
@@ -9659,121 +9843,6 @@ select.form-control {
|
||||
.inquiry-form-card .form-group .form-textarea::placeholder {
|
||||
color: #94A3B8;
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.inquiry-form-card .form-group .file-upload-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-name-display {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background: #F8FAFC;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
cursor: default;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-name-display.has-file {
|
||||
color: #1A1A2E;
|
||||
background: rgba(75, 155, 255, 0.05);
|
||||
border-color: #4B9BFF;
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-name-display:focus {
|
||||
outline: none;
|
||||
border-color: #4B9BFF;
|
||||
box-shadow: 0 0 0 3px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-upload-btn {
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-upload-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-upload-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-upload-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-upload-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-remove-btn {
|
||||
padding: 16px;
|
||||
background: #FF6B6B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-remove-btn {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-remove-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-remove-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper .file-remove-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
.inquiry-form-card .form-group .file-upload-wrapper input[type=file] {
|
||||
display: none;
|
||||
}
|
||||
.inquiry-form-card .form-group .form-help-text {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.inquiry-form-card .form-group .form-help-text p {
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.inquiry-form-card .form-group .form-help-text p i {
|
||||
color: #4B9BFF;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.inquiry-form-actions {
|
||||
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
@@ -268,4 +268,211 @@
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Action Buttons - Unified button system for all pages
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Base action button styles
|
||||
.action-btn,
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: $spacing-md $spacing-2xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
text-decoration: none;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary action buttons (new, submit, confirm)
|
||||
.action-btn-new,
|
||||
.action-btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary action button (cancel, back, list)
|
||||
.action-btn-secondary {
|
||||
background: $white;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
border-color: $primary-blue;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit button
|
||||
.action-btn-edit {
|
||||
background: $primary-blue;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: $secondary-blue;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.action-btn-delete {
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: darken($accent-orange, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Notice page specific button variants
|
||||
.action-btn {
|
||||
&.btn-list {
|
||||
background: $white;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
border-color: $primary-blue;
|
||||
color: $primary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-edit {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-delete {
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API Key page specific buttons
|
||||
.btn-copy {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background: rgba($primary-blue, 0.1);
|
||||
color: $primary-blue;
|
||||
border: 1px solid rgba($primary-blue, 0.2);
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
|
||||
&:hover {
|
||||
background: rgba($primary-blue, 0.2);
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: $white;
|
||||
color: $text-gray;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-blue;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -237,4 +237,142 @@ select.form-control {
|
||||
@include respond-to('sm') {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// File Upload Component
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// File upload field wrapper
|
||||
.file-upload-wrapper {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
// File name display input
|
||||
.file-name-display {
|
||||
flex: 1;
|
||||
padding: $spacing-md;
|
||||
background: $gray-bg;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
cursor: default;
|
||||
transition: $transition-base;
|
||||
|
||||
&.has-file {
|
||||
color: $text-dark;
|
||||
background: rgba($primary-blue, 0.05);
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-blue;
|
||||
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// File upload button (label)
|
||||
.file-upload-btn {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// File remove button
|
||||
.file-remove-btn {
|
||||
padding: $spacing-md;
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
border-radius: $border-radius-md;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: darken($accent-orange, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden file input
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// File help text
|
||||
.form-help-text {
|
||||
margin-top: $spacing-md;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-light;
|
||||
line-height: $line-height-normal;
|
||||
|
||||
p {
|
||||
margin: $spacing-xs 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-xs;
|
||||
|
||||
i {
|
||||
color: $primary-blue;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,7 @@
|
||||
|
||||
// 4. Components
|
||||
@import 'components/buttons';
|
||||
@import 'components/badges';
|
||||
@import 'components/cards';
|
||||
@import 'components/forms';
|
||||
@import 'components/modals';
|
||||
|
||||
@@ -185,24 +185,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Note: .btn-copy styles now in components/_buttons.scss
|
||||
// Keeping this for page-specific override if needed
|
||||
.btn-copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
background-color: $primary-blue;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-blue;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -397,79 +382,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Note: Button styles now in components/_buttons.scss
|
||||
// Keeping page-specific overrides only
|
||||
.btn-action,
|
||||
.btn-secondary {
|
||||
padding: $spacing-md $spacing-4xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
&.btn-primary {
|
||||
background-color: $primary-blue;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
background-color: $accent-cyan;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($accent-cyan, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background-color: $accent-orange;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($accent-orange, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-cancel {
|
||||
background-color: $gray-bg;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background-color: $border-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: $spacing-md $spacing-4xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background-color: #FEE2E2;
|
||||
color: #991B1B;
|
||||
border: 1px solid #FCA5A5;
|
||||
|
||||
&:hover {
|
||||
background-color: #FCA5A5;
|
||||
color: #7F1D1D;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -219,26 +219,7 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-semibold;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-pending {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
}
|
||||
// Status badge styles now in components/_badges.scss
|
||||
}
|
||||
|
||||
.col-date {
|
||||
@@ -266,106 +247,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Shared Button Styles (used across all inquiry pages)
|
||||
// ===========================
|
||||
|
||||
// Base action button styles - NOT nested, applies globally
|
||||
.action-btn-new,
|
||||
.action-btn-primary,
|
||||
.action-btn-secondary,
|
||||
.action-btn-edit,
|
||||
.action-btn-delete {
|
||||
padding: $spacing-md $spacing-2xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
text-decoration: none;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// New inquiry button & primary action (create, submit)
|
||||
.action-btn-new,
|
||||
.action-btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary action button (cancel, back, list)
|
||||
.action-btn-secondary {
|
||||
background: $white;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
border-color: $primary-blue;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit button
|
||||
.action-btn-edit {
|
||||
background: $primary-blue;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: $secondary-blue;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete button
|
||||
.action-btn-delete {
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: darken($accent-orange, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Button Container Layouts
|
||||
// Note: Button styles now in components/_buttons.scss
|
||||
// ===========================
|
||||
|
||||
// Inquiry actions (list page + detail page)
|
||||
@@ -442,26 +326,7 @@
|
||||
padding: $spacing-2xl $spacing-lg $spacing-md;
|
||||
}
|
||||
|
||||
.status-badge-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
border-radius: $border-radius-full;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
&.status-pending {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
}
|
||||
// Status badge header styles now in components/_badges.scss
|
||||
|
||||
.inquiry-title {
|
||||
font-size: $font-size-2xl;
|
||||
@@ -808,139 +673,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// File upload field wrapper
|
||||
.file-upload-wrapper {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
// File name display input
|
||||
.file-name-display {
|
||||
flex: 1;
|
||||
padding: $spacing-md;
|
||||
background: $gray-bg;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
cursor: default;
|
||||
transition: $transition-base;
|
||||
|
||||
&.has-file {
|
||||
color: $text-dark;
|
||||
background: rgba($primary-blue, 0.05);
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-blue;
|
||||
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// File upload button (label)
|
||||
.file-upload-btn {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
border: none;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// File remove button
|
||||
.file-remove-btn {
|
||||
padding: $spacing-md;
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
border-radius: $border-radius-md;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
background: darken($accent-orange, 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden file input
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// File help text
|
||||
.form-help-text {
|
||||
margin-top: $spacing-md;
|
||||
font-size: $font-size-xs;
|
||||
color: $text-light;
|
||||
line-height: $line-height-normal;
|
||||
|
||||
p {
|
||||
margin: $spacing-xs 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-xs;
|
||||
|
||||
i {
|
||||
color: $primary-blue;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// File upload styles now in components/_forms.scss
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -319,61 +319,7 @@
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: $spacing-md $spacing-2xl;
|
||||
border-radius: $border-radius-md;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
text-decoration: none;
|
||||
transition: $transition-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-sm;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-md $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
&.btn-list {
|
||||
background: $white;
|
||||
color: $text-dark;
|
||||
border: 1px solid $border-gray;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-edit {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-delete {
|
||||
background: $accent-orange;
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
// Action button styles now in components/_buttons.scss
|
||||
}
|
||||
|
||||
// Navigation (prev/next)
|
||||
|
||||
@@ -65,9 +65,9 @@
|
||||
<li sec:authorize="hasRole('ROLE_APP')">
|
||||
<a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_API_KEY_REQUEST_VIEW')">
|
||||
<a th:href="@{/myapikey/api_key_request/history}"><i class="fas fa-list"></i>인증키 신청 목록</a>
|
||||
</li>
|
||||
<!-- <li sec:authorize="hasRole('ROLE_API_KEY_REQUEST_VIEW')">-->
|
||||
<!-- <a th:href="@{/myapikey/api_key_request/history}"><i class="fas fa-list"></i>인증키 신청 목록</a>-->
|
||||
<!-- </li>-->
|
||||
<li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
|
||||
<li><a th:href="@{/change_password}"><i class="fas fa-lock"></i>비밀번호 변경</a></li>
|
||||
</ul>
|
||||
@@ -157,11 +157,11 @@
|
||||
<i class="fas fa-key"></i> 인증 키 관리
|
||||
</a>
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_API_KEY_REQUEST_VIEW')">
|
||||
<a th:href="@{/myapikey/api_key_request/history}" class="drawer-link">
|
||||
<i class="fas fa-list"></i> 인증키 신청 목록
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li sec:authorize="hasRole('ROLE_API_KEY_REQUEST_VIEW')">-->
|
||||
<!-- <a th:href="@{/myapikey/api_key_request/history}" class="drawer-link">-->
|
||||
<!-- <i class="fas fa-list"></i> 인증키 신청 목록-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<li sec:authorize="isAuthenticated()">
|
||||
<a th:href="@{/mypage}" class="drawer-link">
|
||||
<i class="fas fa-user-circle"></i> 내 정보 관리
|
||||
|
||||
Reference in New Issue
Block a user