스타일 scss, 팝업 html 추가

2025-11-06 13:12:45 +09:00
parent 65311d1639
commit 0362db6d9a
4 changed files with 926 additions and 0 deletions
@@ -0,0 +1,171 @@
+// -----------------------------------------------------------------------------
+// Badge Component Styles - Status badges and labels
+// -----------------------------------------------------------------------------
+
+// Base status badge
+.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;
+  transition: $transition-base;
+
+  // Status variants
+  &.status-pending {
+    background: rgba($accent-orange, 0.1);
+    color: $accent-orange;
+  }
+
+  &.status-completed {
+    background: rgba($accent-green, 0.1);
+    color: $accent-green;
+  }
+
+  &.status-active {
+    background: rgba($primary-blue, 0.1);
+    color: $primary-blue;
+  }
+
+  &.status-inactive {
+    background: rgba($text-gray, 0.1);
+    color: $text-gray;
+  }
+
+  &.status-processing {
+    background: rgba($accent-yellow, 0.1);
+    color: darken($accent-yellow, 30%);
+  }
+
+  &.status-failed {
+    background: rgba($accent-orange, 0.1);
+    color: $accent-orange;
+  }
+
+  &.status-success {
+    background: rgba($accent-green, 0.1);
+    color: $accent-green;
+  }
+}
+
+// Header variant (larger, with margin)
+.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;
+  transition: $transition-base;
+
+  &.status-pending {
+    background: rgba($accent-orange, 0.1);
+    color: $accent-orange;
+  }
+
+  &.status-completed {
+    background: rgba($accent-green, 0.1);
+    color: $accent-green;
+  }
+
+  &.status-active {
+    background: rgba($primary-blue, 0.1);
+    color: $primary-blue;
+  }
+
+  &.status-inactive {
+    background: rgba($text-gray, 0.1);
+    color: $text-gray;
+  }
+
+  &.status-processing {
+    background: rgba($accent-yellow, 0.1);
+    color: darken($accent-yellow, 30%);
+  }
+}
+
+// Small badge variant
+.badge-sm {
+  padding: 2px $spacing-sm;
+  font-size: 10px;
+  border-radius: $border-radius-sm;
+}
+
+// Large badge variant
+.badge-lg {
+  padding: $spacing-sm $spacing-lg;
+  font-size: $font-size-sm;
+  border-radius: $border-radius-md;
+}
+
+// Outline badge variant
+.badge-outline {
+  background: transparent;
+  border: 1px solid currentColor;
+
+  &.status-pending {
+    color: $accent-orange;
+    border-color: $accent-orange;
+  }
+
+  &.status-completed {
+    color: $accent-green;
+    border-color: $accent-green;
+  }
+
+  &.status-active {
+    color: $primary-blue;
+    border-color: $primary-blue;
+  }
+
+  &.status-inactive {
+    color: $text-gray;
+    border-color: $text-gray;
+  }
+}
+
+// Badge with icon
+.badge-icon {
+  i {
+    margin-right: $spacing-xs;
+    font-size: 0.9em;
+  }
+}
+
+// Notification badge (for counts)
+.notification-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 $spacing-xs;
+  background: $accent-orange;
+  color: $white;
+  border-radius: $border-radius-circle;
+  font-size: 11px;
+  font-weight: $font-weight-bold;
+  line-height: 1;
+
+  &.badge-primary {
+    background: $primary-blue;
+  }
+
+  &.badge-success {
+    background: $accent-green;
+  }
+
+  &.badge-warning {
+    background: $accent-yellow;
+    color: $text-dark;
+  }
+
+  &.badge-danger {
+    background: $accent-orange;
+  }
+}