feat: buttons outline color variations

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
italia · May 29, 2023 · 07114d1 · 07114d1
1 parent 875d568
commit 07114d1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 31 deletions.
diff --git a/docs/componenti/buttons.md b/docs/componenti/buttons.md
@@ -44,13 +44,13 @@ Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con Boot
 {% comment %}Example name: Varianti di colore{% endcomment %}
 {% capture example %}
 
-<div class="py-1">{% for color in site.data.theme-colors %}{% if color.name == "primary" or color.name == "secondary" %}
+<div class="py-1">{% for color in site.data.theme-colors %}
 <div class="btn-example">
   <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>
   <button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }} outline</button>
   <button type="button" class="btn btn-{{ color.name }} disabled">{{ color.name | capitalize }} disabled</button>
   <button type="button" class="btn btn-outline-{{ color.name }} disabled">{{ color.name | capitalize }} outline disabled</button>
-</div>{% endif %}{% endfor %}
+</div>{% endfor %}
 </div>
 {% endcapture %}{% include example.html content=example %}
 
@@ -117,7 +117,7 @@ La classe `.disabled` usa `pointer-events: none` per provare a disabilitare l'at
 
 <button class="btn btn-danger btn-sm btn-icon btn-me">
   <span>Icon Button Sm</span>
-  <svg class="icon icon-secondary ms-1">
+  <svg class="icon icon-white ms-1">
   <use
         href="{{
           site.baseurl
@@ -128,7 +128,7 @@ La classe `.disabled` usa `pointer-events: none` per provare a disabilitare l'at
 
 <button class="btn btn-info btn-xs btn-icon ms-1">
   <span>Icon Button Xs</span>
-  <svg class="icon icon-danger">
+  <svg class="icon icon-white">
   <use
         href="{{
           site.baseurl
@@ -165,17 +165,17 @@ Inoltre è possibile applicare un contorno cerchiato dell'icona utilizzando un c
 </button>
 
 <button class="btn btn-danger btn-sm btn-icon btn-me">
-<span class="rounded-icon rounded-secondary">
-<svg class="icon icon-white">
+<span class="rounded-icon">
+<svg class="icon icon-danger">
 <use href="{{site.baseurl}}/dist/svg/sprites.svg#it-user"></use>
 </svg>
 </span>
 <span>Round Icon Sm</span>
 </button>
 
 <button class="btn btn-secondary btn-xs btn-icon">
-<span class="rounded-icon rounded-danger">
-<svg class="icon icon-white">
+<span class="rounded-icon">
+<svg class="icon icon-secondary">
 <use href="{{site.baseurl}}/dist/svg/sprites.svg#it-user"></use>
 </svg>
 </span>

diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss
@@ -26,7 +26,7 @@
 }
 
 @function color-hover($color) {
-  @return desaturate(shade-color($color, 10%), 10%);
+  @return desaturate(shade-color($color, 10%), 20%);
 }
 
 @function url-friendly-color($color) {

diff --git a/src/scss/custom/_buttons.scss b/src/scss/custom/_buttons.scss
@@ -3,9 +3,7 @@
   font-size: $btn-font-size;
   white-space: initial;
   text-decoration: none;
-  &:not(.btn-outline-primary, .btn-outline-secondary) {
-    box-shadow: none;
-  }
+  box-shadow: none;
 }
 
 .btn-me {
@@ -70,7 +68,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
     background-color: $white;
 
     @each $color, $value in $theme-colors {
@@ -101,20 +98,15 @@
   box-shadow: none;
   line-height: 1.555;
   @include border-radius(0);
-
   // allow height 100%
   align-self: stretch;
   // height: 100%;
-
   width: inherit;
-
   margin-top: -$header-slim-button-v-padding;
   margin-bottom: -$header-slim-button-v-padding;
   margin-right: -$header-slim-button-v-padding;
-
   padding-left: 8px;
   padding-right: 8px;
-
   &:hover {
     text-decoration: none !important;
   }
@@ -128,7 +120,6 @@
   @include media-breakpoint-up(lg) {
     padding: 12px 24px !important;
     margin: 0;
-
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -170,18 +161,44 @@
   }
 }
 
-.btn-outline-secondary {
-  box-shadow: inset 0 0 0 2px $secondary;
-  &.disabled,
-  &:hover,
-  &:active {
-    box-shadow: inset 0 0 0 2px color-hover($secondary);
+.btn-outline {
+  &-primary {
+    box-shadow: inset 0 0 0 2px $primary;
+    &.disabled {
+      box-shadow: inset 0 0 0 2px color-hover($primary);
+    }
   }
-}
-
-.btn-outline-primary {
-  &.disabled {
-    box-shadow: inset 0 0 0 2px color-hover($primary);
+  &-secondary {
+    box-shadow: inset 0 0 0 2px $secondary;
+    &.disabled,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px color-hover($secondary);
+    }
+  }
+  &-success {
+    box-shadow: inset 0 0 0 2px $success;
+    &.disabled,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px color-hover($success);
+    }
+  }
+  &-warning {
+    box-shadow: inset 0 0 0 2px $color-border-warning;
+    &.disabled,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px color-hover($color-border-warning);
+    }
+  }
+  &-danger {
+    box-shadow: inset 0 0 0 2px $danger;
+    &.disabled,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px color-hover($danger);
+    }
   }
 }
 

diff --git a/src/scss/custom/mixins/_buttons.scss b/src/scss/custom/mixins/_buttons.scss
@@ -84,7 +84,7 @@
     color: $active-border;
     background-color: transparent;
     background-image: none;
-    box-shadow: inset 0 0 0 1px $active-border;
+    box-shadow: inset 0 0 0 2px $active-border;
 
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly