feat(.btn-check): ensure to match the brand 🎉

Orange-OpenSource · Jul 20, 2020 · d3438ab · d3438ab
1 parent 9113a8d
commit d3438ab
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 6 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -26,7 +26,7 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
-  .btn-check:focus + &,
+  // Boosted mod: custom styles for .btn-check
   &:focus {
     // Boosted mod
     outline-offset: $btn-border-width;
@@ -37,8 +37,7 @@
     // End mod
   }
 
-  .btn-check:checked + &,
-  .btn-check:active + &,
+  // Boosted mod: custom styles for .btn-check
   &:active,
   &.active {
     @include box-shadow($btn-active-box-shadow);

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -194,4 +194,69 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
+
+  // Boosted mod: custom styles for .btn-check
+  // @note almost the same structure than the button-variant() mixin
+  // @note meant to override whatever .btn-* variant is used
+  + .btn {
+    color: $black;
+    @include gradient-bg($white);
+    border-color: $gray-500;
+    @include box-shadow($btn-box-shadow);
+
+    &:not(:first-of-type) {
+      border-left: 0;
+    }
+
+    &:not(:last-of-type) {
+      border-right: 0;
+    }
+  }
+
+  &:hover + .btn,
+  + .btn:hover {
+    color: $primary;
+    background-color: $white;
+    border-color: $gray-500;
+  }
+
+  .btn-group & + .btn:hover {
+    z-index: 0;
+  }
+
+  &[data-focus-visible-added] + .btn {
+    outline: $outline-width solid;
+    outline-offset: $outline-width;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  &:checked + .btn {
+    color: $white;
+    background-color: $black;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: $black;
+    outline-color: $black;
+  }
+
+  &:active + .btn,
+  + .btn:active,
+  + .btn.active {
+    color: $white;
+    background-color: $primary;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: $primary;
+    outline-color: $primary;
+  }
+
+  &:disabled + .btn,
+  &.disabled + .btn {
+    color: $gray-500;
+    background-color: $white;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: $gray-500;
+  }
+  // End mod
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -28,7 +28,7 @@
     border-color: $hover-border;
   }
 
-  .btn-check:focus + &,
+  // Boosted mod: custom styles for .btn-check
   &:focus {
     color: $hover-color;
     @include gradient-bg($hover-background);
@@ -37,8 +37,7 @@
     // Boosted mod: buttons share the same `box-shadow` on `:focus`
   }
 
-  .btn-check:checked + &,
-  .btn-check:active + &,
+  // Boosted mod: custom styles for .btn-check
   &:active,
   &.active,
   .show > &.dropdown-toggle {