@keenmate/pure-admin-core 2.3.1 → 2.3.3

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';

package/src/scss/core-components/forms/_input-groups.scss

@@ -1,154 +1,154 @@
-/* ========================================
-   Input Groups
-   Input groups with prepend/append addons and buttons
-   RTL-aware using CSS logical properties
-   ======================================== */
-@use '../../variables' as *;
-
-.pa-input-group {
-  display: flex;
-  align-items: stretch;
-
-  .pa-input {
-    border-radius: 0;
-    flex: 1;
-
-    &:first-child {
-      border-start-start-radius: $border-radius; // RTL: top-right in RTL
-      border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
-    }
-
-    &:last-child {
-      border-start-end-radius: $border-radius; // RTL: top-left in RTL
-      border-end-end-radius: $border-radius;   // RTL: bottom-left in RTL
-    }
-
-    &:not(:first-child) {
-      border-inline-start: none; // RTL: flips to border-right
-    }
-
-    &:not(:last-child) {
-      border-inline-end: none; // RTL: flips to border-left
-    }
-  }
-
-  &__prepend,
-  &__append {
-    display: flex;
-    align-items: center;
-    height: #{$base-input-size-md-height}rem;
-    line-height: #{$base-input-size-md-height}rem;
-    padding: 0 $input-padding-h;
-    border: $border-width-base solid var(--pa-border-color);
-    font-size: $font-size-sm;
-    white-space: nowrap;
-    border-radius: 0;
-  }
-
-  &__prepend {
-    background-color: var(--pa-input-group-prepend-bg);
-    color: var(--pa-input-group-prepend-text);
-    border-color: var(--pa-input-group-prepend-bg);
-    border-inline-end: none; // RTL: flips to border-left
-
-    &:first-child {
-      border-start-start-radius: $border-radius; // RTL: top-right in RTL
-      border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
-    }
-  }
-
-  &__append {
-    background-color: var(--pa-input-group-append-bg);
-    color: var(--pa-input-group-append-text);
-    border-color: var(--pa-input-group-append-bg);
-    border-inline-start: none; // RTL: flips to border-right
-
-    &:last-child {
-      border-start-end-radius: $border-radius; // RTL: top-left in RTL
-      border-end-end-radius: $border-radius;   // RTL: bottom-left in RTL
-    }
-  }
-
-  // Adjacent prepends/appends need borders between them
-  &__prepend + &__prepend {
-    border-inline-start: $border-width-base solid var(--pa-input-group-prepend-bg); // RTL: flips
-  }
-
-  &__append + &__append {
-    border-inline-start: $border-width-base solid var(--pa-input-group-append-bg); // RTL: flips
-  }
-
-  // When input is focused, show focus border on adjacent prepend/append
-  &:has(.pa-input:focus) {
-    // Last prepend (one before input) gets focus border
-    .pa-input-group__prepend {
-      border-inline-end: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
-    }
-
-    // But prepends followed by another prepend keep normal border
-    .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
-      border-inline-end: none; // RTL: flips
-    }
-
-    // First append (one after input) gets focus border
-    .pa-input-group__append {
-      border-inline-start: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
-    }
-
-    // But appends following another append keep normal border
-    .pa-input-group__append + .pa-input-group__append {
-      border-inline-start: $border-width-base solid var(--pa-border-color); // RTL: flips
-    }
-  }
-
-  &__button {
-    border-radius: 0;
-
-    &:first-child {
-      border-start-start-radius: $border-radius; // RTL: top-right in RTL
-      border-end-start-radius: $border-radius;   // RTL: bottom-right in RTL
-    }
-
-    &:last-child {
-      border-start-end-radius: $border-radius; // RTL: top-left in RTL
-      border-end-end-radius: $border-radius;   // RTL: bottom-left in RTL
-    }
-  }
-
-  // Input group sizes - match prepend/append to input sizes
-  &--xs {
-    .pa-input-group__prepend,
-    .pa-input-group__append {
-      height: #{$base-input-size-xs-height}rem;
-      line-height: #{$base-input-size-xs-height}rem;
-      font-size: $font-size-xs;
-    }
-  }
-
-  &--sm {
-    .pa-input-group__prepend,
-    .pa-input-group__append {
-      height: #{$base-input-size-sm-height}rem;
-      line-height: #{$base-input-size-sm-height}rem;
-      font-size: $font-size-sm;
-    }
-  }
-
-  &--lg {
-    .pa-input-group__prepend,
-    .pa-input-group__append {
-      height: #{$base-input-size-lg-height}rem;
-      line-height: #{$base-input-size-lg-height}rem;
-      font-size: $font-size-base;
-    }
-  }
-
-  &--xl {
-    .pa-input-group__prepend,
-    .pa-input-group__append {
-      height: #{$base-input-size-xl-height}rem;
-      line-height: #{$base-input-size-xl-height}rem;
-      font-size: $font-size-lg;
-    }
-  }
-}
+/* ========================================
+   Input Groups
+   Input groups with prepend/append addons and buttons
+   RTL-aware using CSS logical properties
+   ======================================== */
+@use '../../variables' as *;
+
+.pa-input-group {
+  display: flex;
+  align-items: stretch;
+
+  .pa-input {
+    border-radius: 0;
+    flex: 1;
+
+    &:first-child {
+      border-start-start-radius: var(--pa-border-radius); // RTL: top-right in RTL
+      border-end-start-radius: var(--pa-border-radius);   // RTL: bottom-right in RTL
+    }
+
+    &:last-child {
+      border-start-end-radius: var(--pa-border-radius); // RTL: top-left in RTL
+      border-end-end-radius: var(--pa-border-radius);   // RTL: bottom-left in RTL
+    }
+
+    &:not(:first-child) {
+      border-inline-start: none; // RTL: flips to border-right
+    }
+
+    &:not(:last-child) {
+      border-inline-end: none; // RTL: flips to border-left
+    }
+  }
+
+  &__prepend,
+  &__append {
+    display: flex;
+    align-items: center;
+    height: #{$base-input-size-md-height}rem;
+    line-height: #{$base-input-size-md-height}rem;
+    padding: 0 $input-padding-h;
+    border: $border-width-base solid var(--pa-border-color);
+    font-size: $font-size-sm;
+    white-space: nowrap;
+    border-radius: 0;
+  }
+
+  &__prepend {
+    background-color: var(--pa-input-group-prepend-bg);
+    color: var(--pa-input-group-prepend-text);
+    border-color: var(--pa-input-group-prepend-bg);
+    border-inline-end: none; // RTL: flips to border-left
+
+    &:first-child {
+      border-start-start-radius: var(--pa-border-radius); // RTL: top-right in RTL
+      border-end-start-radius: var(--pa-border-radius);   // RTL: bottom-right in RTL
+    }
+  }
+
+  &__append {
+    background-color: var(--pa-input-group-append-bg);
+    color: var(--pa-input-group-append-text);
+    border-color: var(--pa-input-group-append-bg);
+    border-inline-start: none; // RTL: flips to border-right
+
+    &:last-child {
+      border-start-end-radius: var(--pa-border-radius); // RTL: top-left in RTL
+      border-end-end-radius: var(--pa-border-radius);   // RTL: bottom-left in RTL
+    }
+  }
+
+  // Adjacent prepends/appends need borders between them
+  &__prepend + &__prepend {
+    border-inline-start: $border-width-base solid var(--pa-input-group-prepend-bg); // RTL: flips
+  }
+
+  &__append + &__append {
+    border-inline-start: $border-width-base solid var(--pa-input-group-append-bg); // RTL: flips
+  }
+
+  // When input is focused, show focus border on adjacent prepend/append
+  &:has(.pa-input:focus) {
+    // Last prepend (one before input) gets focus border
+    .pa-input-group__prepend {
+      border-inline-end: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
+    }
+
+    // But prepends followed by another prepend keep normal border
+    .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
+      border-inline-end: none; // RTL: flips
+    }
+
+    // First append (one after input) gets focus border
+    .pa-input-group__append {
+      border-inline-start: $border-width-base solid var(--pa-input-focus-border-color); // RTL: flips
+    }
+
+    // But appends following another append keep normal border
+    .pa-input-group__append + .pa-input-group__append {
+      border-inline-start: $border-width-base solid var(--pa-border-color); // RTL: flips
+    }
+  }
+
+  &__button {
+    border-radius: 0;
+
+    &:first-child {
+      border-start-start-radius: var(--pa-border-radius); // RTL: top-right in RTL
+      border-end-start-radius: var(--pa-border-radius);   // RTL: bottom-right in RTL
+    }
+
+    &:last-child {
+      border-start-end-radius: var(--pa-border-radius); // RTL: top-left in RTL
+      border-end-end-radius: var(--pa-border-radius);   // RTL: bottom-left in RTL
+    }
+  }
+
+  // Input group sizes - match prepend/append to input sizes
+  &--xs {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      height: #{$base-input-size-xs-height}rem;
+      line-height: #{$base-input-size-xs-height}rem;
+      font-size: $font-size-xs;
+    }
+  }
+
+  &--sm {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      height: #{$base-input-size-sm-height}rem;
+      line-height: #{$base-input-size-sm-height}rem;
+      font-size: $font-size-sm;
+    }
+  }
+
+  &--lg {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      height: #{$base-input-size-lg-height}rem;
+      line-height: #{$base-input-size-lg-height}rem;
+      font-size: $font-size-base;
+    }
+  }
+
+  &--xl {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      height: #{$base-input-size-xl-height}rem;
+      line-height: #{$base-input-size-xl-height}rem;
+      font-size: $font-size-lg;
+    }
+  }
+}