<form class="repairs-form repairs-form--step-2">
    <div class="repairs-form__items">

        <div class="repairs-form__item-group">
            <div class="form-step">
                <span class="form-step__step-number form-step__step-number--past">1</span>
                <h4 class="form-step__title">Select Your Style</h4>
                <button class="form-step__edit-button button button--outlined">Edit</button>
            </div>

            <div class="style-search-results style-search-results--selected">

                <div class="style-search-results__result">
                    <div class="style-search-results__image-wrapper">
                        <img src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;169" alt="PEAHI thumbnail" class="style-search-results__image">
                    </div>
                    <div class="style-search-results__details">
                        <span class="style-search-results__lens-type">Non-prescription Sunglasses</span>
                        <span class="style-search-results__name">PEAHI</span>
                        <span class="style-search-results__style-number">202-02</span>
                    </div>
                </div>

            </div>

            <div class="form-step">
                <span class="form-step__step-number form-step__step-number--present">2</span>
                <h4 class="form-step__title">Select Your Repair Package</h4>
            </div>

            <span class="error">Please select a package below to continue</span>

            <div class="repairs-cards">
                <div class="repairs-card repairs-card--nose-pads js-repairs-card-error">
                    <div class="repairs-card__heading">Need nose pads?</div>
                    <div class="repairs-card__image-wrapper">
                        <img src="/assets/images/repairs-nose-pads-zeal.jpg" alt="Photo of nose pads" class="image repairs-card__image">

                    </div>
                    <div class="repairs-card__description">
                        <p>Nose pads are free as long as parts are available.</p>

                    </div>
                    <div class="repairs-card__price">Free</div>
                    <div class="repairs-card__actions">
                        <button class="button button--primary">Add</button>

                    </div>
                </div>

                <div class="repairs-card repairs-card--temples js-repairs-card-error">
                    <div class="repairs-card__heading">Need temples?</div>
                    <div class="repairs-card__image-wrapper">
                        <img src="/assets/images/repairs-temples-zeal.jpg" alt="Photo of nose pads" class="image repairs-card__image">

                    </div>
                    <div class="repairs-card__description">
                        <p>Temples are free as long as parts are available.</p>

                    </div>
                    <div class="repairs-card__price">Free</div>
                    <div class="repairs-card__actions">
                        <span class="repairs-card__included">Included</span>
                    </div>
                </div>

                <div class="repairs-card repairs-card--frame js-repairs-card-error">
                    <div class="repairs-card__heading">Frame</div>
                    <div class="repairs-card__image-wrapper">
                        <img src="/assets/images/repairs-frame-zeal.jpg" alt="Photo of frames" class="image repairs-card__image">

                    </div>
                    <div class="repairs-card__description">
                        <ul>
                            <li>
                                Temple and Nose Pad Evaluation
                            </li>
                            <li>
                                Cleaning & Alignment as Needed
                            </li>
                        </ul>

                    </div>
                    <div class="repairs-card__price">$71.00</div>
                    <div class="repairs-card__actions">
                        <button class="button button--plain-text">Remove</button>

                    </div>
                </div>

                <div class="repairs-card repairs-card--lens prescription js-repairs-card-error">
                    <div class="repairs-card__heading">Lens</div>
                    <div class="repairs-card__image-wrapper">
                        <img src="/assets/images/repairs-lens-zeal.jpg" alt="Photo of lenses" class="image repairs-card__image">

                    </div>
                    <div class="repairs-card__description">
                        <p>If your prescription lenses are damaged or need replaced, please contact your eye doctor or search for an authorized Maui Jim prescription retail location.</p>

                    </div>

                    <div class="repairs-card__actions">
                        <button class="button button--plain-text">Search for retailer</button>

                    </div>
                </div>

            </div>
        </div>
        <div class="repairs-form__actions js-repairs-form-actions">
            <button class="button button--primary">Continue</button>

        </div>
    </div>
</form>
<form class="repairs-form{{#if formStep}} repairs-form--{{formStep}}{{/if}}">
  <div class="repairs-form__items">
    {{#each formItemGroups}}
    {{#if groupTitle}}<h4 class="repairs-form__item-group-title">{{groupTitle}}</h4>{{/if}}
    <div class="repairs-form__item-group{{#if modifier}} repairs-form__item-group--{{modifier}}{{/if}}">
      {{#each formItems}}
      {{#if component}}
      {{render (dynamicComponent component) this}}
      {{/if}}
      {{#if cards}}
      <div class="repairs-cards">
        {{#each cards}}
        {{render '@repairs-card' this merge=true}}
        {{/each}}
      </div>
      {{/if}}
      {{/each}}
    </div>
    {{/each}}
    {{#if actions}}
    <div class="repairs-form__actions js-repairs-form-actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
    {{/if}}
    {{#if footerText}}
    <span class="repairs-form__footer-text">{{footerText}}</span>
    {{/if}}
  </div>
</form>
{
  "formStep": "step-2",
  "formItemGroups": [
    {
      "formItems": [
        {
          "component": "form-step--past",
          "stepNumber": "1",
          "stepStatus": "past",
          "title": "Select Your Style",
          "editButton": true
        },
        {
          "component": "style-search-results--selected",
          "modifier": "selected",
          "results": [
            {
              "freeItems": null,
              "name": "PEAHI",
              "image": {
                "alt": "PEAHI thumbnail",
                "path": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                "width": "169"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": null,
              "selected": true,
              "style": "202-02"
            }
          ],
          "more": null
        },
        {
          "component": "form-step",
          "stepNumber": "2",
          "stepStatus": "present",
          "title": "Select Your Repair Package"
        },
        {
          "component": "error",
          "value": "Please select a package below to continue"
        },
        {
          "cards": [
            {
              "error": true,
              "modifier": "nose-pads",
              "heading": "Need nose pads?",
              "price": "Free",
              "image": {
                "alt": "Photo of nose pads",
                "src": "/assets/images/repairs-nose-pads-zeal.jpg",
                "classes": [
                  "repairs-card__image"
                ]
              },
              "description": [
                {
                  "component": "paragraph",
                  "value": "Nose pads are free as long as parts are available."
                }
              ],
              "actions": [
                {
                  "buttonValue": "Add",
                  "modifier": "primary"
                }
              ]
            },
            {
              "error": true,
              "modifier": "temples",
              "heading": "Need temples?",
              "price": "Free",
              "image": {
                "alt": "Photo of nose pads",
                "src": "/assets/images/repairs-temples-zeal.jpg",
                "classes": [
                  "repairs-card__image"
                ]
              },
              "description": [
                {
                  "component": "paragraph",
                  "value": "Temples are free as long as parts are available."
                }
              ],
              "actions": null
            },
            {
              "error": true,
              "modifier": "frame",
              "heading": "Frame",
              "price": "$71.00",
              "image": {
                "alt": "Photo of frames",
                "src": "/assets/images/repairs-frame-zeal.jpg",
                "classes": [
                  "repairs-card__image"
                ]
              },
              "description": [
                {
                  "component": "list",
                  "listType": "ul",
                  "items": [
                    {
                      "value": "Temple and Nose Pad Evaluation"
                    },
                    {
                      "value": "Cleaning & Alignment as Needed"
                    }
                  ]
                }
              ],
              "actions": [
                {
                  "buttonValue": "Remove",
                  "modifier": "plain-text"
                }
              ]
            },
            {
              "error": true,
              "component": "repairs-card",
              "prescription": true,
              "modifier": "lens",
              "heading": "Lens",
              "image": {
                "alt": "Photo of lenses",
                "src": "/assets/images/repairs-lens-zeal.jpg",
                "classes": [
                  "repairs-card__image"
                ]
              },
              "description": [
                {
                  "component": "paragraph",
                  "value": "If your prescription lenses are damaged or need replaced, please contact your eye doctor or search for an authorized Maui Jim prescription retail location."
                }
              ],
              "actions": [
                {
                  "buttonValue": "Search for retailer",
                  "modifier": "plain-text"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Continue",
      "modifier": "primary",
      "classes": []
    }
  ]
}
  • Content:
    .repairs-form {
      @include clearfix;
      margin: 0 auto;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      .error {
        margin: 35px 10px 0;
      }
    
      .form-step + .paragraph {
        margin-top: 20px;
      }
    
      .repairs-autocomplete + .button {
        max-width: 444px;
        margin-top: 5px;
        padding: 0;
        color: $color-primary;
        font-size: 1.4rem;
        line-height: 2.0rem;
        text-align: left;
        white-space: normal;
        overflow: visible;
    
        @include breakpoint($breakpoint-sm-only) {
          max-width: 100%;
        }
      }
    
      .search-standalone {
        margin-bottom: 0;
      }
    
      .paragraph {
        margin: 30px 0;
      }
    
      .label {
        margin-bottom: 5px;
        color: $color-darkest;
      }
    
      .style-search-results {
        margin: 30px 0 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results {
          margin-top: 60px;
        }
    
        .style-search-results--cart {
          margin: 10px 0;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
    
        .form-step + .paragraph {
          margin-top: 25px;
        }
    
        .button {
          font-size: 1.4rem;
        }
      }
    
      .button--style-number-assistance {
        max-width: none;
        min-height: 80px;
        margin: 25px 0 55px;
        padding: 10px 10px 10px 85px;
        background: transparent url('../images/sunglasses-maui-jim.png') no-repeat 12px center;
        background-size: 60px;
        color: $color-dark;
        font-size: 1.6rem;
        letter-spacing: 1px;
        line-height: 1.9rem;
        text-align: left;
        white-space: normal;
    
        &:hover {
          box-shadow: 0 0 40px 0 rgba(0, 0, 0, .20);
        }
    
        @include breakpoint($breakpoint-md) {
          width: 340px;
          margin: 25px 0 55px;
          padding-left: 120px;
          background-position: 15px center;
          background-size: 90px;
        }
    
        @include breakpoint($breakpoint-xl) {
          width: 100%;
          margin: 50px 0 70px;
          padding: 20px 20px 20px 170px;
          background-position: 25px;
          background-size: 120px;
          font-size: 2.4rem;
          line-height: 2.8rem;
        }
      }
    }
    
    .repairs-form__items {
      @include breakpoint($breakpoint-md) {
        margin-left: 40px;
    
        .form-step {
          position: relative;
          left: -40px;
          width: calc(100% + 40px);
        }
      }
    }
    
    .repairs-form__item-group {
      @include clearfix;
    
      .paragraph {
        &:first-child {
          margin-top: 0;
          text-align: center;
        }
      }
    
      .list {
        &:last-child {
          margin-bottom: 15px;
        }
      }
    }
    
    .repairs-cards {
      display: flex;
      flex-direction: column;
      margin-top: $gutter-width;
      margin-bottom: 0;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2rem;
    
      @include breakpoint($breakpoint-md) {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
      }
    }
    
    .repairs-form__footer-text {
      display: block;
      margin-top: 40px;
      float: left;
      color: $color-medium-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-left: $gutter-width-half;
        float: left;
      }
    }
    
    .repairs-form--welcome {
      .paragraph,
      .list {
        margin: 30px 0;
        letter-spacing: 0;
      }
    
      .list {
        padding-left: 15px;
      }
    
      .button {
        display: block;
        margin: 0 auto $gutter-width;
      }
    
      .repairs-form__items {
        margin-left: 0;
      }
    
      .repairs-form__item-group {
        padding-left: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        .paragraph,
        .list {
          margin: 60px 0;
    
          &:last-child {
            margin-bottom: 15px;
          }
        }
    
        .button {
          float: left;
    
          &:first-child {
            margin: 0 $gutter-width 0 0;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          width: 300px;
        }
      }
    }
    
    .repairs-form--step-1 {
      .style-search-results--cart {
        margin-left: 0;
    
        .style-search-results__result {
          display: flex;
        }
    
        .style-search-results__image-wrapper {
          position: static;
          max-width: 85px;
        }
    
        .style-search-results__name {
          margin-top: 0;
          font-weight: normal;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results--cart {
          .style-search-results__image-wrapper {
            top: 0;
            left: 0;
            max-width: 113px;
          }
        }
    
        .form-item--button-input {
          max-width: 445px;
    
          & + .paragraph {
            max-width: 340px;
          }
        }
    
        .button-input__input {
          width: calc(100% - 105px);
        }
    
        .button-input__submit {
          width: 105px;
        }
    
        .button-input__submit-label {
          display: inline;
        }
    
        .repairs-form__actions {
          float: right;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .style-search-results--cart {
          .style-search-results__image-wrapper {
            max-width: 169px;
            margin-right: $gutter-width / 2;
          }
    
          .style-search-results__name {
            font-size: 2.4rem;
            line-height: 2.8rem;
          }
        }
      }
    }
    
    .repairs-form--step-2 {
      .style-search-results {
        margin-top: 15px;
      }
    
      .repairs-form__actions {
        margin-top: 30px;
    
        .button {
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .style-search-results {
          margin-top: 0;
          margin-bottom: 40px;
          margin-left: 55px;
        }
    
        .repairs-form__actions {
          padding: 0 10px;
    
          .button {
            width: auto;
            padding-right: $gutter-width;
            padding-left: $gutter-width;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .style-search-results {
          margin-top: 0;
          margin-bottom: 55px;
          margin-left: 35px;
        }
      }
    }
    
    .repairs-form--cart {
      .repairs-form__item-group {
        border-bottom: 1px solid $color-medium-dark;
      }
    
      .style-search-results {
        margin-bottom: 20px;
        @include breakpoint($breakpoint-md) {
          margin-left: 190px;
        }
      }
    
      .repairs-form__actions {
        @include breakpoint($breakpoint-md) {
          text-align: right;
        }
      }
    }
    
    .repairs-form__header {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        height: 40px;
        background: $color-lighter;
        font-size: 1.4rem;
        line-height: 40px;
      }
    }
    
    .repairs-form__header--items {
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 340px);
        padding-left: 190px;
        font-weight: bold;
      }
    }
    
    .repairs-form__header--price {
      @include breakpoint($breakpoint-md) {
        width: 150px;
        float: right;
        font-weight: bold;
      }
    }
    
    .repairs-form__repairs {
      @include breakpoint($breakpoint-md) {
        margin-left: 190px;
      }
    }
    
    .repairs-form__repair {
      position: relative;
      padding: 20px 0 10px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      &:first-child {
        border-top: 1px solid $color-light;
      }
    
      &:last-child {
        border-bottom-style: none;
      }
    
      .list--ul {
        margin: 0 0 25px;
        padding-left: 15px;
      }
    
      @include breakpoint($breakpoint-md) {
        min-height: 80px;
    
        .list--ul {
          margin-bottom: 5px;
        }
      }
    }
    
    .repairs-form__repair-type {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        font-weight: normal;
        line-height: 2.8rem;
      }
    }
    
    .repairs-form__item-info {
      textarea {
        font-family: $font-primary;
        resize: vertical;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        margin-left: 190px;
    
        .form-item--select {
          max-width: 150px;
          margin: 0 $gutter-width $gutter-width 0;
        }
    
        .form-item--textarea {
          position: absolute;
          top: 0;
          right: 0;
          width: calc(100% - 170px);
          margin-top: 0;
        }
    
        textarea {
          min-height: 145px;
          resize: none;
        }
      }
    }
    
    .repairs-form__repair-price {
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 20px;
        right: 0;
        min-width: 150px;
      }
    }
    
    .repairs-form__standard-price-wrapper {
      @include breakpoint($breakpoint-md) {
        min-width: 150px;
      }
    }
    
    .repairs-form__repair-price,
    .repairs-form__standard-price {
      color: $color-medium-dark;
      font-size: 2.7rem;
      line-height: 3.2rem;
    }
    
    .repairs-form__repair-tax,
    .repairs-form__standard-tax {
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .repairs-form__repair-tax {
      @include breakpoint($breakpoint-md) {
        position: absolute;
        top: 50px;
        right: 0;
        width: 150px;
      }
    }
    
    .repairs-form__standard-tax {
      display: block;
    
      @include breakpoint($breakpoint-md) {
        line-height: 1.4rem;
      }
    }
    
    .repairs-form__repair-actions {
      position: absolute;
      right: 0;
      bottom: -3px;
    
      @include breakpoint($breakpoint-md) {
        bottom: 0;
        width: 150px;
      }
    }
    
    .repairs-form__repair-delete-button {
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    }
    
    .repairs-form__standard {
      padding: 25px 0 10px;
    
      .icon {
        display: block;
        width: 64px;
        height: 64px;
        margin: 0 auto;
    
        @include breakpoint($breakpoint-md) {
          width: 36px;
          height: 36px;
          margin: 0 77px;
        }
      }
    
      .block__heading {
        margin-top: 25px;
        margin-bottom: 0;
        color: $color-dark;
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: normal;
        line-height: 1.9rem;
    
        @include breakpoint($breakpoint-md) {
          margin: 0;
        }
      }
    
      .block--repairs-form {
        @include breakpoint($breakpoint-md) {
          // Width is (100% - (width of icon + width of price)).
          width: calc(100% - 320px);
          margin-right: $gutter-width;
        }
      }
    
      .paragraph {
        margin: 0 0 10px;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    
    
      .repairs-form__standard-price {
        @include breakpoint($breakpoint-md) {
          min-width: 150px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        align-items: center;
      }
    }
    
    .repairs-form__add-repair,
    .repairs-form__checkout {
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        margin: 0 auto;
      }
    }
    
    .repairs-form__add-repair {
      max-width: 100%;
      background: transparent;
    }
    
    .repairs-form__line-items {
      padding: 0;
    
      @include breakpoint($breakpoint-md) {
        width: 300px;
        margin: 0 0 30px;
        float: right;
      }
    }
    
    .repairs-form__line-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0;
      padding: 0;
      list-style-type: none;
    
      &:last-child {
        margin-top: 15px;
      }
    
      & > span {
        min-width: 30%;
      }
    
      [class$='value'] {
        text-align: right;
      }
    }
    
    .repairs-form__tbd-label {
      margin-top: 8px;
      color: $color-medium-dark;
    }
    
    .repairs-form__total-label,
    .repairs-form__total-value {
      font-weight: bold;
    }
    
    .repairs-form__summary {
      position: relative;
      margin-bottom: 30px;
      padding: $gutter-width ($gutter-width / 2) ($gutter-width / 2);
      background: $color-lighter;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      .paragraph {
        margin-bottom: 0;
        clear: both;
        color: $color-error;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        padding: 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        padding-right: 50px;
        padding-left: 50px;
      }
    }
    
    .repairs-form__summary-actions {
      @include breakpoint($breakpoint-md) {
        max-width: calc(100% - 310px);
        float: left;
      }
    }
    
    .repairs-form__checkout {
      @include breakpoint($breakpoint-md) {
        width: 300px;
      }
    
      @include breakpoint($breakpoint-xl) {
        position: static;
        width: auto;
        padding: 0 20px;
        float: right;
      }
    }
    
  • URL: /components/raw/repairs/repairs.scss
  • Filesystem Path: src/components/01-elements/forms/repairs/repairs.scss
  • Size: 11.4 KB

There are no notes for this item.