.p-list--horizontal list variant.
+ notes: We've introduced the .p-list--horizontal-section list variant.
- version: 4.18.0
features:
- component: Quote wrapper
diff --git a/scss/_base_placeholders.scss b/scss/_base_placeholders.scss
index be2a86404..f7d91a221 100644
--- a/scss/_base_placeholders.scss
+++ b/scss/_base_placeholders.scss
@@ -67,17 +67,6 @@
padding-left: 0;
}
- %vf-list-with-state-icons {
- @extend %vf-list;
-
- .p-list__item {
- &.is-ticked::before,
- &.is-crossed::before {
- top: $spv--medium;
- }
- }
- }
-
// Bars and borders
%vf-pseudo-border {
background-color: $colors--theme--border-default;
diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
index 7765f41ac..7499eedd0 100644
--- a/scss/_patterns_lists.scss
+++ b/scss/_patterns_lists.scss
@@ -134,6 +134,13 @@ $list-step-bullet-margin: $sph--x-large;
}
}
+ %vf-list-item-with-divisor-common-properties {
+ box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
+ margin: 0;
+ padding-bottom: $sph--large;
+ padding-top: $sph--small;
+ }
+
%vf-list-item-bullet {
&::before {
color: $colors--theme--text-default;
@@ -149,6 +156,7 @@ $list-step-bullet-margin: $sph--x-large;
position: relative;
> .p-list--divided,
+ > .p-list--horizontal-section,
> .p-list {
margin-left: 0;
}
@@ -161,10 +169,7 @@ $list-step-bullet-margin: $sph--x-large;
}
@mixin vf-list-item-divided {
- box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
- margin: 0;
- padding-bottom: $sph--large;
- padding-top: $sph--small;
+ @extend %vf-list-item-with-divisor-common-properties;
&:first-child {
box-shadow: none;
@@ -175,6 +180,18 @@ $list-step-bullet-margin: $sph--x-large;
}
}
+@mixin vf-list-item-horizontal-section {
+ @extend %vf-list-item-with-divisor-common-properties;
+}
+
+// Offset a list item icon (tick or cross) away from the divisor above it
+@mixin vf-list-item-icon-divisor-offset {
+ &.is-ticked::before,
+ &.is-crossed::before {
+ top: $spv--medium;
+ }
+}
+
// Mixin for inline list items
@mixin vf-inline-list-item {
display: inline;
@@ -199,14 +216,15 @@ $list-step-bullet-margin: $sph--x-large;
}
}
-@mixin vf-p-list-horizontal {
- .p-list--horizontal {
- @extend %vf-list-with-state-icons;
+@mixin vf-p-list-horizontal-section {
+ .p-list--horizontal-section {
@extend %vf-grid-row;
+ @extend %vf-list;
.p-list__item {
@extend %vf-list-item;
- border-top: $border;
+ @include vf-list-item-icon-divisor-offset;
+ @include vf-list-item-horizontal-section;
grid-column-end: span $grid-8-columns-small;
@@ -219,7 +237,7 @@ $list-step-bullet-margin: $sph--x-large;
}
}
}
- .p-list--horizontal.is-3-cols-on-large {
+ .p-list--horizontal-section.is-25-75 {
.p-list__item {
// Skip the first two columns on large
@media (min-width: $threshold-6-12-col) {
@@ -240,11 +258,12 @@ $list-step-bullet-margin: $sph--x-large;
// A list with separators between items
@mixin vf-p-list-divided {
.p-list--divided {
- @extend %vf-list-with-state-icons;
+ @extend %vf-list;
.p-list__item {
@extend %vf-list-item;
@include vf-list-item-divided;
+ @include vf-list-item-icon-divisor-offset;
}
& & {
@@ -259,7 +278,8 @@ $list-step-bullet-margin: $sph--x-large;
}
// stylelint-disable selector-max-type -- we want to target ordered lists
- ol.p-list--divided {
+ ol.p-list--divided,
+ ol.p-list--horizontal-section {
counter-reset: p-list-divided-counter;
list-style: none;
@@ -522,7 +542,7 @@ $list-step-bullet-margin: $sph--x-large;
@include vf-p-list-placeholders;
@include vf-p-list;
- @include vf-p-list-horizontal;
+ @include vf-p-list-horizontal-section;
@include vf-p-list-divided;
@include vf-p-list-item-state;
@include vf-p-inline-list;
diff --git a/templates/docs/examples/patterns/lists/_list-horizontal-section-example.jinja b/templates/docs/examples/patterns/lists/_list-horizontal-section-example.jinja
new file mode 100644
index 000000000..44b09bd1a
--- /dev/null
+++ b/templates/docs/examples/patterns/lists/_list-horizontal-section-example.jinja
@@ -0,0 +1,45 @@
+{% macro list_horizontal_section_example(list_item_style="", layout_variant_class="") %}
+ {% set list_item_style = list_item_style | trim %}
+ {% set layout_variant_class = layout_variant_class | trim %}
+
+ {% set list_classes = "p-list--horizontal-section" %}
+ {% if layout_variant_class | length > 0 %}
+ {% set list_classes = list_classes + " " + layout_variant_class %}
+ {% endif %}
+
+ {% set list_tag = "ul" %}
+ {% if list_item_style == "ordered" %}
+ {% set list_tag = "ol" %}
+ {% set list_item_style = "" %}
+ {% endif %}
+
+ {% set list_item_classes = "p-list__item" %}
+ {% if list_item_style | length > 0 %}
+ {% set list_item_classes = list_item_classes + " " + list_item_style %}
+ {% endif %}
+
+ <{{ list_tag }} class="{{ list_classes }}">
+ 10 year security maintenance and CVE Patching
-- Kernel Livepatch for 24/7 patching with no downtime -
-- Expanded security for infrastructure and applications -
-- FIPS 140-2 cryptographic modules certified by NIST -
-- Common Criteria EAL2: ISO/IEC IS 15408 validated by CSEC -
-- DISA/STIG hardening for DoD - compliance -
-- CIS profiles for cyber defence and malware prevention -
-10 year security maintenance and CVE Patching
-- Kernel Livepatch for 24/7 patching with no downtime -
-- Expanded security for infrastructure and applications -
-- FIPS 140-2 cryptographic modules certified by NIST -
-- Common Criteria EAL2: ISO/IEC IS 15408 validated by CSEC -
-- DISA/STIG hardening for DoD - compliance -
-- CIS profiles for cyber defence and malware prevention -
-