@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/core-components/_checkbox-lists.scss

@@ -1,289 +1,289 @@
-/* ========================================
-   Checkbox Lists
-   Styled checkbox lists with various layouts and features
-   Uses new .pa-checkbox component for custom tri-state checkboxes
-   ======================================== */
-@use '../variables' as *;
-
-// Basic checkbox list (vertical stack)
-.pa-checkbox-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-
-  &__item {
-    position: relative;
-    border-bottom: $border-width-base solid var(--pa-border-color);
-    transition: background-color $transition-fast $easing-snappy;
-
-    &:hover {
-      background-color: var(--pa-table-hover-bg);
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  // Label wraps everything for full hitbox - now uses .pa-checkbox internally
-  &__label {
-    display: flex;
-    align-items: center;
-    padding: $spacing-sm $spacing-md;
-    margin: 0;
-    cursor: pointer;
-    font-size: $font-size-sm;
-    color: var(--pa-text-color-1);
-    user-select: none;
-    width: 100%;
-
-    // When using .pa-checkbox component inside label
-    .pa-checkbox {
-      margin-inline-end: $spacing-md; // RTL: flips to left
-
-      // Reset gap since label already provides spacing
-      gap: 0;
-    }
-  }
-
-  // Legacy: Checkbox input (for backwards compatibility)
-  // New pattern uses .pa-checkbox component inside .pa-checkbox-list__label
-  &__checkbox {
-    margin: 0;
-    margin-inline-end: $spacing-md; // RTL: flips to left
-    width: $spinner-size;
-    height: $spinner-size;
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  // Label text wrapper (for description support)
-  &__text {
-    flex: 1;
-  }
-
-  // Optional description/metadata
-  &__description {
-    display: block;
-    margin-top: $spacing-xs;
-    font-size: $font-size-xs;
-    color: var(--pa-text-color-2);
-  }
-
-  // Optional action buttons (outside label, positioned absolutely)
-  &__actions {
-    position: absolute;
-    inset-inline-end: $spacing-md; // RTL: flips to left
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    gap: $spacing-xs;
-    z-index: 1;
-
-    // Prevent label from overlapping actions
-    pointer-events: none;
-
-    // Re-enable pointer events on buttons
-    button {
-      pointer-events: auto;
-    }
-  }
-
-  // When item has actions, add padding to label to prevent text overlap
-  &__item:has(.pa-checkbox-list__actions) &__label {
-    padding-inline-end: 6rem; // RTL: flips to left - Adjust based on number of action buttons
-  }
-}
-
-// Compact variant (less padding)
-.pa-checkbox-list--compact {
-  .pa-checkbox-list__label {
-    padding: $spacing-xs $spacing-sm;
-  }
-}
-
-// Bordered variant (border around entire list)
-.pa-checkbox-list--bordered {
-  border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius;
-
-  .pa-checkbox-list__item {
-    &:first-child {
-      border-top-left-radius: $border-radius;
-      border-top-right-radius: $border-radius;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-  }
-}
-
-// Striped variant (alternating row colors)
-.pa-checkbox-list--striped {
-  .pa-checkbox-list__item:nth-child(even) {
-    background-color: var(--pa-table-stripe);
-  }
-}
-
-// Selected state styling
-.pa-checkbox-list__item--selected {
-  background-color: var(--pa-accent-light);
-
-  &:hover {
-    background-color: var(--pa-accent-light);
-  }
-}
-
-// Disabled state styling (feature not available)
-.pa-checkbox-list__item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-
-  &:hover {
-    background-color: transparent;
-  }
-
-  .pa-checkbox-list__checkbox,
-  .pa-checkbox-list__label {
-    cursor: not-allowed;
-  }
-}
-
-// Locked state styling (requires permission/authorization)
-.pa-checkbox-list__item--locked {
-  cursor: not-allowed;
-
-  &:hover {
-    background-color: rgba($warning-bg, 0.05);
-  }
-
-  .pa-checkbox-list__checkbox {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .pa-checkbox-list__label {
-    cursor: not-allowed;
-    position: relative;
-
-    // Add lock icon before text
-    .pa-checkbox-list__text {
-      color: $warning-bg;
-
-      &::before {
-        content: '🔒 ';
-        font-style: normal;
-      }
-    }
-  }
-}
-
-// Inline layout (horizontal, wrapping)
-.pa-checkbox-list--inline {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: $spacing-md;
-
-  .pa-checkbox-list__item {
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-    flex: 0 1 auto;
-
-    &:hover {
-      border-color: var(--pa-accent);
-      background-color: var(--pa-accent-light);
-    }
-  }
-
-  .pa-checkbox-list__label {
-    padding: $spacing-xs $spacing-sm;
-  }
-}
-
-// Grid layout (fixed columns)
-.pa-checkbox-list--grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: $spacing-sm;
-
-  .pa-checkbox-list__item {
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-
-    &:hover {
-      border-color: var(--pa-accent);
-      background-color: var(--pa-accent-light);
-    }
-  }
-}
-
-// Two-column layout
-.pa-checkbox-list--2col {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0;
-
-  .pa-checkbox-list__item {
-    &:nth-child(odd) {
-      border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
-    }
-  }
-}
-
-// Three-column layout
-.pa-checkbox-list--3col {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0;
-
-  .pa-checkbox-list__item {
-    &:not(:nth-child(3n)) {
-      border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
-    }
-  }
-}
-
-// Checkbox in tables (special handling for first column)
-.pa-table {
-  // Checkbox column styling
-  .pa-table__checkbox-col {
-    width: 1%;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  // Custom checkbox (.pa-checkbox) in table cells
-  th .pa-checkbox,
-  td .pa-checkbox {
-    // Remove default gap since table already provides spacing
-    gap: 0;
-
-    // Hide label text if any (checkbox only in tables)
-    .pa-checkbox__label {
-      display: none;
-    }
-  }
-
-  // Legacy: Checkbox in header (select all)
-  th .pa-checkbox-list__checkbox,
-  th input[type="checkbox"] {
-    margin: 0;
-    cursor: pointer;
-  }
-
-  // Legacy: Checkbox in body cells
-  td .pa-checkbox-list__checkbox,
-  td input[type="checkbox"] {
-    margin: 0;
-    cursor: pointer;
-  }
-
-  // Row selection styling
-  tr.pa-table__row--selected {
-    background-color: var(--pa-accent-light);
-  }
-}
+/* ========================================
+   Checkbox Lists
+   Styled checkbox lists with various layouts and features
+   Uses new .pa-checkbox component for custom tri-state checkboxes
+   ======================================== */
+@use '../variables' as *;
+
+// Basic checkbox list (vertical stack)
+.pa-checkbox-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    position: relative;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    transition: background-color $transition-fast $easing-snappy;
+
+    &:hover {
+      background-color: var(--pa-table-hover-bg);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  // Label wraps everything for full hitbox - now uses .pa-checkbox internally
+  &__label {
+    display: flex;
+    align-items: center;
+    padding: $spacing-sm $spacing-md;
+    margin: 0;
+    cursor: pointer;
+    font-size: $font-size-sm;
+    color: var(--pa-text-color-1);
+    user-select: none;
+    width: 100%;
+
+    // When using .pa-checkbox component inside label
+    .pa-checkbox {
+      margin-inline-end: $spacing-md; // RTL: flips to left
+
+      // Reset gap since label already provides spacing
+      gap: 0;
+    }
+  }
+
+  // Legacy: Checkbox input (for backwards compatibility)
+  // New pattern uses .pa-checkbox component inside .pa-checkbox-list__label
+  &__checkbox {
+    margin: 0;
+    margin-inline-end: $spacing-md; // RTL: flips to left
+    width: $spinner-size;
+    height: $spinner-size;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  // Label text wrapper (for description support)
+  &__text {
+    flex: 1;
+  }
+
+  // Optional description/metadata
+  &__description {
+    display: block;
+    margin-top: $spacing-xs;
+    font-size: $font-size-xs;
+    color: var(--pa-text-color-2);
+  }
+
+  // Optional action buttons (outside label, positioned absolutely)
+  &__actions {
+    position: absolute;
+    inset-inline-end: $spacing-md; // RTL: flips to left
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: $spacing-xs;
+    z-index: 1;
+
+    // Prevent label from overlapping actions
+    pointer-events: none;
+
+    // Re-enable pointer events on buttons
+    button {
+      pointer-events: auto;
+    }
+  }
+
+  // When item has actions, add padding to label to prevent text overlap
+  &__item:has(.pa-checkbox-list__actions) &__label {
+    padding-inline-end: 6rem; // RTL: flips to left - Adjust based on number of action buttons
+  }
+}
+
+// Compact variant (less padding)
+.pa-checkbox-list--compact {
+  .pa-checkbox-list__label {
+    padding: $spacing-xs $spacing-sm;
+  }
+}
+
+// Bordered variant (border around entire list)
+.pa-checkbox-list--bordered {
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: var(--pa-border-radius);
+
+  .pa-checkbox-list__item {
+    &:first-child {
+      border-top-left-radius: var(--pa-border-radius);
+      border-top-right-radius: var(--pa-border-radius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--pa-border-radius);
+      border-bottom-right-radius: var(--pa-border-radius);
+    }
+  }
+}
+
+// Striped variant (alternating row colors)
+.pa-checkbox-list--striped {
+  .pa-checkbox-list__item:nth-child(even) {
+    background-color: var(--pa-table-stripe);
+  }
+}
+
+// Selected state styling
+.pa-checkbox-list__item--selected {
+  background-color: var(--pa-accent-light);
+
+  &:hover {
+    background-color: var(--pa-accent-light);
+  }
+}
+
+// Disabled state styling (feature not available)
+.pa-checkbox-list__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  .pa-checkbox-list__checkbox,
+  .pa-checkbox-list__label {
+    cursor: not-allowed;
+  }
+}
+
+// Locked state styling (requires permission/authorization)
+.pa-checkbox-list__item--locked {
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: rgba($warning-bg, 0.05);
+  }
+
+  .pa-checkbox-list__checkbox {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .pa-checkbox-list__label {
+    cursor: not-allowed;
+    position: relative;
+
+    // Add lock icon before text
+    .pa-checkbox-list__text {
+      color: $warning-bg;
+
+      &::before {
+        content: '🔒 ';
+        font-style: normal;
+      }
+    }
+  }
+}
+
+// Inline layout (horizontal, wrapping)
+.pa-checkbox-list--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: $spacing-md;
+
+  .pa-checkbox-list__item {
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: var(--pa-border-radius);
+    flex: 0 1 auto;
+
+    &:hover {
+      border-color: var(--pa-accent);
+      background-color: var(--pa-accent-light);
+    }
+  }
+
+  .pa-checkbox-list__label {
+    padding: $spacing-xs $spacing-sm;
+  }
+}
+
+// Grid layout (fixed columns)
+.pa-checkbox-list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: $spacing-sm;
+
+  .pa-checkbox-list__item {
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: var(--pa-border-radius);
+
+    &:hover {
+      border-color: var(--pa-accent);
+      background-color: var(--pa-accent-light);
+    }
+  }
+}
+
+// Two-column layout
+.pa-checkbox-list--2col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+
+  .pa-checkbox-list__item {
+    &:nth-child(odd) {
+      border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
+    }
+  }
+}
+
+// Three-column layout
+.pa-checkbox-list--3col {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+
+  .pa-checkbox-list__item {
+    &:not(:nth-child(3n)) {
+      border-inline-end: $border-width-base solid var(--pa-border-color); // RTL: flips to left
+    }
+  }
+}
+
+// Checkbox in tables (special handling for first column)
+.pa-table {
+  // Checkbox column styling
+  .pa-table__checkbox-col {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  // Custom checkbox (.pa-checkbox) in table cells
+  th .pa-checkbox,
+  td .pa-checkbox {
+    // Remove default gap since table already provides spacing
+    gap: 0;
+
+    // Hide label text if any (checkbox only in tables)
+    .pa-checkbox__label {
+      display: none;
+    }
+  }
+
+  // Legacy: Checkbox in header (select all)
+  th .pa-checkbox-list__checkbox,
+  th input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  // Legacy: Checkbox in body cells
+  td .pa-checkbox-list__checkbox,
+  td input[type="checkbox"] {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  // Row selection styling
+  tr.pa-table__row--selected {
+    background-color: var(--pa-accent-light);
+  }
+}