<form class="repairs-form repairs-form--welcome">
    <div class="repairs-form__items">

        <div class="repairs-form__item-group">
            <p class="paragraph">Need your sunglasses or goggles repaired? We have several repair options available for your convenience.</p>

            <p class="paragraph">Our fast, friendly service team is happy to help. Our sunglasses are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship.</p>

            <ul class="list list--ul">
                <li class="list-item list-item--ul">
                    Start Repair
                </li>
                <li class="list-item list-item--ul">
                    Print Repair Form
                </li>
                <li class="list-item list-item--ul">
                    Send Sunglasses or Goggles for Repair
                </li>
            </ul>

        </div>
        <div class="repairs-form__actions js-repairs-form-actions">
            <button class="button button--primary js-modal-open-link repairs__start-repair js-modal-form-item-start-repair-button" data-modal-id="repair-type-select" formnovalidate>Repair Sunglasses</button>

            <button class="button button--primary repairs__start-repair" formnovalidate>Repair Goggles</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": "welcome",
  "formItemGroups": [
    {
      "groupTitle": null,
      "formItems": [
        {
          "component": "paragraph",
          "classes": true,
          "value": "Need your sunglasses or goggles repaired? We have several repair options available for your convenience."
        },
        {
          "component": "paragraph",
          "classes": true,
          "value": "Our fast, friendly service team is happy to help. Our sunglasses are warranted to the original purchaser for two years from the date of purchase against any defect in materials and workmanship."
        },
        {
          "component": "list",
          "classes": "true",
          "listType": "ul",
          "items": [
            {
              "value": "Start Repair"
            },
            {
              "value": "Print Repair Form"
            },
            {
              "value": "Send Sunglasses or Goggles for Repair"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "action": "edit",
      "buttonValue": "Repair Sunglasses",
      "modifier": "primary",
      "buttonModal": "repair-type-select",
      "noValidate": true,
      "classes": [
        "repairs__start-repair",
        "js-modal-form-item-start-repair-button"
      ]
    },
    {
      "type": "primary",
      "action": "edit",
      "buttonValue": "Repair Goggles",
      "modifier": "primary",
      "noValidate": true,
      "classes": [
        "repairs__start-repair"
      ]
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--repair-type-select"
    }
  ]
}
  • 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.