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

        <div class="repairs-form__item-group">
            <p class="paragraph">Need your sunglasses 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 for Repair
                </li>
            </ul>

        </div>
        <div class="repairs-form__actions js-repairs-form-actions">
            <button class="button button--outlined repairs__track-repair">Track Repair</button>

            <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>Start Repair</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 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 for Repair"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "outlined",
      "action": null,
      "buttonValue": "Track Repair",
      "modifier": "outlined",
      "classes": [
        "repairs__track-repair"
      ]
    },
    {
      "type": "primary",
      "action": "edit",
      "buttonValue": "Start Repair",
      "modifier": "primary",
      "buttonModal": "repair-type-select",
      "noValidate": true,
      "classes": [
        "repairs__start-repair",
        "js-modal-form-item-start-repair-button"
      ]
    }
  ],
  "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.