Copy environment

Cart Table 

<div class="cart-table cart-table--has-items">
    <div class="cart-table__header">
        <h2 class="cart-table__heading">
            Tulen ise järele
            <span class="cart-table__heading-product-amount">
                (3 toodet)
            </span>
        </h2>
        <p class="cart-table__sub-heading">
            Järgnevatele toodetele oled valinud ise järele tuleku
        </p>
    </div>
    <div class="cart-table__content">
        <div class="cart-table__table-header">
            <div class="cart-table__header-row--img"></div>
            <div class="cart-table__header-row cart-table__header-row--title">
                Toode
            </div>
            <div class="cart-table__header-row cart-table__header-row--price">
                Toote hind
            </div>
            <div class="cart-table__header-row cart-table__header-row--qty">
                Kogus
            </div>
            <div class="cart-table__header-row cart-table__header-row--date">
                Rendi algus
            </div>
            <div class="cart-table__header-row cart-table__header-row--date">
                Rendi lõpp
            </div>
            <div class="cart-table__header-row cart-table__header-row--pickup-point">
                Vastuvõtupunkt
            </div>
        </div>
        <div class="cart-table__product-container">
            <a href="#" class="cart-table__product-img">
                <figure class="image  ">

                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X350" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
                <span>Tootepilt</span>
            </a>
            <div class="cart-table__data-row cart-table__data-row--title">
                <div class="cart-table__data-label">
                    Toode
                </div>
                <a href="#" class="cart-table__data-value cart-table__data-value--title">
                    Akukäärtõstuk 2.5M MANUAALNE
                </a>
            </div>
            <div class="cart-table__data-row cart-table__data-row--price">
                <div class="cart-table__data-label">
                    Toote hind
                </div>
                <div class="cart-table__data-value">
                    16€/päev
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--qty">
                <div class="cart-table__data-label">
                    Kogus
                </div>
                <div class="cart-table__data-value">
                    2tk
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendialgus
                </div>
                <div class="cart-table__data-value">
                    01.08 2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendilõpp
                </div>
                <div class="cart-table__data-value">
                    22.08.2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--last">
                <div class="cart-table__data-label">
                    Vastuvõtupunkt
                </div>
                <div class="cart-table__data-value">
                    Laki 12B, Tartu
                </div>
            </div>
            <div class="cart-table__modify-buttons">
                <a href="#" class="cart-table__change-button">Muuda</a>
                <a href="#" class="cart-table__delete-button">
                    <span class="cart-table__delete-text">
                        Eemalda
                    </span>
                    <span class="cart-table__delete-icon">
                        <svg class="icon  " focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="cart-table__product-container">
            <a href="#" class="cart-table__product-img">
                <figure class="image  ">

                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X300" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
                <span>Tootepilt</span>
            </a>
            <div class="cart-table__data-row cart-table__data-row--title">
                <div class="cart-table__data-label">
                    Toode
                </div>
                <a href="#" class="cart-table__data-value cart-table__data-value--title">
                    Akukäärtõstuk 2.5M MANUAALNE
                </a>
            </div>
            <div class="cart-table__data-row cart-table__data-row--price">
                <div class="cart-table__data-label">
                    Toote hind
                </div>
                <div class="cart-table__data-value">
                    16€/päev
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--qty">
                <div class="cart-table__data-label">
                    Kogus
                </div>
                <div class="cart-table__data-value">
                    2tk
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendialgus
                </div>
                <div class="cart-table__data-value">
                    01.08 2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendilõpp
                </div>
                <div class="cart-table__data-value">
                    22.08.2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--last">
                <div class="cart-table__data-label">
                    Vastuvõtupunkt
                </div>
                <div class="cart-table__data-value">
                    Laki 12B, Tartu
                </div>
            </div>
            <div class="cart-table__modify-buttons">
                <a href="#" class="cart-table__change-button">Muuda</a>
                <a href="#" class="cart-table__delete-button">
                    <span class="cart-table__delete-text">
                        Eemalda
                    </span>
                    <span class="cart-table__delete-icon">
                        <svg class="icon  " focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="cart-table__optimize-buttons">

            <button type="button" class="button">
                <span class="button__inner">
                    <span class="button__text">Optimeeri rendipunkti</span>
                </span>
            </button>

            <button type="button" class="button">
                <span class="button__inner">
                    <span class="button__text">Optimeeri rendiperioodi</span>
                </span>
            </button>
        </div>
    </div>
</div>
 
<div {{ class('cart-table', [
    not isCartEmpty ? 'cart-table--has-items' : 'cart-table--empty'
]) }}>
    {% if not isCartEmpty %}
        <div class="cart-table__header">
            {% if data.heading is not empty %}
                <h2 class="cart-table__heading">
                    {{ data.heading }}
                    <span class="cart-table__heading-product-amount">
                    (3 toodet)
                </span>
                </h2>
            {% endif %}
            {% if data.subHeading is not empty %}
                <p class="cart-table__sub-heading">
                    {{ data.subHeading }}
                </p>
            {% endif %}
        </div>
        <div class="cart-table__content">
            {% if data.products %}
                <div class="cart-table__table-header">
                    <div class="cart-table__header-row--img"></div>
                    <div class="cart-table__header-row cart-table__header-row--title">
                        Toode
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--price">
                        Toote hind
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--qty">
                        Kogus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi algus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi lõpp
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--pickup-point">
                        Vastuvõtupunkt
                    </div>
                </div>
                {% for item in data.products %}
                    <div class="cart-table__product-container">
                        <a href="#" class="cart-table__product-img">
                            {% include '@image' with {
                                data: item.image|srcset('280x155'),
                                class: '',
                                modifier: ''
                            } %}
                            <span>Tootepilt</span>
                        </a>
                        <div class="cart-table__data-row cart-table__data-row--title">
                            <div class="cart-table__data-label">
                                Toode
                            </div>
                            <a href="#" class="cart-table__data-value cart-table__data-value--title">
                                {{ item.title }}
                            </a>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--price">
                            <div class="cart-table__data-label">
                                Toote hind
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.price }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--qty">
                            <div class="cart-table__data-label">
                                Kogus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.amount }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendialgus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalStart }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendilõpp
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalEnd }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--last">
                            <div class="cart-table__data-label">
                                Vastuvõtupunkt
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.pickupPoint }}
                            </div>
                        </div>
                        <div class="cart-table__modify-buttons">
                            <a href="#" class="cart-table__change-button">Muuda</a>
                            <a href="#" class="cart-table__delete-button">
                                <span class="cart-table__delete-text">
                                    Eemalda
                                </span>
                                <span class="cart-table__delete-icon">
                                    {% include '@icon' with { name: 'close' } %}
                                </span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
                {% if data.displayModifyButtons %}
                    <div class="cart-table__optimize-buttons">
                        {% include '@button' with { data: { text: 'Optimeeri rendipunkti' }, class: '', modifier: '' } %}
                        {% include '@button' with { data: { text: 'Optimeeri rendiperioodi' }, class: '', modifier: '' } %}
                    </div>
                {% else %}
                    <p class="cart-table__transport-cost-info h-text-right">
                        Transpordi kulu arvutatakse hiljem
                    </p>
                {% endif %}
            {% endif %}
        </div>
    {% else %}
        <div class="cart-table__empty-cart-icon">
            {% include '@icon' with { name: 'cart-filled' } %}
        </div>
        <p class="cart-table__empty-cart-text h-text-center">
            Sinu rendikorv on hetkel tühi.
        </p>
        <div class="cart-table__back-to-shop">
            {% include '@button' with { data: { text: 'Tooteid valima', link: '#' } } %}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "displayModifyButtons": true,
    "heading": "Tulen ise järele",
    "subHeading": "Järgnevatele toodetele oled valinud ise järele tuleku",
    "products": [
      {
        "image": {
          "srcset": "https://via.placeholder.com/300X350"
        },
        "title": "Akukäärtõstuk 2.5M MANUAALNE",
        "price": "16€/päev",
        "amount": "2tk",
        "rentalStart": "01.08 2022",
        "rentalEnd": "22.08.2022",
        "pickupPoint": "Laki 12B, Tartu"
      },
      {
        "image": {
          "srcset": "https://via.placeholder.com/300X300"
        },
        "title": "Akukäärtõstuk 2.5M MANUAALNE",
        "price": "16€/päev",
        "amount": "2tk",
        "rentalStart": "01.08 2022",
        "rentalEnd": "22.08.2022",
        "pickupPoint": "Laki 12B, Tartu"
      }
    ]
  }
}
  • Content: 
    .cart-table {
    border-radius: $border-radius-base;

    @include bp(xxl-min) {
        margin: 0 -24px;
    }
}

.cart-table--has-items {
    box-shadow: $elevation-01;
}

.cart-table--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 0;
}

.cart-table__header {
    padding: 12px;
    background: $L-background-table-header;
    border-radius: $border-radius-base $border-radius-base 0 0;

    @include bp(lg-min) {
        padding: 24px;
    }
}

.cart-table__heading {
    font-size: 20px;
    line-height: 1;
    letter-spacing: $letter-spacing-default;
    font-weight: $font-weight-medium;
    margin-bottom: 12px;

    @include bp(lg-min) {
        font-size: 28px;
    }
}

.cart-table__heading-product-amount {
    font-weight: $font-weight-regular;
    font-size: 21px;
    line-height: 20px;
}

.cart-table__sub-heading {
    font-size: 21px;
    line-height: 23.1px;
    color: $L-text;
}

.cart-table__content {
    background: $L-background;
    padding: 16px 12px 12px;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    border: 2px solid $L-border-table;
    border-top: none;

    @include bp(lg-min) {
        padding: 24px 40px 40px 24px;
    }
}

.cart-table__product-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    @include bp(lg-min) {
        margin-bottom: 8px;
        flex-direction: row;
        align-items: center;
    }
}

.cart-table__table-header {
    display: none;

    @include bp(lg-min) {
        display: flex;
        margin-bottom: 4px;
    }
}

.cart-table__header-row {
    font-size: 14px;
    letter-spacing: $letter-spacing-50;
    line-height: $line-height-base;
    border-bottom: 1px solid $L-background-strong;
    padding-bottom: 8px;
    color: $L-text-black;
}

.cart-table__header-row--img {
    width: calc(15% + 16px);
    border-bottom: none;
}

.cart-table__header-row--title {
    width: calc(24% + 16px);
}

.cart-table__header-row--price {
    width: calc(8% + 16px);
}

.cart-table__header-row--qty {
    width: calc(5% + 16px);
}

.cart-table__header-row--date {
    width: calc(8.5% + 16px);
}

.cart-table__header-row--pickup-point {
    flex: 1;
}

.cart-table__product-img {
    height: 78px;
    width: auto;
    max-width: 37%;
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    @include bp(lg-min) {
        height: 117px;
        max-width: 15%;
        width: 15%;
        margin-right: 16px;
    }
}

span {
    .cart-table__product-img & {
        display: none;
    }
}

img,
.image {
    .cart-table__product-img & {
        height: 100%;
        width: 100%;
    }
}

img {
    .cart-table__product-img & {
        object-fit: contain;
        text-align: left;
        object-position: left center;

        @include bp(lg-min) {
            object-position: center;
        }
    }
}

.cart-table__data-row {
    display: flex;
    margin-bottom: 8px;

    @include bp(lg-min) {
        margin-right: 16px;
        margin-bottom: 0;
    }
}

.cart-table__data-row--last {
    margin-bottom: 12px;

    @include bp(lg-min) {
        margin-bottom: 0;
        width: 15%;
        max-width: 15%;
    }
}

.cart-table__data-row--title {
    @include bp(lg-min) {
        width: 24%;
        max-width: 24%;
    }
}

.cart-table__data-row--price {
    @include bp(lg-min) {
        width: 8%;
        max-width: 8%;
    }
}

.cart-table__data-row--qty {
    @include bp(lg-min) {
        width: 5%;
        max-width: 5%;
    }
}

.cart-table__data-row--date {
    @include bp(lg-min) {
        width: 8.5%;
        max-width: 8.5%;
    }
}

.cart-table__data-label {
    color: $L-text-black;
    font-size: 16px;
    line-height: $line-height-base;
    letter-spacing: $letter-spacing-50;
    margin-right: 12px;
    width: 37%;
    min-width: 37%;
    word-wrap: break-word;

    @include bp(lg-min) {
        display: none;
    }
}

.cart-table__data-value {
    @extend .cart-table__data-label;
    margin-right: 0;
    width: auto;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__data-value--title {
    font-size: 18px;
    letter-spacing: $letter-spacing-default;
    text-transform: uppercase;
    color: $L-text-strong;
    font-weight: $font-weight-medium;
    text-decoration: none;
}

.cart-table__modify-buttons {
    display: flex;
    justify-content: space-between;

    @include bp(lg-min) {
        flex-direction: column-reverse;
        align-items: flex-end;
        margin: 24px 0;
        align-self: stretch;
        width: calc(16% - 7 * 16px);
        max-width: calc(16% - 7 * 16px);
    }
}

.cart-table__change-button {
    color: $L-link;
}

.cart-table__delete-button {
    color: $L-error-text;
}

.cart-table__delete-text {
    @include bp(lg-min) {
        @include visually-hidden;
    }
}

.cart-table__delete-icon {
    font-size: 22px;
    display: none;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__optimize-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @include bp(lg-min) {
        flex-direction: row;
        justify-content: center;
        margin-top: 40px;
        gap: 32px;
    }
}

.cart-table__empty-cart-icon {
    font-size: 44px;
    height: 88px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 48px;
    color: $L-icon-strong;

    &::after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 100%;
        width: 100%;
        border-radius: $border-radius-round;
        background: $L-background;
        z-index: -1;
    }
}

.cart-table__empty-cart-text {
    color: $L-text-black;
    margin-bottom: 48px;
}

.cart-table__transport-cost-info {
    margin-top: 16px;
    text-align: center;
    font-size: $font-size-tiny;
    color: $L-text-black;

    @include bp(lg-min) {
        margin-top: 24px;
        text-align: right;
    }
}
  • URL: /components/raw/cart-table/cart-table.scss
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.scss
  • Size: 6.1 KB
  • Handle: @cart-table--default
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.twig
  • References (3): @image, @icon, @button
  • Referenced by (1): @view-cart

Empty Cart 

<div class="cart-table cart-table--empty">
    <div class="cart-table__empty-cart-icon">
        <svg class="icon  " focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#cart-filled"></use>
        </svg>
    </div>
    <p class="cart-table__empty-cart-text h-text-center">
        Sinu rendikorv on hetkel tühi.
    </p>
    <div class="cart-table__back-to-shop">

        <a href="#" class="button">
            <span class="button__inner">
                <span class="button__text">Tooteid valima</span>
            </span>
        </a>
    </div>
</div>
 
<div {{ class('cart-table', [
    not isCartEmpty ? 'cart-table--has-items' : 'cart-table--empty'
]) }}>
    {% if not isCartEmpty %}
        <div class="cart-table__header">
            {% if data.heading is not empty %}
                <h2 class="cart-table__heading">
                    {{ data.heading }}
                    <span class="cart-table__heading-product-amount">
                    (3 toodet)
                </span>
                </h2>
            {% endif %}
            {% if data.subHeading is not empty %}
                <p class="cart-table__sub-heading">
                    {{ data.subHeading }}
                </p>
            {% endif %}
        </div>
        <div class="cart-table__content">
            {% if data.products %}
                <div class="cart-table__table-header">
                    <div class="cart-table__header-row--img"></div>
                    <div class="cart-table__header-row cart-table__header-row--title">
                        Toode
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--price">
                        Toote hind
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--qty">
                        Kogus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi algus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi lõpp
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--pickup-point">
                        Vastuvõtupunkt
                    </div>
                </div>
                {% for item in data.products %}
                    <div class="cart-table__product-container">
                        <a href="#" class="cart-table__product-img">
                            {% include '@image' with {
                                data: item.image|srcset('280x155'),
                                class: '',
                                modifier: ''
                            } %}
                            <span>Tootepilt</span>
                        </a>
                        <div class="cart-table__data-row cart-table__data-row--title">
                            <div class="cart-table__data-label">
                                Toode
                            </div>
                            <a href="#" class="cart-table__data-value cart-table__data-value--title">
                                {{ item.title }}
                            </a>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--price">
                            <div class="cart-table__data-label">
                                Toote hind
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.price }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--qty">
                            <div class="cart-table__data-label">
                                Kogus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.amount }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendialgus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalStart }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendilõpp
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalEnd }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--last">
                            <div class="cart-table__data-label">
                                Vastuvõtupunkt
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.pickupPoint }}
                            </div>
                        </div>
                        <div class="cart-table__modify-buttons">
                            <a href="#" class="cart-table__change-button">Muuda</a>
                            <a href="#" class="cart-table__delete-button">
                                <span class="cart-table__delete-text">
                                    Eemalda
                                </span>
                                <span class="cart-table__delete-icon">
                                    {% include '@icon' with { name: 'close' } %}
                                </span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
                {% if data.displayModifyButtons %}
                    <div class="cart-table__optimize-buttons">
                        {% include '@button' with { data: { text: 'Optimeeri rendipunkti' }, class: '', modifier: '' } %}
                        {% include '@button' with { data: { text: 'Optimeeri rendiperioodi' }, class: '', modifier: '' } %}
                    </div>
                {% else %}
                    <p class="cart-table__transport-cost-info h-text-right">
                        Transpordi kulu arvutatakse hiljem
                    </p>
                {% endif %}
            {% endif %}
        </div>
    {% else %}
        <div class="cart-table__empty-cart-icon">
            {% include '@icon' with { name: 'cart-filled' } %}
        </div>
        <p class="cart-table__empty-cart-text h-text-center">
            Sinu rendikorv on hetkel tühi.
        </p>
        <div class="cart-table__back-to-shop">
            {% include '@button' with { data: { text: 'Tooteid valima', link: '#' } } %}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "displayModifyButtons": true,
    "heading": "Tulen ise järele",
    "subHeading": "Järgnevatele toodetele oled valinud ise järele tuleku",
    "products": [
      {
        "image": {
          "srcset": "https://via.placeholder.com/300X350"
        },
        "title": "Akukäärtõstuk 2.5M MANUAALNE",
        "price": "16€/päev",
        "amount": "2tk",
        "rentalStart": "01.08 2022",
        "rentalEnd": "22.08.2022",
        "pickupPoint": "Laki 12B, Tartu"
      },
      {
        "image": {
          "srcset": "https://via.placeholder.com/300X300"
        },
        "title": "Akukäärtõstuk 2.5M MANUAALNE",
        "price": "16€/päev",
        "amount": "2tk",
        "rentalStart": "01.08 2022",
        "rentalEnd": "22.08.2022",
        "pickupPoint": "Laki 12B, Tartu"
      }
    ]
  },
  "isCartEmpty": true
}
  • Content: 
    .cart-table {
    border-radius: $border-radius-base;

    @include bp(xxl-min) {
        margin: 0 -24px;
    }
}

.cart-table--has-items {
    box-shadow: $elevation-01;
}

.cart-table--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 0;
}

.cart-table__header {
    padding: 12px;
    background: $L-background-table-header;
    border-radius: $border-radius-base $border-radius-base 0 0;

    @include bp(lg-min) {
        padding: 24px;
    }
}

.cart-table__heading {
    font-size: 20px;
    line-height: 1;
    letter-spacing: $letter-spacing-default;
    font-weight: $font-weight-medium;
    margin-bottom: 12px;

    @include bp(lg-min) {
        font-size: 28px;
    }
}

.cart-table__heading-product-amount {
    font-weight: $font-weight-regular;
    font-size: 21px;
    line-height: 20px;
}

.cart-table__sub-heading {
    font-size: 21px;
    line-height: 23.1px;
    color: $L-text;
}

.cart-table__content {
    background: $L-background;
    padding: 16px 12px 12px;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    border: 2px solid $L-border-table;
    border-top: none;

    @include bp(lg-min) {
        padding: 24px 40px 40px 24px;
    }
}

.cart-table__product-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    @include bp(lg-min) {
        margin-bottom: 8px;
        flex-direction: row;
        align-items: center;
    }
}

.cart-table__table-header {
    display: none;

    @include bp(lg-min) {
        display: flex;
        margin-bottom: 4px;
    }
}

.cart-table__header-row {
    font-size: 14px;
    letter-spacing: $letter-spacing-50;
    line-height: $line-height-base;
    border-bottom: 1px solid $L-background-strong;
    padding-bottom: 8px;
    color: $L-text-black;
}

.cart-table__header-row--img {
    width: calc(15% + 16px);
    border-bottom: none;
}

.cart-table__header-row--title {
    width: calc(24% + 16px);
}

.cart-table__header-row--price {
    width: calc(8% + 16px);
}

.cart-table__header-row--qty {
    width: calc(5% + 16px);
}

.cart-table__header-row--date {
    width: calc(8.5% + 16px);
}

.cart-table__header-row--pickup-point {
    flex: 1;
}

.cart-table__product-img {
    height: 78px;
    width: auto;
    max-width: 37%;
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    @include bp(lg-min) {
        height: 117px;
        max-width: 15%;
        width: 15%;
        margin-right: 16px;
    }
}

span {
    .cart-table__product-img & {
        display: none;
    }
}

img,
.image {
    .cart-table__product-img & {
        height: 100%;
        width: 100%;
    }
}

img {
    .cart-table__product-img & {
        object-fit: contain;
        text-align: left;
        object-position: left center;

        @include bp(lg-min) {
            object-position: center;
        }
    }
}

.cart-table__data-row {
    display: flex;
    margin-bottom: 8px;

    @include bp(lg-min) {
        margin-right: 16px;
        margin-bottom: 0;
    }
}

.cart-table__data-row--last {
    margin-bottom: 12px;

    @include bp(lg-min) {
        margin-bottom: 0;
        width: 15%;
        max-width: 15%;
    }
}

.cart-table__data-row--title {
    @include bp(lg-min) {
        width: 24%;
        max-width: 24%;
    }
}

.cart-table__data-row--price {
    @include bp(lg-min) {
        width: 8%;
        max-width: 8%;
    }
}

.cart-table__data-row--qty {
    @include bp(lg-min) {
        width: 5%;
        max-width: 5%;
    }
}

.cart-table__data-row--date {
    @include bp(lg-min) {
        width: 8.5%;
        max-width: 8.5%;
    }
}

.cart-table__data-label {
    color: $L-text-black;
    font-size: 16px;
    line-height: $line-height-base;
    letter-spacing: $letter-spacing-50;
    margin-right: 12px;
    width: 37%;
    min-width: 37%;
    word-wrap: break-word;

    @include bp(lg-min) {
        display: none;
    }
}

.cart-table__data-value {
    @extend .cart-table__data-label;
    margin-right: 0;
    width: auto;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__data-value--title {
    font-size: 18px;
    letter-spacing: $letter-spacing-default;
    text-transform: uppercase;
    color: $L-text-strong;
    font-weight: $font-weight-medium;
    text-decoration: none;
}

.cart-table__modify-buttons {
    display: flex;
    justify-content: space-between;

    @include bp(lg-min) {
        flex-direction: column-reverse;
        align-items: flex-end;
        margin: 24px 0;
        align-self: stretch;
        width: calc(16% - 7 * 16px);
        max-width: calc(16% - 7 * 16px);
    }
}

.cart-table__change-button {
    color: $L-link;
}

.cart-table__delete-button {
    color: $L-error-text;
}

.cart-table__delete-text {
    @include bp(lg-min) {
        @include visually-hidden;
    }
}

.cart-table__delete-icon {
    font-size: 22px;
    display: none;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__optimize-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @include bp(lg-min) {
        flex-direction: row;
        justify-content: center;
        margin-top: 40px;
        gap: 32px;
    }
}

.cart-table__empty-cart-icon {
    font-size: 44px;
    height: 88px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 48px;
    color: $L-icon-strong;

    &::after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 100%;
        width: 100%;
        border-radius: $border-radius-round;
        background: $L-background;
        z-index: -1;
    }
}

.cart-table__empty-cart-text {
    color: $L-text-black;
    margin-bottom: 48px;
}

.cart-table__transport-cost-info {
    margin-top: 16px;
    text-align: center;
    font-size: $font-size-tiny;
    color: $L-text-black;

    @include bp(lg-min) {
        margin-top: 24px;
        text-align: right;
    }
}
  • URL: /components/raw/cart-table/cart-table.scss
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.scss
  • Size: 6.1 KB
  • Handle: @cart-table--empty-cart
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.twig
  • References (3): @image, @icon, @button

With Transport 

<div class="cart-table cart-table--has-items">
    <div class="cart-table__header">
        <h2 class="cart-table__heading">
            Kohaletoimetamisega
            <span class="cart-table__heading-product-amount">
                (3 toodet)
            </span>
        </h2>
        <p class="cart-table__sub-heading">
            Järgnevatele toodetele oled valinud Ramirendi kohaletoimetuse
        </p>
    </div>
    <div class="cart-table__content">
        <div class="cart-table__table-header">
            <div class="cart-table__header-row--img"></div>
            <div class="cart-table__header-row cart-table__header-row--title">
                Toode
            </div>
            <div class="cart-table__header-row cart-table__header-row--price">
                Toote hind
            </div>
            <div class="cart-table__header-row cart-table__header-row--qty">
                Kogus
            </div>
            <div class="cart-table__header-row cart-table__header-row--date">
                Rendi algus
            </div>
            <div class="cart-table__header-row cart-table__header-row--date">
                Rendi lõpp
            </div>
            <div class="cart-table__header-row cart-table__header-row--pickup-point">
                Vastuvõtupunkt
            </div>
        </div>
        <div class="cart-table__product-container">
            <a href="#" class="cart-table__product-img">
                <figure class="image  ">

                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X350" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
                <span>Tootepilt</span>
            </a>
            <div class="cart-table__data-row cart-table__data-row--title">
                <div class="cart-table__data-label">
                    Toode
                </div>
                <a href="#" class="cart-table__data-value cart-table__data-value--title">
                    Akukäärtõstuk 2.5M MANUAALNE
                </a>
            </div>
            <div class="cart-table__data-row cart-table__data-row--price">
                <div class="cart-table__data-label">
                    Toote hind
                </div>
                <div class="cart-table__data-value">
                    16€/päev
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--qty">
                <div class="cart-table__data-label">
                    Kogus
                </div>
                <div class="cart-table__data-value">
                    2tk
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendialgus
                </div>
                <div class="cart-table__data-value">
                    01.08 2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--date">
                <div class="cart-table__data-label">
                    Rendilõpp
                </div>
                <div class="cart-table__data-value">
                    22.08.2022
                </div>
            </div>
            <div class="cart-table__data-row cart-table__data-row--last">
                <div class="cart-table__data-label">
                    Vastuvõtupunkt
                </div>
                <div class="cart-table__data-value">
                    Laki 12B, Tartu
                </div>
            </div>
            <div class="cart-table__modify-buttons">
                <a href="#" class="cart-table__change-button">Muuda</a>
                <a href="#" class="cart-table__delete-button">
                    <span class="cart-table__delete-text">
                        Eemalda
                    </span>
                    <span class="cart-table__delete-icon">
                        <svg class="icon  " focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <p class="cart-table__transport-cost-info h-text-right">
            Transpordi kulu arvutatakse hiljem
        </p>
    </div>
</div>
 
<div {{ class('cart-table', [
    not isCartEmpty ? 'cart-table--has-items' : 'cart-table--empty'
]) }}>
    {% if not isCartEmpty %}
        <div class="cart-table__header">
            {% if data.heading is not empty %}
                <h2 class="cart-table__heading">
                    {{ data.heading }}
                    <span class="cart-table__heading-product-amount">
                    (3 toodet)
                </span>
                </h2>
            {% endif %}
            {% if data.subHeading is not empty %}
                <p class="cart-table__sub-heading">
                    {{ data.subHeading }}
                </p>
            {% endif %}
        </div>
        <div class="cart-table__content">
            {% if data.products %}
                <div class="cart-table__table-header">
                    <div class="cart-table__header-row--img"></div>
                    <div class="cart-table__header-row cart-table__header-row--title">
                        Toode
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--price">
                        Toote hind
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--qty">
                        Kogus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi algus
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--date">
                        Rendi lõpp
                    </div>
                    <div class="cart-table__header-row cart-table__header-row--pickup-point">
                        Vastuvõtupunkt
                    </div>
                </div>
                {% for item in data.products %}
                    <div class="cart-table__product-container">
                        <a href="#" class="cart-table__product-img">
                            {% include '@image' with {
                                data: item.image|srcset('280x155'),
                                class: '',
                                modifier: ''
                            } %}
                            <span>Tootepilt</span>
                        </a>
                        <div class="cart-table__data-row cart-table__data-row--title">
                            <div class="cart-table__data-label">
                                Toode
                            </div>
                            <a href="#" class="cart-table__data-value cart-table__data-value--title">
                                {{ item.title }}
                            </a>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--price">
                            <div class="cart-table__data-label">
                                Toote hind
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.price }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--qty">
                            <div class="cart-table__data-label">
                                Kogus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.amount }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendialgus
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalStart }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--date">
                            <div class="cart-table__data-label">
                                Rendilõpp
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.rentalEnd }}
                            </div>
                        </div>
                        <div class="cart-table__data-row cart-table__data-row--last">
                            <div class="cart-table__data-label">
                                Vastuvõtupunkt
                            </div>
                            <div class="cart-table__data-value">
                                {{ item.pickupPoint }}
                            </div>
                        </div>
                        <div class="cart-table__modify-buttons">
                            <a href="#" class="cart-table__change-button">Muuda</a>
                            <a href="#" class="cart-table__delete-button">
                                <span class="cart-table__delete-text">
                                    Eemalda
                                </span>
                                <span class="cart-table__delete-icon">
                                    {% include '@icon' with { name: 'close' } %}
                                </span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
                {% if data.displayModifyButtons %}
                    <div class="cart-table__optimize-buttons">
                        {% include '@button' with { data: { text: 'Optimeeri rendipunkti' }, class: '', modifier: '' } %}
                        {% include '@button' with { data: { text: 'Optimeeri rendiperioodi' }, class: '', modifier: '' } %}
                    </div>
                {% else %}
                    <p class="cart-table__transport-cost-info h-text-right">
                        Transpordi kulu arvutatakse hiljem
                    </p>
                {% endif %}
            {% endif %}
        </div>
    {% else %}
        <div class="cart-table__empty-cart-icon">
            {% include '@icon' with { name: 'cart-filled' } %}
        </div>
        <p class="cart-table__empty-cart-text h-text-center">
            Sinu rendikorv on hetkel tühi.
        </p>
        <div class="cart-table__back-to-shop">
            {% include '@button' with { data: { text: 'Tooteid valima', link: '#' } } %}
        </div>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "displayModifyButtons": false,
    "heading": "Kohaletoimetamisega",
    "subHeading": "Järgnevatele toodetele oled valinud Ramirendi kohaletoimetuse",
    "products": [
      {
        "image": {
          "srcset": "https://via.placeholder.com/300X350"
        },
        "title": "Akukäärtõstuk 2.5M MANUAALNE",
        "price": "16€/päev",
        "amount": "2tk",
        "rentalStart": "01.08 2022",
        "rentalEnd": "22.08.2022",
        "pickupPoint": "Laki 12B, Tartu"
      }
    ]
  }
}
  • Content: 
    .cart-table {
    border-radius: $border-radius-base;

    @include bp(xxl-min) {
        margin: 0 -24px;
    }
}

.cart-table--has-items {
    box-shadow: $elevation-01;
}

.cart-table--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 0;
}

.cart-table__header {
    padding: 12px;
    background: $L-background-table-header;
    border-radius: $border-radius-base $border-radius-base 0 0;

    @include bp(lg-min) {
        padding: 24px;
    }
}

.cart-table__heading {
    font-size: 20px;
    line-height: 1;
    letter-spacing: $letter-spacing-default;
    font-weight: $font-weight-medium;
    margin-bottom: 12px;

    @include bp(lg-min) {
        font-size: 28px;
    }
}

.cart-table__heading-product-amount {
    font-weight: $font-weight-regular;
    font-size: 21px;
    line-height: 20px;
}

.cart-table__sub-heading {
    font-size: 21px;
    line-height: 23.1px;
    color: $L-text;
}

.cart-table__content {
    background: $L-background;
    padding: 16px 12px 12px;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    border: 2px solid $L-border-table;
    border-top: none;

    @include bp(lg-min) {
        padding: 24px 40px 40px 24px;
    }
}

.cart-table__product-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    @include bp(lg-min) {
        margin-bottom: 8px;
        flex-direction: row;
        align-items: center;
    }
}

.cart-table__table-header {
    display: none;

    @include bp(lg-min) {
        display: flex;
        margin-bottom: 4px;
    }
}

.cart-table__header-row {
    font-size: 14px;
    letter-spacing: $letter-spacing-50;
    line-height: $line-height-base;
    border-bottom: 1px solid $L-background-strong;
    padding-bottom: 8px;
    color: $L-text-black;
}

.cart-table__header-row--img {
    width: calc(15% + 16px);
    border-bottom: none;
}

.cart-table__header-row--title {
    width: calc(24% + 16px);
}

.cart-table__header-row--price {
    width: calc(8% + 16px);
}

.cart-table__header-row--qty {
    width: calc(5% + 16px);
}

.cart-table__header-row--date {
    width: calc(8.5% + 16px);
}

.cart-table__header-row--pickup-point {
    flex: 1;
}

.cart-table__product-img {
    height: 78px;
    width: auto;
    max-width: 37%;
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    @include bp(lg-min) {
        height: 117px;
        max-width: 15%;
        width: 15%;
        margin-right: 16px;
    }
}

span {
    .cart-table__product-img & {
        display: none;
    }
}

img,
.image {
    .cart-table__product-img & {
        height: 100%;
        width: 100%;
    }
}

img {
    .cart-table__product-img & {
        object-fit: contain;
        text-align: left;
        object-position: left center;

        @include bp(lg-min) {
            object-position: center;
        }
    }
}

.cart-table__data-row {
    display: flex;
    margin-bottom: 8px;

    @include bp(lg-min) {
        margin-right: 16px;
        margin-bottom: 0;
    }
}

.cart-table__data-row--last {
    margin-bottom: 12px;

    @include bp(lg-min) {
        margin-bottom: 0;
        width: 15%;
        max-width: 15%;
    }
}

.cart-table__data-row--title {
    @include bp(lg-min) {
        width: 24%;
        max-width: 24%;
    }
}

.cart-table__data-row--price {
    @include bp(lg-min) {
        width: 8%;
        max-width: 8%;
    }
}

.cart-table__data-row--qty {
    @include bp(lg-min) {
        width: 5%;
        max-width: 5%;
    }
}

.cart-table__data-row--date {
    @include bp(lg-min) {
        width: 8.5%;
        max-width: 8.5%;
    }
}

.cart-table__data-label {
    color: $L-text-black;
    font-size: 16px;
    line-height: $line-height-base;
    letter-spacing: $letter-spacing-50;
    margin-right: 12px;
    width: 37%;
    min-width: 37%;
    word-wrap: break-word;

    @include bp(lg-min) {
        display: none;
    }
}

.cart-table__data-value {
    @extend .cart-table__data-label;
    margin-right: 0;
    width: auto;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__data-value--title {
    font-size: 18px;
    letter-spacing: $letter-spacing-default;
    text-transform: uppercase;
    color: $L-text-strong;
    font-weight: $font-weight-medium;
    text-decoration: none;
}

.cart-table__modify-buttons {
    display: flex;
    justify-content: space-between;

    @include bp(lg-min) {
        flex-direction: column-reverse;
        align-items: flex-end;
        margin: 24px 0;
        align-self: stretch;
        width: calc(16% - 7 * 16px);
        max-width: calc(16% - 7 * 16px);
    }
}

.cart-table__change-button {
    color: $L-link;
}

.cart-table__delete-button {
    color: $L-error-text;
}

.cart-table__delete-text {
    @include bp(lg-min) {
        @include visually-hidden;
    }
}

.cart-table__delete-icon {
    font-size: 22px;
    display: none;

    @include bp(lg-min) {
        display: block;
    }
}

.cart-table__optimize-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @include bp(lg-min) {
        flex-direction: row;
        justify-content: center;
        margin-top: 40px;
        gap: 32px;
    }
}

.cart-table__empty-cart-icon {
    font-size: 44px;
    height: 88px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 48px;
    color: $L-icon-strong;

    &::after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 100%;
        width: 100%;
        border-radius: $border-radius-round;
        background: $L-background;
        z-index: -1;
    }
}

.cart-table__empty-cart-text {
    color: $L-text-black;
    margin-bottom: 48px;
}

.cart-table__transport-cost-info {
    margin-top: 16px;
    text-align: center;
    font-size: $font-size-tiny;
    color: $L-text-black;

    @include bp(lg-min) {
        margin-top: 24px;
        text-align: right;
    }
}
  • URL: /components/raw/cart-table/cart-table.scss
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.scss
  • Size: 6.1 KB
  • Handle: @cart-table--with-transport
  • Filesystem Path: src/patterns/modules/cart-table/cart-table.twig
  • References (3): @image, @icon, @button