Enhanced Boosted mods

Orange-OpenSource · Nov 17, 2023 · 6b6d882 · 6b6d882
1 parent bcd4c59
commit 6b6d882
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -10,7 +10,7 @@
     flex: 1 1 auto;
   }
 
-  // Boosted mod: rule slightlty modified
+  // Boosted mod: rule slightly modified
   // Bring the hover, focused, and "active" buttons to the front to overlay
   // the borders properly
   > .btn-check:checked + .btn,

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -58,8 +58,7 @@
 
   // Boosted mod: no .btn-check:focus-visible + &
 
-  // Boosted mod: custom styles for .btn-check
-  // Boosted mod: simpler rule
+  // Boosted mod: selectors are slightlty different to handle `.btn-check:checked`
   .btn-check:checked + &:active,
   .btn-check:checked + &,
   &:active,
@@ -73,7 +72,9 @@
     // Boosted mod: no box shadow modification for the active state
     // Boosted mod: no &:focus-visible
   }
+  // End mod
 
+  // Boosted mod: selectors are slightlty different to handle `.btn-check`
   .btn-check:disabled + &,
   &:disabled,
   &.disabled,
@@ -86,6 +87,7 @@
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
   }
+  // End mod
 
   // Boosted mod: with icon
   &:not(.btn-icon) > svg {
@@ -145,7 +147,7 @@
 }
 // scss-docs-end btn-variant-loops
 
-// Boosted mod: border-only on :hover and :active
+// Boosted mod: Boosted-specific no outline button
 .btn-no-outline {
   @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), transparent, transparent, var(--#{$prefix}disabled-color));
 
@@ -157,7 +159,10 @@
     }
   }
 }
+// End mod
+
 
+// Boosted mod: Boosted-specific toggle button
 .btn-toggle {
   @include button-variant(transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}link-hover-color), $brand-orange, $brand-orange, $black, transparent, var(--#{$prefix}border-color-translucent), var(--#{$prefix}disabled-color));
 
@@ -192,7 +197,7 @@
 // End mod
 
 
-// Boosted mod: dropdown button
+// Boosted mod: Boosted-specific dropdown button
 .btn-dropdown {
   @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
 }