feat: btn improvements

PrestaShop · Jul 22, 2024 · d9ddb31 · d9ddb31
1 parent eba9093
commit d9ddb31
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 34 deletions.
diff --git a/dist/css/bootstrap-prestashop-ui-kit.css b/dist/css/bootstrap-prestashop-ui-kit.css
diff --git a/dist/css/bootstrap-prestashop-ui-kit.css.map b/dist/css/bootstrap-prestashop-ui-kit.css.map
diff --git a/dist/js/prestashop-ui-kit.js b/dist/js/prestashop-ui-kit.js
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -41,11 +41,15 @@
   }
 
   &:focus,
+  &:active:focus,
   &:focus-visible,
+  &:active,
   &.focus {
+    z-index: 1;
     outline: var(--#{$cdk}size-2) solid $outline-color;
     outline-offset: var(--#{$cdk}size-2);
-    box-shadow: none;
+    /* stylelint-disable-next-line */
+    box-shadow: none !important;
   }
 }
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -7,30 +7,6 @@
   $active-border: $border,
   $color-name: "primary"
 ) {
-  @if $color-name == "light" {
-    color: var(--#{$cdk}primary-800);
-  } @else if $color-name == "warning" {
-    color: var(--#{$cdk}primary-800);
-  } @else if $color-name == "secondary" {
-    @include hover-focus() {
-      color: var(--#{$cdk}primary-800);
-      background-color: var(--#{$cdk}primary-400);
-      border-color: var(--#{$cdk}primary-400);
-    }
-  } @else {
-    color: var(--#{$cdk}white);
-    background-color: $background;
-    border-color: $border;
-    box-shadow: none;
-
-    &:hover {
-      color: var(--#{$cdk}white);
-      background-color: $hover-background;
-      border-color: $hover-border;
-    }
-  }
-
-
   &:focus,
   &.focus {
     color: var(--#{$cdk}white);
@@ -60,17 +36,36 @@
     box-shadow: none;
   }
 
-  @if $color-name == "secondary" {
+  @if $color-name == "light" {
     color: var(--#{$cdk}primary-800);
-  }
 
-  @if $color-name == "light" {
     &:focus,
     &.focus {
       color: var(--#{$cdk}primary-800);
       background-color: var(--#{$cdk}primary-400);
       border-color: var(--#{$cdk}primary-400);
     }
+  } @else if $color-name == "warning" {
+    color: var(--#{$cdk}primary-800);
+  } @else if $color-name == "secondary" {
+    color: var(--#{$cdk}primary-800);
+
+    @include hover-focus() {
+      color: var(--#{$cdk}primary-800);
+      background-color: var(--#{$cdk}primary-400);
+      border-color: var(--#{$cdk}primary-400);
+    }
+  } @else {
+    color: var(--#{$cdk}white);
+    background-color: $background;
+    border-color: $border;
+    box-shadow: none;
+
+    &:hover {
+      color: var(--#{$cdk}white);
+      background-color: $hover-background;
+      border-color: $hover-border;
+    }
   }
 }