@keenmate/pure-admin-core 2.3.1 → 2.3.3

package/src/scss/core-components/forms/_checkboxes-radios.scss

@@ -1,205 +1,205 @@
-/* ========================================
-   Checkboxes and Radio Buttons
-   Custom checkbox component with tri-state support, radio buttons
-   ======================================== */
-@use '../../variables' as *;
-
-// Checkboxes and Radio Buttons Container
-.pa-checkbox-group,
-.pa-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: $form-scale;
-}
-
-// ============================================================================
-// Custom Checkbox Component (Tri-State Support)
-// ============================================================================
-// States: unchecked, checked, indeterminate
-// Set indeterminate via JS: checkbox.indeterminate = true
-// ============================================================================
-.pa-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-sm;
-  cursor: pointer;
-  font-size: $font-size-sm;
-  color: var(--pa-text-color-1);
-  user-select: none;
-
-  // Hide native checkbox (visually hidden but accessible)
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-  }
-
-  // Custom checkbox box
-  &__box {
-    position: relative;
-    width: $checkbox-size;
-    height: $checkbox-size;
-    border: $checkbox-border-width solid var(--pa-checkbox-border-color);
-    border-radius: $checkbox-border-radius;
-    background-color: var(--pa-checkbox-bg);
-    transition: all $checkbox-transition $easing-snappy;
-    flex-shrink: 0;
-
-    // Checkmark/dash (hidden by default)
-    &::after {
-      content: '';
-      position: absolute;
-      display: none;
-    }
-  }
-
-  // Hover state
-  &:hover &__box {
-    border-color: var(--pa-checkbox-border-color-hover);
-  }
-
-  // Focus state (keyboard navigation)
-  input:focus-visible + &__box {
-    box-shadow: var(--pa-checkbox-focus-shadow);
-    border-color: var(--pa-checkbox-border-color-checked);
-  }
-
-  // Checked state
-  input:checked + &__box {
-    background-color: var(--pa-checkbox-bg-checked);
-    border-color: var(--pa-checkbox-border-color-checked);
-
-    &::after {
-      display: block;
-      // Checkmark shape (CSS border trick)
-      left: 30%;
-      top: 10%;
-      width: 30%;
-      height: 55%;
-      border: solid var(--pa-checkbox-checkmark-color);
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-  }
-
-  // Indeterminate state (dash)
-  input:indeterminate + &__box {
-    background-color: var(--pa-checkbox-bg-indeterminate);
-    border-color: var(--pa-checkbox-border-color-checked);
-
-    &::after {
-      display: block;
-      // Dash shape
-      left: 20%;
-      top: 45%;
-      width: 60%;
-      height: 0;
-      border: solid var(--pa-checkbox-checkmark-color);
-      border-width: 0 0 2px 0;
-      transform: none;
-    }
-  }
-
-  // Label text
-  &__label {
-    flex: 1;
-  }
-
-  // Size modifiers - apply to box element
-  &--xs &__box { width: $checkbox-size-xs; height: $checkbox-size-xs; }
-  &--sm &__box { width: $checkbox-size-sm; height: $checkbox-size-sm; }
-  &--lg &__box { width: $checkbox-size-lg; height: $checkbox-size-lg; }
-  &--xl &__box { width: $checkbox-size-xl; height: $checkbox-size-xl; }
-
-  // Checkmark position adjustments for smaller sizes
-  &--xs input:checked + &__box::after,
-  &--sm input:checked + &__box::after {
-    left: 25%;
-    top: 5%;
-  }
-  &--xs input:indeterminate + &__box::after,
-  &--sm input:indeterminate + &__box::after {
-    top: 40%;
-  }
-
-  // X mark modifier (instead of checkmark)
-  &--x input:checked + &__box {
-    &::after {
-      // First diagonal of X
-      left: 50%;
-      top: 50%;
-      width: 60%;
-      height: 0;
-      border: solid var(--pa-checkbox-checkmark-color);
-      border-width: 0 0 2px 0;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-    &::before {
-      // Second diagonal of X
-      content: '';
-      position: absolute;
-      display: block;
-      left: 50%;
-      top: 50%;
-      width: 60%;
-      height: 0;
-      border: solid var(--pa-checkbox-checkmark-color);
-      border-width: 0 0 2px 0;
-      transform: translate(-50%, -50%) rotate(-45deg);
-    }
-  }
-
-  // Disabled state
-  &--disabled,
-  &:has(input:disabled) {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    .pa-checkbox__box {
-      cursor: not-allowed;
-    }
-  }
-}
-
-// ============================================================================
-// Radio Buttons (Native styling)
-// ============================================================================
-.pa-radio {
-  display: flex;
-  align-items: center;
-  gap: $form-scale;
-  cursor: pointer;
-  font-size: $font-size-sm;
-  color: var(--pa-text-color-1);
-
-  input {
-    margin: 0;
-    width: $checkbox-size;
-    height: $checkbox-size;
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  // Size modifiers
-  &--xs input {
-    width: $checkbox-size-xs;
-    height: $checkbox-size-xs;
-  }
-
-  &--sm input {
-    width: $checkbox-size-sm;
-    height: $checkbox-size-sm;
-  }
-
-  &--lg input {
-    width: $checkbox-size-lg;
-    height: $checkbox-size-lg;
-  }
-
-  &--xl input {
-    width: $checkbox-size-xl;
-    height: $checkbox-size-xl;
-  }
-}
+/* ========================================
+   Checkboxes and Radio Buttons
+   Custom checkbox component with tri-state support, radio buttons
+   ======================================== */
+@use '../../variables' as *;
+
+// Checkboxes and Radio Buttons Container
+.pa-checkbox-group,
+.pa-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: $form-scale;
+}
+
+// ============================================================================
+// Custom Checkbox Component (Tri-State Support)
+// ============================================================================
+// States: unchecked, checked, indeterminate
+// Set indeterminate via JS: checkbox.indeterminate = true
+// ============================================================================
+.pa-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: var(--pa-text-color-1);
+  user-select: none;
+
+  // Hide native checkbox (visually hidden but accessible)
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  // Custom checkbox box
+  &__box {
+    position: relative;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    border: $checkbox-border-width solid var(--pa-checkbox-border-color);
+    border-radius: var(--pa-border-radius-sm);
+    background-color: var(--pa-checkbox-bg);
+    transition: all $checkbox-transition $easing-snappy;
+    flex-shrink: 0;
+
+    // Checkmark/dash (hidden by default)
+    &::after {
+      content: '';
+      position: absolute;
+      display: none;
+    }
+  }
+
+  // Hover state
+  &:hover &__box {
+    border-color: var(--pa-checkbox-border-color-hover);
+  }
+
+  // Focus state (keyboard navigation)
+  input:focus-visible + &__box {
+    box-shadow: var(--pa-checkbox-focus-shadow);
+    border-color: var(--pa-checkbox-border-color-checked);
+  }
+
+  // Checked state
+  input:checked + &__box {
+    background-color: var(--pa-checkbox-bg-checked);
+    border-color: var(--pa-checkbox-border-color-checked);
+
+    &::after {
+      display: block;
+      // Checkmark shape (CSS border trick)
+      left: 30%;
+      top: 10%;
+      width: 30%;
+      height: 55%;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  // Indeterminate state (dash)
+  input:indeterminate + &__box {
+    background-color: var(--pa-checkbox-bg-indeterminate);
+    border-color: var(--pa-checkbox-border-color-checked);
+
+    &::after {
+      display: block;
+      // Dash shape
+      left: 20%;
+      top: 45%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: none;
+    }
+  }
+
+  // Label text
+  &__label {
+    flex: 1;
+  }
+
+  // Size modifiers - apply to box element
+  &--xs &__box { width: $checkbox-size-xs; height: $checkbox-size-xs; }
+  &--sm &__box { width: $checkbox-size-sm; height: $checkbox-size-sm; }
+  &--lg &__box { width: $checkbox-size-lg; height: $checkbox-size-lg; }
+  &--xl &__box { width: $checkbox-size-xl; height: $checkbox-size-xl; }
+
+  // Checkmark position adjustments for smaller sizes
+  &--xs input:checked + &__box::after,
+  &--sm input:checked + &__box::after {
+    left: 25%;
+    top: 5%;
+  }
+  &--xs input:indeterminate + &__box::after,
+  &--sm input:indeterminate + &__box::after {
+    top: 40%;
+  }
+
+  // X mark modifier (instead of checkmark)
+  &--x input:checked + &__box {
+    &::after {
+      // First diagonal of X
+      left: 50%;
+      top: 50%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    &::before {
+      // Second diagonal of X
+      content: '';
+      position: absolute;
+      display: block;
+      left: 50%;
+      top: 50%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+  }
+
+  // Disabled state
+  &--disabled,
+  &:has(input:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .pa-checkbox__box {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// ============================================================================
+// Radio Buttons (Native styling)
+// ============================================================================
+.pa-radio {
+  display: flex;
+  align-items: center;
+  gap: $form-scale;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: var(--pa-text-color-1);
+
+  input {
+    margin: 0;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  // Size modifiers
+  &--xs input {
+    width: $checkbox-size-xs;
+    height: $checkbox-size-xs;
+  }
+
+  &--sm input {
+    width: $checkbox-size-sm;
+    height: $checkbox-size-sm;
+  }
+
+  &--lg input {
+    width: $checkbox-size-lg;
+    height: $checkbox-size-lg;
+  }
+
+  &--xl input {
+    width: $checkbox-size-xl;
+    height: $checkbox-size-xl;
+  }
+}

package/src/scss/core-components/forms/_form-inputs.scss

@@ -9,7 +9,7 @@
   height: #{$base-input-size-md-height}rem;
   padding: $input-padding-v $input-padding-h;
   border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
   color: var(--pa-text-color-1);
@@ -27,7 +27,7 @@
   height: #{$base-input-size-md-height}rem;
   padding: $select-padding-v $select-padding-h;
   border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   line-height: normal;
   background-color: var(--pa-input-bg);
@@ -45,7 +45,7 @@
   width: 100%;
   padding: $input-padding-v $input-padding-h;
   border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
   color: var(--pa-text-color-1);

package/src/scss/core-components/forms/_form-layout.scss

@@ -1,66 +1,66 @@
-/* ========================================
-   Form Layout
-   Form groups, form containers, horizontal layouts
-   ======================================== */
-@use '../../variables' as *;
-
-// Form Elements
-.pa-form-group {
-  margin-bottom: $form-group-margin-bottom;
-
-  // Remove margins when first/last child in card body (direct, in forms+grids, or in grid columns)
-  .pa-card__body > &:first-child,
-  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:first-child > &:first-child,
-  .pa-card__body > [class*="pure-u"]:first-child > &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body > &:last-child,
-  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:last-child > &:last-child,
-  .pa-card__body > [class*="pure-u"]:last-child > &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-// Horizontal form group (label on left, input on right)
-.pa-form-group--horizontal {
-  display: flex;
-  align-items: flex-start;
-  gap: $spacing-base;
-
-  label {
-    flex-shrink: 0;
-    padding-top: $input-padding-v;
-    margin-bottom: 0;
-    color: var(--pa-text-color-1);
-    font-weight: $font-weight-medium;
-    font-size: $font-size-sm;
-  }
-
-  // Input container takes remaining space
-  > .pa-input,
-  > .pa-select,
-  > .pa-textarea {
-    flex: 1;
-  }
-}
-
-.pa-form {
-  .pa-form-group {
-    label {
-      display: flex;
-      align-items: center;
-      gap: $form-scale;
-      margin-bottom: $form-label-margin-bottom;
-      color: var(--pa-text-color-1);
-      font-weight: $font-weight-medium;
-      font-size: $font-size-sm;
-    }
-  }
-
-  .pa-form-actions {
-    margin-top: $spacing-base;
-    display: flex;
-    gap: $form-scale;
-    flex-wrap: wrap;
-  }
-}
+/* ========================================
+   Form Layout
+   Form groups, form containers, horizontal layouts
+   ======================================== */
+@use '../../variables' as *;
+
+// Form Elements
+.pa-form-group {
+  margin-bottom: $form-group-margin-bottom;
+
+  // Remove margins when first/last child in card body (direct, in forms+grids, or in grid columns)
+  .pa-card__body > &:first-child,
+  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:first-child > &:first-child,
+  .pa-card__body > [class*="pure-u"]:first-child > &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body > &:last-child,
+  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:last-child > &:last-child,
+  .pa-card__body > [class*="pure-u"]:last-child > &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Horizontal form group (label on left, input on right)
+.pa-form-group--horizontal {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-base;
+
+  label {
+    flex-shrink: 0;
+    padding-top: $input-padding-v;
+    margin-bottom: 0;
+    color: var(--pa-text-color-1);
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm;
+  }
+
+  // Input container takes remaining space
+  > .pa-input,
+  > .pa-select,
+  > .pa-textarea {
+    flex: 1;
+  }
+}
+
+.pa-form {
+  .pa-form-group {
+    label {
+      display: flex;
+      align-items: center;
+      gap: $form-scale;
+      margin-bottom: $form-label-margin-bottom;
+      color: var(--pa-text-color-1);
+      font-weight: $font-weight-medium;
+      font-size: $font-size-sm;
+    }
+  }
+
+  .pa-form-actions {
+    margin-top: $spacing-base;
+    display: flex;
+    gap: $form-scale;
+    flex-wrap: wrap;
+  }
+}