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 all 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
48 changes: 31 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 All @@ -37,6 +40,9 @@
counter-reset: section;

> .list-group-item::before {
// Boosted mod
margin-right: calc(var(--#{$prefix}list-group-item-padding-x) * 2 / 3); // stylelint-disable-line function-disallowed-list
// End mod
// Increments only this instance of the section counter
content: counters(section, ".") ". ";
counter-increment: section;
Expand All @@ -61,15 +67,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,17 +85,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);
}

Expand All @@ -105,16 +113,16 @@
&.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
}
}
}
Expand All @@ -131,12 +139,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);
}
Expand All @@ -149,9 +163,9 @@
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
}
}
}
Expand All @@ -168,8 +182,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 +192,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
52 changes: 34 additions & 18 deletions site/content/docs/5.2/components/list-group.md
View file
Open in desktop
Expand Up @@ -99,42 +99,45 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.

Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` pseudo-element on the `<li>` with `counter-increment` and `content`.

<!-- Boosted mod: add d-flex on numbered list-group-item -->
{{< example >}}
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item d-flex">A list item</li>
<li class="list-group-item d-flex">A list item</li>
<li class="list-group-item d-flex">A list item</li>
</ol>
{{< /example >}}
<!-- End mod -->

These work great with custom content as well.

<!-- Boosted mod: change the font-weight class and the margin-start -->
{{< 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
<div class="me-auto">
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
<div class="me-auto">
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
<div class="me-auto">
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,16 +159,22 @@ 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.

{{< example >}}
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
{{< list.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<li class="list-group-item list-group-item-{{ .name }}">A simple {{ .name }} list group item</li>
{{- range (index $.Site.Data "palette") }}
{{- if (eq .category "Functional colors") }}
{{- range (index .colors) }}
<li class="list-group-item list-group-item-{{ .level }}">A simple {{ .level }} list group item</li>
{{- end -}}
{{- end -}}
{{- end -}}
{{< /list.inline >}}
<li class="list-group-item list-group-item-info disabled" aria-disabled="true">A simple disabled info list group item</li>
</ul>
{{< /example >}}

Expand All @@ -175,12 +184,19 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
{{< list.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a>
{{- range (index $.Site.Data "palette") -}}
{{- if (eq .category "Functional colors") -}}
{{- range (index .colors) }}
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .level }}">A simple {{ .level }} list group item</a>
{{- end -}}
{{- end -}}
{{- end -}}
{{< /list.inline >}}
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">A simple active success list group item</a>
<a class="list-group-item list-group-item-action list-group-item-info disabled">A simple disabled info list group item</a>
</div>
{{< /example >}}
<!-- End mod -->

{{< callout info >}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
Expand Down