<div class="shipping-dropdown">
    <div class="form-item form-item--select form-item--required">
        <label for="shopping-cart-ship-option" class="label label--required">Shipping Method</label>
        <div class="select-wrapper">
            <select id="shopping-cart-ship-option" name="shopping-cart-ship-option" class="select js-select">
        <option value="" >Select</option>
        <option value="next-day" >Next Day — ETA: March 8th</option>
        <option value="two-day" >2-Day — ETA: March 9th</option>
        <option value="standard" >Standard — ETA: March 17th</option>
      </select>
        </div>
    </div>
</div>
<div class="shipping-dropdown">
  {{#if preSelected}}
  <strong>{{label}}</strong>
  <br>
  <span>{{preSelected}}</span>
  {{else}}
  {{> @select-normal}}
  {{/if}}
</div>
{
  "id": "shopping-cart-ship-option",
  "name": "shopping-cart-ship-option",
  "label": "Shipping Method",
  "required": true,
  "options": [
    {
      "value": null,
      "label": "Select"
    },
    {
      "value": "next-day",
      "label": "Next Day — ETA: March 8th"
    },
    {
      "value": "two-day",
      "label": "2-Day — ETA: March 9th"
    },
    {
      "value": "standard",
      "label": "Standard — ETA: March 17th"
    }
  ]
}
  • Content:
    .shipping-dropdown {
      @if $brand == 'b2b' {
        padding-right: 2rem;
        padding-bottom: 2rem;
    
        strong,
        span {
          line-height: 1.8;
        }
    
        label,
        strong {
          font-size: 1.4rem;
          font-weight: $font-weight-bold;
        }
    
        .form-item--error {
          .select {
            border-width: 2px;
            border-color: $color-error;
          }
        }
    
        .select-wrapper {
          margin-top: 1rem;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
    
        .input-error {
          font-weight: $font-weight-normal;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
    
        @include breakpoint($breakpoint-md) {
          padding-top: 2.5rem;
    
          // Normally, we would do & + & here, but this doesn’t work because we
          // scope all b2b styles in b2b.scss.
          & + .shipping-dropdown {
            padding-top: 0;
          }
        }
      }
    }
    
  • URL: /components/raw/shipping-dropdown/shipping-dropdown.scss
  • Filesystem Path: src/components/01-elements/form-items/shipping-dropdown/shipping-dropdown.scss
  • Size: 906 Bytes

There are no notes for this item.