<div class="tabs js-tabs tabs--customize-rimless">
    <ul class="tabs__tabs">
        <li class="tabs__tab js-tabs-tab js-tabs-tab--active" data-tab="lens-shape">Lens Shape</li>
        <li class="tabs__tab js-tabs-tab" data-tab="lens-color">Color</li>
    </ul>
    <div class="tabs__content-wrapper js-tabs-content-wrapper js-tabs-content-wrapper--active" data-tab="lens-shape">

        <div class="customize js-customize customize--rimless customize--rimless-shapes">
            <div class="customize__options">
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Rectangle
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Pellentesque viverra in nibh ut consectetur.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2001" value="mjo2001" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2001-140" data-frame-style="mjo2001-140" data-frame="Matte Black - mockdata2001" data-lens="Clear  - mockdata2001" data-material="MauiPure - The lightest weight choice for long days in the sun.  - mockdata2001">
                                <label for="mjo2001">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2001.svg">
    <span class="radio__label-text u-visually-hidden">MJO2001</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2007" value="mjo2007" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2007-140" data-frame-style="mjo2007-140" data-frame="Matte Black - mockdata2007" data-lens="Clear - mockdata2007" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2007">
                                <label for="mjo2007">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2007.svg">
    <span class="radio__label-text u-visually-hidden">MJO2007</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2008" value="mjo2008" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2008-140" data-frame-style="mjo2008-140" data-frame="Matte Black - mockdata2008" data-lens="Clear - mockdata2008" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2008">
                                <label for="mjo2008">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2008.svg">
    <span class="radio__label-text u-visually-hidden">MJO2008</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2009" value="mjo2009" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2009-140" data-frame-style="mjo2009-140" data-frame="Matte Black - mockdata2009" data-lens="Clear - mockdata2009" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2009">
                                <label for="mjo2009">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2009.svg">
    <span class="radio__label-text u-visually-hidden">MJO2009</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2010" value="mjo2010" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2010-140" data-frame-style="mjo2010-140" data-frame="Matte Black - mockdata2010" data-lens="Clear - mockdata2010" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2010"
                                    checked="true">
                                <label for="mjo2010">
    <img class="radio__image" src="/assets/images/silhouettes/rectangular/mjo2010.svg">
    <span class="radio__label-text u-visually-hidden">MJO2010</span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Oval
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Morbi semper sed elit eu tempus.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2002" value="mjo2002" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2002-140" data-frame-style="mjo2002-140" data-frame="Matte Black - mockdata2002" data-lens="Clear - mockdata2002" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2002">
                                <label for="mjo2002">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2002.svg">
    <span class="radio__label-text u-visually-hidden">MJO2002</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2003" value="mjo2003" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2003-140" data-frame-style="mjo2003-140" data-frame="Matte Black - mockdata2003" data-lens="Clear - mockdata2003" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2003">
                                <label for="mjo2003">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2003.svg">
    <span class="radio__label-text u-visually-hidden">MJO2003</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2004" value="mjo2004" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2004-140" data-frame-style="mjo2004-140" data-frame="Matte Black - mockdata2004" data-lens="Clear - mockdata2004" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2004">
                                <label for="mjo2004">
    <img class="radio__image" src="/assets/images/silhouettes/oval/mjo2004.svg">
    <span class="radio__label-text u-visually-hidden">MJO2004</span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Round
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Maecenas blandit ex nec nunc condimentum facilisis.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2005" value="mjo2005" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2005-140" data-frame-style="mjo2005-140" data-frame="Matte Black - mockdata2005" data-lens="Clear - mockdata2005" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2005">
                                <label for="mjo2005">
    <img class="radio__image" src="/assets/images/silhouettes/round/mjo2005.svg">
    <span class="radio__label-text u-visually-hidden">MJO2005</span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Square
                        <button class="customize__tooltip-trigger js-tooltip-open-link">
          <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

        </button>
                        <div class="tooltip">Quisque pellentesque malesuada eros.</div>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="mjo2006" value="mjo2006" name="frame-style" class="radio radio--image js-customize-item-input" data-value="MJO2006-140" data-frame-style="mjo2006-140" data-frame="Matte Black - mockdata2006" data-lens="Clear - mockdata2006" data-material="MauiPure - The lightest weight choice for long days in the sun. - mockdata2006">
                                <label for="mjo2006">
    <img class="radio__image" src="/assets/images/silhouettes/square/mjo2006.svg">
    <span class="radio__label-text u-visually-hidden">MJO2006</span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="tabs__content-wrapper js-tabs-content-wrapper" data-tab="lens-color">

        <div class="customize js-customize customize--rimless customize--rimless-colors">
            <div class="customize__options">
                <div class="customize__option js-customize-option">
                    <div class="customize__option-label">
                        Color: <span class="customize__option-value js-customize-option-value">Chrome / Chrome / Color 2 / Color 2</span>
                    </div>
                    <ul class="customize__items">
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-10" value="10" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="10" data-value="Chrome / Chrome / Color 1 / Color 1">
                                <label for="color-10">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-1.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 1 / Color 1</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-20" value="20" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="20" data-value="Chrome / Chrome / Color 2 / Color 2" checked="true">
                                <label for="color-20">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-2.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 2 / Color 2</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-30" value="30" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="30" data-value="Chrome / Chrome / Color 3 / Color 3">
                                <label for="color-30">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-3.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 3 / Color 3</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-40" value="40" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="40" data-value="Chrome / Chrome / Color 4 / Color 4">
                                <label for="color-40">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-4.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 4 / Color 4</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-50" value="50" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="50" data-value="Chrome / Chrome / Color 5 / Color 5">
                                <label for="color-50">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-5.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 5 / Color 5</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-60" value="60" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="60" data-value="Chrome / Chrome / Color 6 / Color 6">
                                <label for="color-60">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-6.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 6 / Color 6</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-70" value="70" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="70" data-value="Chrome / Chrome / Color 70 / Color 70">
                                <label for="color-70">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-7.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 7 / Color 7</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-80" value="80" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="80" data-value="Chrome / Chrome / Color 8 / Color 8">
                                <label for="color-80">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-8.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 8 / Color 8</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-90" value="90" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="90" data-value="Chrome / Chrome / Color 9 / Color 9">
                                <label for="color-90">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-9.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 9 / Color 9</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-100" value="100" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="100" data-value="Chrome / Chrome / Color 10 / Color 10">
                                <label for="color-100">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-10.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 10 / Color 10</span>
  </label>
                            </div>

                        </li>
                        <li class="customize__item">
                            <div class="form-item form-item--radio">
                                <input type="radio" id="color-110" value="110" name="frame-color" class="radio radio--image js-customize-item-input" data-frame-color="110" data-value="Chrome / Chrome / Color 11 / Color 11">
                                <label for="color-110">
    <img class="radio__image radio__image--narrow" src="/assets/images/dummy-products/rimless-color-11.jpg">
    <span class="radio__label-text u-visually-hidden">Chrome / Chrome / Color 11 / Color 11</span>
  </label>
                            </div>

                        </li>
                    </ul>
                </div>
                <div class="customize__options-help">
                    <p class="paragraph"><strong>The colors refer to:</strong> Bridge/Temple &amp; endpiece/Sleeve/Disc</p>

                </div>
            </div>
        </div>

    </div>
</div>
<div class="tabs js-tabs tabs--{{_self.name}}">
  <ul class="tabs__tabs">
    {{#each items}}
    <li class="tabs__tab js-tabs-tab{{#if active}} js-tabs-tab--active{{/if}}" data-tab="{{id}}">{{label}}</li>
    {{/each}}
  </ul>
  {{#each items}}
  <div class="tabs__content-wrapper js-tabs-content-wrapper{{#if active}} js-tabs-content-wrapper--active{{/if}}" data-tab="{{id}}">
    {{{content}}}
    {{#each components}}
    {{render (dynamicComponent component) context merge=true}}
    {{/each}}
  </div>
  {{/each}}
</div>
{
  "items": [
    {
      "id": "lens-shape",
      "label": "Lens Shape",
      "active": true,
      "components": [
        {
          "component": "customize--rimless-shapes"
        }
      ]
    },
    {
      "id": "lens-color",
      "label": "Color",
      "components": [
        {
          "component": "customize--rimless-colors"
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeTabClass = 'js-tabs-tab--active';
      const activeWrapperClass = 'js-tabs-content-wrapper--active';
    
      function initInstance(instance) {
        const tabs = instance.querySelectorAll('.js-tabs-tab');
    
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].addEventListener('click', handleTab);
        }
      }
    
      function handleTab(e) {
        const tab = e.target;
        const instance = tab.closest('.js-tabs');
        const tabs = instance.querySelectorAll('.js-tabs-tab');
        const contentWrappers = instance.querySelectorAll('.js-tabs-content-wrapper');
    
        for (let i = 0; i < tabs.length; i++) {
          if (tabs[i] == tab) {
            tabs[i].classList.add(activeTabClass);
          }
          else {
            tabs[i].classList.remove(activeTabClass);
          }
        }
    
        for (let i = 0; i < contentWrappers.length; i++) {
          if (contentWrappers[i].getAttribute('data-tab') == tab.getAttribute('data-tab')) {
            contentWrappers[i].classList.add(activeWrapperClass);
          }
          else {
            contentWrappers[i].classList.remove(activeWrapperClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-tabs');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            initInstance(instances[i]);
    
            instances[i].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/tabs/tabs.js
  • Filesystem Path: src/components/01-elements/tabs/tabs.js
  • Size: 1.6 KB
  • Content:
    .tabs {
      color: $color-darkest;
    }
    
    .tabs__tabs {
      @include reset-list;
      display: table;
      width: 100%;
      font-size: 1.4rem;
      line-height: 3.0rem;
      table-layout: fixed;
    
      .tabs--customize-rimless & {
        font-size: 1.6rem;
        line-height: 4.0rem;
    
        @include breakpoint($breakpoint-lg) {
          line-height: 5.0rem;
        }
      }
    }
    
    .tabs__tab {
      display: table-cell;
      border-bottom: 1px solid $color-light;
      color: $color-medium-dark;
      text-align: center;
      cursor: pointer;
    
      &:hover {
        border-bottom: 1px solid $color-dark;
        color: $color-darkest;
      }
    
      &.js-tabs-tab--active {
        border-bottom: 1px solid $color-primary;
        color: $color-darkest;
        font-weight: $font-weight-bold;
      }
    
      .tabs--customize-rimless & {
        background-color: $color-lighter;
      }
    }
    
    .tabs__content-wrapper {
      display: none;
    }
    
    .js-tabs-content-wrapper--active {
      display: block;
    }
    
    .js-tabs-feature-tab {
      display: none;
    }
    
  • URL: /components/raw/tabs/tabs.scss
  • Filesystem Path: src/components/01-elements/tabs/tabs.scss
  • Size: 928 Bytes

There are no notes for this item.