<div class="size-fit u-block u-page-width-max">
    <div class="size-fit__title-group">
        <h5 class="size-fit__title">Size and Fit</h5>

    </div>
    <div class="size-fit__side size-fit__side--front">
        <div class="size-fit__measurements">
            <img class="size-fit__image size-fit__image--front" srcset="/assets/images/size-fit/classic-front.png 1x, /assets/images/size-fit/classic-front@2x.png 2x" src="/assets/images/size-fit/classic-front.png" alt="Front">
            <div class="size-fit__measurement-group size-fit__measurement-group--front-upper">
                <div class="size-fit__measurement size-fit__measurement--eye">
                    <span class="size-fit__measurement-label">Eye</span>
                    <span class="size-fit__measurement-value">51.0</span>
                </div>
                <div class="size-fit__measurement size-fit__measurement--bridge">
                    <span class="size-fit__measurement-label">Bridge</span>
                    <span class="size-fit__measurement-value">20.0</span>
                </div>
                <div class="size-fit__measurement size-fit__measurement--eye">
                    <span class="size-fit__measurement-label">Eye</span>
                    <span class="size-fit__measurement-value">51.0</span>
                </div>
            </div>
            <div class="size-fit__measurement-group size-fit__measurement-group--front-height">
                <div class="size-fit__measurement size-fit__measurement--height">
                    <span class="size-fit__measurement-label">Height</span>
                    <span class="size-fit__measurement-value">41.0</span>
                </div>
            </div>
        </div>
        <p class="size-fit__description"><strong>Shape:</strong> Refined rectangular shaped frame best complements oval or heart/triangle face shapes.</p>
        <p class="size-fit__description"><strong>Bridge:</strong> Saddle style bridge with adjustable rubber nose pads for added comfort.</p>
    </div>
    <div class="size-fit__side size-fit__side--above">
        <div class="size-fit__measurements">
            <img class="size-fit__image size-fit__image--above" srcset="/assets/images/size-fit/classic-up.png 1x, /assets/images/size-fit/classic-up@2x.png 2x" src="/assets/images/size-fit/classic-up.png" alt="Above">
            <div class="size-fit__measurement-group size-fit__measurement-group--above-base">
                <div class="size-fit__measurement size-fit__measurement--base">
                    <span class="size-fit__measurement-label">Base Curve</span>
                    <span class="size-fit__measurement-value">6</span>
                </div>
            </div>
        </div>
        <p class="size-fit__description"><strong>Fit:</strong> (eye) 51, (bridge) 20, (temple) 146, 6-base curve</p>
        <p class="size-fit__description"><strong>Finishing Treatment:</strong> Three color options available in a high-gloss and matte finish.</p>
    </div>
    <div class="size-fit__side size-fit__side--side">
        <div class="size-fit__measurements">
            <img class="size-fit__image size-fit__image--side" srcset="/assets/images/size-fit/classic-side.png 1x, /assets/images/size-fit/classic-side@2x.png 2x" src="/assets/images/size-fit/classic-side.png" alt="Side">
            <div class="size-fit__measurement-group size-fit__measurement-group--side-temple">
                <div class="size-fit__measurement size-fit__measurement--temple">
                    <span class="size-fit__measurement-label">Temple</span>
                    <span class="size-fit__measurement-value">146.0</span>
                </div>
            </div>
        </div>
        <p class="size-fit__description"><strong>Material:</strong> Lightweight, injected nylon frame designed for longer wear time.</p>
        <p class="size-fit__description"><strong>Hinge:</strong> Pin hinge.</p>
    </div>
</div>
<div class="size-fit u-block u-page-width-max">
  <div class="size-fit__title-group">
    <h5 class="size-fit__title">{{title}}</h5>
    {{#if subtitle}}<h6 class="size-fit__subtitle">{{subtitle}}</h6>{{/if}}
  </div>
  {{#each sides}}
  <div class="size-fit__side size-fit__side--{{modifier}}">
    <div class="size-fit__measurements">
      <img class="size-fit__image size-fit__image--{{modifier}}"{{#if image.srcset}} srcset="{{image.srcset}}"{{/if}} src="{{image.src}}" alt="{{image.alt}}">
      {{#each groups}}
      <div class="size-fit__measurement-group size-fit__measurement-group--{{modifier}}">
        {{#each measurements}}
        <div class="size-fit__measurement size-fit__measurement--{{modifier}}">
          <span class="size-fit__measurement-label">{{label}}</span>
          <span class="size-fit__measurement-value">{{value}}</span>
        </div>
        {{/each}}
      </div>
      {{/each}}
    </div>
    {{#if descriptions}}
    {{#each descriptions}}
    <p class="size-fit__description"><strong>{{label}}:</strong> {{value}}</p>
    {{/each}}
    {{/if}}
  </div>
  {{/each}}
</div>
{
  "pageCss": [
    "products"
  ],
  "title": "Size and Fit",
  "sides": [
    {
      "modifier": "front",
      "image": {
        "srcset": "/assets/images/size-fit/classic-front.png 1x, /assets/images/size-fit/classic-front@2x.png 2x",
        "src": "/assets/images/size-fit/classic-front.png",
        "alt": "Front"
      },
      "groups": [
        {
          "modifier": "front-upper",
          "measurements": [
            {
              "modifier": "eye",
              "label": "Eye",
              "value": "51.0"
            },
            {
              "modifier": "bridge",
              "label": "Bridge",
              "value": "20.0"
            },
            {
              "modifier": "eye",
              "label": "Eye",
              "value": "51.0"
            }
          ]
        },
        {
          "modifier": "front-height",
          "measurements": [
            {
              "modifier": "height",
              "label": "Height",
              "value": "41.0"
            }
          ]
        }
      ],
      "descriptions": [
        {
          "label": "Shape",
          "value": "Refined rectangular shaped frame best complements oval or heart/triangle face shapes."
        },
        {
          "label": "Bridge",
          "value": "Saddle style bridge with adjustable rubber nose pads for added comfort."
        }
      ]
    },
    {
      "modifier": "above",
      "image": {
        "srcset": "/assets/images/size-fit/classic-up.png 1x, /assets/images/size-fit/classic-up@2x.png 2x",
        "src": "/assets/images/size-fit/classic-up.png",
        "alt": "Above"
      },
      "groups": [
        {
          "modifier": "above-base",
          "measurements": [
            {
              "modifier": "base",
              "label": "Base Curve",
              "value": "6"
            }
          ]
        }
      ],
      "descriptions": [
        {
          "label": "Fit",
          "value": "(eye) 51, (bridge) 20, (temple) 146, 6-base curve"
        },
        {
          "label": "Finishing Treatment",
          "value": "Three color options available in a high-gloss and matte finish."
        }
      ]
    },
    {
      "modifier": "side",
      "image": {
        "srcset": "/assets/images/size-fit/classic-side.png 1x, /assets/images/size-fit/classic-side@2x.png 2x",
        "src": "/assets/images/size-fit/classic-side.png",
        "alt": "Side"
      },
      "groups": [
        {
          "modifier": "side-temple",
          "measurements": [
            {
              "modifier": "temple",
              "label": "Temple",
              "value": "146.0"
            }
          ]
        }
      ],
      "descriptions": [
        {
          "label": "Material",
          "value": "Lightweight, injected nylon frame designed for longer wear time."
        },
        {
          "label": "Hinge",
          "value": "Pin hinge."
        }
      ]
    }
  ]
}
  • Content:
    .size-fit {
      padding: 0 $gutter-width-half;
      font-size: 1.4rem;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        @include clearfix;
        margin-right: 0;
        margin-left: 0;
        padding: 0;
      }
    }
    
    .size-fit__title-group {
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 20px;
      }
    }
    
    .size-fit__title {
      margin: 0;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .size-fit__subtitle {
      @include text-label;
      margin: 0;
      font-weight: normal;
      text-transform: uppercase;
    }
    
    .size-fit__side {
      @include clearfix;
      margin-bottom: 30px;
    
      @include breakpoint($breakpoint-xl) {
        @include span(4);
        padding-right: 30px;
        padding-left: 30px;
      }
    }
    
    .size-fit__measurements {
      position: relative;
      @if $brand == 'mauijim' {
        max-width: 500px;
      } @else if $brand == 'zeal' {
        // These settings are mainly for the front image.
        //
        // The image and container must be the same size, or maintaining the
        // alignment of the dimensions shown in the designs become essentially
        // impossible. When they are the same size, the alignment becomes
        // straightforward.
        max-width: 420px;
        max-height: 144px;
      }
      margin: 10px auto;
      padding: 20px 20px 0;
      box-sizing: border-box;
    
      @if $brand == 'mauijim' {
        @include breakpoint($breakpoint-xl) {
          min-height: 16vw;
        }
    
        @include breakpoint($page-width-max) {
          min-height: 235px;
        }
      }
    }
    
    .size-fit__measurement {
      color: $color-darkest;
      line-height: 2.0rem;
      text-transform: uppercase;
    }
    
    @if $brand == 'zeal' {
      .size-fit__image--above {
        margin: 10px auto 0;
      }
    }
    
    .size-fit__measurement-group--front-upper {
      position: absolute;
      top: 10px;
    
      @if $brand == 'mauijim' {
        right: 50px;
        left: 50px;
      }
    
      @if $brand == 'zeal' {
        right: 20px;
        bottom: 10px;
        left: 20px;
      }
    
      .size-fit__measurement {
        position: relative;
        float: left;
      }
    
      .size-fit__measurement--eye {
        width: 40%;
    
        @if $brand == 'mauijim' {
          &:after {
            border-right: 1px solid #a5a5a5;
            border-left: 1px solid #a5a5a5;
          }
        } @else if $brand == 'zeal' {
          position: absolute;
          top: 71%;
          left: 13%;
          text-align: left;
    
          @include breakpoint(500px) {
            left: 3%;
            text-align: center;
    
            span {
              display: inline;
            }
          }
        }
      }
    
      .size-fit__measurement--bridge {
        @if $brand == 'mauijim' {
          width: 20%;
        } @else if $brand == 'zeal' {
          width: 100%;
    
          @include breakpoint($breakpoint-xl) {
            top: -10px;
          }
    
          span {
            display: inline;
          }
        }
      }
    }
    
    // Ensure container is the same size as the image within for the proper
    // percentage-based absolute positioning of the child element.
    @if $brand == 'mauijim' {
      .size-fit__measurement-group--front-height {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 0;
        left: 20px;
      }
    }
    
    .size-fit__measurement--height {
      position: absolute;
    
      @if $brand == 'mauijim' {
        top: 62%;
        left: 76.5%;
        transform: translate(-50%, -50%);
    
        @include breakpoint($breakpoint-xl) {
          top: 60%;
        }
      } @else if $brand == 'zeal' {
        top: 68%;
        right: -5%;
        width: 40%;
        text-align: left;
    
        @include breakpoint(500px) {
          right: 6%;
          text-align: center;
    
          span {
            display: inline;
          }
        }
      }
    }
    
    .size-fit__measurement--base {
      position: absolute;
      @if $brand == 'mauijim' {
        top: 10px;
      } @else if $brand == 'zeal' {
        top: -3px;
      }
      right: 0;
      left: 0;
    }
    
    .size-fit__measurement--temple {
      position: absolute;
      @if $brand == 'mauijim' {
        top: 10px;
        right: 20px;
        left: 20px;
      } @else if $brand == 'zeal' {
        top: -3px;
        right: 0;
        left: 0;
      }
    }
    
    @if $brand == 'zeal' {
      .size-fit__measurement-label {
        &:after {
          content: ':';
        }
      }
    }
    
    .size-fit__measurement-value {
      display: block;
      font-weight: $font-weight-bold;
      text-transform: lowercase;
      -webkit-font-smoothing: antialiased;
    }
    
    .size-fit__description {
      margin: 15px 0;
      color: $color-darkest;
      line-height: 2.0rem;
      text-align: left;
    
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        @include span(10);
        @include push(1);
      }
    
      @include breakpoint($breakpoint-xl) {
        min-height: 40px;
        margin: 10px 0;
      }
    }
    
  • URL: /components/raw/size-fit/size-fit.scss
  • Filesystem Path: src/components/02-components/size-fit/size-fit.scss
  • Size: 4.5 KB

There are no notes for this item.