Merge pull request #659 from ovsyanik-ka/BPC-23612

feat(BLIZKO): change style recent products block

src/blocks/blizko/offer-short-card/example/index.html

@@ -0,0 +1,48 @@
+<ul class="slider-root-widget__slider">
+  <li class="slider-root-widget__card">
+    <a class="aui-offer-short-card" href="#">
+      <div class="aui-offer-short-card__image-container">
+        <img
+          class="aui-offer-short-card__image"
+          alt="имя продукта"
+          src="./example-image-product.jpg"
+        />
+        <span class="aui-offer-short-card__label offer-type-label">
+          Подарок
+        </span>
+      </div>
+      <p class="aui-offer-short-card__card-title">
+        Цифровой фотоаппарат Olympus OM-D E-M1 Mark II Kit
+      </p>
+    </a>
+  </li>
+</ul>
+
+<style>
+  .slider-root-widget__slider {
+    display: flex;
+    padding: 24px 0 0;
+    list-style-type: none;
+  }
+
+  .slider-root-widget__card {
+    width: 200px;
+    min-height: 264px;
+    flex-shrink: 0;
+    background-color: var(--white);
+    border-radius: 12px;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  .offer-type-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: inline-block;
+    color: var(--white);
+    background-color: var(--green-d10);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+</style>

src/blocks/blizko/offer-short-card/index.js

@@ -0,0 +1 @@
+import './offer-short-card.css';

src/blocks/blizko/offer-short-card/offer-short-card.css

@@ -0,0 +1,78 @@
+.aui-offer-short-card {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  color: var(--black-l30);
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+}
+
+.aui-offer-short-card:hover {
+  text-decoration: none;
+}
+
+.aui-offer-short-card__expire-date {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px 8px;
+  background-color: var(--amber-l20);
+  border-radius: 8px 0;
+  display: flex;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--black-l20);
+  gap: 4px;
+}
+
+.aui-offer-short-card__expire-date::before {
+  content: '';
+  background-image: url(./images/fire.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 18px;
+  height: 18px;
+}
+
+.aui-offer-short-card__label {
+  padding: 2px 8px;
+  border-radius: 0 8px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.aui-offer-short-card__image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--black-l95);
+  position: relative;
+  flex-shrink: 0;
+  height: 184px;
+}
+
+.aui-offer-short-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.aui-offer-short-card__card-title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  overflow: hidden;
+  color: var(--black-l20);
+}

src/blocks/blizko/product-short-card/example/index.html

@@ -0,0 +1,112 @@
+<ul class="slider-root-widget__slider">
+  <li class="aui-product-short-card slider-root-widget__card">
+    <a class="aui-product-short-card__link" href="#">
+      <div class="aui-product-short-card__image-container">
+        <img
+          class="aui-product-short-card__image"
+          alt="имя продукта"
+          src="./example-image-product.jpg"
+        />
+      </div>
+      <div
+        class="product-price aui-product-short-card__price"
+        itemprop="offers"
+        itemtype="http://schema.org/Offer"
+      >
+        <p class="product-price__container product-price__container_discount">
+          <span class="product-price__price product-price__price_discount">
+            56
+          </span>
+          ₽
+        </p>
+        <p class="product-price__container product-price__container_old">
+          <span class="product-price__line-through-text">
+            <span class="product-price__price product-price__price_old"> 600 </span>
+              ₽
+            </span>
+            <span
+              class="
+                aui-marketing-label
+                aui-marketing-label_desktop_listing-item
+                aui-marketing-label_green-d202
+              "
+            >
+              -50%
+            </span>
+          </span>         
+        </p>
+      </div>
+      <div class="aui-product-short-card__card-title">Имя продукта</div>
+    </a>
+    <button class="aui-product-short-card__favorite-button"></button>
+  </li>
+</ul>
+
+<style>
+  .slider-root-widget__slider {
+    display: flex;
+    padding: 24px 0 0;
+    list-style-type: none;
+  }
+
+  .slider-root-widget__card {
+    width: 200px;
+    min-height: 264px;
+    flex-shrink: 0;
+    background-color: var(--white);
+    border-radius: 12px;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  .product-price {
+    font-size: 16px;
+    line-height: 18px;
+    font-style: normal;
+    font-weight: 400;
+    color: var(--black-l20);
+    position: relative;
+  }
+
+  .product-price__container {
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  .product-price__container_discount {
+    color: var(--green-d201);
+  }
+
+  .product-price__price {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  .product-price__container_old {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--black-l50);
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 400;
+  }
+
+  .product-price__line-through-text {
+    text-decoration-line: line-through;
+  }
+
+  .product-price__price_old {
+    color: var(--black-l50);
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 400;
+  }
+</style>

src/blocks/blizko/product-short-card/index.js

@@ -0,0 +1 @@
+import './product-short-card.css';

src/blocks/blizko/product-short-card/product-short-card.css

@@ -0,0 +1,94 @@
+.aui-product-short-card {
+  position: relative;
+  height: 309px;
+}
+
+.aui-product-short-card_custom-root-page {
+  margin-bottom: 0;
+}
+
+.aui-product-short-card_rubricator {
+  max-width: 1175px;
+}
+
+.aui-product-short-card__title {
+  font-size: 24px;
+  line-height: 28px;
+  font-weight: 700;
+  margin: 43px 0 0 8px;
+}
+
+.aui-product-short-card__item,
+.aui-product-short-card__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.aui-product-short-card__item {
+  position: relative;
+  margin: 10px auto;
+  width: 184px;
+  overflow: hidden;
+  transition: 0.3s ease;
+}
+
+.aui-product-short-card__content {
+  height: 90px;
+  gap: 10px;
+  margin-left: 5px;
+}
+
+.aui-product-short-card__link {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--black-l20);
+  text-decoration: none;
+}
+
+.aui-product-short-card__link:hover {
+  text-decoration: none;
+  color: var(--black-l20);
+}
+
+.aui-product-short-card__image-container {
+  width: 184px;
+  height: 184px;
+  border-radius: 8px;
+  background: var(--black-l95);
+}
+
+.aui-product-short-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.aui-product-short-card__price {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.aui-product-short-card__card-title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  word-break: break-word;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.aui-product-short-card__favorite-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  background: none;
+  border: none;
+  padding: 8px;
+}
+
+.aui-product-short-card__favorite-button::before {
+  content: '';
+}