Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

List-group: Branded #1466

Closed
wants to merge 5 commits into from
Closed

List-group: Branded #1466

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2982c52
Branded
louismaximepiton Aug 17, 2022
144d739
Handle icons on active/disabled state
louismaximepiton Aug 17, 2022
2cdead7
Fix for Chrome (ty @isabellechanclou)
louismaximepiton Aug 17, 2022
8e37ff1
Fixes after review
louismaximepiton Aug 18, 2022
24aa878
docs + pa11y ci
louismaximepiton Aug 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
55 changes: 38 additions & 17 deletions scss/_list-group.scss
View file
Open in desktop
Expand Up @@ -6,14 +6,17 @@
// 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};
// Boosted mod: no --#{$prefix}list-group-action-hover-bg
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
Expand Down Expand Up @@ -61,15 +64,14 @@
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: var(--#{$prefix}list-group-action-hover-color);
text-decoration: none;
background-color: var(--#{$prefix}list-group-action-hover-bg);
outline-color: var(--#{$prefix}list-group-action-color); // Boosted mod
outline-offset: var(--#{$prefix}list-group-border-width); // Boosted mod
// Boosted mod: no background change
}

&: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
}
}

Expand All @@ -80,11 +82,13 @@
.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);
Expand All @@ -105,18 +109,24 @@
&.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);
}

& + & {
border-top-width: 0;

&.active {
margin-top: calc(var(--#{$prefix}list-group-border-width) * -1); // 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(var(--#{$prefix}list-group-border-width) * -1 / 2); // stylelint-disable-line function-disallowed-list
border-top-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
}
}

// Boosted mod
&:last-of-type {
border-bottom-width: var(--#{$prefix}list-group-border-width);
}
// End mod
}

// Horizontal
Expand All @@ -131,6 +141,11 @@
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);
Expand All @@ -149,11 +164,17 @@
border-top-width: var(--#{$prefix}list-group-border-width);
border-left-width: 0;

&.active {
margin-left: calc(var(--#{$prefix}list-group-border-width) * -1); // 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(var(--#{$prefix}list-group-border-width) * -1 / 2); // stylelint-disable-line function-disallowed-list
border-left-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list
}
}

// Boosted mod
&:last-of-type {
border-right-width: var(--#{$prefix}list-group-border-width);
}
// End mod
}
}
}
Expand All @@ -168,8 +189,8 @@
.list-group-flush {
@include border-radius(0);

> .list-group-item {
border-width: 0 0 var(--#{$prefix}list-group-border-width);
> .list-group-item { // Boosted mod: border of 1px
border-width: 0 0 calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list

&:last-child {
border-bottom-width: 0;
Expand All @@ -178,16 +199,16 @@
}

//
// 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 $color, $value in $background-colors {
@include list-group-item-variant($color, $value, color-contrast($value));
@each $state, $value in $alert-colors {
@include list-group-item-variant($state, $value, map-get($alert-icons, $state));
}
// scss-docs-end list-group-modifiers
// End mod
12 changes: 0 additions & 12 deletions scss/_maps.scss
View file
Open in desktop
Expand Up @@ -6,18 +6,6 @@
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb

// Boosted mod
$background-colors: map-merge(
$theme-colors,
(
"success": $supporting-green,
"info": $supporting-blue,
"warning": $supporting-yellow,
"danger": $danger
)
) !default;
// End mod

// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
Expand Down
22 changes: 12 additions & 10 deletions scss/_variables.scss
View file
Open in desktop
Expand Up @@ -1730,25 +1730,27 @@ $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: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: $gray-500 !default;
$list-group-border-color: $gray-500 !default; // Boosted mod
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;

$list-group-item-padding-y: .875rem !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-padding-y: 10px !default; // Boosted mod
$list-group-item-padding-x: 15px !default; // Boosted mod
$list-group-item-icon-size: $spacer * .85 !default; // Boosted mod

// Boosted mod: no $list-group-hover-bg:
$list-group-active-color: $white !default;
$list-group-active-bg: $black !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-hover-bg: $gray-300 !default; // Boosted mod
$list-group-active-color: $black !default; // Boosted mod
$list-group-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-400 4px) !default; // Boosted mod
$list-group-active-border-color: $list-group-border-color !default; // Boosted mod

$list-group-disabled-color: $gray-500 !default;
$list-group-disabled-color: $gray-500 !default; // Boosted mod
$list-group-disabled-bg: $list-group-bg !default;

$list-group-action-color: $black !default;
$list-group-action-hover-color: $primary !default;
$list-group-action-color: $black !default; // Boosted mod
$list-group-action-hover-color: $black !default; // Boosted mod

$list-group-action-active-color: $list-group-active-color !default; // Boosted mod
$list-group-action-active-bg: $list-group-active-bg !default; // Boosted mod
Expand Down
30 changes: 20 additions & 10 deletions scss/mixins/_list-group.scss
View file
Open in desktop
@@ -1,20 +1,30 @@
// List Groups

// Boosted mod: only add an icon on the right instead of changing the cackground-color
// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $background, $color) {
@mixin list-group-item-variant($state, $color, $icon) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
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

&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: if($color == $white, shade-color($background, 10%), tint-color($background, 10%)); // Boosted mod
}
&::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: $color;
-webkit-mask: no-repeat $icon; // stylelint-disable-line property-no-vendor-prefix
mask: no-repeat $icon;
}

// Boosted mod: no variant for active state
&.disabled::after,
&:disabled::after,
&.list-group-item-action:active::after,
&.active::after {
background-color: currentcolor;
}
}
}
// scss-docs-end list-group-mixin
// End mod
18 changes: 11 additions & 7 deletions site/content/docs/5.2/components/list-group.md
View file
Open in desktop
Expand Up @@ -110,31 +110,33 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac

These work great with custom content as well.

<!-- Boosted mod: change the font-weight class -->
{{< example >}}
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
Subheading
<div class="fw-normal">Content for list item</div>
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
Subheading
<div class="fw-normal">Content for list item</div>
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
Subheading
<div class="fw-normal">Content for list item</div>
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
{{< /example >}}
<!-- End mod -->

## Horizontal

Expand All @@ -156,7 +158,9 @@ Add `.list-group-horizontal` to change the layout of list group items from verti

## Contextual classes

Use contextual classes to style list items with a stateful background and color.
<!-- Boosted mod: Add situational icons instead of changing the bg-color -->
Use contextual classes to style list items with a stateful icon.
<!-- End mod -->

{{< example >}}
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
<ul class="list-group">
Expand Down