ecomlab-components-next 0.1.140 → 0.1.141

package/dist/components/ConstructorComponents/Tariff/TariffPlan.scss

@@ -1,4 +1,4 @@
-.tariffs-plan {
+.tariffs-plan-2 {
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -6,6 +6,7 @@
     margin-right: auto;
     width: 100%;
     height: 100%;
+    min-width: 1110px;
 
     &__title {
         color: black;
@@ -16,6 +17,10 @@
         line-height: 1.2;
     }
 
+    &__content {
+        width: 100%;
+    }
+
     &__my-plan {
         display: flex;
         width: auto;
@@ -23,8 +28,9 @@
         align-items: center;
         gap: 9px;
         border-radius: 8px;
-        border: 1px solid #D7D7D7;
         background: #FFF;
+        border: 1px solid #EDEFED;
+        flex-wrap: wrap;
         color: #000;
         text-align: right;
         font-family: "Open Sans";
@@ -35,10 +41,14 @@
 
         span {
             color: #FF7A00;
-            font-size: 24px;
+            font-size: 20px;
             font-weight: 500;
             line-height: 32px;
         }
+
+        &__content {
+            width: 100%;
+        }
     }
 
     &__header {
@@ -50,9 +60,9 @@
     &__cards {
         display: flex;
         justify-content: flex-end;
-
-        gap: 16px;
-        max-width: 100%;
+        gap: 8px;
+        max-width: calc(100% - 240px);
+        margin-left: auto;
     }
 
     &__item {
@@ -84,7 +94,7 @@
             transition: 0.5s;
         }
 
-        .tariffs-plan__item-min {
+        .tariffs-plan-2__item-min {
             padding-top: 2px;
             padding-bottom: 2px;
             min-height: 36px;
@@ -100,6 +110,7 @@
         font-style: normal;
         font-weight: 500;
         line-height: 1.4;
+        max-width: 240px;
     }
 
     &__item-section,
@@ -107,9 +118,10 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        min-width: 240px;
-        max-width: 240px;
-        margin-left: 16px;
+        min-width: calc(100%/6 - 48px/6  - 240px/6);
+        max-width: calc(100%/6 - 48px/6  - 240px/6);
+        margin-left: 0px;
+        margin-right: 8px;
     }
 
     &__item-section-label {
@@ -117,6 +129,8 @@
         width: 100%;
         max-width: 100%;
         margin-left: 0;
+        min-width: 240px;
+        max-width: 240px;
     }
 
     &__label {
@@ -136,7 +150,6 @@
         border: none;
         cursor: pointer;
         background-color: inherit;
-        margin-left: auto;
 
         &_hide {
             transform: rotate(-90deg);
@@ -276,11 +289,10 @@
         background-color: white;
         max-width: 100%;
         width: 100%;
-        border-radius: 10px;
         background: #FFF;
         margin-left: auto;
         margin-right: auto;
-        min-width: 800px;
+        min-width: 1300px;
 
         .title_tariffs {
             color: #0C2037;
@@ -336,8 +348,8 @@
 
             
 
-            .tariff-cards-min,
-            .tariff-cards-min_active {
+            .tariff-cards-2-min,
+            .tariff-cards-2-min_active {
                 display: flex;
                 width: 100%;
                 min-height: 28px;
@@ -378,8 +390,8 @@
                 }
             }
 
-            .tariff-cards-min_active,
-            .tariff-cards-min:hover {
+            .tariff-cards-2-min_active,
+            .tariff-cards-2-min:hover {
                 transition: 0.3s;
                 background-color: #ffffff;
 
@@ -400,17 +412,16 @@
         }
     }
 
-    .tariff-cards-group {
+    .tariff-cards-2-group {
         display: flex;
         gap: 28px;
         flex-wrap: wrap;
         margin-left: auto;
-        margin-right: auto;
     }
 
     .tariff-card {
         display: flex;
-        padding: 10px 14px;
+        padding: 8px;
         flex-direction: column;
         align-items: flex-start;
         gap: 6px;
@@ -418,31 +429,32 @@
         border-radius: 6px;
         border: 1px solid #D7D7D7;
         background: #FFF;
-        min-height: 190px;
-        min-width: 240px;
-        max-width: 240px;
+        min-height: 100px;
+        min-width: calc(100%/6 - 48px/6);
+        max-width: calc(100%/6 - 48px/6);
         position: relative;
 
         &__name {
             color: #FF7A00;
             font-family: "Golos Text";
-            font-size: 20px;
+            font-size: 16px;
             font-style: normal;
-            font-weight: 400;
+            font-weight: 600;
             line-height: 1.4;
         }
 
         &__sum-box {
             color: #000;
             white-space: nowrap;
-            font-size: 28px;
+            font-size: 18px;
             font-style: normal;
-            font-weight: 500;
+            font-weight: 600;
             line-height: 1.4;
 
             span {
                  font-family: "Golos Text" !important;
                  font-weight: 400;
+                  font-size: 14px;
             }
         }
 
@@ -450,11 +462,9 @@
             text-align: left;
             color: #606060;
             font-family: "Golos Text";
-            font-size: 16px;
+            font-size: 13px;
             font-style: normal;
             font-weight: 400;
-            line-height: 24px;
-            margin-top: 7px;
         }
 
         &__sticker {
@@ -475,11 +485,9 @@
             top: -13px;
             right: calc(50% - 133px/2);
         }
-    }
-}
 
-@media (max-width: 1439px) {
-    .tariffs-plan {
-        display: none;
+        .btn-basic {
+            margin-top: auto;
+        }
     }
 }

package/dist/components/TitlePage/TitlePage.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitlePage = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./TitlePage.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var TitlePage = exports.TitlePage = function TitlePage(_ref) {
+  var title = _ref.title,
+    _ref$medium = _ref.medium,
+    medium = _ref$medium === void 0 ? false : _ref$medium,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, medium ? /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "title-page_medium",
+    style: style
+  }, title) : /*#__PURE__*/_react["default"].createElement("h1", {
+    className: "title-page",
+    style: style
+  }, title));
+};

package/dist/components/TitlePage/TitlePage.scss

@@ -0,0 +1,13 @@
+.title-page {
+    color: #020617;
+    font-family: 'Open Sans';
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4;
+
+    &_medium {
+        @extend .title-page;
+        font-size: 18px;
+    }
+}

package/package.json

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