<form class="returns-form">
    <h4 class="returns-form__title">Your Information</h4>
    <div class="returns-form__items">
        <div class="form-item form-item--text-tooltip form-item--returns-customer-number form-item--required">
            <label for="returns-customer-number" class="label label--text-tooltip label--required">Customer Number</label>
            <button class="form-item__tooltip js-tooltip-open-link">
    <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
            <div class="tooltip">Pellentesque faucibus odio sed rutrum maximus. Duis mattis fermentum hendrerit. Nam magna dui, tempus id venenatis nec, pellentesque a orci.</div>
            <input type="text-tooltip" id="returns-customer-number" name="customer-number" class="input input--text-tooltip">
        </div>

        <div class="form-item form-item--text-tooltip form-item--returns-order-number form-item--required">
            <label for="returns-order-number" class="label label--text-tooltip label--required">Order Number</label>
            <button class="form-item__tooltip js-tooltip-open-link">
    <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
            <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus, ligula sit amet rhoncus aliquam, tellus ipsum euismod turpis, nec lobortis mi purus non mi.</div>
            <input type="text-tooltip" id="returns-order-number" name="order-number" class="input input--text-tooltip">
        </div>

        <div class="form-item form-item--text form-item--returns-phone-number form-item--required">
            <label for="returns-phone-number" class="label label--text label--required">Phone Number</label>
            <input type="text" id="returns-phone-number" name="phone-number" class="input input--text" placeholder="000-123-4567">
        </div>

        <div class="form-item form-item--text form-item--returns-first-name form-item--required">
            <label for="returns-first-name" class="label label--text label--required">First Name</label>
            <input type="text" id="returns-first-name" name="first-name" class="input input--text">
        </div>

        <div class="form-item form-item--text form-item--returns-last-name form-item--required">
            <label for="returns-last-name" class="label label--text label--required">Last Name</label>
            <input type="text" id="returns-last-name" name="last-name" class="input input--text">
        </div>

        <div class="form-item form-item--text form-item--returns-company-name">
            <label for="returns-company-name" class="label label--text">Company Name or c/o</label>
            <input type="text" id="returns-company-name" name="company-name" class="input input--text" placeholder="Optional">
        </div>

        <div class="form-item form-item--text form-item--returns-address-1 form-item--required">
            <label for="returns-address-1" class="label label--text label--required">Address 1</label>
            <input type="text" id="returns-address-1" name="address-1" class="input input--text">
        </div>

        <div class="form-item form-item--text form-item--returns-address-2">
            <label for="returns-address-2" class="label label--text">Address 2</label>
            <input type="text" id="returns-address-2" name="address-2" class="input input--text" placeholder="Optional">
        </div>

        <div class="form-item form-item--text form-item--returns-city form-item--required">
            <label for="returns-city" class="label label--text label--required">City</label>
            <input type="text" id="returns-city" name="city" class="input input--text">
        </div>

        <div class="form-item form-item--text form-item--returns-zip form-item--required">
            <label for="returns-zip" class="label label--text label--required">Zip Code</label>
            <input type="text" id="returns-zip" name="zip" class="input input--text">
        </div>

        <div class="form-item form-item--select form-item--required">
            <label for="returns-state" class="label label--required">State</label>
            <div class="select-wrapper">
                <select id="returns-state" name="state" class="select js-select">
      <option value="">Select</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="IL">Illinois</option>
    </select>
            </div>
        </div>

        <div class="form-item form-item--select form-item--required">
            <label for="returns-country" class="label label--required">Country</label>
            <div class="select-wrapper">
                <select id="returns-country" name="country" class="select js-select">
      <option value="USA">United States</option>
    </select>
            </div>
        </div>

    </div>
    <div class="returns-form__actions">
        <button class="button button--primary returns-form__submit">Submit</button>

    </div>
</form>
<form class="returns-form">
  {{#if title}}
  <h4 class="returns-form__title">{{title}}</h4>
  {{/if}}
  <div class="returns-form__items">
    {{#each formItems}}
    {{render (dynamicComponent component) this}}
    {{/each}}
  </div>
  <div class="returns-form__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
</form>
{
  "title": "Your Information",
  "formItems": [
    {
      "component": "input",
      "type": "text-tooltip",
      "id": "returns-customer-number",
      "name": "customer-number",
      "label": "Customer Number",
      "required": true,
      "tooltip": {
        "value": "Pellentesque faucibus odio sed rutrum maximus. Duis mattis fermentum hendrerit. Nam magna dui, tempus id venenatis nec, pellentesque a orci."
      }
    },
    {
      "component": "input",
      "type": "text-tooltip",
      "id": "returns-order-number",
      "name": "order-number",
      "label": "Order Number",
      "required": true,
      "tooltip": {
        "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus, ligula sit amet rhoncus aliquam, tellus ipsum euismod turpis, nec lobortis mi purus non mi."
      }
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-phone-number",
      "name": "phone-number",
      "label": "Phone Number",
      "required": true,
      "placeholder": "000-123-4567"
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-first-name",
      "name": "first-name",
      "label": "First Name",
      "required": true
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-last-name",
      "name": "last-name",
      "label": "Last Name",
      "required": true
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-company-name",
      "name": "company-name",
      "label": "Company Name or c/o",
      "placeholder": "Optional"
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-address-1",
      "name": "address-1",
      "label": "Address 1",
      "required": true
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-address-2",
      "name": "address-2",
      "label": "Address 2",
      "placeholder": "Optional"
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-city",
      "name": "city",
      "label": "City",
      "required": true
    },
    {
      "component": "input",
      "type": "text",
      "id": "returns-zip",
      "name": "zip",
      "label": "Zip Code",
      "required": true
    },
    {
      "component": "select-normal",
      "id": "returns-state",
      "name": "state",
      "label": "State",
      "options": {
        "": "Select",
        "AL": "Alabama",
        "AK": "Alaska",
        "AZ": "Arizona",
        "AR": "Arkansas",
        "CA": "California",
        "CO": "Colorado",
        "IL": "Illinois"
      },
      "required": true
    },
    {
      "component": "select-normal",
      "id": "returns-country",
      "name": "country",
      "label": "Country",
      "options": {
        "USA": "United States"
      },
      "required": true
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Submit",
      "classes": [
        "returns-form__submit"
      ]
    }
  ]
}
  • Content:
    .returns-form {
      .label {
        margin-bottom: 4px;
      }
    }
    
    .returns-form__title {
      margin: 5px 0 25px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .returns-form__items {
      @include clearfix;
    
      .form-item {
        margin-right: 0;
        margin-left: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        .form-item {
          @include span(6);
    
          &:nth-of-type(odd) {
            clear: left;
          }
        }
    
        .form-item__tooltip:hover {
          .icon--question-mark-circle {
            transition: fill $transition-standard;
            fill: $color-primary;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .form-item {
          @include span(4);
    
          &:nth-of-type(odd) {
            clear: none;
          }
    
          &:nth-of-type(3n+1) {
            clear: left;
          }
        }
      }
    }
    
    .returns-form__actions {
      @include clearfix;
      margin-top: 10px;
    }
    
    .returns-form__submit {
      @include breakpoint($breakpoint-md) {
        margin-right: $gutter-width-half;
        padding: 0 20px;
        float: right;
      }
    }
    
  • URL: /components/raw/returns-form/returns-form.scss
  • Filesystem Path: src/components/01-elements/forms/returns-form/returns-form.scss
  • Size: 1.2 KB
  • Handle: @returns-form
  • Preview:
  • Filesystem Path: src/components/01-elements/forms/returns-form/returns-form.html

There are no notes for this item.