@keenmate/pure-admin-core 2.3.0 → 2.3.2

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;
+    }
+  }
+}

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

@@ -1,89 +1,89 @@
-/* ========================================
-   Input Wrapper
-   Input with clear button, search tokens container
-   ======================================== */
-@use '../../variables' as *;
-
-// Input with clear button wrapper
-.pa-input-wrapper {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: $spacing-xs;
-  width: 100%;
-
-  .pa-input,
-  .pa-select,
-  .pa-virtual-textbox {
-    flex: 1;
-    min-width: 0; // Allow inputs to shrink below their content size
-    padding-inline-end: 4rem; // RTL: flips to padding-left, make room for clear button
-  }
-
-  &__clear {
-    position: absolute;
-    inset-inline-end: $spacing-xs; // RTL: flips to left
-    top: 50%;
-    transform: translateY(-50%);
-    background: transparent;
-    border: none;
-    color: var(--pa-text-color-2);
-    cursor: pointer;
-    padding: $spacing-xs;
-    font-size: $font-size-base;
-    line-height: 1;
-    opacity: 0.6;
-    transition: opacity $transition-fast $easing-snappy;
-
-    &:hover {
-      opacity: 1;
-      color: $danger-bg;
-    }
-
-    &:focus {
-      outline: none;
-      opacity: 1;
-    }
-
-    // Hide when input is empty
-    &--hidden {
-      display: none;
-    }
-  }
-}
-
-// Search Tokens Container (for query builder badges)
-.pa-search-tokens {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $spacing-xs;
-  align-items: center;
-}
-
-.pa-search-token-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-
-  .pa-badge {
-    margin: 0;
-  }
-}
-
-.pa-search-token-remove {
-  margin-inline-start: $spacing-xs; // RTL: flips to margin-right
-  padding: 0 $spacing-xs;
-  border: none;
-  background: transparent;
-  color: currentColor;
-  cursor: pointer;
-  font-size: 1.2em;
-  line-height: 1;
-  opacity: 0.7;
-  transition: opacity $transition-fast $easing-smooth;
-
-  &:hover {
-    opacity: 1;
-  }
-}
+/* ========================================
+   Input Wrapper
+   Input with clear button, search tokens container
+   ======================================== */
+@use '../../variables' as *;
+
+// Input with clear button wrapper
+.pa-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-xs;
+  width: 100%;
+
+  .pa-input,
+  .pa-select,
+  .pa-virtual-textbox {
+    flex: 1;
+    min-width: 0; // Allow inputs to shrink below their content size
+    padding-inline-end: 4rem; // RTL: flips to padding-left, make room for clear button
+  }
+
+  &__clear {
+    position: absolute;
+    inset-inline-end: $spacing-xs; // RTL: flips to left
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--pa-text-color-2);
+    cursor: pointer;
+    padding: $spacing-xs;
+    font-size: $font-size-base;
+    line-height: 1;
+    opacity: 0.6;
+    transition: opacity $transition-fast $easing-snappy;
+
+    &:hover {
+      opacity: 1;
+      color: $danger-bg;
+    }
+
+    &:focus {
+      outline: none;
+      opacity: 1;
+    }
+
+    // Hide when input is empty
+    &--hidden {
+      display: none;
+    }
+  }
+}
+
+// Search Tokens Container (for query builder badges)
+.pa-search-tokens {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+  align-items: center;
+}
+
+.pa-search-token-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+
+  .pa-badge {
+    margin: 0;
+  }
+}
+
+.pa-search-token-remove {
+  margin-inline-start: $spacing-xs; // RTL: flips to margin-right
+  padding: 0 $spacing-xs;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  font-size: 1.2em;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity $transition-fast $easing-smooth;
+
+  &:hover {
+    opacity: 1;
+  }
+}