<li class="
        dropdown-list__item
        dropdown-list__item--collapse
        filter
        filter--checkbox
        
    ">
    <div class="dropdown-list__label-wrapper filter__label-wrapper">
        <button type="button" class="dropdown-list__label" aria-controls="color" aria-expanded="true">
            <h3 class="filter__heading">
                Color
            </h3>

            <svg class="icon dropdown-list__icon" role="presentation" focusable="false">
                <title>Arrow down</title>
                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
            </svg>

        </button>
    </div>
    <div id="color" class="dropdown-list__content filter__content " aria-hidden="false">
        <div class="more-info">
            <button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">

                <span class="button__text ">
                    More information
                </span>

                <svg class="icon button__icon" role="presentation" focusable="false">
                    <title>Show tooltip</title>
                    <use xlink:href="/images/icons-sprite.svg#info"></use>
                </svg>

            </button>

            <div class="more-info__content-wrapper" aria-hidden="true">

                <div class="more-info__content">
                    <h3 class="more-info__heading">
                        Example title
                    </h3>

                    <div class="more-info__data">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.
                    </div>

                    <button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
                        <svg class="icon " role="presentation" focusable="false">
                            <title>Close more information</title>
                            <use xlink:href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                </div>

            </div>
        </div>

        <ul class="list filter__list">
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option--active">
                    <div class="filter__color-sample" style="background: #000"></div>
                    <span class="filter__color-label">
                        Black
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: red"></div>
                    <span class="filter__color-label">
                        Red
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: #5cb85c"></div>
                    <span class="filter__color-label">
                        Green
                    </span>
                </a>
            </li>
            <li class="filter__color-item">
                <a href='#' class="filter__color-option filter__color-option">
                    <div class="filter__color-sample" style="background: #0275d8"></div>
                    <span class="filter__color-label">
                        Blue
                    </span>
                </a>
            </li>
        </ul>
    </div>
</li>
<li
    class="
        dropdown-list__item
        dropdown-list__item--collapse
        filter
        filter--checkbox
        {{ class }}
    "
>
    <div class="dropdown-list__label-wrapper filter__label-wrapper">
         <button
            type="button"
            class="dropdown-list__label"
            aria-controls="{{ id }}"
            aria-expanded="true"
        >
            {{ render '@heading' title }}
            {{ render '@icon' collapseIcon }}
        </button>
    </div>
    <div
        id="{{ id }}"
        class="dropdown-list__content filter__content {{ contentClass }}"
        aria-hidden="false"
    >
        {{ render '@more-info' }}
        <ul class="list filter__list">
            {{#each options }}
                <li class="filter__color-item">
                    <a
                        href='{{ href }}'
                        class="filter__color-option {{ class }}"
                    >
                        <div
                            class="filter__color-sample"
                            {{{ attributes }}}
                        ></div>
                        <span class="filter__color-label">
                            {{ label }}
                        </span>
                    </a>
                </li>
            {{/each }}
        </ul>
    </div>
</li>
{
  "id": "color",
  "collapseIcon": {
    "class": "dropdown-list__icon",
    "id": "angle-down",
    "title": "Arrow down",
    "hidden": true
  },
  "contentClass": "",
  "title": {
    "tag": "h3",
    "class": "filter__heading",
    "text": "Color"
  },
  "checkboxes": [
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 1"
      }
    },
    {
      "class": "checkbox--link-checked",
      "href": "#",
      "label": {
        "text": "Value 2"
      }
    },
    {
      "class": "",
      "href": "#",
      "label": {
        "text": "Value 3"
      }
    }
  ],
  "options": [
    {
      "href": "#",
      "class": "filter__color-option--active",
      "attributes": "style=\"background: #000\"",
      "label": "Black"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: red\"",
      "label": "Red"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: #5cb85c\"",
      "label": "Green"
    },
    {
      "href": "#",
      "class": "filter__color-option",
      "attributes": "style=\"background: #0275d8\"",
      "label": "Blue"
    }
  ]
}
  • Content:
    $filter__padding\@xl                        : 0 $spacer--medium !default;
    $filter__transition                         : $transition-base !default;
    $filter__heading-font-family                : $font-family-base !default;
    $filter__heading-font-size                  : $font-size-large !default;
    $filter__heading-text-transform             : none !default;
    $filter__heading-margin                     : 0 !default;
    $filter__content-padding                    : 0 0 $spacer--medium !default;
    $filter__content-padding\@medium            : 0 0 $spacer--medium $spacer--medium !default;
    $filter__content-padding\@large             : 0 0 $spacer--medium 0 !default;
    $filter__content-overflow-y                 : auto !default;
    $filter__label-wrapper-padding\@medium      : 0 0 0 $spacer--medium !default;
    $filter__label-wrapper-padding\@large       : 0 !default;
    
    // checkbox
    $filter__content-max-height--checkbox       : 195px !default;
    $filter__label-font-size--checkbox          : $font-size-medium !default;
    $filter__label-text-transform--checkbox     : uppercase !default;
    $filter__margin--checkbox-link              : 0 0 0 $spacer--extra-small !default;
    $filter__margin--checkbox-link\@medium      : 0 !default;
    $filter__label-font-wieght-checked--checkbox: $font-weight-bold !default;
    
    // Swatch
    $filter__swatch-size\@large                 : 25% !default;
    $filter__swatch-margin                      : 0 $spacer $spacer--medium 0 !default;
    $filter__swatch-margin\@large               : 0 0 $spacer--medium 0 !default;
    $filter__swatch-option-selected-border-color: $color-primary !default;
    $filter__swatch-option-size                 : 48px !default;
    $filter__swatch-option-background           : $white !default;
    $filter__swatch-option-color                : $color-primary !default;
    $filter__swatch-option-border               : $border-base !default;
    $filter__swatch-option-border-color-hover   : $color-primary !default;
    $filter__swatch-option-border-color--active : $color-primary !default;
    
    // Color
    $filter__color-padding                      : 0 !default;
    $filter__color-size\@large                  : auto !default;
    $filter__color-option-width                 : 48px !default;
    $filter__color-option-height                : auto !default;
    $filter__color-option-margin                : 0 $spacer $spacer 0 !default;
    $filter__color-option-border                : $border-base !default;
    $filter__color-option-after-top             : 0 !default;
    $filter__color-option-after-left            : 0 !default;
    $filter__color-option-after-size            : 48px !default;
    $filter__color-option-after-border-radius   : 0 !default;
    $filter__color-option-after-border-color    : $color-primary !default;
    $filter__color-sample-size                  : 32px !default;
    $filter__color-sample-margin                : $spacer !default;
    $filter__color-sample-border                : $border-base !default;
    $filter__color-sample-border-radius         : 0 !default;
    $filter__color-label-font-size              : $font-size-small !default;
    $filter__color-label-color                  : $gray-darkest !default;
    
    // category variant
    $filter__padding--category\@large           : 0 !default;
    $filter__border--category\@large            : $border-base !default;
    $filter__border-width--category\@large      : 0 0 $border-width-base 0 !default;
    
  • URL: /components/raw/filter/_filter-variables.scss
  • Filesystem Path: build/components/Organisms/filter/_filter-variables.scss
  • Size: 3.3 KB
  • Content:
    @import 'filter-variables';
    
    .filter {
        &--checkbox {
            .filter__content {
                max-height: $filter__content-max-height--checkbox;
            }
    
            .checkbox__label {
                color: $color-primary;
                font-size: $filter__label-font-size--checkbox;
                text-transform: $filter__label-text-transform--checkbox;
            }
            .checkbox--link {
                margin: $filter__margin--checkbox-link;
                @include mq($screen-m) {
                    margin: $filter__margin--checkbox-link\@medium;
                }
            }
            .checkbox--link-checked {
                .checkbox__label {
                    font-weight: $filter__label-font-wieght-checked--checkbox;
                }
            }
        }
    
        &--category {
            @include mq($screen-l) {
                padding: $filter__padding--category\@large;
                border: $filter__border--category\@large;
                border-width: $filter__border-width--category\@large;
            }
        }
    
        &__heading {
            margin: $filter__heading-margin;
            font-family: $filter__heading-font-family;
            font-size: $filter__heading-font-size;
            text-transform: $filter__heading-text-transform;
        }
    
        &__content {
            position: relative;
            overflow-y: $filter__content-overflow-y;
            padding: $filter__content-padding;
            @include mq($screen-m) {
                padding: $filter__content-padding\@medium;
            }
            @include mq($screen-l) {
                padding: $filter__content-padding\@large;
            }
        }
    
        &__label-wrapper {
            display: flex;
            @include mq($screen-m) {
                padding: $filter__label-wrapper-padding\@medium;
            }
            @include mq($screen-l) {
                padding: $filter__label-wrapper-padding\@large;
            }
        }
    
        &__list {
            display: flex;
            flex-wrap: wrap;
        }
    
        &__swatch-item {
            margin: $filter__swatch-margin;
    
            @include mq($screen-l) {
                display: flex;
                justify-content: flex-start;
                flex-basis: $filter__swatch-size\@large;
                margin: $filter__swatch-margin\@large;
            }
    
            &.selected {
                .filter__swatch-option {
                    border-color: $filter__swatch-option-selected-border-color;
                }
            }
        }
    
        &__swatch-option {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: $filter__swatch-option-size;
            min-height: $filter__swatch-option-size;
            border: $filter__swatch-option-border;
            background-color: $filter__swatch-option-background;
            color: $filter__swatch-option-color;
            transition: $filter__transition;
            cursor: pointer;
            text-decoration: none;
    
            &:hover,
            &.focus-visible {
                text-decoration: none;
                border-color: $filter__swatch-option-border-color-hover;
                font-weight: $font-weight-bold;
                color: $color-primary;
            }
    
            &--active {
                font-weight: $font-weight-bold;
                border-color: $filter__swatch-option-border-color--active;
            }
        }
    
        &__color-item {
            padding: $filter__color-padding;
    
            @include mq($screen-l) {
                display: flex;
                justify-content: flex-start;
                flex-basis: $filter__color-size\@large;
            }
    
            &.selected {
                .filter__color-option {
                    &:after {
                        border-color: $filter__color-option-after-border-color;
                    }
                }
            }
        }
    
        &__color-option {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            max-width: $filter__color-option-width;
            width: $filter__color-option-width;
            height: $filter__color-option-height;
            max-height: $filter__color-option-height;
            text-decoration: none;
            margin: $filter__color-option-margin;
    
            &:after {
                content: '';
                position: absolute;
                top: $filter__color-option-after-top;
                left: $filter__color-option-after-left;
                width: $filter__color-option-after-size;
                height: $filter__color-option-after-size;
                background-color: transparent;
                border: $filter__color-option-border;
                border-radius: $filter__color-option-after-border-radius;
                transition: $filter__transition;
            }
    
            &--active,
            &:hover,
            &.focus-visible {
                text-decoration: none;
    
                &:after {
                    border-color: $filter__color-option-after-border-color;
                }
            }
        }
    
        &__color-sample {
            width: $filter__color-sample-size;
            height: $filter__color-sample-size;
            margin: $filter__color-sample-margin;
            border: $filter__color-sample-border;
            border-radius: $filter__color-sample-border-radius;
        }
    
        &__color-label {
            max-width: 100%;
            font-size: $filter__color-label-font-size;
            color: $filter__color-label-color;
            word-break: break-all;
            text-align: center;
    
            @include visually-hidden();
        }
    }
    
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: build/components/Organisms/filter/_filter.scss
  • Size: 5.3 KB

There are no notes for this item.