December 8, 2021

Редизайн интерфейса корзины

Видео:

Купить хостинг можно тут:

https://timeweb.com/ru/?i=15777

Короткий вариант:

<style>
.action-panel {
background: #242424;
}
    .action-panel .product-back-catalog, .action-panel .is-light {
color: #FFFFFF !important;
background-color: transparent !important;
padding: 0px !important;
}
    .action-panel .product-back-catalog .fai, .action-panel .fa-shopping-basket, .action-panel .fa-th {
    font-size: 2rem !important;
}
</style>
<link href="https://cc26299.tmweb.ru/files/stylesheets/taplink-bracket-stylesheet.css" rel="stylesheet">

Длинный вариант:

<style>
.action-panel {
background: #242424;
}
    .action-panel .product-back-catalog, .action-panel .is-light {
color: #FFFFFF !important;
background-color: transparent !important;
padding: 0px !important;
}
.product-back-catalog .fai, .fa-shopping-basket, .fa-th {
    font-size: 2rem !important;
}
.product-back-catalog .fai::before, .fa-th {
color: transparent;
background-image: url("data:image/svg+xml,%3Csvg width='35' height='31' viewBox='0 0 35 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.301 1H24.2526C27.5744 1.51263 34.1737 4.42727 33.9965 11.9848C33.8193 19.5424 27.4267 21.8712 24.2526 22.0909H1M1 22.0909L8.30795 14.4015M1 22.0909L8.30795 30' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-size: 100% 100%;
}
.fa-shopping-basket::before {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1H3.40068V3.4967M17.9008 22.7021C14.1877 22.7021 6.41593 22.7021 5.03314 22.7021C3.65035 22.7021 3.36867 21.2937 3.40068 20.5895V3.4967M3.40068 3.4967H26.5432C27.3114 3.59273 28.771 4.11128 28.4637 5.41724C28.1565 6.72321 26.0311 13.1314 25.0068 16.1723C24.5586 17.1005 23.3359 18.9571 22.0299 18.9571C20.724 18.9571 11.563 18.9571 7.14573 18.9571' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='5.22522' cy='27.5035' r='1.4967' stroke='white' stroke-width='2'/%3E%3Ccircle cx='18.0924' cy='27.5035' r='1.4967' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
background-size: 100% 100%;
color: transparent;
}
.tag:not(body).is-danger {
    background-color: #E83587;
    color: #fff;
width: 1.2rem;
    height: 1.2rem;
    left: -10px;
margin-right: 0px !important;
border-radius: 50%;
}
.action-panel .row>div:nth-child(2) button {
    background-color: #E83587;
border-radius: 6px !important;
}
.action-panel .row>div:nth-child(2) {
position: relative;
overflow: hidden;
padding-right: 0rem !important;
    padding-left: 0rem !important;
}
.action-panel .row>div:nth-child(2)::before {
 content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
animation: moveLight 1s linear infinite normal;
}
@keyframes moveLight {
0% {
    transform: translateX(-4rem) skewX(-45deg);
}
10% {
    transform: translateX(40rem) skewX(-45deg);
}
100% {
    transform: translateX(40rem) skewX(-45deg);
}
}
</style>