_patterns_lists.scss

@import 'settings';
$tick-height: 0.875rem; // 14px value from svg as rem so it can be used in calculations
$spv-list-item--inner: null;
@if ($pad-lists) {
  $spv-list-item--inner: $spv-inner--x-small--scaleable * 0.5; // padding top and bottom for lists containing loose text.
} @else {
  $spv-list-item--inner: 0;
}

@mixin vf-p-list-placeholders {
  %numbered-step-container {
    counter-reset: li;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
  }

  %numbered-step-title {
    display: flex;
    list-style: none;
    margin-left: 0;
    padding-left: 0;

    &::before {
      align-self: start;
      background-color: $color-mid-x-light;
      border-radius: 100%;
      content: counter(li);
      counter-increment: li;
      direction: rtl;
      display: block;
      text-align: center;
    }
  }

  // Mixin for list items
  %vf-list-item {
    padding-bottom: $spv-list-item--inner;
    padding-top: $spv-list-item--inner;

    form & {
      padding-bottom: 0;
      padding-top: 0;

      label {
        margin-bottom: $spv-nudge-compensation;
      }
    }
  }
}

@mixin vf-list-item-divided {
  position: relative;

  &::after {
    border-bottom: 1px solid $color-mid-light;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }

  &:last-of-type,
  .last-item {
    &::after {
      border-bottom: 0;
    }
  }
}

// Mixin for inline list items
@mixin vf-inline-list-item {
  display: inline;
  list-style: none;
  margin-right: $sph-outer;

  &.last-item,
  &:last-of-type {
    margin-right: 0;
  }
}

@function svg-tick($color) {
  @if type-of($color) != 'color' {
    @warn '#{$color} is not a color.';
    @return false;
  }
  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='" + vf-url-friendly-color($color) + "' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6.1 10.813L2.41 8.105l1.184-1.613L5.9 8.187l4.393-4.394 1.414 1.414z' /%3E%3C/svg%3E");
}

// List styling using list class
@mixin vf-p-list {
  .p-list {
    @extend %vf-clearfix;
    @extend %vf-list;

    &__item {
      @extend %vf-list-item;
    }
  }
}

// A list with separators between items
@mixin vf-p-list-divided {
  .p-list--divided {
    @extend %vf-list;

    .p-list__item {
      @extend %vf-list-item;
      @include vf-list-item-divided;
    }

    &.is-split .p-list__item:last-of-type {
      border-bottom: 1px solid $color-mid-light;
    }
  }
}

// Displays item with a tick bullet
@mixin vf-p-list-item-state {
  .is-ticked {
    @extend %vf-list;
    @include vf-icon-success($color-accent);

    background-position-y: $spv-list-item--inner + 0.3rem; // 0.3rem seems to be a magic number that positions the icon correctly
    background-repeat: no-repeat;
    background-size: $tick-height;
    padding-left: 2rem;
  }
}

// Displays a list inline with spacing
@mixin vf-p-inline-list {
  .p-inline-list {
    margin-left: 0;
    padding-left: 0;
  }

  .p-inline-list__item {
    @include vf-inline-list-item;
  }
}

// Displays a list inline with items separated by dots
@mixin vf-p-inline-list-middot {
  .p-inline-list--middot {
    margin-left: 0;
    padding-left: 0;

    .p-inline-list__item {
      @include vf-inline-list-item;

      position: relative;

      &::after {
        color: $color-mid-dark;
        content: '\00b7';
        font-size: 1.4em;
        line-height: 0;
        position: absolute;
        right: #{-0.5 * $sph-outer};
        top: 0.4em;
      }

      &:hover::after {
        color: $color-mid-dark;
      }

      &:last-of-type,
      .last-item {
        &::after {
          content: '';
        }
      }
    }
  }
}

@mixin vf-p-inline-list-stretch {
  .p-inline-list--stretch {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;

    .p-inline-list__item {
      flex: 1 auto;
      list-style: none;
    }
  }
}

// Displays a step by step list of instructions
@mixin vf-p-stepped-list {
  .p-stepped-list {
    @extend %vf-clearfix;
    @extend %numbered-step-container;

    margin-bottom: 0; // spacing has been moved onto __item; this ensures that the heading / paragraph spacing matches that of regular headings / paragraphs
    margin-left: 0;
  }

  .p-stepped-list__item {
    // override unecessary col-8 class in markup; layout is handled with css below
    float: none;
    margin-left: 0;
    overflow: visible;
    padding-bottom: $spv-outer--scaleable;
    position: relative;
    width: 100%;
  }

  .p-stepped-list__bullet {
    display: none;
  }

  .p-stepped-list__title {
    @extend %numbered-step-title;
  }

  // Indent titles
  @for $i from 6 through 1 {
    // Bullet sizes for each heading level
    $bullet-width: map-get($line-heights, default-text);
    $bullet-width-mobile: map-get($line-heights, default-text);

    @if $i < 5 {
      $bullet-width: map-get($line-heights, h#{$i});
      $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
    }

    h#{$i}.p-stepped-list__title {
      &::before {
        flex-shrink: 0;
        margin-right: $sph-inner;

        @media (max-width: $breakpoint-heading-threshold) {
          width: $bullet-width-mobile;
        }

        @media (min-width: $breakpoint-heading-threshold) {
          width: $bullet-width;
        }
      }
    }

    h#{$i}.p-stepped-list__title + .p-stepped-list__content {
      @media (max-width: $breakpoint-heading-threshold) {
        margin-left: $bullet-width-mobile + $sph-inner;
      }

      @media (min-width: $breakpoint-heading-threshold) {
        margin-left: $bullet-width + $sph-inner;
      }
    }
  }

  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
    @media (min-width: $threshold-6-12-col) {
      margin-left: 0;
    }
  }
}

@mixin vf-p-stepped-list-detailed {
  .p-stepped-list--detailed {
    @extend %numbered-step-container;

    margin-left: auto;

    // fallback for IE flex box grid implementation
    @media (min-width: $threshold-6-12-col) {
      .p-stepped-list__content,
      .p-stepped-list__title {
        @include vf-grid-flex-column;
      }
    }

    @supports (display: grid) {
      .p-stepped-list__content {
        @media (min-width: $threshold-6-12-col) {
          grid-column-end: span 6;
          margin-top: 0;
        }
      }

      .p-stepped-list__title {
        display: flex;
        grid-column-end: span 6;
        margin-left: 0;
      }
    }

    .p-stepped-list__item {
      @extend %vf-row;
      @include vf-b-row-reset;

      @media (min-width: $breakpoint-medium) {
        padding-top: $sp-unit;
        position: relative;

        &::after {
          background-color: $colors--light-theme--border-low-contrast;
          content: '';
          height: 1px;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
}

// Adaptor class `is-split` to split the items of a list into two columns
@mixin vf-p-list-split {
  [class*='p-list'].is-split {
    @media (min-width: $breakpoint-medium) {
      @supports ((-webkit-columns: 1) or (columns: 1)) {
        column-gap: $sp-x-large;
        columns: 2;

        .p-list__item {
          display: inline-block;
          width: 100%;
        }
      }

      @supports not ((-webkit-columns: 1) or (columns: 1)) {
        display: flex;
        flex-wrap: wrap;

        .p-list__item {
          width: calc(50% - 0.5rem);
        }
      }

      &:nth-child(2n-1) {
        margin-right: $sp-medium;
      }
    }
  }
}

@mixin vf-p-lists {
  @include vf-p-list-placeholders;

  @include vf-p-list;
  @include vf-p-list-divided;
  @include vf-p-list-item-state;
  @include vf-p-inline-list;
  @include vf-p-inline-list-middot;
  @include vf-p-inline-list-stretch;
  @include vf-p-stepped-list;
  @include vf-p-stepped-list-detailed;
  @include vf-p-list-split;
}