@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.0

package/src/scss/core-components/_buttons.scss

@@ -1,425 +1,425 @@
-/* ========================================
-   Button Components
-   Buttons, button groups, sizes, colors, states, and icon buttons
-   ======================================== */
-@use '../variables' as *;
-
-// Buttons
-.pa-btn {
-  display: inline-block;
-  height: $btn-height-base;
-  padding: $btn-padding-v $btn-padding-h;
-  border: $btn-border-width solid transparent;
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all $transition-fast $easing-snappy;
-  background: none;
-  color: var(--pa-text-primary);
-
-  &:hover {
-    transform: translateY($btn-hover-lift);
-  }
-
-  &--primary {
-    background-color: var(--pa-accent);
-    border-color: var(--pa-accent);
-    color: var(--pa-btn-primary-text);
-
-    &:hover {
-      background-color: var(--pa-accent);
-      filter: brightness($btn-hover-brightness);
-    }
-  }
-
-  &--secondary {
-    background-color: transparent;
-    border-color: var(--pa-border-color);
-    color: var(--pa-text-primary);
-
-    &:hover {
-      background-color: var(--pa-primary-bg);
-      border-color: var(--pa-accent);
-    }
-  }
-
-  &--xs {
-    height: $btn-height-xs;
-    padding: $btn-padding-xs-v $btn-padding-xs-h;
-    font-size: $font-size-xs;
-  }
-
-  &--sm {
-    height: $btn-height-sm;
-    padding: $btn-padding-sm-v $btn-padding-sm-h;
-    font-size: $font-size-sm;
-  }
-
-  &--lg {
-    height: $btn-height-lg;
-    padding: $btn-padding-lg-v $btn-padding-lg-h;
-    font-size: $font-size-base;
-  }
-
-  &--xl {
-    height: $btn-height-xl;
-    padding: $btn-padding-xl-v $btn-padding-xl-h;
-    font-size: $font-size-lg;
-  }
-
-  // Button variants (colors)
-  &--success {
-    background-color: var(--pa-btn-success-bg);
-    border-color: var(--pa-btn-success-bg);
-    color: var(--pa-btn-success-text);
-
-    &:hover {
-      background-color: var(--pa-btn-success-bg-hover);
-      border-color: var(--pa-btn-success-bg-hover);
-    }
-  }
-
-  &--warning {
-    background-color: var(--pa-btn-warning-bg);
-    border-color: var(--pa-btn-warning-bg);
-    color: var(--pa-btn-warning-text);
-
-    &:hover {
-      background-color: var(--pa-btn-warning-bg-hover);
-      border-color: var(--pa-btn-warning-bg-hover);
-    }
-  }
-
-  &--danger {
-    background-color: var(--pa-btn-danger-bg);
-    border-color: var(--pa-btn-danger-bg);
-    color: var(--pa-btn-danger-text);
-
-    &:hover {
-      background-color: var(--pa-btn-danger-bg-hover);
-      border-color: var(--pa-btn-danger-bg-hover);
-    }
-  }
-
-  &--info {
-    background-color: var(--pa-btn-info-bg);
-    border-color: var(--pa-btn-info-bg);
-    color: var(--pa-btn-info-text);
-
-    &:hover {
-      background-color: var(--pa-btn-info-bg-hover);
-      border-color: var(--pa-btn-info-bg-hover);
-    }
-  }
-
-  &--light {
-    background-color: var(--pa-btn-light-bg);
-    border-color: var(--pa-btn-light-bg);
-    color: var(--pa-btn-light-text);
-
-    &:hover {
-      background-color: var(--pa-btn-light-bg-hover);
-      border-color: var(--pa-btn-light-bg-hover);
-    }
-  }
-
-  &--dark {
-    background-color: var(--pa-btn-dark-bg);
-    border-color: var(--pa-btn-dark-bg);
-    color: var(--pa-btn-dark-text);
-
-    &:hover {
-      background-color: var(--pa-btn-dark-bg-hover);
-      border-color: var(--pa-btn-dark-bg-hover);
-    }
-  }
-
-  // Outline variants
-  &--outline-primary {
-    background-color: transparent;
-    border-color: var(--pa-accent);
-    color: var(--pa-accent);
-
-    &:hover {
-      background-color: var(--pa-accent);
-      color: var(--pa-btn-primary-text);
-    }
-  }
-
-  &--outline-secondary {
-    background-color: transparent;
-    border-color: var(--pa-btn-secondary-bg);
-    color: var(--pa-btn-secondary-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-secondary-bg);
-      color: var(--pa-btn-secondary-text);
-    }
-  }
-
-  &--outline-success {
-    background-color: transparent;
-    border-color: var(--pa-btn-success-bg);
-    color: var(--pa-btn-success-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-success-bg);
-      color: var(--pa-btn-success-text);
-    }
-  }
-
-  &--outline-warning {
-    background-color: transparent;
-    border-color: var(--pa-btn-warning-bg);
-    color: var(--pa-btn-warning-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-warning-bg);
-      color: var(--pa-btn-warning-text);
-    }
-  }
-
-  &--outline-danger {
-    background-color: transparent;
-    border-color: var(--pa-btn-danger-bg);
-    color: var(--pa-btn-danger-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-danger-bg);
-      color: var(--pa-btn-danger-text);
-    }
-  }
-
-  &--outline-info {
-    background-color: transparent;
-    border-color: var(--pa-btn-info-bg);
-    color: var(--pa-btn-info-bg);
-
-    &:hover {
-      background-color: var(--pa-btn-info-bg);
-      color: var(--pa-btn-info-text);
-    }
-  }
-
-  // Button states
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    cursor: not-allowed;
-    transform: none !important;
-  }
-
-  &--loading {
-    position: relative;
-    pointer-events: none;
-
-    .pa-btn__spinner {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      width: $spinner-size;
-      height: $spinner-size;
-      border: $spinner-border-width solid transparent;
-      border-top: $spinner-border-width solid currentColor;
-      border-radius: 50%;
-      animation: pa-spin $animation-spin-duration linear infinite;
-    }
-  }
-
-  // Ripple effect
-  &--ripple {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      border-radius: 50%;
-      background: $ripple-color;
-      transform: translate(-50%, -50%);
-      transition: width $ripple-transition-duration ease, height $ripple-transition-duration ease;
-      pointer-events: none;
-    }
-
-    &.pa-btn--ripple-active::before {
-      width: $ripple-size;
-      height: $ripple-size;
-    }
-  }
-
-  // Block button
-  &--block {
-    width: 100%;
-    display: block;
-  }
-
-  // Icon buttons
-  &--icon-only {
-    width: $btn-icon-only-size;
-    height: $btn-icon-only-size;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-
-    // Size-specific icon-only dimensions
-    &.pa-btn--xs {
-      width: $btn-icon-only-size-xs;
-      height: $btn-icon-only-size-xs;
-    }
-
-    &.pa-btn--sm {
-      width: $btn-icon-only-size-sm;
-      height: $btn-icon-only-size-sm;
-    }
-
-    &.pa-btn--lg {
-      width: $btn-icon-only-size-lg;
-      height: $btn-icon-only-size-lg;
-    }
-
-    &.pa-btn--xl {
-      width: $btn-icon-only-size-xl;
-      height: $btn-icon-only-size-xl;
-    }
-  }
-
-  &__icon {
-    margin-right: $btn-icon-margin;
-
-    &:last-child {
-      margin-right: 0;
-      margin-left: $btn-icon-margin;
-    }
-  }
-
-  // Buttons with icons align left like sidebar menu items
-  &:has(.pa-btn__icon) {
-    text-align: left;
-    display: inline-flex;
-    align-items: center;
-    gap: $spacing-sm;
-
-    .pa-btn__icon {
-      width: $sidebar-icon-size;
-      min-width: $sidebar-icon-size;
-      // No fixed height - let button padding control height
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      margin: 0;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-  }
-
-  // Content alignment modifiers (position content within button)
-  // Button always keeps its horizontal padding (0.75rem on both sides)
-  // These classes control content position and remove icon padding on aligned sides
-
-  &--align-left {
-    justify-content: flex-start;
-
-    .pa-btn__icon {
-      padding-left: 0;
-    }
-  }
-
-  &--align-right {
-    justify-content: flex-end;
-
-    .pa-btn__icon {
-      padding-right: 0;
-    }
-  }
-
-  &--align-center {
-    justify-content: center;
-  }
-
-  &--align-justify {
-    justify-content: space-between;
-
-    .pa-btn__icon:first-child {
-      padding-left: 0;
-    }
-
-    // Remove padding from last element (text or icon)
-    > *:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-// Button Groups
-.pa-btn-group {
-  display: inline-flex;
-  gap: $btn-group-gap;
-  flex-wrap: wrap;
-  align-items: center;
-
-  // === Direction Variants ===
-  &--vertical {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  // === Vertical Alignment Variants ===
-  &--vertical#{&}--center {
-    align-items: center;
-  }
-
-  &--vertical#{&}--end {
-    align-items: flex-end;
-  }
-
-  &--vertical#{&}--stretch {
-    align-items: stretch;
-
-    .pa-btn {
-      width: 100%;
-    }
-  }
-
-  // === Responsive Direction Modifiers ===
-  @each $bp, $min-width in $grid-breakpoints {
-    &--#{$bp}-vertical {
-      @media (min-width: $min-width) {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
-
-    &--#{$bp}-horizontal {
-      @media (min-width: $min-width) {
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-
-  // === No Wrap Variant ===
-  &--nowrap {
-    flex-wrap: nowrap;
-  }
-
-  // Ensure tooltips on buttons appear above siblings
-  .pa-btn.pa-tooltip:hover {
-    position: relative;
-    z-index: $z-index-modal;
-  }
-}
-
+/* ========================================
+   Button Components
+   Buttons, button groups, sizes, colors, states, and icon buttons
+   ======================================== */
+@use '../variables' as *;
+
+// Buttons
+.pa-btn {
+  display: inline-block;
+  height: $btn-height-base;
+  padding: $btn-padding-v $btn-padding-h;
+  border: $btn-border-width solid transparent;
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all $transition-fast $easing-snappy;
+  background: none;
+  color: var(--pa-text-color-1);
+
+  &:hover {
+    transform: translateY($btn-hover-lift);
+  }
+
+  &--primary {
+    background-color: var(--pa-accent);
+    border-color: var(--pa-accent);
+    color: var(--pa-btn-primary-text);
+
+    &:hover {
+      background-color: var(--pa-accent);
+      filter: brightness($btn-hover-brightness);
+    }
+  }
+
+  &--secondary {
+    background-color: transparent;
+    border-color: var(--pa-border-color);
+    color: var(--pa-text-color-1);
+
+    &:hover {
+      background-color: var(--pa-main-bg);
+      border-color: var(--pa-accent);
+    }
+  }
+
+  &--xs {
+    height: $btn-height-xs;
+    padding: $btn-padding-xs-v $btn-padding-xs-h;
+    font-size: $font-size-xs;
+  }
+
+  &--sm {
+    height: $btn-height-sm;
+    padding: $btn-padding-sm-v $btn-padding-sm-h;
+    font-size: $font-size-sm;
+  }
+
+  &--lg {
+    height: $btn-height-lg;
+    padding: $btn-padding-lg-v $btn-padding-lg-h;
+    font-size: $font-size-base;
+  }
+
+  &--xl {
+    height: $btn-height-xl;
+    padding: $btn-padding-xl-v $btn-padding-xl-h;
+    font-size: $font-size-lg;
+  }
+
+  // Button variants (colors)
+  &--success {
+    background-color: var(--pa-btn-success-bg);
+    border-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-text);
+
+    &:hover {
+      background-color: var(--pa-btn-success-bg-hover);
+      border-color: var(--pa-btn-success-bg-hover);
+    }
+  }
+
+  &--warning {
+    background-color: var(--pa-btn-warning-bg);
+    border-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-text);
+
+    &:hover {
+      background-color: var(--pa-btn-warning-bg-hover);
+      border-color: var(--pa-btn-warning-bg-hover);
+    }
+  }
+
+  &--danger {
+    background-color: var(--pa-btn-danger-bg);
+    border-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-text);
+
+    &:hover {
+      background-color: var(--pa-btn-danger-bg-hover);
+      border-color: var(--pa-btn-danger-bg-hover);
+    }
+  }
+
+  &--info {
+    background-color: var(--pa-btn-info-bg);
+    border-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-text);
+
+    &:hover {
+      background-color: var(--pa-btn-info-bg-hover);
+      border-color: var(--pa-btn-info-bg-hover);
+    }
+  }
+
+  &--light {
+    background-color: var(--pa-btn-light-bg);
+    border-color: var(--pa-btn-light-bg);
+    color: var(--pa-btn-light-text);
+
+    &:hover {
+      background-color: var(--pa-btn-light-bg-hover);
+      border-color: var(--pa-btn-light-bg-hover);
+    }
+  }
+
+  &--dark {
+    background-color: var(--pa-btn-dark-bg);
+    border-color: var(--pa-btn-dark-bg);
+    color: var(--pa-btn-dark-text);
+
+    &:hover {
+      background-color: var(--pa-btn-dark-bg-hover);
+      border-color: var(--pa-btn-dark-bg-hover);
+    }
+  }
+
+  // Outline variants
+  &--outline-primary {
+    background-color: transparent;
+    border-color: var(--pa-accent);
+    color: var(--pa-accent);
+
+    &:hover {
+      background-color: var(--pa-accent);
+      color: var(--pa-btn-primary-text);
+    }
+  }
+
+  &--outline-secondary {
+    background-color: transparent;
+    border-color: var(--pa-btn-secondary-bg);
+    color: var(--pa-btn-secondary-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-secondary-bg);
+      color: var(--pa-btn-secondary-text);
+    }
+  }
+
+  &--outline-success {
+    background-color: transparent;
+    border-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-success-bg);
+      color: var(--pa-btn-success-text);
+    }
+  }
+
+  &--outline-warning {
+    background-color: transparent;
+    border-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-warning-bg);
+      color: var(--pa-btn-warning-text);
+    }
+  }
+
+  &--outline-danger {
+    background-color: transparent;
+    border-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-danger-bg);
+      color: var(--pa-btn-danger-text);
+    }
+  }
+
+  &--outline-info {
+    background-color: transparent;
+    border-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-bg);
+
+    &:hover {
+      background-color: var(--pa-btn-info-bg);
+      color: var(--pa-btn-info-text);
+    }
+  }
+
+  // Button states
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  &--loading {
+    position: relative;
+    pointer-events: none;
+
+    .pa-btn__spinner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: $spinner-size;
+      height: $spinner-size;
+      border: $spinner-border-width solid transparent;
+      border-top: $spinner-border-width solid currentColor;
+      border-radius: 50%;
+      animation: pa-spin $animation-spin-duration linear infinite;
+    }
+  }
+
+  // Ripple effect
+  &--ripple {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: $ripple-color;
+      transform: translate(-50%, -50%);
+      transition: width $ripple-transition-duration ease, height $ripple-transition-duration ease;
+      pointer-events: none;
+    }
+
+    &.pa-btn--ripple-active::before {
+      width: $ripple-size;
+      height: $ripple-size;
+    }
+  }
+
+  // Block button
+  &--block {
+    width: 100%;
+    display: block;
+  }
+
+  // Icon buttons
+  &--icon-only {
+    width: $btn-icon-only-size;
+    height: $btn-icon-only-size;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    // Size-specific icon-only dimensions
+    &.pa-btn--xs {
+      width: $btn-icon-only-size-xs;
+      height: $btn-icon-only-size-xs;
+    }
+
+    &.pa-btn--sm {
+      width: $btn-icon-only-size-sm;
+      height: $btn-icon-only-size-sm;
+    }
+
+    &.pa-btn--lg {
+      width: $btn-icon-only-size-lg;
+      height: $btn-icon-only-size-lg;
+    }
+
+    &.pa-btn--xl {
+      width: $btn-icon-only-size-xl;
+      height: $btn-icon-only-size-xl;
+    }
+  }
+
+  &__icon {
+    margin-right: $btn-icon-margin;
+
+    &:last-child {
+      margin-right: 0;
+      margin-left: $btn-icon-margin;
+    }
+  }
+
+  // Buttons with icons align left like sidebar menu items
+  &:has(.pa-btn__icon) {
+    text-align: left;
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    .pa-btn__icon {
+      width: $sidebar-icon-size;
+      min-width: $sidebar-icon-size;
+      // No fixed height - let button padding control height
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin: 0;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  // Content alignment modifiers (position content within button)
+  // Button always keeps its horizontal padding (0.75rem on both sides)
+  // These classes control content position and remove icon padding on aligned sides
+
+  &--align-left {
+    justify-content: flex-start;
+
+    .pa-btn__icon {
+      padding-left: 0;
+    }
+  }
+
+  &--align-right {
+    justify-content: flex-end;
+
+    .pa-btn__icon {
+      padding-right: 0;
+    }
+  }
+
+  &--align-center {
+    justify-content: center;
+  }
+
+  &--align-justify {
+    justify-content: space-between;
+
+    .pa-btn__icon:first-child {
+      padding-left: 0;
+    }
+
+    // Remove padding from last element (text or icon)
+    > *:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+// Button Groups
+.pa-btn-group {
+  display: inline-flex;
+  gap: $btn-group-gap;
+  flex-wrap: wrap;
+  align-items: center;
+
+  // === Direction Variants ===
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  // === Vertical Alignment Variants ===
+  &--vertical#{&}--center {
+    align-items: center;
+  }
+
+  &--vertical#{&}--end {
+    align-items: flex-end;
+  }
+
+  &--vertical#{&}--stretch {
+    align-items: stretch;
+
+    .pa-btn {
+      width: 100%;
+    }
+  }
+
+  // === Responsive Direction Modifiers ===
+  @each $bp, $min-width in $grid-breakpoints {
+    &--#{$bp}-vertical {
+      @media (min-width: $min-width) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
+    &--#{$bp}-horizontal {
+      @media (min-width: $min-width) {
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+
+  // === No Wrap Variant ===
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
+  // Ensure tooltips on buttons appear above siblings
+  .pa-btn.pa-tooltip:hover {
+    position: relative;
+    z-index: $z-index-modal;
+  }
+}
+