<div class="filters js-filters u-page-width-max-gutters">
    <div class="filter-controls">
        <span class="filter-controls__result-summary">
      <span class="filter__controls-result-count">14</span> Results
        </span>
        <div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
            <button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
        <span class="filter-controls__label">Sort by</span>
        <span class="filter-controls__icon">
          <svg class="icon icon--sort">
  <use xlink:href="/assets/icons/icons.svg#sort"></use>
</svg>

        </span>
      </button>
            <select class="js-select-tooltip-select">
        <option value="new-arrivals" selected="selected">New Arrivals</option>
        <option value="price-asc">Price (low to high)</option>
        <option value="price-dsc">Price (high to low)</option>
        <option value="name-asc">Name (A-Z)</option>
        <option value="name-dsc">Name (Z-A)</option>
      </select>
            <ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
                <li class="js-select-tooltip-option js-select-tooltip-option--active" data-value="new-arrivals">New Arrivals</li>
                <li class="js-select-tooltip-option" data-value="price-asc">Price (low to high)</li>
                <li class="js-select-tooltip-option" data-value="price-dsc">Price (high to low)</li>
                <li class="js-select-tooltip-option" data-value="name-asc">Name (A-Z)</li>
                <li class="js-select-tooltip-option" data-value="name-dsc">Name (Z-A)</li>
            </ul>
        </div>
    </div>
</div>
<div class="filters js-filters u-page-width-max-gutters">
  <div class="filter-controls">
    {{#unless excludeResultCount}}
    <span class="filter-controls__result-summary">
      <span class="filter__controls-result-count">14</span> Results
    </span>
    {{/unless}}
    {{#if categories}}
    <button class="filter-controls__button filter-controls__button--open js-filters-open-button">
      <span class="filter-controls__icon filter-controls__icon--open">
        {{render '@icons--filters'}}
      </span>
      <span class="filter-controls__label">Filter</span>
    </button>
    {{/if}}
    {{#if prescription}}
    <div class="filter-controls__prescription filter-controls__prescription--medium">
      <input type="checkbox" id="filters-prescription" class="js-filters-prescription-control checkbox checkbox--default">
      <label for="filters-prescription">{{prescription}}</label>
    </div>
    {{/if}}
    {{#if sortOptions}}
    <div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
      <button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
        <span class="filter-controls__label">Sort by</span>
        <span class="filter-controls__icon">
          {{render '@icons--sort'}}
        </span>
      </button>
      <select class="js-select-tooltip-select">
        {{#each sortOptions}}
        <option value="{{id}}"{{#if default}} selected="selected"{{/if}}>{{label}}</option>
        {{/each}}
      </select>
      <ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
        {{#each sortOptions}}
        <li class="js-select-tooltip-option{{#if default}} js-select-tooltip-option--active{{/if}}" data-value="{{id}}">{{label}}</li>
        {{/each}}
      </ul>
    </div>
    {{/if}}
  </div>
  {{#if categories}}
  <div class="filters__categories-wrapper js-filters-categories-wrapper">
    <button class="filters__close-button js-filters-close-button">
      {{render '@icons--arrow-left'}}
      Close filters
    </button>
    <div class="js-selected-filter-close-icon">{{render '@icons--close-large'}}</div>
    <ul class="filters__selected js-filters-selected"></ul>
    {{#if prescription}}
    <div class="filter-controls__prescription filter-controls__prescription--small">
      <input type="checkbox" id="filters-prescription-small" class="js-filters-prescription-control checkbox checkbox--default">
      <label for="filters-prescription-small">{{prescription}}</label>
    </div>
    {{/if}}
    <ul class="filters__categories js-filters-categories">
      {{#each categories}}
      <li class="filters__category js-filters-category"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
        <button class="filters__category-button js-filters-category-button">
          {{label}}
          {{#if subcategories}}
          {{render '@icons--arrow-down'}}
          {{render '@icons--close-large'}}
          {{/if}}
        </button>
        {{#if subcategories}}
        <div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
          {{#each subcategories}}
          <div class="filters__subcategory filters__subcategory--{{modifier}}">
            <div class="filters__subcategory-inner">
              <h5 class="filters__subcategory-label">{{label}}</h5>
              <ul class="filters__items">
                {{#each items}}
                <li class="filters__item filters__item--{{input}} filters__item--{{variant}}">
                  <input type="{{input}}" id="{{id}}" class="{{input}} {{input}}--{{variant}} filters__item-input js-filters-item-input" name="{{../modifier}}" data-id="{{id}}" data-value="{{label}}"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
                  <label class="filters__item-label" for="{{id}}">
                    {{#if image}}
                    <img class="filters__item-image-default" src="{{image}}">
                    {{/if}}
                    {{#if imageSelected}}
                    <img class="filters__item-image-active" src="{{imageSelected}}">
                    {{/if}}
                    {{#if background}}
                    <span class="filters__item-alternate-fill" style="background: {{background}};{{#if border}}border: {{border}}{{/if}}"></span>
                    {{/if}}
                    {{label}}
                    {{#if count}}
                    <span class="filters__item-count">
                      ({{count}})
                    </span>
                    {{/if}}
                    {{#if icon}}
                    {{render (dynamicVariant 'icons' icon)}}
                    {{/if}}
                  </label>
                  {{#if tooltip}}
                  {{> @tooltip value=tooltip }}
                  {{/if}}
                </li>
                {{/each}}
              </ul>
            </div>
          </div>
          {{/each}}
        </div>
        {{/if}}
      </li>
      {{/each}}
    </ul>
  </div>
  <div class="filters__submit-wrapper">
    <button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
  </div>
  <div class="filters__reset-wrapper">
    <button class="filters__reset js-filters-reset-button">Reset Filters</button>
  </div>
  {{/if}}
  {{#if anglesLabel}}
  <h3 class="filters__angles-label">{{anglesLabel}}</h3>
  {{/if}}
  {{#if angles}}
  <ul class="filters__angles">
    {{#each angles}}
    <li class="filters__angle filters__angle--{{id}}">
      <button class="filters__angle-button js-filters-angle-button{{#if enabledByDefault}} js-filters-angle-button--active{{/if}}" data-id="{{id}}">
        <img class="filters__angle-image" src="/assets/images/filter-{{id}}.png" alt="{{label}}">
        <span class="filters__angle-label">{{label}}</span>
      </button>
    </li>
    {{/each}}
  </ul>
  {{/if}}
</div>
{
  "pageCss": [
    "products"
  ],
  "categories": null,
  "prescription": null,
  "sortOptions": [
    {
      "id": "new-arrivals",
      "label": "New Arrivals",
      "default": true
    },
    {
      "id": "price-asc",
      "label": "Price (low to high)"
    },
    {
      "id": "price-dsc",
      "label": "Price (high to low)"
    },
    {
      "id": "name-asc",
      "label": "Name (A-Z)"
    },
    {
      "id": "name-dsc",
      "label": "Name (Z-A)"
    }
  ],
  "angles": null
}
  • Content:
    (function (window) {
      'use strict';
    
      const categoriesOpenClass = 'js-filters-categories-open';
      const categoryOpenClass = 'js-filters-category-open';
      const preventTransitionsClass = 'js-filters-prevent-transitions';
      const activeFiltersClass = 'js-filters-active';
      const activeAngleClass = 'js-filters-angle-button--active';
      let filters = null;
      let originalFilters = null;
      let selectedFilters = null;
    
      function openFiltersCategories(e) {
        document.body.classList.add(categoriesOpenClass);
      }
    
      function closeFiltersCategories(e) {
        const categories = filters.querySelectorAll('.js-filters-category');
    
        for (let i = 0; i < categories.length; i++) {
          categories[i].classList.remove(categoryOpenClass);
        }
    
        document.body.classList.remove(categoriesOpenClass);
      }
    
      function resetFilters(e) {
        while (selectedFilters.firstChild) {
          selectedFilters.firstChild.click();
        }
    
        filters.classList.remove(activeFiltersClass);
      }
    
      function toggleCategoryVisibility(e) {
        const categoryWrapper = e.target.closest('.js-filters-category');
    
        if (!categoryWrapper.classList.contains(categoryOpenClass)) {
          openCategory(categoryWrapper);
        }
        else {
          closeCategory(categoryWrapper);
        }
      }
    
      function openCategory(categoryWrapperToOpen) {
        const categoryWrappers = filters.querySelectorAll('.js-filters-category');
    
        for (let i = 0; i < categoryWrappers.length; i++) {
          const categoryWrapper = categoryWrappers[i];
    
          if (categoryWrapper != categoryWrapperToOpen) {
            closeCategory(categoryWrapper, true);
          }
        }
    
        categoryWrapperToOpen.classList.add(categoryOpenClass);
    
        // Wait for the open transition to finish before adding a class that
        // prevents transitions when switching between categories.
        if (!document.body.classList.contains(preventTransitionsClass)) {
          categoryWrapperToOpen.addEventListener('transitionend', handleCategoryOpenTransitionend);
        }
      }
    
      function closeCategory(categoryWrapperToClose, openingAnotherCategory) {
        openingAnotherCategory = openingAnotherCategory || false;
    
        categoryWrapperToClose.classList.remove(categoryOpenClass);
    
        if (!openingAnotherCategory) {
          document.body.classList.remove(preventTransitionsClass);
        }
      }
    
      function handleCategoryOpenTransitionend(e) {
        // All child events bubble up, so ensure this is the one we want to act on.
        if (e.target.classList.contains('js-filters-subcategory-wrapper') && e.propertyName == 'opacity') {
          document.body.classList.add(preventTransitionsClass);
    
          e.target.closest('.js-filters-category').removeEventListener(e.type, handleCategoryOpenTransitionend);
        }
      }
    
      function toggleFilter(e) {
        if (e.target.checked) {
          addFilter(e.target);
        }
        else {
          removeFilter(e.target);
        }
      }
    
      // Construct the element listed among the selected filters.
      function addFilter(input) {
        const filterId = input.getAttribute('data-id');
        const filterValue = input.getAttribute('data-value');
        const filterToggle = input.getAttribute('data-toggle');
        const selectedFilter = document.createElement('li');
        const selectedFilterIcon = document.querySelector('.js-selected-filter-close-icon').firstChild.cloneNode(true);
        const selectedFilterContent = document.createTextNode(filterValue);
    
        selectedFilter.appendChild(selectedFilterIcon);
        selectedFilter.appendChild(selectedFilterContent);
        selectedFilter.classList.add('js-filters-selected-filter');
        selectedFilter.setAttribute('data-id', filterId);
        selectedFilter.addEventListener('click', removeSelectedFilter);
    
        // See toggleVisibility().
        if (filterToggle) {
          selectedFilter.setAttribute('data-toggle', filterToggle);
          selectedFilter.setAttribute('data-toggled', true);
          selectedFilter.addEventListener('click', toggleVisibility);
        }
    
        selectedFilters.appendChild(selectedFilter);
    
        // Toggles visibility of the reset button.
        filters.classList.add(activeFiltersClass);
      }
    
      function removeSelectedFilter(e) {
        removeFilter(e.target);
      }
    
      // Remove the element listed among the selected filters, uncheck the original.
      function removeFilter(input) {
        const filterId = input.getAttribute('data-id');
        const originalFilter = originalFilters.querySelector('[data-id="' + filterId + '"]');
        const selectedFilter = selectedFilters.querySelector('[data-id="' + filterId + '"]');
    
        if (originalFilter.checked) {
          originalFilter.checked = false;
        }
    
        if (selectedFilter) {
          selectedFilter.remove();
        }
    
        // Toggles visibility of the reset button.
        if (!selectedFilters.firstChild) {
          filters.classList.remove(activeFiltersClass);
        }
      }
    
      // When a back/forward button is used, checkbox states are preserved but
      // previous JS execution is not. So if a filter had been selected on a page
      // navigated to via back/forward, it will appear selected in the dropdown but
      // not elsewhere. The checkboxes need to be reset in that situation.
      function resetFilterIfUnselected(input) {
        if (input.checked) {
          // This code is also called when Ajax replaces the filter markup as
          // filters are changed, so we must check if the filter should actually be
          // selected (if it has a corresponding item in the selected list) or not.
          const selectedFilter = filters.querySelector(`.js-filters-selected-filter[data-id="${input.getAttribute('data-id')}"]`);
    
          if (!selectedFilter) {
            input.checked = false;
          }
        }
      }
    
      function switchAngle(e) {
        const angleButton = e.target;
    
        if (!angleButton.classList.contains(activeAngleClass)) {
          const angleButtons = filters.querySelectorAll('.js-filters-angle-button');
    
          for (let i = 0; i < angleButtons.length; i++) {
            angleButtons[i].classList.remove(activeAngleClass);
          }
    
          angleButton.classList.add(activeAngleClass);
    
          switchCardImageAngles(angleButton.getAttribute('data-id'));
        }
      }
    
      function switchCardImageAngles(newAngleId) {
        const cardImages = document.querySelectorAll('.js-card-image');
    
        for (let i = 0; i < cardImages.length; i++) {
          const cardImage = cardImages[i];
          const currentVariantId = cardImage.getAttribute('data-variant');
          const newImageAttribute = 'data-' + currentVariantId + '-' + newAngleId;
    
          cardImage.setAttribute('src', cardImage.getAttribute(newImageAttribute));
          cardImage.setAttribute('data-angle', newAngleId);
        }
      }
    
      // Keeps multiple Prescription controls (needed for different placement at
      // different screen sizes) in sync as either are toggled.
      function togglePrescription(e) {
        const prescriptionControls = filters.querySelectorAll('.js-filters-prescription-control');
    
        for (let i = 0; i < prescriptionControls.length; i++) {
          prescriptionControls[i].checked = e.target.checked;
        }
      }
    
      // Handles visibility toggles within the filter interface in situations where
      // the library controls it (secondary landing pages, for example, not PLPs).
      // The code is relatively complex to support all necessary use cases.
      // For this to work, the following attributes must be applied:
      // - data-toggle="category" should be set on the clickable toggle, where
      //   `category` is the group of items this toggle.
      // - data-toggle-exclusive="true" should be set when enabling a toggle should
      //   disable all previously enabled toggles.
      // - data-toggled="true" is set within this code on toggle elements and should
      //   not be set server side unless a toggle is enabled on page load.
      // - data-toggle-item="category multiple" should be set on the items whose
      //   visibility are affected by the toggles, where `category` should match the
      //   data-toggle value that controls it. Can have multiple values, separated
      //   by a space.
      function toggleVisibility(e) {
        const toggle = e.target.closest('[data-toggle]');
        const category = toggle.getAttribute('data-toggle');
        const allToggles = document.querySelectorAll('[data-toggle]');
        const allItems = document.querySelectorAll(`[data-toggle-item]`);
        let currentlyOn = [];
    
        // Determine what was toggled on before the toggle in question was clicked.
        for (let i = 0; i < allToggles.length; i++) {
          if (allToggles[i].getAttribute('data-toggled')) {
            const currentCategory = allToggles[i].getAttribute('data-toggle');
    
            currentlyOn.push(currentCategory);
          }
        }
    
        // Update that information with information about the toggle in question.
        if (!toggle.getAttribute('data-toggled')) {
          // Items with this attribute disable all previously enabled toggles.
          if (toggle.getAttribute('data-toggle-exclusive')) {
            currentlyOn = [];
          }
    
          currentlyOn.push(category);
        }
        else {
          // Remove the previously-selected toggle from the list.
          currentlyOn = currentlyOn.filter(e => e !== category);
        }
    
        // Update the toggles with the new information.
        for (let i = 0; i < allToggles.length; i++) {
          const currentCategory = allToggles[i].getAttribute('data-toggle');
    
          if (currentlyOn.indexOf(currentCategory) !== -1) {
            allToggles[i].setAttribute('data-toggled', true);
            allToggles[i].checked = true;
          }
          else {
            allToggles[i].removeAttribute('data-toggled');
            allToggles[i].checked = false;
          }
        }
    
        // Update the items with the new information.
        for (let i = 0; i < allItems.length; i++) {
          const currentCategories = allItems[i].getAttribute('data-toggle-item').split(' ');
          let isOn = false;
    
          // Supports multiple values separated by a space.
          for (let j = 0; j < currentCategories.length; j++) {
            if (currentlyOn.indexOf(currentCategories[j]) !== -1) {
              isOn = true;
            }
          }
    
          if (isOn || !currentlyOn.length) {
            allItems[i].classList.remove('js-hidden');
          }
          else {
            allItems[i].classList.add('js-hidden');
          }
        }
      }
    
      function init() {
        filters = document.querySelector('.js-filters');
        originalFilters = document.querySelector('.js-filters-categories');
        selectedFilters = document.querySelector('.js-filters-selected');
    
        if (filters && !filters.classList.contains('js-component-init')) {
          const openFiltersButton = filters.querySelector('.js-filters-open-button');
          const closeFiltersButton = filters.querySelector('.js-filters-close-button');
          const submitFiltersButton = filters.querySelector('.js-filters-submit-button');
          const resetFiltersButton = filters.querySelector('.js-filters-reset-button');
          const categoryButtons = filters.querySelectorAll('.js-filters-category-button');
          const itemInputs = filters.querySelectorAll('.js-filters-item-input');
          const angleButtons = filters.querySelectorAll('.js-filters-angle-button');
          const prescriptionControls = filters.querySelectorAll('.js-filters-prescription-control');
          const visibilityToggles = filters.querySelectorAll('[data-toggle]');
    
          if (openFiltersButton && closeFiltersButton) {
            openFiltersButton.addEventListener('click', openFiltersCategories);
            closeFiltersButton.addEventListener('click', closeFiltersCategories);
          }
    
          if (submitFiltersButton && resetFiltersButton) {
            submitFiltersButton.addEventListener('click', closeFiltersCategories);
            resetFiltersButton.addEventListener('click', resetFilters);
          }
    
          for (let i = 0; i < categoryButtons.length; i++) {
            categoryButtons[i].addEventListener('click', toggleCategoryVisibility);
          }
    
          for (let i = 0; i < itemInputs.length; i++) {
            itemInputs[i].addEventListener('change', toggleFilter);
            resetFilterIfUnselected(itemInputs[i]);
          }
    
          for (let i = 0; i < angleButtons.length; i++) {
            angleButtons[i].addEventListener('click', switchAngle);
          }
    
          for (let i = 0; i < prescriptionControls.length; i++) {
            prescriptionControls[i].addEventListener('click', togglePrescription);
          }
    
          for (let i = 0; i < visibilityToggles.length; i++) {
            visibilityToggles[i].addEventListener('click', toggleVisibility);
          }
    
          filters.classList.add('js-component-init');
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/filters/filters.js
  • Filesystem Path: src/components/02-components/filters/filters.js
  • Size: 12.5 KB
  • Content:
    .filters {
      position: relative;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 $gutter-width-half;
      }
    }
    
    .filter-controls {
      height: 50px;
      margin-top: 10px;
      padding: 13px 10px;
      background-color: $color-lighter;
      text-align: center;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 0;
        padding: 15px 0;
        background-color: transparent;
      }
    }
    
    .filter-controls__result-summary {
      @include text-ui($color-dark);
      position: absolute;
      right: 0;
      left: 0;
      line-height: 2.8rem;
      pointer-events: none;
    
      @include breakpoint($breakpoint-md) {
        line-height: 2.0rem;
      }
    }
    
    .filter-controls__button {
      @include reset-button;
      @include text-label($color-darkest);
    }
    
    .filter-controls__button--open {
      float: left;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .filter-controls__icon {
      display: inline-block;
      vertical-align: middle;
      fill: $color-medium-dark;
    
      .filter-controls__button--open & { margin-right: 5px; }
      .filter-controls__button--sort & { margin-left: 5px; }
    }
    
    .filter-controls__label {
      display: inline-block;
      vertical-align: middle;
    
      .filter-controls__button[data-selected='true'] & {
        font-weight: $font-weight-bold;
      }
    }
    
    // Overrides select-tooltip defaults.
    .filter-controls__sort-wrapper {
      position: relative;
      top: 3px;
      width: 120px;
      height: 100%;
      float: right;
    
      .filter-controls__button {
        position: absolute;
        top: 0;
        right: 0;
      }
    
      .filter-controls__sort-tooltip {
        top: calc(100% + 15px);
        right: 0;
        text-align: left;
    
        &:before {
          right: 50px;
          left: auto;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        top: 0;
    
        &:hover .icon,
        &.js-select-tooltip--open .icon {
          fill: $color-primary;
        }
    
        &.js-select-tooltip--open .filter-controls__button {
          color: $color-primary;
        }
      }
    }
    
    .filter-controls__prescription--small {
      margin-bottom: 30px;
    
      .checkbox {
        background-color: transparent;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .filter-controls__prescription--medium {
      display: none;
      float: left;
    
      @include breakpoint($breakpoint-md) {
        display: block;
      }
    }
    
    .filter-controls__toggle-shape {
      display: inline-block;
      position: relative;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      border: 1px solid $color-medium-dark;
      vertical-align: middle;
      box-sizing: border-box;
    
      .filter-controls__button[data-selected='true'] &:after {
        position: absolute;
        top: 3px;
        right: 3px;
        bottom: 3px;
        left: 3px;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .filters__categories-wrapper {
      position: relative;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 70px;
        left: 0;
        padding: 20px;
        background-color: $color-lighter;
        overflow: scroll;
        z-index: 50;
        box-sizing: border-box;
    
        .js-filters-categories-open & {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex-direction: column;
        margin: 0 (-1 * $gutter-width-half);
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 0;
      }
    }
    
    .filters__close-button {
      @include reset-button;
      @include text-ui($color-dark);
      position: relative;
      left: -20px;
      margin-bottom: 30px;
      padding: 8px 10px;
      border-radius: 0 10px 10px 0;
      background-color: $color-white;
      text-transform: uppercase;
      cursor: pointer;
    
      .icon {
        margin: 0 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    // Used when generating selected filter elements.
    .js-selected-filter-close-icon {
      display: none;
    }
    
    .filters__selected {
      margin: 10px 0 0;
      padding: 10px 0 0;
      list-style-type: none;
    
      &:empty {
        display: none;
      }
    
      &:not(:empty) {
        border-top: 1px solid $color-light;
      }
    
      .icon {
        pointer-events: none;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .icon {
          width: 9px;
          height: 9px;
          margin-right: 5px;
          fill: $color-error;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        @include span(10);
        order: 1;
        margin: 0;
    
        &:not(:empty) {
          border-top: 0;
        }
    
        .icon {
          position: relative;
          top: 1px;
          width: 12px;
          height: 12px;
          margin-right: 10px;
        }
    
        .js-filters-selected-filter:hover .icon {
          fill: $color-error;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        @include span(8);
        @include push(2);
        text-align: center;
      }
    }
    
    .js-filters-selected-filter {
      @include text-label;
      display: inline-block;
      margin-bottom: 15px;
      cursor: pointer;
    
      @include breakpoint($breakpoint-sm-only) {
        margin-right: 5px;
        padding: 7px 15px 5px;
        border-radius: 30px;
        background-color: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-right: 20px;
      }
    }
    
    .filters__categories {
      @include reset-list;
    
      @include breakpoint($breakpoint-sm-only) {
        border-top: 1px solid $color-light;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        background-color: $filters-background-color-md;
        font-size: 0;
        text-align: center;
      }
    }
    
    .filters__category {
      @include breakpoint($breakpoint-md) {
        display: inline-block;
    
        &.js-filters-category-open {
          background-color: $color-white;
        }
      }
    }
    
    .filters__category-button {
      @include reset-button;
      display: block;
      position: relative;
      width: 100%;
      padding: 15px 0 10px;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
      font-size: 1.9rem;
      text-align: left;
      box-sizing: border-box;
    
      .icon {
        position: absolute;
        right: 0;
        pointer-events: none;
      }
    
      .icon--arrow-down {
        top: 25px;
    
        .js-filters-category-open & {
          display: none;
        }
      }
    
      .icon--close-large {
        display: none;
        top: 20px;
        width: 12px;
        height: 12px;
    
        .js-filters-category-open & {
          display: block;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        @include text-ui($color-dark);
        padding: 2px 15px 0;
        border-bottom: 0;
        line-height: 48px;
        text-transform: uppercase;
    
        .filters__category:not([data-toggle]) & {
          padding-right: 30px;
        }
    
        .icon {
          right: 10px;
        }
    
        .icon--arrow-down {
          top: 23px;
        }
    
        .icon--close-large {
          top: 19px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .filters__category:not([data-toggle]) & {
          padding-right: 50px;
    
          .icon {
            right: 20px;
          }
        }
      }
    }
    
    .filters__subcategory-wrapper {
      display: none;
      margin: 0 -20px;
      padding: 2px 20px 10px;
      background-color: $color-white;
    
      .js-filters-category-open & {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        position: absolute;
        right: 20px;
        left: 20px;
        padding: 0 0 10px;
        transition: visibility .2s ease 0s, opacity .2s ease 0s;
        border-bottom: 1px solid $color-light;
        text-align: left;
        box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .1);
        // Fade in/out on open/close.
        opacity: 0;
        visibility: hidden;
        z-index: 5;
    
        .js-filters-category-open & {
          opacity: 1;
          visibility: visible;
        }
    
        .js-filters-prevent-transitions & {
          transition: none 0s ease 0s;
        }
      }
    }
    
    .filters__subcategory {
      @include breakpoint($breakpoint-xl) {
        margin: 0 (-1 * $gutter-width-half);
      }
    }
    
    .filters__subcategory-inner {
      @include breakpoint($breakpoint-xl) {
        @include span(8);
        @include push(2);
        padding: 0;
      }
    }
    
    .filters__subcategory-label {
      margin: 20px 0 15px;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        @include span(12);
        margin-top: 30px;
        font-size: 1.9rem;
        font-weight: $font-weight-normal;
        letter-spacing: 3px;
        text-transform: none;
      }
    }
    
    .filters__items {
      @include reset-list;
      @include clearfix;
      margin-top: 10px;
    }
    
    .filters__item {
      position: relative;
      margin-bottom: 15px;
    
      .tooltip {
        display: none;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        width: 50%;
        float: left;
    
        .filters__subcategory--frame-style &,
        .filters__subcategory--lens-color &,
        .filters__subcategory--lens-material &,
        .filters__subcategory--conditions & {
          width: 100%;
          float: none;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        @include span(3);
        float: left;
    
        .filters__subcategory--frame-style &,
        .filters__subcategory--lens-size &,
        .filters__subcategory--conditions & {
          @include span(4);
        }
    
        .filters__subcategory--lens-color & {
          @include span($filters-lens-color-col-span-md);
        }
    
        &.filters__item--alternate {
          position: relative;
          left: -5px;
        }
    
        &:hover .tooltip {
          display: block;
          position: absolute;
          top: 40px;
        }
      }
    
    
      @include breakpoint($page-width-max) {
        .filters__subcategory--frame-style & {
          @include span(3);
        }
    
        .filters__subcategory--frame-color & {
          @include span($filters-frame-color-col-span-max);
        }
    
        .filters__subcategory--lens-color & {
          @include span($filters-lens-color-col-span-max);
        }
    
        .filters__subcategory--lens-size & {
          @include span(3);
        }
      }
    }
    
    .filters__item-label {
      @include text-label($color-darkest);
      width: 100%;
      margin-bottom: 3px;
      vertical-align: middle;
    
      .filters__subcategory--lens-color & {
        &:before,
        &:after,
        .filters__item-alternate-fill {
          border-radius: 50%;
        }
      }
    
      .icon {
        top: -2px !important;
        padding-left: 6px !important;
      }
    }
    
    .filters__item-input:checked + .filters__item-label {
      color: $color-darkest;
      font-weight: $font-weight-bold;
    }
    
    .filters__item-input.checkbox--image + .filters__item-label:after {
      position: absolute;
      top: -8px;
      right: -8px;
      bottom: -8px;
      left: -8px;
      border: 2px solid $color-medium-light;
      content: '';
      pointer-events: none;
    
      .filters__subcategory--frame-style & {
        transform: none;
      }
    }
    
    .filters__item-input.checkbox--image:checked + .filters__item-label:after {
      border: 2px solid $color-primary;
    }
    
    .filters__item-input.checkbox--image:checked + .filters__item-label  {
      .filters__item-image-default {
        display: none;
      }
    
      .filters__item-image-active {
        display: inline-block;
        width: 79px;
        height: 30px;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
    
    // This element must be used for dynamic background colors since inline styles
    // can't affect pseudo elements.
    .filters__item-alternate-fill {
      position: absolute;
      top: 50%;
      left: 5px;
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      box-sizing: border-box;
    
      .filters__item--radio & {
        border-radius: 50%;
      }
    }
    
    .filters__item-image-default {
      display: inline-block;
      width: 79px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
    }
    
    .filters__item-image-active {
      display: none;
    }
    
    .filters__item--image {
      min-height: 35px;
    }
    
    .filters__submit-wrapper {
      display: none;
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      height: 70px;
      padding: 10px;
      background-color: $color-lighter;
      z-index: 50;
      box-sizing: border-box;
    
      .js-filters-categories-open & {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none !important;
      }
    }
    
    .filters__submit {
      width: 100%;
      cursor: pointer;
    }
    
    .filters__reset-wrapper {
      display: none;
      position: absolute;
      top: 100px;
      right: 10px;
      padding-top: 15px;
      z-index: 2;
    
      .l-secondary-filters & {
        top: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        .js-filters-active & {
          display: block;
        }
      }
    }
    
    .filters__reset {
      @include reset-button;
      @include text-ui($color-error);
    }
    
    .filters__angles-label {
      margin: 25px 0 0;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: -10px;
      }
    }
    
    .filters__angles {
      @include reset-list;
      margin-top: 10px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 23px;
      }
    }
    
    .filters__angle {
      display: inline-block;
      margin: 0 15px;
    
      &:first-child {
        margin-left: 0;
      }
    
      &:last-child {
        margin-right: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 0 20px;
      }
    }
    
    .filters__angle-button {
      @include reset-button;
    }
    
    .filters__angle-image {
      transition: opacity $transition-standard;
      opacity: .5;
      pointer-events: none;
    
      .filters__angle-button:hover &,
      .js-filters-angle-button--active & {
        opacity: 1;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        width: 50px;
      }
    }
    
    .filters__angle-label {
      transition: opacity $transition-standard;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
      opacity: 0;
      pointer-events: none;
    
      .filters__angle-button:hover &,
      .js-filters-angle-button--active & {
        opacity: 1;
      }
    }
    
  • URL: /components/raw/filters/filters.scss
  • Filesystem Path: src/components/02-components/filters/filters.scss
  • Size: 13 KB

There are no notes for this item.