<main id="main-section" class="main u-page-width-max">
    <div class="l-b2b-heading">
        <h1 class="shopping-cart__title">Sample B2B Page</h1>
    </div>
</main>
<main id="main-section" class="main u-page-width-max">
  {{#if backToCartButton}}
  <div class="l-b2b-back-button">
  {{render '@buttons--plain-text' backToCartButton}}
  </div>
  {{/if}}
  {{#if title}}
  <div class="l-b2b-heading">
  <h1 class="shopping-cart__title">{{title}}</h1>
  {{/if}}
  {{#if headingPromo}}
  {{render '@alert-block--success'}}
  {{/if}}
  {{#if headingError}}
  {{render '@alert-block--error'}}
  {{/if}}
  </div>
  {{#each components}}
  <div class="l-b2b-{{component}}">
    {{render (dynamicComponent component) componentContext merge=mergeContext}}
  </div>
  {{/each}}
</main>
{
  "header": true,
  "footer": true,
  "flyout": "header-flyout--cart-b2b",
  "title": "Sample B2B Page",
  "pageModals": [
    {
      "component": "product-add--multiple"
    }
  ]
}
  • Content:
    .l-b2b-shopping-cart-forms--receipt-thanks,
    .l-b2b-shopping-cart--b2b,
    .l-b2b-heading,
    .l-b2b-back-button {
      margin: 2rem 2rem 3rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 2rem 5rem 6rem;
      }
    }
    
    .l-b2b-heading {
      .shopping-cart__title {
        text-transform: uppercase;
      }
    }
    
    .l-b2b-shopping-cart--b2b {
      margin-bottom: 0;
    }
    
    
    .l-b2b-back-button {
      .button--plain-text {
        color: $color-darkest;
      }
    }
    
    .l-b2b-shopping-cart-forms--receipt-thanks {
      .shopping-cart__items-footer {
        background-color: $color-white;
      }
    }
    
    .l-b2b-alert-block--success {
      margin: 0 2rem;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 5rem;
      }
    
      .alert-block {
        @include breakpoint($breakpoint-sm-only) {
          margin-top: 3rem;
          margin-bottom: 3rem;
        }
    
        @include breakpoint($breakpoint-md) {
          max-width: 39rem;
          margin-bottom: 3rem;
          float: right;
        }
      }
    }
    
    .l-b2b-shopping-cart-forms--receipt-total,
    .l-b2b-shopping-cart-forms--purchase-order-number,
    .l-b2b-shopping-cart-forms--purchase-order-number-error,
    .l-b2b-shopping-cart-forms--purchase-order-number-confirmation {
      background-color: $color-lighter;
    
      @include breakpoint($breakpoint-md) {
        padding-right: 5rem;
        padding-left: 5rem;
      }
    }
    
  • URL: /components/raw/b2b-page/b2b-page.scss
  • Filesystem Path: src/components/03-pages/b2b-page/b2b-page.scss
  • Size: 1.3 KB

There are no notes for this item.