List group: Branded

Orange-OpenSource · Oct 27, 2023 · 0be7f95 · 0be7f95
1 parent b53b87e
commit 0be7f95
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 86 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "43.75 kB"
+      "maxSize": "44.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -6,11 +6,14 @@
   // scss-docs-start list-group-css-vars
   --#{$prefix}list-group-color: #{$list-group-color};
   --#{$prefix}list-group-bg: #{$list-group-bg};
+  --#{$prefix}list-group-font-weight: #{$list-group-font-weight}; // Boosted mod
   --#{$prefix}list-group-border-color: #{$list-group-border-color};
   --#{$prefix}list-group-border-width: #{$list-group-border-width};
   --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
   --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
   --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
+  --#{$prefix}list-group-item-icon-margin-x: #{subtract(var(--#{$prefix}list-group-item-padding-x), 5px)}; // Boosted mod
+  --#{$prefix}list-group-item-icon-size: #{$list-group-item-icon-size}; // Boosted mod
   --#{$prefix}list-group-action-color: #{$list-group-action-color};
   --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
   --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
@@ -30,13 +33,21 @@
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
   @include border-radius(var(--#{$prefix}list-group-border-radius));
+
+  // Boosted mod: specific badge for list-group
+  .badge {
+    --#{$prefix}badge-padding: .125rem .375rem;
+    --#{$prefix}badge-font-size: .875rem;
+  }
 }
 
 .list-group-numbered {
   list-style-type: none;
   counter-reset: section;
 
   > .list-group-item::before {
+    margin-right: subtract(var(--#{$prefix}list-group-item-padding-x), .0625rem); // Boosted mod
+
     // Increments only this instance of the section counter
     content: counters(section, ".") ". ";
     counter-increment: section;
@@ -64,8 +75,7 @@
 
   &:active {
     color: var(--#{$prefix}list-group-action-active-color);
-    background-color: var(--#{$prefix}list-group-action-active-bg);
-    border-color: var(--#{$prefix}list-group-active-border-color); // Boosted mod
+    background: var(--#{$prefix}list-group-action-active-bg); // Boosted mod: bg over bg-color
   }
 }
 
@@ -76,17 +86,20 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x) add(var(--#{$prefix}list-group-item-padding-y), 1px); // Boosted mod
+  font-weight: var(--#{$prefix}list-group-font-weight); // Boosted mod
   color: var(--#{$prefix}list-group-color);
   text-decoration: if($link-decoration == none, null, none);
   background-color: var(--#{$prefix}list-group-bg);
   border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
+  border-bottom-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
 
   &:first-child {
     @include border-top-radius(inherit);
   }
 
   &:last-child {
+    border-bottom-width: var(--#{$prefix}list-group-border-width); // Boosted mod
     @include border-bottom-radius(inherit);
   }
 
@@ -101,17 +114,17 @@
   &.active {
     z-index: 2; // Place active items above their siblings for proper border styling
     color: var(--#{$prefix}list-group-active-color);
-    background-color: var(--#{$prefix}list-group-active-bg);
+    background: var(--#{$prefix}list-group-active-bg); // Boosted mod: bg over bg-color
     border-color: var(--#{$prefix}list-group-active-border-color);
   }
 
   // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
   & + .list-group-item {
     border-top-width: 0;
 
-    &.active {
-      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
-      border-top-width: var(--#{$prefix}list-group-border-width);
+    &.active { // Boosted mod: border-width of 1px instead of 2px.
+      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
+      border-top-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
     }
   }
 
@@ -142,12 +155,18 @@
       flex-direction: row;
 
       > .list-group-item {
+        // Boosted mod: remove default border-width
+        border-right-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
+        border-bottom-width: var(--#{$prefix}list-group-border-width);
+        // End mod
+
         &:first-child {
           @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
           @include border-top-end-radius(0);
         }
 
         &:last-child {
+          border-right-width: var(--#{$prefix}list-group-border-width); // Boosted mod
           @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
           @include border-bottom-start-radius(0);
         }
@@ -160,9 +179,9 @@
           border-top-width: var(--#{$prefix}list-group-border-width);
           border-left-width: 0;
 
-          &.active {
-            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
-            border-left-width: var(--#{$prefix}list-group-border-width);
+          &.active { // Boosted mod: border-width between is of 1px instead of 2px
+            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
+            border-left-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
           }
         }
       }
@@ -177,10 +196,13 @@
 // useful within other components (e.g., cards).
 
 .list-group-flush {
+  // stylelint-disable-next-line function-disallowed-list
+  border-top: calc(var(--#{$prefix}list-group-border-width) / 2) solid var(--#{$prefix}list-group-border-color); // Boosted mod
   @include border-radius(0);
 
   > .list-group-item {
-    border-width: 0 0 var(--#{$prefix}list-group-border-width);
+    // stylelint-disable-next-line function-disallowed-list
+    border-width: 0 0 calc(var(--#{$prefix}list-group-border-width) / 2); // Boosted mod: border of 1px
 
     &:last-child {
       border-bottom-width: 0;
@@ -189,26 +211,47 @@
 }
 
 //
-// Boosted mod: supporting colours only + ensure contrasts
+// Boosted mod: the variants apply contextual icons when needed
 //
 
 // scss-docs-start list-group-modifiers
 // List group contextual variants
 //
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
-@each $state, $value in $background-colors { // Boosted mod: instead of `@each $state in map-keys($theme-colors)`
+@each $state, $value in $alert-colors { // Boosted mod: instead of `@each $state in map-keys($theme-colors)`
   .list-group-item-#{$state} {
-    --#{$prefix}list-group-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}#{state}-text)`
-    --#{$prefix}list-group-bg: #{$value}; // Boosted mod: instead of `var(--#{$prefix}#{$state}-bg-subtle)`
+    // Boosted mod: no `--#{$prefix}list-group-color`
+    // Boosted mod: no `--#{$prefix}list-group-bg`
     // Boosted mod: no `--#{$prefix}list-group-border-color`
-    --#{$prefix}list-group-action-hover-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`;
-    --#{$prefix}list-group-action-hover-bg: #{if(color-contrast($value) == $white, shade-color($value, 10%), tint-color($value, 10%))}; // Boosted mod: instead of `var(--#{$prefix}#{state}-border-subtle)`;
+    // Boosted mod: no `--#{$prefix}list-group-action-hover-color`
+    // Boosted mod: no `--#{$prefix}list-group-action-hover-bg`
     // Boosted mod: no `--#{$prefix}list-group-action-active-color`
     // Boosted mod: no `--#{$prefix}list-group-action-active-bg`
     // Boosted mod: no `--#{$prefix}list-group-active-color`
     // Boosted mod: no `--#{$prefix}list-group-active-bg`
     // Boosted mod: no `--#{$prefix}list-group-active-border-color`
+
+    padding-right: calc(var(--#{$prefix}list-group-item-icon-margin-x) + var(--#{$prefix}list-group-item-icon-size) * 2); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      position: absolute;
+      top: add(var(--#{$prefix}list-group-item-padding-y), 1px);
+      right: var(--#{$prefix}list-group-item-icon-margin-x);
+      width: var(--#{$prefix}list-group-item-icon-size);
+      height: var(--#{$prefix}list-group-item-icon-size);
+      content: "";
+      background-color: var(--#{$prefix}link-color); // Find a better var once we fully implement dark mode ?
+      -webkit-mask: no-repeat map-get($alert-icons, $state); // stylelint-disable-line property-no-vendor-prefix
+      mask: no-repeat map-get($alert-icons, $state);
+    }
+
+    &.disabled::after,
+    &:disabled::after,
+    &.list-group-item-action:active::after,
+    &.active::after {
+      background-color: currentcolor;
+    }
   }
 }
 // scss-docs-end list-group-modifiers
@@ -221,6 +264,7 @@
   --#{$prefix}list-group-action-color: #{$list-group-dark-action-color}; // Boosted mod
   --#{$prefix}list-group-action-hover-color: #{$list-group-dark-action-hover-color}; // Boosted mod
   --#{$prefix}list-group-action-active-color: #{$list-group-dark-action-active-color}; // Boosted mod
+  --#{$prefix}list-group-action-hover-bg: #{$list-group-dark-hover-bg}; // Boosted mod
   --#{$prefix}list-group-action-active-bg: #{$list-group-dark-action-active-bg}; // Boosted mod
   --#{$prefix}list-group-disabled-color: #{$list-group-dark-disabled-color}; // Boosted mod
   --#{$prefix}list-group-disabled-bg: #{$list-group-dark-disabled-bg}; // Boosted mod
@@ -229,4 +273,9 @@
   --#{$prefix}list-group-active-border-color: #{$list-group-dark-active-border-color}; // Boosted mod
   // scss-docs-end list-group-dark-css-vars
 }
+
+// Specific padding to be aligned in card component
+.card .list-group {
+  --#{$prefix}list-group-item-padding-x: #{var(--#{$prefix}card-spacer-x)};
+}
 // End mod
diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -45,18 +45,6 @@ $theme-colors-border-subtle: (
 ) !default;
 // scss-docs-end theme-border-subtle-map
 
-// Boosted mod
-$background-colors: map-merge(
-  $theme-colors,
-  (
-    "success": $supporting-green,
-    "info":    $supporting-blue,
-    "warning": $supporting-yellow,
-    "danger":  $danger
-  )
-) !default;
-// End mod
-
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
 $theme-colors-border-subtle-dark: null !default;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -393,7 +393,9 @@ $burger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 $burger-icon-small:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='#{$black}'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
 $success-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
 $info-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$info}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm0 14.7a11 11 0 1 1 0 22 11 11 0 0 1 0-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z'/></svg>") !default;
-$warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='75 125 850 750'><path fill='#{$warning}' d='M828.111 875H170.889A93.71 93.71 0 0 1 89.8 734.017l-.008-.005.772-1.321.036-.062 327.8-561.117h.008a93.94 93.94 0 0 1 162.182 0h.008l328.612 562.5-.009.005A93.709 93.709 0 0 1 828.111 875Z'/><path fill='#000' d='M500.5 775a47.5 47.5 0 1 1 47.507-47.5A47.5 47.5 0 0 1 500.5 775Zm47.368-424.038-15.7 258.121c-.009 17.482-14.185 24.05-31.671 24.05s-31.662-6.568-31.671-24.05l-15.74-258.716c-.057-.949-.094-1.9-.094-2.867a47.507 47.507 0 0 1 95.014 0 47.782 47.782 0 0 1-.138 3.462Z'/></svg>") !default;
+// $warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1.75 1.75 20.5 20.5'><path fill='#{$warning}' d='M19.875 21H4.1a2.25 2.25 0 0 1-1.946-3.384l.019-.031v-.002l7.868-13.467a2.255 2.255 0 0 1 3.892 0l7.887 13.5A2.249 2.249 0 0 1 19.875 21Zm-7.863-2.4a1.14 1.14 0 1 1 0-2.28 1.14 1.14 0 0 1 0 2.28Zm1.137-10.177-.377 6.195c0 .42-.34.577-.76.577s-.76-.157-.76-.577l-.378-6.21a1.14 1.14 0 1 1 2.275.014Z' fill-rule='evenodd'/></svg>") !default;
+$warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$warning}' d='M15 0a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z'/></svg>") !default;
+// $warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21'><path fill='#{$warning}' d='M16.562 17.833H3.418a1.874 1.874 0 0 1-1.622-2.82l.015-.026.001-.001L8.368 3.764a1.879 1.879 0 0 1 3.244 0l6.572 11.25a1.874 1.874 0 0 1-1.622 2.82zm-6.552-2a.95.95 0 1 1 0-1.9.95.95 0 0 1 0 1.9zm.947-8.48-.314 5.162c0 .35-.283.481-.633.481-.35 0-.633-.131-.633-.481l-.315-5.174a.95.95 0 1 1 1.896.012z'/></svg>") !default;
 $danger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$danger}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default;
 $add-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='currentColor' d='M14 6H8V0H6v6H0v2h6v6h2V8h6V6z'/></svg>") !default;
 $remove-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 2'><path fill='currentColor' d='M0 0h14v2H0z'/></svg>") !default;
@@ -1994,28 +1996,48 @@ $progress-height-xs:                $spacer * .25 !default;
 // List group
 
 // scss-docs-start list-group-variables
+$list-group-font-weight:            $font-weight-bold !default; // Boosted mod
 $list-group-color:                  var(--#{$prefix}body-color) !default;
 $list-group-bg:                     var(--#{$prefix}body-bg) !default;
 $list-group-border-color:           var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:           var(--#{$prefix}border-width) !default;
 $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
 
-$list-group-item-padding-y:         .875rem !default; // Boosted mod
-$list-group-item-padding-x:         $spacer !default; // Boosted mod
+$list-group-item-padding-y:         10px !default; // Boosted mod: instead of $spacer * .5
+$list-group-item-padding-x:         13px !default; // Boosted mod: instead of $spacer
+$list-group-item-icon-size:         $spacer * .85 !default; // Boosted mod
+// Boosted mod: no $list-group-item-bg-scale
+// Boosted mod: no $list-group-item-color-scale
 
-$list-group-hover-bg:               null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
-$list-group-active-color:           $white !default; // Boosted mod
-$list-group-active-bg:              $black !default; // Boosted mod
-$list-group-active-border-color:    $list-group-active-bg !default;
+$list-group-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$list-group-active-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `$component-active-color`
+$list-group-active-bg:              no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-400 4px) !default; // Boosted mod: instead of `$component-active-bg`
+$list-group-active-border-color:    $list-group-border-color !default; // Boosted mod: instead of `$list-group-active-bg`
 
 $list-group-disabled-color:         $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $list-group-disabled-bg:            $list-group-bg !default;
 
-$list-group-action-color:           $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$list-group-action-hover-color:     $primary !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
+// Boosted mod
+$list-group-action-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
 
 $list-group-action-active-color:    $list-group-active-color !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $list-group-action-active-bg:       $list-group-active-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
+
+$list-group-dark-color:               $white !default;
+$list-group-dark-bg:                  $black !default;
+$list-group-dark-hover-bg:            $gray-900 !default;
+$list-group-dark-border-color:        $gray-700 !default;
+$list-group-dark-action-color:        $white !default;
+$list-group-dark-action-hover-color:  $white !default;
+$list-group-dark-action-active-color: $white !default;
+$list-group-dark-action-active-bg:    no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default;
+$list-group-dark-disabled-color:      $gray-700 !default;
+$list-group-dark-disabled-bg:         transparent !default;
+$list-group-dark-active-color:        $white !default;
+$list-group-dark-active-bg:           no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default;
+$list-group-dark-active-border-color: $gray-700 !default;
+// End mod
 // scss-docs-end list-group-variables
 
 // scss-docs-start list-group-dark-variables