ecomlab-components-next 0.1.308 → 0.1.311

package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.js

@@ -105,7 +105,7 @@ var CardsServicesV3 = function CardsServicesV3(_ref) {
     var label = _ref2.label;
     return label != service;
   });
-  var _useState = (0, _react.useState)(6),
+  var _useState = (0, _react.useState)(3),
     _useState2 = _slicedToArray(_useState, 2),
     isShow = _useState2[0],
     setIsShow = _useState2[1];

package/dist/components/ConstructorComponents/QuestionsV2/QuestionsV2.js

@@ -82,7 +82,13 @@ var QuestionsV2 = function QuestionsV2(_ref) {
       className: "questions-v2__question-text"
     }, questions), /*#__PURE__*/_react["default"].createElement("span", {
       className: "questions-v2__icon"
-    }, "+")), /*#__PURE__*/_react["default"].createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "questions-v2__icon-circle"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "questions-v2__icon-line questions-v2__icon-line_horizontal"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "questions-v2__icon-line questions-v2__icon-line_vertical"
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "questions-v2__answer"
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: "questions-v2__answer-text"

package/dist/components/ConstructorComponents/QuestionsV2/QuestionsV2.scss

@@ -52,8 +52,8 @@
 
         &_open {
             .questions-v2__icon {
-                transform: rotate(45deg);
                 color: $green;
+                transform: rotate(45deg);
             }
 
             .questions-v2__answer {
@@ -70,13 +70,14 @@
             }
         }
 
+        // При hover всегда зелёный
         .questions-v2__question:hover {
-            color: rgb(139, 92, 246);
+            color: $green;
         }
     }
 
     &__question {
-        padding: 20px 24px;
+        padding: 20px 18px 20px 24px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -89,6 +90,20 @@
 
         &:hover {
             color: $green;
+
+            .questions-v2__icon {
+                color: $green;
+                transform: scale(1.08);
+
+                .questions-v2__icon-circle {
+                    opacity: 1;
+                    transform: translate(-50%, -50%) scale(1.05);
+                }
+
+                .questions-v2__icon-line {
+                    width: 23px;
+                }
+            }
         }
     }
 
@@ -97,13 +112,77 @@
         text-align: left;
     }
 
+    // Контейнер иконки
     &__icon {
-        font-size: 20px;
-        font-weight: 400;
-        color: $muted;
-        transition: transform 0.3s ease, color 0.2s ease;
-        flex-shrink: 0;
+        position: relative;
+
+        width: 50px;
+        height: 50px;
+
+        flex: 0 0 50px;
         margin-left: 16px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: $muted;
+
+        transition:
+            transform 0.25s ease,
+            color 0.2s ease;
+
+        // Круг
+        &-circle {
+            position: absolute;
+
+            left: 50%;
+            top: 50%;
+
+            width: 50px;
+            height: 50px;
+
+            border-radius: 50%;
+
+            background: rgba(5, 150, 105, 0.075);
+
+            opacity: 0;
+
+            transform: translate(-50%, -50%) scale(0.7);
+
+            transition:
+                opacity 0.25s ease,
+                transform 0.25s ease;
+        }
+
+        // Линии плюса
+        &-line {
+            position: absolute;
+
+            left: 50%;
+            top: 50%;
+
+            width: 23px;
+            height: 1.25px;
+
+            border-radius: 2px;
+
+            background: currentColor;
+
+            z-index: 2;
+
+            transition:
+                width 0.25s ease,
+                background-color 0.2s ease;
+
+            &_horizontal {
+                transform: translate(-50%, -50%);
+            }
+
+            &_vertical {
+                transform: translate(-50%, -50%) rotate(90deg);
+            }
+        }
     }
 
     &__answer {
@@ -132,7 +211,11 @@
     }
 }
 
-// Мобильная версия (до 768px)
+
+// -----------------------------------------
+// Планшет / небольшие экраны
+// -----------------------------------------
+
 @media (max-width: 1100px) {
     .questions-v2 {
         padding: 72px 24px;
@@ -158,13 +241,36 @@
         }
 
         &__question {
-            padding: 16px 20px;
+            padding: 16px 16px 16px 20px;
             font-size: 14px;
         }
 
         &__icon {
-            font-size: 18px;
+            width: 46px;
+            height: 46px;
+            flex-basis: 46px;
             margin-left: 12px;
+
+            &-circle {
+                width: 46px;
+                height: 46px;
+            }
+
+            &-line {
+                width: 21px;
+            }
+        }
+
+        &__question:hover {
+            .questions-v2__icon {
+                .questions-v2__icon-circle {
+                    transform: translate(-50%, -50%) scale(1.05);
+                }
+
+                .questions-v2__icon-line {
+                    width: 22px;
+                }
+            }
         }
 
         &__answer-text {
@@ -174,7 +280,11 @@
     }
 }
 
-// Мобильная версия (до 430px)
+
+// -----------------------------------------
+// Мобильная версия
+// -----------------------------------------
+
 @media (max-width: 430px) {
     .questions-v2 {
         padding: 40px 20px;
@@ -188,7 +298,35 @@
         }
 
         &__question {
-            padding: 12px 16px;
+            padding: 12px 12px 12px 16px;
+        }
+
+        &__icon {
+            width: 42px;
+            height: 42px;
+            flex-basis: 42px;
+            margin-left: 10px;
+
+            &-circle {
+                width: 42px;
+                height: 42px;
+            }
+
+            &-line {
+                width: 20px;
+            }
+        }
+
+        &__question:hover {
+            .questions-v2__icon {
+                .questions-v2__icon-circle {
+                    transform: translate(-50%, -50%) scale(1.04);
+                }
+
+                .questions-v2__icon-line {
+                    width: 21px;
+                }
+            }
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.308",
+  "version": "0.1.311",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [