<div class="discount-code">
    <button class="discount-code__button" type="button">
        <span class="discount-code__button-text">
            Discount
        </span>

        <svg class="icon discount-code__button-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
        </svg>

    </button>

    <div class="discount-code__content"></div>
</div>
<div class="discount-code">
    <button class="discount-code__button" type="button">
        <span class="discount-code__button-text">
            Discount
        </span>

        {{ render '@icon' icon }}
    </button>

    <div class="discount-code__content"></div>
</div>
{
  "icon": {
    "id": "angle-down",
    "class": "discount-code__button-icon"
  }
}
  • Content:
    $discount-code__margin                    : 0 #{-$spacer} !default;
    $discount-code__margin\@medium            : 0 !default;
    $discount-code__button-width              : 100% !default;
    $discount-code__button-padding            : $spacer--medium 0 !default;
    $discount-code__button-border             : $border-base !default;
    $discount-code__button-border-width       : 0 0 1px 0 !default;
    $discount-code__button-background         : none !default;
    $discount-code__button-background--hover  : none !default;
    $discount-code__button-text-color         : $color-primary !default;
    $discount-code__content                   : $spacer--medium !default;
    $discount-code__button-icon-transition    : $transition-base !default;
    $discount-code__button-text-margin        : 0 $spacer 0 0 !default;
    $discount-code__button-text-font-size     : $font-size-large !default;
    $discount-code__button-text-font-weight   : $font-weight-normal !default;
    $discount-code__button-text-text-transform: uppercase !default;
    $discount-code__input-margin              : 0 0 $spacer--medium 0 !default;
    
    .discount-code {
        margin: $discount-code__margin;
    
        @include mq($screen-m) {
            margin: $discount-code__margin\@medium;
        }
    
        &__button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: $discount-code__button-width;
            padding: $discount-code__button-padding;
            border: $discount-code__button-border;
            border-width: $discount-code__button-border-width;
            background: $discount-code__button-background;
            cursor: pointer;
    
            &:hover {
                background: $discount-code__button-background--hover;
    
                &:before,
                &:after {
                    display: none;
                }
            }
        }
    
        &__content {
            display: none;
            padding: $discount-code__content;
        }
    
        &__button-icon {
            transition: $discount-code__button-icon-transition;
        }
    
        &__button-text {
            margin: $discount-code__button-text-margin;
            font-size: $discount-code__button-text-font-size;
            font-weight: $discount-code__button-text-font-weight;
            color: $discount-code__button-text-color;
            text-transform: $discount-code__button-text-text-transform;
        }
    
        &._active {
            .discount-code__button-icon {
                transform: rotate(180deg);
            }
    
            .discount-code__content {
                display: block;
            }
        }
    
        &__input {
            margin: $discount-code__input-margin;
        }
    }
    
  • URL: /components/raw/discount-code/_discount-code.scss
  • Filesystem Path: build/components/Organisms/checkout/discount-code/_discount-code.scss
  • Size: 2.5 KB

There are no notes for this item.