@keenmate/pure-admin-core 2.3.0 → 2.3.2

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

@@ -1,135 +1,136 @@
-/* ========================================
-   Form Input Elements
-   Input, select, textarea base styles and sizes
-   ======================================== */
-@use '../../variables' as *;
-
-.pa-input {
-  width: 100%;
-  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;
-  font-size: $font-size-sm;
-  background-color: var(--pa-input-bg);
-  color: var(--pa-text-color-1);
-  transition: border-color $transition-fast $easing-snappy;
-
-  &:focus {
-    outline: none;
-    border-color: var(--pa-input-focus-border-color);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
-  }
-}
-
-.pa-select {
-  width: 100%;
-  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;
-  font-size: $font-size-sm;
-  background-color: var(--pa-input-bg);
-  color: var(--pa-text-color-1);
-  transition: border-color $transition-fast $easing-snappy;
-
-  &:focus {
-    outline: none;
-    border-color: var(--pa-select-focus-border-color);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
-  }
-}
-
-.pa-textarea {
-  width: 100%;
-  padding: $input-padding-v $input-padding-h;
-  border: $border-width-base solid var(--pa-border-color);
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  background-color: var(--pa-input-bg);
-  color: var(--pa-text-color-1);
-  transition: border-color $transition-fast $easing-snappy;
-  resize: vertical;
-  min-height: $textarea-min-height;
-
-  &:focus {
-    outline: none;
-    border-color: var(--pa-textarea-focus-border-color);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
-  }
-
-  &::placeholder {
-    color: var(--pa-text-color-2);
-  }
-}
-
-// Input Sizes - heights aligned with $base-input-size-* variables
-.pa-input--xs,
-.pa-select--xs {
-  height: #{$base-input-size-xs-height}rem;
-  padding: $input-padding-xs-v $input-padding-h;
-  font-size: $font-size-xs;
-}
-
-.pa-input--sm,
-.pa-select--sm {
-  height: #{$base-input-size-sm-height}rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-sm;
-}
-
-.pa-input--lg,
-.pa-select--lg {
-  height: #{$base-input-size-lg-height}rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-base;
-}
-
-.pa-input--xl,
-.pa-select--xl {
-  height: #{$base-input-size-xl-height}rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-lg;
-}
-
-// Textarea Sizes - height sets initial size, min-height prevents shrinking below that
-.pa-textarea--xs {
-  height: 4rem;
-  min-height: 4rem;
-  padding: $input-padding-xs-v $input-padding-h;
-  font-size: $font-size-xs;
-}
-
-.pa-textarea--sm {
-  height: 6rem;
-  min-height: 6rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-sm;
-}
-
-.pa-textarea--lg {
-  height: 12rem;
-  min-height: 12rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-base;
-}
-
-.pa-textarea--xl {
-  height: 16rem;
-  min-height: 16rem;
-  padding: $input-padding-v $input-padding-h;
-  font-size: $font-size-lg;
-}
-
-// Dark mode: invert native date/time picker icons for visibility
-.pa-mode-dark {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"],
-  input[type="week"] {
-    &::-webkit-calendar-picker-indicator {
-      filter: invert(1);
-    }
-  }
-}
+/* ========================================
+   Form Input Elements
+   Input, select, textarea base styles and sizes
+   ======================================== */
+@use '../../variables' as *;
+
+.pa-input {
+  width: 100%;
+  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: var(--pa-border-radius);
+  font-size: $font-size-sm;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-color-1);
+  transition: border-color $transition-fast $easing-snappy;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-input-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+}
+
+.pa-select {
+  width: 100%;
+  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: var(--pa-border-radius);
+  font-size: $font-size-sm;
+  line-height: normal;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-color-1);
+  transition: border-color $transition-fast $easing-snappy;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-select-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+}
+
+.pa-textarea {
+  width: 100%;
+  padding: $input-padding-v $input-padding-h;
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: var(--pa-border-radius);
+  font-size: $font-size-sm;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-color-1);
+  transition: border-color $transition-fast $easing-snappy;
+  resize: vertical;
+  min-height: $textarea-min-height;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-textarea-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+
+  &::placeholder {
+    color: var(--pa-text-color-2);
+  }
+}
+
+// Input Sizes - heights aligned with $base-input-size-* variables
+.pa-input--xs,
+.pa-select--xs {
+  height: #{$base-input-size-xs-height}rem;
+  padding: $input-padding-xs-v $input-padding-h;
+  font-size: $font-size-xs;
+}
+
+.pa-input--sm,
+.pa-select--sm {
+  height: #{$base-input-size-sm-height}rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-sm;
+}
+
+.pa-input--lg,
+.pa-select--lg {
+  height: #{$base-input-size-lg-height}rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-base;
+}
+
+.pa-input--xl,
+.pa-select--xl {
+  height: #{$base-input-size-xl-height}rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-lg;
+}
+
+// Textarea Sizes - height sets initial size, min-height prevents shrinking below that
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: $input-padding-xs-v $input-padding-h;
+  font-size: $font-size-xs;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-sm;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-base;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-lg;
+}
+
+// Dark mode: invert native date/time picker icons for visibility
+.pa-mode-dark {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      filter: invert(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;
+  }
+}

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

@@ -1,115 +1,115 @@
-/* ========================================
-   Form Validation States
-   Input states (error, success, warning), form groups with states, help text
-   ======================================== */
-@use '../../variables' as *;
-
-// Input States
-.pa-input--error,
-.pa-select--error {
-  border-color: var(--pa-danger-bg);
-
-  &:focus {
-    border-color: var(--pa-danger-bg);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
-  }
-}
-
-.pa-input--success,
-.pa-select--success {
-  border-color: var(--pa-success-bg);
-
-  &:focus {
-    border-color: var(--pa-success-bg);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
-  }
-}
-
-.pa-input--warning,
-.pa-select--warning {
-  border-color: var(--pa-warning-bg);
-
-  &:focus {
-    border-color: var(--pa-warning-bg);
-    box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
-  }
-}
-
-// Form Groups with States
-.pa-form-group--error {
-  .pa-input,
-  .pa-select {
-    border-color: var(--pa-danger-bg);
-
-    &:focus {
-      border-color: var(--pa-danger-bg);
-      box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
-    }
-  }
-}
-
-.pa-form-group--success {
-  .pa-input,
-  .pa-select {
-    border-color: var(--pa-success-bg);
-
-    &:focus {
-      border-color: var(--pa-success-bg);
-      box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
-    }
-  }
-}
-
-.pa-form-group--warning {
-  .pa-input,
-  .pa-select {
-    border-color: var(--pa-warning-bg);
-
-    &:focus {
-      border-color: var(--pa-warning-bg);
-      box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
-    }
-  }
-}
-
-// Form Help Text
-.pa-form-help {
-  display: block;
-  margin-top: $form-help-margin-top;
-  font-size: $font-size-xs;
-  color: var(--pa-text-color-2);
-
-  &--error {
-    color: var(--pa-danger-bg);
-  }
-
-  &--success {
-    color: var(--pa-success-bg);
-  }
-
-  &--warning {
-    color: var(--pa-warning-bg);
-  }
-}
-
-// Theme Color Variants for Help Text (color-1 through color-9)
-@for $i from 1 through 9 {
-  .pa-form-help--color-#{$i} {
-    color: var(--pa-color-#{$i});
-  }
-}
-
-// Theme Color Variants for Inputs (color-1 through color-9)
-// These use theme-customizable colors from --pa-color-* CSS variables
-@for $i from 1 through 9 {
-  .pa-input--color-#{$i},
-  .pa-select--color-#{$i},
-  .pa-textarea--color-#{$i} {
-    border-color: var(--pa-color-#{$i});
-
-    &:focus {
-      border-color: var(--pa-color-#{$i});
-      box-shadow: 0 0 0 $focus-ring-width color-mix(in srgb, var(--pa-color-#{$i}) 25%, transparent);
-    }
-  }
-}
+/* ========================================
+   Form Validation States
+   Input states (error, success, warning), form groups with states, help text
+   ======================================== */
+@use '../../variables' as *;
+
+// Input States
+.pa-input--error,
+.pa-select--error {
+  border-color: var(--pa-danger-bg);
+
+  &:focus {
+    border-color: var(--pa-danger-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
+  }
+}
+
+.pa-input--success,
+.pa-select--success {
+  border-color: var(--pa-success-bg);
+
+  &:focus {
+    border-color: var(--pa-success-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
+  }
+}
+
+.pa-input--warning,
+.pa-select--warning {
+  border-color: var(--pa-warning-bg);
+
+  &:focus {
+    border-color: var(--pa-warning-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
+  }
+}
+
+// Form Groups with States
+.pa-form-group--error {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-danger-bg);
+
+    &:focus {
+      border-color: var(--pa-danger-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
+    }
+  }
+}
+
+.pa-form-group--success {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-success-bg);
+
+    &:focus {
+      border-color: var(--pa-success-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
+    }
+  }
+}
+
+.pa-form-group--warning {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-warning-bg);
+
+    &:focus {
+      border-color: var(--pa-warning-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
+    }
+  }
+}
+
+// Form Help Text
+.pa-form-help {
+  display: block;
+  margin-top: $form-help-margin-top;
+  font-size: $font-size-xs;
+  color: var(--pa-text-color-2);
+
+  &--error {
+    color: var(--pa-danger-bg);
+  }
+
+  &--success {
+    color: var(--pa-success-bg);
+  }
+
+  &--warning {
+    color: var(--pa-warning-bg);
+  }
+}
+
+// Theme Color Variants for Help Text (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-form-help--color-#{$i} {
+    color: var(--pa-color-#{$i});
+  }
+}
+
+// Theme Color Variants for Inputs (color-1 through color-9)
+// These use theme-customizable colors from --pa-color-* CSS variables
+@for $i from 1 through 9 {
+  .pa-input--color-#{$i},
+  .pa-select--color-#{$i},
+  .pa-textarea--color-#{$i} {
+    border-color: var(--pa-color-#{$i});
+
+    &:focus {
+      border-color: var(--pa-color-#{$i});
+      box-shadow: 0 0 0 $focus-ring-width color-mix(in srgb, var(--pa-color-#{$i}) 25%, transparent);
+    }
+  }
+}

package/src/scss/core-components/forms/_index.scss

@@ -1,12 +1,12 @@
-/* ========================================
-   Forms Index
-   Central import point for all form component modules
-   ======================================== */
-
-@forward 'form-layout';
-@forward 'form-inputs';
-@forward 'form-states';
-@forward 'input-groups';
-@forward 'input-wrapper';
-@forward 'query-editor';
-@forward 'checkboxes-radios';
+/* ========================================
+   Forms Index
+   Central import point for all form component modules
+   ======================================== */
+
+@forward 'form-layout';
+@forward 'form-inputs';
+@forward 'form-states';
+@forward 'input-groups';
+@forward 'input-wrapper';
+@forward 'query-editor';
+@forward 'checkboxes-radios';