<div class="lens-comparison js-lens-comparison js-lens-comparison-collapsed">
    <table class="lens-comparison__table js-lens-comparison-table">
        <tr class="lens-comparison__collections-row">
            <td class="lens-comparison__collection-cell lens-comparison__collection-cell--blank">&nbsp;</td>
            <td class="lens-comparison__collection-cell">
                <div class="lens-comparison__collection-image-wrapper" style="background-color: #E91D2B">
                    <img class="lens-comparison__collection-image" src="/assets/images/zeal-tech-collection-optimum.png" alt="Optimum">
                </div>
                <h3 class="lens-comparison__collection-title">Optimum</h3>
                <h4 class="lens-comparison__collection-subtitle">Clearly Superior</h4>
            </td>
            <td class="lens-comparison__collection-cell">
                <div class="lens-comparison__collection-image-wrapper" style="background-color: #1E5732">
                    <img class="lens-comparison__collection-image" src="/assets/images/zeal-tech-collection-polarized.png" alt="Polarized">
                </div>
                <h3 class="lens-comparison__collection-title">Polarized</h3>
                <h4 class="lens-comparison__collection-subtitle">Clarity &amp; Protection</h4>
            </td>
            <td class="lens-comparison__collection-cell">
                <div class="lens-comparison__collection-image-wrapper" style="background-color: #1C3C6C">
                    <img class="lens-comparison__collection-image" src="/assets/images/zeal-tech-collection-auto.png" alt="Auto+">
                </div>
                <h3 class="lens-comparison__collection-title">Auto+</h3>
                <h4 class="lens-comparison__collection-subtitle">One lens. Every condition.</h4>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Spherical polycarbonate lens</td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Blue light filters to enhance color</td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Blocks 100% UVA/B/C light</td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Permashield Hardcoat</td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Everclear Anti-Fog</td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Hydro/Oleo on mirrored lenses</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Premium Japanese polarized film</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">95%+ Polarized to cut glare and eliminate eye fatigue Blocks 95% HEV light</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Boosts color for better definition and detail</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">UV activated photochromic technology</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Adjusts tint with changing light conditions</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
        <tr class="lens-comparison__data-row">
            <td class="lens-comparison__data-row-label">Transitions from light to dark in under 10 seconds</td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"></td>
            <td class="lens-comparison__data-row-cell"><svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/icons.svg#checkmark"></use>
</svg>
            </td>
        </tr>
    </table>
    <button class="button button--outlined lens-comparison__toggle js-lens-comparison-toggle">
    <span class="lens-comparison__toggle-label lens-comparison__toggle-label--collapsed">Compare Now</span>
    <span class="lens-comparison__toggle-label lens-comparison__toggle-label--expanded">Hide</span>
  </button>
</div>
<div class="lens-comparison js-lens-comparison js-lens-comparison-collapsed">
  <table class="lens-comparison__table js-lens-comparison-table">
    <tr class="lens-comparison__collections-row">
      <td class="lens-comparison__collection-cell lens-comparison__collection-cell--blank">&nbsp;</td>
      {{#each collections}}
      <td class="lens-comparison__collection-cell">
        <div class="lens-comparison__collection-image-wrapper" style="background-color: {{color}}">
          <img class="lens-comparison__collection-image" src="{{image}}" alt="{{title}}">
        </div>
        <h3 class="lens-comparison__collection-title">{{title}}</h3>
        <h4 class="lens-comparison__collection-subtitle">{{subtitle}}</h4>
      </td>
      {{/each}}
    </tr>
    {{#each tableRows}}
    <tr class="lens-comparison__data-row">
      <td class="lens-comparison__data-row-label">{{label}}</td>
      {{#each cells}}
      <td class="lens-comparison__data-row-cell">{{#if this}}{{render '@icons--checkmark'}}{{/if}}</td>
      {{/each}}
    </tr>
    {{/each}}
  </table>
  <button class="button button--outlined lens-comparison__toggle js-lens-comparison-toggle">
    <span class="lens-comparison__toggle-label lens-comparison__toggle-label--collapsed">Compare Now</span>
    <span class="lens-comparison__toggle-label lens-comparison__toggle-label--expanded">Hide</span>
  </button>
</div>
{
  "collections": [
    {
      "image": "/assets/images/zeal-tech-collection-optimum.png",
      "color": "#E91D2B",
      "title": "Optimum",
      "subtitle": "Clearly Superior"
    },
    {
      "id": "polarized",
      "image": "/assets/images/zeal-tech-collection-polarized.png",
      "color": "#1E5732",
      "title": "Polarized",
      "subtitle": "Clarity & Protection"
    },
    {
      "id": "auto",
      "image": "/assets/images/zeal-tech-collection-auto.png",
      "color": "#1C3C6C",
      "title": "Auto+",
      "subtitle": "One lens. Every condition."
    }
  ],
  "tableRows": [
    {
      "label": "Spherical polycarbonate lens",
      "cells": [
        true,
        true,
        true
      ]
    },
    {
      "label": "Blue light filters to enhance color",
      "cells": [
        true,
        true,
        true
      ]
    },
    {
      "label": "Blocks 100% UVA/B/C light",
      "cells": [
        true,
        true,
        true
      ]
    },
    {
      "label": "Permashield Hardcoat",
      "cells": [
        true,
        true,
        true
      ]
    },
    {
      "label": "Everclear Anti-Fog",
      "cells": [
        true,
        true,
        true
      ]
    },
    {
      "label": "Hydro/Oleo on mirrored lenses",
      "cells": [
        null,
        true,
        true
      ]
    },
    {
      "label": "Premium Japanese polarized film",
      "cells": [
        null,
        true,
        true
      ]
    },
    {
      "label": "95%+ Polarized to cut glare and eliminate eye fatigue Blocks 95% HEV light",
      "cells": [
        null,
        true,
        true
      ]
    },
    {
      "label": "Boosts color for better definition and detail",
      "cells": [
        null,
        true,
        true
      ]
    },
    {
      "label": "UV activated photochromic technology",
      "cells": [
        null,
        null,
        true
      ]
    },
    {
      "label": "Adjusts tint with changing light conditions",
      "cells": [
        null,
        null,
        true
      ]
    },
    {
      "label": "Transitions from light to dark in under 10 seconds",
      "cells": [
        null,
        null,
        true
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const collapsedClass = 'js-lens-comparison-collapsed';
    
      function handleToggle(e) {
        const instance = e.target.closest('.js-lens-comparison');
    
        instance.classList.toggle(collapsedClass);
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-lens-comparison');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const toggle = instances[i].querySelector('.js-lens-comparison-toggle');
    
            toggle.addEventListener('click', handleToggle);
    
            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/lens-comparison/lens-comparison.js
  • Filesystem Path: src/components/02-components/technology/lens-comparison/lens-comparison.js
  • Size: 864 Bytes
  • Content:
    .lens-comparison__table {
      width: calc(100% - 10px);
      margin: 0 5px;
      border-collapse: collapse;
    
      .js-lens-comparison-collapsed & {
        display: none;
      }
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 40px);
        margin: 0 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 840px;
        margin: 0 auto;
      }
    }
    
    .lens-comparison__collection-cell {
      padding: 0 5px;
      text-align: center;
      vertical-align: top;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        width: 33%;
        float: left;
        box-sizing: border-box;
      }
    }
    
    .lens-comparison__collection-cell--blank {
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .lens-comparison__collection-image-wrapper {
      height: 56px;
    
      @include breakpoint($breakpoint-md) {
        height: 63px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 86px;
      }
    }
    
    .lens-comparison__collection-image {
      width: auto;
      height: 100%;
      margin: 0 auto;
    }
    
    .lens-comparison__collection-title {
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 0;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .lens-comparison__collection-subtitle {
      margin-top: 0;
      color: $color-darkest;
      font-size: 1.0rem;
      letter-spacing: normal;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.2rem;
      }
    }
    
    .lens-comparison__data-row {
      @include breakpoint($breakpoint-md) {
        border-bottom: 1px solid $color-light;
      }
    }
    
    .lens-comparison__data-row-label {
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        width: 100%;
        padding: 2px 5px;
        border-bottom: 1px solid $color-lighter;
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-md) {
        max-width: 275px;
        padding: 10px 0;
      }
    }
    
    .lens-comparison__data-row-cell {
      text-align: center;
    
      .icon {
        fill: $color-primary;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        width: 33.3333%;
        padding: 15px 0 20px;
        float: left;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 15px 0 12px;
      }
    }
    
    .lens-comparison__toggle {
      margin: 30px 0 30px 50%;
      transform: translateX(-50%);
    }
    
    .lens-comparison__toggle-label--collapsed {
      display: none;
    
      .js-lens-comparison-collapsed & {
        display: inline-block;
      }
    }
    
    .lens-comparison__toggle-label--expanded {
      display: inline-block;
    
      .js-lens-comparison-collapsed & {
        display: none;
      }
    }
    
  • URL: /components/raw/lens-comparison/lens-comparison.scss
  • Filesystem Path: src/components/02-components/technology/lens-comparison/lens-comparison.scss
  • Size: 2.7 KB

There are no notes for this item.