<form class="repairs-form repairs-form--cart">
    <div class="repairs-form__items">
        <div class="repairs-form__header">
            <span class="repairs-form__header--items">Items</span>
            <span class="repairs-form__header--price">Price</span>
        </div>

        <div class="repairs-form__item-group">
            <div class="repairs-form__item-details">
                <div class="style-search-results style-search-results--cart">

                    <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;400" 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="repairs-form__item-info">
                    <div class="form-item form-item--select">
                        <label for="repair-item-month" class="label">Purchase Month</label>
                        <div class="select-wrapper">
                            <select id="repair-item-month" name="repair-month" class="select js-select">
      <option value="">Month</option>
      <option value="m01">January</option>
      <option value="m02">February</option>
      <option value="m03">March</option>
      <option value="m04">April</option>
      <option value="m05">May</option>
      <option value="m06">June</option>
      <option value="m07">July</option>
      <option value="m08">August</option>
      <option value="m09">September</option>
      <option value="m10">October</option>
      <option value="m11">November</option>
      <option value="m12">December</option>
      <option value="repair">Repair</option>
      <option value="order">Order Status</option>
      <option value="returns">Returns</option>
      <option value="general">General Questions</option>
    </select>
                        </div>
                    </div>

                    <div class="form-item form-item--select">
                        <label for="repair-item-year" class="label">Purchase Year</label>
                        <div class="select-wrapper">
                            <select id="repair-item-year" name="repair-year" class="select js-select">
      <option value="">Year</option>
      <option value="y17">2017</option>
      <option value="y16">2016</option>
      <option value="y15">2015</option>
      <option value="y14">2014</option>
      <option value="y13">2013</option>
      <option value="repair">Repair</option>
      <option value="order">Order Status</option>
      <option value="returns">Returns</option>
      <option value="general">General Questions</option>
    </select>
                        </div>
                    </div>

                    <div class="form-item form-item--textarea">
                        <label for="repair-item-notes" class="label label--textarea">Repair notes</label>
                        <textarea id="repair-item-notes" class="textarea"></textarea>
                    </div>

                </div>
                <div class="repairs-form__repairs">
                    <div class="repairs-form__repair">
                        <span class="repairs-form__repair-type">Lens Replacement Package</span>
                        <ul class="list list--ul">
                            <li class="list-item list-item--ul">
                                Temple and Nose Pad Evaluation
                            </li>
                            <li class="list-item list-item--ul">
                                Cleaning and Alignment as Needed
                            </li>
                        </ul>

                        <div class="repairs-form__repair-price">$75.00</div>
                        <span class="repairs-form__repair-tax">Inkl. MWST</span>
                        <div class="repairs-form__repair-actions">
                            <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

                        </div>
                    </div>
                    <div class="repairs-form__repair">
                        <span class="repairs-form__repair-type">Frame Replacement Package</span>
                        <ul class="list list--ul">
                            <li class="list-item list-item--ul">
                                Temple and Nose Pad Evaluation
                            </li>
                            <li class="list-item list-item--ul">
                                Cleaning and Alignment as Needed
                            </li>
                        </ul>

                        <div class="repairs-form__repair-price">$50.00</div>
                        <div class="repairs-form__repair-actions">
                            <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="repairs-form__item-group">
            <div class="repairs-form__item-details">
                <div class="style-search-results style-search-results--cart">

                    <div class="style-search-results__result">
                        <div class="style-search-results__image-wrapper">
                            <img src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;400" alt="WATERWAYS 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">WATERWAYS</span>
                            <span class="style-search-results__style-number">HTS267-15C</span>
                        </div>
                    </div>

                </div>

                <div class="repairs-form__item-info">
                    <div class="form-item form-item--select">
                        <label for="repair-item-month" class="label">Purchase Month</label>
                        <div class="select-wrapper">
                            <select id="repair-item-month" name="repair-month" class="select js-select">
      <option value="">Month</option>
      <option value="m01">January</option>
      <option value="m02">February</option>
      <option value="m03">March</option>
      <option value="m04">April</option>
      <option value="m05">May</option>
      <option value="m06">June</option>
      <option value="m07">July</option>
      <option value="m08">August</option>
      <option value="m09">September</option>
      <option value="m10">October</option>
      <option value="m11">November</option>
      <option value="m12">December</option>
      <option value="repair">Repair</option>
      <option value="order">Order Status</option>
      <option value="returns">Returns</option>
      <option value="general">General Questions</option>
    </select>
                        </div>
                    </div>

                    <div class="form-item form-item--select">
                        <label for="repair-item-year" class="label">Purchase Year</label>
                        <div class="select-wrapper">
                            <select id="repair-item-year" name="repair-year" class="select js-select">
      <option value="">Year</option>
      <option value="y17">2017</option>
      <option value="y16">2016</option>
      <option value="y15">2015</option>
      <option value="y14">2014</option>
      <option value="y13">2013</option>
      <option value="repair">Repair</option>
      <option value="order">Order Status</option>
      <option value="returns">Returns</option>
      <option value="general">General Questions</option>
    </select>
                        </div>
                    </div>

                    <div class="form-item form-item--textarea">
                        <label for="repair-item-notes" class="label label--textarea">Repair notes</label>
                        <textarea id="repair-item-notes" class="textarea"></textarea>
                    </div>

                </div>
                <div class="repairs-form__repairs">
                    <div class="repairs-form__repair">
                        <span class="repairs-form__repair-type">Lens Replacement Package</span>
                        <ul class="list list--ul">
                            <li class="list-item list-item--ul">
                                Temple and Nose Pad Evaluation
                            </li>
                            <li class="list-item list-item--ul">
                                Cleaning and Alignment as Needed
                            </li>
                        </ul>

                        <div class="repairs-form__repair-price">$75.00</div>
                        <div class="repairs-form__repair-actions">
                            <button class="button button--plain-text repairs-form__repair-delete-button">Remove</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="repairs-form__standard">
            <svg class="icon icon--tools">
  <use xlink:href="/assets/icons/icons.svg#tools"></use>
</svg>

            <div class="block block--repairs-form">
                <h4 class="block__heading">Standard Repair Process</h4>
                <div class="block__contents">
                    <p class="paragraph">$10 fee includes nose pads and temple evaluation, cleaning and alignment as needed, and insurred shipping.</p>

                </div>
            </div>

            <div class="repairs-form__standard-price-wrapper">
                <span class="repairs-form__standard-price">$10.00</span>
                <span class="repairs-form__standard-tax">Inkl. MWST</span>
            </div>
        </div>
        <div class="repairs-form__summary">
            <div class="repairs-form__summary-actions">
                <button class="button button--outlined repairs-form__add-repair">Add Another Repair</button>

            </div>
            <ul class="repairs-form__line-items">
                <li class="repairs-form__line-item">
                    <span class="repairs-form__subtotal-label">Order Subtotal (2):</span>
                    <span class="repairs-form__subtotal-value">$210.00</span>
                </li>
                <li class="repairs-form__line-item">
                    <span class="repairs-form__tax-label">Estimated Tax*:</span>
                    <span class="repairs-form__tax-value">-</span>
                </li>
                <li class="repairs-form__line-item">
                    <span class="repairs-form__shipping-label">Shipping*:</span>
                    <span class="repairs-form__shipping-value">-</span>
                </li>
                <li class="repairs-form__line-item">
                    <span class="repairs-form__tbd-label">* Calculated at Checkout</span>

                </li>
                <li class="repairs-form__line-item">
                    <span class="repairs-form__total-label">Total:</span>
                    <span class="repairs-form__total-value">$210.00</span>
                </li>
            </ul>
            <p class="paragraph repairs-form__warning"><strong>Important:</strong> The estimated charge will appear on your card after we receive your glasses, we review any warranty coverage, and you approve the repair estimate.</p>

        </div>
        <div class="repairs-form__actions">
            <button class="button button--primary repairs-form__checkout">Checkout</button>

        </div>
    </div>
</form>
<form class="repairs-form{{#if formStep}} repairs-form--{{formStep}}{{/if}}">
  <div class="repairs-form__items">
    <div class="repairs-form__header">
      <span class="repairs-form__header--items">Items</span>
      <span class="repairs-form__header--price">Price</span>
    </div>
    {{#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}}">
      <div class="repairs-form__item-details">
        {{#each formDetails}}
        {{#if component}}
        {{render (dynamicComponent component) this}}
        <div class="repairs-form__item-info">
          {{#each formItems}}
          {{#if component}}
          {{render (dynamicComponent component) this merge=true}}
          {{/if}}
          {{/each}}
        </div>
        {{#if repairs}}
        <div class="repairs-form__repairs">
          {{#each repairs}}
          <div class="repairs-form__repair">
            <span class="repairs-form__repair-type">{{type}}</span>
            {{render (dynamicComponent 'list') includes}}
            <div class="repairs-form__repair-price">{{price}}</div>
            {{#if tax}}
            <span class="repairs-form__repair-tax">{{tax}}</span>
            {{/if}}
            <div class="repairs-form__repair-actions">
              {{#each itemActions}}
              {{render (dynamicVariant 'buttons' type) this merge=true}}
              {{/each}}
            </div>
          </div>
          {{/each}}
        </div>
        {{/if}}
        {{/if}}
        {{/each}}
      </div>
    </div>
    {{/each}}
    <div class="repairs-form__standard">
      {{render '@icons--tools'}}
      {{render (dynamicComponent standardRepair.component) standardRepair}}
      <div class="repairs-form__standard-price-wrapper">
        <span class="repairs-form__standard-price">{{standardRepair.price}}</span>
        {{#if standardRepair.tax}}
        <span class="repairs-form__standard-tax">{{standardRepair.tax}}</span>
        {{/if}}
      </div>
    </div>
    <div class="repairs-form__summary">
      <div class="repairs-form__summary-actions">
        {{#each summaryActions}}
        {{render (dynamicVariant 'buttons' type) this merge=true}}
        {{/each}}
      </div>
      <ul class="repairs-form__line-items">
        {{#each lineItems}}
        <li class="repairs-form__line-item">
          <span class="repairs-form__{{name}}-label">{{label}}{{#if value}}:{{/if}}</span>
          {{#if value}}<span class="repairs-form__{{name}}-value">{{value}}</span>{{/if}}
        </li>
        {{/each}}
      </ul>
      {{render (dynamicComponent cartWarning.component) cartWarning}}
    </div>
    <div class="repairs-form__actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
  </div>
</form>
{
  "formStep": "cart",
  "formItemGroups": [
    {
      "formDetails": [
        {
          "component": "style-search-results--cart",
          "results": [
            {
              "freeItems": "Nose Pads Included for Free",
              "name": "PEAHI",
              "image": {
                "alt": "PEAHI thumbnail",
                "path": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                "width": "400"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": "Repair Lens & Frame",
              "selected": true,
              "style": "202-02"
            }
          ],
          "more": null,
          "formItems": [
            {
              "required": null,
              "component": "select-normal",
              "id": "repair-item-month",
              "name": "repair-month",
              "label": "Purchase Month",
              "options": {
                "": "Month",
                "m01": "January",
                "m02": "February",
                "m03": "March",
                "m04": "April",
                "m05": "May",
                "m06": "June",
                "m07": "July",
                "m08": "August",
                "m09": "September",
                "m10": "October",
                "m11": "November",
                "m12": "December"
              }
            },
            {
              "required": null,
              "component": "select-normal",
              "id": "repair-item-year",
              "name": "repair-year",
              "label": "Purchase Year",
              "options": {
                "": "Year",
                "y17": "2017",
                "y16": "2016",
                "y15": "2015",
                "y14": "2014",
                "y13": "2013"
              }
            },
            {
              "required": null,
              "component": "input--textarea",
              "type": "textarea",
              "id": "repair-item-notes",
              "name": "repair-notes",
              "label": "Repair notes"
            }
          ],
          "repairs": [
            {
              "type": "Lens Replacement Package",
              "price": "$75.00",
              "tax": "Inkl. MWST",
              "includes": {
                "listType": "ul",
                "classes": true,
                "items": [
                  {
                    "value": "Temple and Nose Pad Evaluation"
                  },
                  {
                    "value": "Cleaning and Alignment as Needed"
                  }
                ]
              },
              "itemActions": [
                {
                  "type": "plain-text",
                  "buttonValue": "Remove",
                  "classes": [
                    "repairs-form__repair-delete-button"
                  ]
                }
              ]
            },
            {
              "type": "Frame Replacement Package",
              "price": "$50.00",
              "includes": {
                "listType": "ul",
                "classes": true,
                "items": [
                  {
                    "value": "Temple and Nose Pad Evaluation"
                  },
                  {
                    "value": "Cleaning and Alignment as Needed"
                  }
                ]
              },
              "itemActions": [
                {
                  "type": "plain-text",
                  "buttonValue": "Remove",
                  "classes": [
                    "repairs-form__repair-delete-button"
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "formDetails": [
        {
          "component": "style-search-results--cart",
          "results": [
            {
              "freeItems": "Nose Pads Included for Free",
              "name": "WATERWAYS",
              "image": {
                "alt": "WATERWAYS thumbnail",
                "path": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
                "width": "400"
              },
              "lensType": "Non-prescription Sunglasses",
              "link": "#",
              "repairType": "Repair Lens & Frame",
              "selected": true,
              "style": "HTS267-15C"
            }
          ],
          "more": null,
          "formItems": [
            {
              "required": null,
              "component": "select-normal",
              "id": "repair-item-month",
              "name": "repair-month",
              "label": "Purchase Month",
              "options": {
                "": "Month",
                "m01": "January",
                "m02": "February",
                "m03": "March",
                "m04": "April",
                "m05": "May",
                "m06": "June",
                "m07": "July",
                "m08": "August",
                "m09": "September",
                "m10": "October",
                "m11": "November",
                "m12": "December"
              }
            },
            {
              "required": null,
              "component": "select-normal",
              "id": "repair-item-year",
              "name": "repair-year",
              "label": "Purchase Year",
              "options": {
                "": "Year",
                "y17": "2017",
                "y16": "2016",
                "y15": "2015",
                "y14": "2014",
                "y13": "2013"
              }
            },
            {
              "required": null,
              "component": "input--textarea",
              "type": "textarea",
              "id": "repair-item-notes",
              "name": "repair-notes",
              "label": "Repair notes"
            }
          ],
          "repairs": [
            {
              "type": "Lens Replacement Package",
              "price": "$75.00",
              "includes": {
                "listType": "ul",
                "classes": true,
                "items": [
                  {
                    "value": "Temple and Nose Pad Evaluation"
                  },
                  {
                    "value": "Cleaning and Alignment as Needed"
                  }
                ]
              },
              "itemActions": [
                {
                  "type": "plain-text",
                  "buttonValue": "Remove",
                  "classes": [
                    "repairs-form__repair-delete-button"
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "standardRepair": {
    "price": "$10.00",
    "tax": "Inkl. MWST",
    "component": "block",
    "modifier": "repairs-form",
    "level": "4",
    "heading": "Standard Repair Process",
    "items": [
      {
        "component": "paragraph",
        "classes": true,
        "value": "$10 fee includes nose pads and temple evaluation, cleaning and alignment as needed, and insurred shipping."
      }
    ]
  },
  "lineItems": [
    {
      "name": "subtotal",
      "label": "Order Subtotal (2)",
      "value": "$210.00"
    },
    {
      "name": "tax",
      "label": "Estimated Tax*",
      "value": "-"
    },
    {
      "name": "shipping",
      "label": "Shipping*",
      "value": "-"
    },
    {
      "name": "tbd",
      "label": "* Calculated at Checkout"
    },
    {
      "name": "total",
      "label": "Total",
      "value": "$210.00"
    }
  ],
  "summaryActions": [
    {
      "type": "outlined",
      "buttonValue": "Add Another Repair",
      "modifier": "outlined",
      "classes": [
        "repairs-form__add-repair"
      ]
    }
  ],
  "cartWarning": {
    "component": "paragraph",
    "classes": [
      "repairs-form__warning"
    ],
    "value": "<strong>Important:</strong> The estimated charge will appear on your card after we receive your glasses, we review any warranty coverage, and you approve the repair estimate."
  },
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Checkout",
      "modifier": "primary",
      "classes": [
        "repairs-form__checkout"
      ]
    }
  ]
}
  • 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.