AFW Pattern Lab

User Actions 

<div class="user-actions">
    <div class="user-actions__inner">
        <button class="user-actions__stores">
            <img src="../../images/icons/location.svg" alt="Stores Icon">
        </button>
        <button class="user-actions__account">
            <img src="../../images/icons/user.svg" alt="User Icon">
        </button>
        <button class="user-actions__cart">
            <span class="user-actions__cart__qty">1</span>
            <img src="../../images/icons/cart.svg" alt="Cart Icon">
        </button>
    </div>
</div>
 
<div class="user-actions">
    <div class="user-actions__inner">
        <button class="user-actions__stores">
            <img src="{{'/images/icons/location.svg'|path}}" alt="Stores Icon">
        </button>
        <button class="user-actions__account">
            <img src="{{'/images/icons/user.svg'|path}}" alt="User Icon">
        </button>
        <button class="user-actions__cart">
            <span class="user-actions__cart__qty">1</span>
            <img src="{{'/images/icons/cart.svg'|path}}" alt="Cart Icon">
        </button>
    </div>
</div>
 
{
  "test": null
}
  • Content: 
    .user-actions {
    $this: &;

    button {
        appearance: none;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: rem(48px);
        height: rem(48px);
    }

    &__inner {
        display: flex;
    }

    &__stores {}

    &__account {}

    &__cart {
        position: relative;
        z-index: 1;

        &__qty {
            background: $color-primary-blue;
            border-radius: 50%;
            color: $color-white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: rem(11.008px);
            font-weight: 400;
            width: rem(16px);
            height: rem(16px);
            position: absolute;
            top: rem(9px);
            right: rem(2px);
            z-index: 2;
        }
    }
}
  • URL: /components/raw/user-actions/user-actions.scss
  • Filesystem Path: source/patterns/molecules/user-actions/user-actions.scss
  • Size: 915 Bytes

No notes defined.