<div class="lens-material">
    <h6 class="lens-material__title">MauiPure®</h6>
    <p class="lens-material__description">Our most popular lens material. It combines optics almost as crisp as SuperThin Glass with ultra lightweight and excellent scratch and shatter resistance.</p>
    <div class="lens-material__diagram">
        <div class="lens-material__label lens-material__label--top">Clarity</div>
        <div class="lens-material__middle">
            <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
            <div class="lens-material__image-wrapper">
                <img class="lens-material__image" src="/assets/images/lens-material-mauipure.svg">
                <span class="lens-material__caption">MP</span>
            </div>
            <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
        </div>
        <div class="lens-material__label lens-material__label--bottom">Weight</div>
    </div>
</div>
<div class="lens-material">
  <h6 class="lens-material__title">{{title}}</h6>
  <p class="lens-material__description">{{description}}</p>
  <div class="lens-material__diagram">
    <div class="lens-material__label lens-material__label--top">{{labels.top}}</div>
    <div class="lens-material__middle">
      <div class="lens-material__label lens-material__label--left">{{labels.left}}</div>
      <div class="lens-material__image-wrapper">
        <img class="lens-material__image" src="{{image}}">
        <span class="lens-material__caption">{{abbreviation}}</span>
      </div>
      <div class="lens-material__label lens-material__label--right">{{labels.right}}</div>
    </div>
    <div class="lens-material__label lens-material__label--bottom">{{labels.bottom}}</div>
  </div>
</div>
{
  "labels": {
    "top": "Clarity",
    "left": "Shatter Resistance",
    "right": "Scratch Resistance",
    "bottom": "Weight"
  },
  "abbreviation": "MP",
  "title": "MauiPure®",
  "description": "Our most popular lens material. It combines optics almost as crisp as SuperThin Glass with ultra lightweight and excellent scratch and shatter resistance.",
  "image": "/assets/images/lens-material-mauipure.svg"
}
  • Content:
    .lens-material {
      text-align: center;
    }
    
    .lens-material__title {
      @include text-label;
      margin: 0;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
        float: left;
        font-size: 1.9rem;
        line-height: 3.0rem;
      }
    }
    
    .lens-material__description {
      @include text-label;
    
      @include breakpoint($breakpoint-md) {
        @include span(10);
        @include push(1);
        text-align: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 100%;
        margin: 15px 0;
      }
    }
    
    .lens-material__diagram {
      @include text-label;
      @include clearfix;
      margin-bottom: 20px;
    
      @include breakpoint($breakpoint-md) {
        clear: both;
      }
    }
    
    .lens-material__middle {
      display: table;
      width: 100%;
      max-width: 350px;
      margin: 0 auto;
    }
    
    .lens-material__label--left {
      display: table-cell;
      width: calc(50% - 75px);
      text-align: right;
      vertical-align: middle;
    }
    
    .lens-material__label--right {
      display: table-cell;
      width: calc(50% - 75px);
      text-align: left;
      vertical-align: middle;
    }
    
    .lens-material__label--bottom {
      clear: both;
    }
    
    .lens-material__image-wrapper {
      display: table-cell;
      position: relative;
      width: 150px;
      vertical-align: middle;
    }
    
    .lens-material__image {
      width: 100%;
    }
    
    .lens-material__caption {
      position: absolute;
      top: calc(50% - 8px);
      right: 0;
      bottom: 0;
      left: 0;
      color: $color-white;
      font-weight: $font-weight-bold;
    }
    
  • URL: /components/raw/lens-material/lens-material.scss
  • Filesystem Path: src/components/02-components/lens-material/lens-material.scss
  • Size: 1.4 KB

There are no notes for this item.