ecomlab-components-next 0.1.269 → 0.1.272

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ConstructorComponents/Footer/CopyrightBox/CopyrightBox.js +9 -7
  2. package/dist/components/ConstructorComponents/Footer/CopyrightBox/CopyrightBox.scss +32 -29
  3. package/dist/components/ConstructorComponents/Footer/Footer.js +3 -20
  4. package/dist/components/ConstructorComponents/Footer/Footer.scss +196 -219
  5. package/dist/components/ConstructorComponents/Footer/FooterItem/FooterItem.scss +107 -99
  6. package/package.json +1 -1
package/dist/components/ConstructorComponents/Footer/CopyrightBox/CopyrightBox.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ // CopyrightBox/CopyrightBox.tsx
2
3
  'use client';
3
4
 
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -15,15 +16,16 @@ var CopyrightBox = exports.CopyrightBox = function CopyrightBox(_ref) {
15
16
  return /*#__PURE__*/_react["default"].createElement("section", {
16
17
  className: "copyright"
17
18
  }, /*#__PURE__*/_react["default"].createElement("p", {
18
- className: "footer__copyright"
19
+ className: "copyright__text"
19
20
  }, "\xA9 \u041E\u041E\u041E \u0415\u041A\u041E\u041C\u0421\u0415\u041B\u041B\u0415\u0420, ", new Date().getFullYear(), " \u0433. \u0412\u0441\u0435 \u043F\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043D\u044B."), /*#__PURE__*/_react["default"].createElement(_link["default"], {
20
21
  href: userAgreement ? userAgreement : "/article/publichnaja_oferta_predlozhenie_o_zakljuchenii_dogovora_okazanija_uslug_distantsionnym_sposobom/6863",
21
- className: "footer__copyright"
22
+ className: "copyright__link"
22
23
  }, "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0435 \u0441\u043E\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435"), /*#__PURE__*/_react["default"].createElement(_link["default"], {
23
24
  href: privacyPolicy ? privacyPolicy : "/article/politika_konfidentsialnosti/6734",
24
- className: "footer__copyright"
25
- }, "\u041F\u043E\u043B\u0438\u0442\u0438\u043A\u0430 \u043A\u043E\u043D\u0444\u0438\u0434\u0435\u043D\u0446\u0438\u0430\u043B\u044C\u043D\u043E\u0441\u0442\u0438"), /*#__PURE__*/_react["default"].createElement(_link["default"], {
26
- href: "#",
27
- className: "footer__copyright"
28
- }, "\u0420\u043E\u0441\u0441\u0438\u044F"));
25
+ className: "copyright__link"
26
+ }, "\u041F\u043E\u043B\u0438\u0442\u0438\u043A\u0430 \u043A\u043E\u043D\u0444\u0438\u0434\u0435\u043D\u0446\u0438\u0430\u043B\u044C\u043D\u043E\u0441\u0442\u0438"), /*#__PURE__*/_react["default"].createElement("p", {
27
+ className: "copyright__text"
28
+ }, "\u0420\u043E\u0441\u0441\u0438\u044F"), /*#__PURE__*/_react["default"].createElement("p", {
29
+ className: "copyright__text"
30
+ }, "\u0411\u0435\u0437\u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u0434\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446 \u0438 \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u044B\u0445 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0442\u0435\u043B\u0435\u0439"));
29
31
  };
package/dist/components/ConstructorComponents/Footer/CopyrightBox/CopyrightBox.scss CHANGED
@@ -1,35 +1,38 @@
1
- * {
2
- body {
1
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
2
+ @import '../../variables.scss';
3
3
 
4
- .copyright {
5
- display: flex;
6
- flex-direction: row;
7
- justify-content: space-between;
8
- max-width: 100%;
9
- flex-wrap: wrap;
10
- column-gap: 32px;
11
- row-gap: 1em;
12
- width: 100%;
13
- margin-right: auto;
4
+ .copyright {
5
+ font-family: 'Manrope', sans-serif;
6
+ display: flex;
7
+ align-items: center;
8
+ gap: 24px;
9
+ flex-wrap: wrap;
14
10
 
15
- & .footer__link {
16
- color: #8B8B8B;
17
- font-family: "Golos Text";
18
- font-size: 0.75em;
19
- font-style: normal;
20
- font-weight: 400;
21
- padding-left: 2em;
22
- padding-right: 2em;
23
- text-align: center;
24
- }
11
+ * {
12
+ font-family: 'Manrope', 'Golos Text', sans-serif !important;
13
+ }
14
+
15
+ &__text {
16
+ font-size: 12px;
17
+ color: rgba(255, 255, 255, 0.4);
18
+ margin: 0;
19
+ }
25
20
 
26
- & .country {
27
- justify-self: flex-end;
28
- margin-left: auto;
29
- border-left: none;
30
- width: 100px;
31
- margin-top: 0;
32
- }
21
+ &__link {
22
+ font-size: 12px;
23
+ color: rgba(255, 255, 255, 0.4);
24
+ text-decoration: none;
25
+ transition: color 0.2s;
26
+
27
+ &:hover {
28
+ color: white;
33
29
  }
34
30
  }
31
+ }
32
+
33
+ // Мобильная версия (до 430px)
34
+ @media (max-width: 430px) {
35
+ .copyright {
36
+ gap: 12px;
37
+ }
35
38
  }
package/dist/components/ConstructorComponents/Footer/Footer.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ // Footer.tsx
2
3
  'use client';
3
4
 
4
5
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -12,7 +13,6 @@ var _FooterItem = require("./FooterItem/FooterItem");
12
13
  var _image = _interopRequireDefault(require("next/image"));
13
14
  var _bxChevronDown = _interopRequireDefault(require("./img/bx-chevron-down.svg"));
14
15
  var _CopyrightBox = require("./CopyrightBox/CopyrightBox");
15
- var _mir = _interopRequireDefault(require("./img/mir.png"));
16
16
  require("./Footer.scss");
17
17
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -23,7 +23,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
23
23
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
24
24
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
25
25
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
26
- var transactionPlatforms = [_mir["default"]];
27
26
  var Footer = function Footer(_ref) {
28
27
  var footerItems = _ref.footerItems,
29
28
  _ref$service = _ref.service,
@@ -88,7 +87,7 @@ var Footer = function Footer(_ref) {
88
87
  }, "8(800)301-65-63")), /*#__PURE__*/_react["default"].createElement("li", {
89
88
  className: "footer__list_item"
90
89
  }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
91
- href: "mailto:info@ecomru.ru ",
90
+ href: "mailto:info@ecomru.ru",
92
91
  className: "footer__link address__link_mail"
93
92
  }, "info@ecomru.ru"))))))), /*#__PURE__*/_react["default"].createElement("div", {
94
93
  className: "footer__bottom"
@@ -97,22 +96,6 @@ var Footer = function Footer(_ref) {
97
96
  }, /*#__PURE__*/_react["default"].createElement(_CopyrightBox.CopyrightBox, {
98
97
  privacyPolicy: privacyPolicy,
99
98
  userAgreement: userAgreement
100
- })), /*#__PURE__*/_react["default"].createElement("div", {
101
- className: "footer__org_info",
102
- style: {
103
- width: '100%',
104
- display: 'flex'
105
- }
106
- }, /*#__PURE__*/_react["default"].createElement("div", {
107
- className: "footer__org-inner"
108
- }, /*#__PURE__*/_react["default"].createElement("span", {
109
- className: "footer__copyright"
110
- }, "\u0411\u0435\u0437\u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u0434\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446 \u0438 \u0438\u043D\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043B\u044C\u043D\u044B\u0445 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0442\u0435\u043B\u0435\u0439"), transactionPlatforms === null || transactionPlatforms === void 0 ? void 0 : transactionPlatforms.map(function (el, ind) {
111
- return /*#__PURE__*/_react["default"].createElement(_image["default"], {
112
- src: el,
113
- alt: "\u0424\u043E\u0442\u043E \u043F\u043B\u0430\u0442\u0435\u0436\u043D\u043E\u0439 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B",
114
- key: el + ind
115
- });
116
- }))))));
99
+ })))));
117
100
  };
118
101
  var _default = exports["default"] = Footer;
package/dist/components/ConstructorComponents/Footer/Footer.scss CHANGED
@@ -1,277 +1,254 @@
1
- body {
2
- .footer {
3
- position: relative;
4
- display: flex;
5
- flex-direction: column;
6
- width: 100%;
7
- height: auto;
8
- background-color: #fff;
9
- padding: 22px 60px;
10
-
11
- // Заголовок
1
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
2
+ @import '../variables.scss';
12
3
 
13
- &__content {
14
- max-width: 1440px;
15
- display: flex;
16
- flex-direction: column;
17
- width: 100%;
18
- margin-left: auto;
19
- margin-right: auto;
20
- padding-left: 0px;
21
- padding-right: 0px;
22
- }
4
+ .footer {
5
+ font-family: 'Manrope', sans-serif;
6
+ background: $green-forest;
7
+ color: rgba(255, 255, 255, 0.6);
8
+ width: 100%;
23
9
 
24
- &__address {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 1em;
28
- max-width: 204px;
29
- }
10
+ * {
11
+ font-family: 'Manrope', 'Golos Text', sans-serif !important;
12
+ }
30
13
 
31
- // вверхняя часть одвала
32
- &__upper-box {
33
- display: flex;
34
- flex-direction: column;
35
- width: 100%;
36
- gap: 2.5em;
37
- height: 100%;
38
- justify-content: center;
39
- }
14
+ &__content {
15
+ max-width: 1280px;
16
+ margin: 0 auto;
17
+ padding: 60px 40px;
18
+ }
40
19
 
41
- // нижняя часть подвала
20
+ &__upper-box {
21
+ padding-bottom: 48px;
22
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
23
+ }
42
24
 
43
- &__bottom {
44
- display: flex;
45
- gap: 32px;
46
- flex-direction: column;
47
- padding-top: 32px;
48
- padding-bottom: 32px;
49
- }
25
+ &__nav {
26
+ display: grid;
27
+ grid-template-columns: repeat(5, 1fr);
28
+ gap: 48px;
29
+ }
50
30
 
51
- &__bottom-box {
31
+ &__item {
32
+ .footer__title-point {
52
33
  display: flex;
53
- align-items: flex-start;
54
- width: 100%;
55
- margin-left: auto;
56
- margin-right: auto;
57
-
58
- }
59
-
60
- &__link {
61
- display: inline-block;
62
- color: #333;
63
- font-family: "Golos Text";
64
- font-size: 16px;
65
- font-style: normal;
66
- font-weight: 400;
67
- // white-space: nowrap;
68
- max-height: 400px;
69
- transition: max-height 0.5s;
34
+ justify-content: space-between;
35
+ align-items: center;
36
+ cursor: pointer;
37
+ margin-bottom: 16px;
70
38
  }
71
39
 
72
- &__list,
73
- &__list_active {
74
- display: flex;
75
- flex-direction: column;
76
- flex-wrap: wrap;
77
- row-gap: 12px;
78
- column-gap: 22pxpx;
40
+ .footer__title {
41
+ color: white;
42
+ font-size: 13px;
43
+ font-weight: 700;
44
+ text-transform: uppercase;
45
+ letter-spacing: 0.5px;
79
46
  margin: 0;
80
- padding: 0;
81
47
  }
82
48
 
83
- &__nav {
49
+ .footer__btn-drop {
50
+ background: none;
51
+ border: none;
52
+ cursor: pointer;
53
+ padding: 0;
84
54
  display: flex;
85
- flex-wrap: wrap;
86
- width: 100%;
87
- column-gap: 3.33em;
88
- row-gap: 1.9em;
89
- justify-content: space-between;
90
- margin-left: auto;
91
- margin-right: auto;
92
- padding-top: 40px;
93
- border-top: 1px solid #D9D9D9;
94
- }
95
-
96
- &__item {
97
- display: block;
98
- width: auto;
99
- height: auto;
100
- max-width: 200px;
101
- }
102
-
103
- &__copyright {
104
- display: inline-block;
105
- color: #8B8B8B;
106
- font-family: "Golos Text";
107
- font-size: 16px;
108
- font-style: normal;
109
- font-weight: 400;
110
- white-space: wrap;
111
- }
55
+ align-items: center;
112
56
 
113
- &__btn-drop {
114
- display: none;
115
- }
116
-
117
- &__org-inner {
118
- display: flex;
119
- flex-wrap: wrap;
120
- column-gap: 32px;
121
- row-gap: 20px;
122
- justify-content: start !important;
57
+ img {
58
+ width: 20px;
59
+ height: 20px;
60
+ filter: brightness(0) invert(1);
61
+ opacity: 0.6;
62
+ transition: transform 0.3s;
63
+ }
123
64
  }
124
65
  }
125
66
 
126
- .country-box {
127
- width: 200px;
67
+ &__list {
68
+ list-style: none;
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 10px;
72
+ margin: 0;
73
+ padding: 0;
74
+ max-height: 500px;
75
+ overflow: visible;
76
+ transition: max-height 0.35s ease, opacity 0.3s ease;
128
77
  }
129
78
 
130
- .icon_square {
131
- display: block;
132
- margin: auto;
79
+ &__list_active {
80
+ list-style: none;
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 10px;
84
+ margin: 0;
85
+ padding: 0;
86
+ max-height: 0;
87
+ overflow: hidden;
88
+ opacity: 0;
89
+ visibility: hidden;
90
+ transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s;
133
91
  }
134
92
 
135
- @media (max-width: 1300px) {
136
- .country {
137
- margin-right: auto;
138
- width: auto;
139
- }
93
+ &__list_item {
94
+ line-height: 1.4;
140
95
  }
141
96
 
142
- @media (max-width: 1100px) {
143
-
144
- .footer {
145
- padding: 22px 24px;
97
+ &__link {
98
+ text-decoration: none;
99
+ color: rgba(255, 255, 255, 0.55);
100
+ font-size: 13px;
101
+ transition: color 0.2s;
146
102
 
147
- &__org_info {
148
- width: 50%;
149
- justify-content: start !important;
150
- }
103
+ &:hover {
104
+ color: white;
105
+ }
106
+ }
151
107
 
152
- &__bottom {
153
- flex-direction: row;
154
- align-items: flex-start;
155
- gap: 60px;
156
- }
108
+ &__address {
109
+ font-style: normal;
110
+ }
157
111
 
112
+ &__bottom {
113
+ padding-top: 28px;
114
+ display: flex;
115
+ justify-content: space-between;
116
+ align-items: center;
117
+ flex-wrap: wrap;
118
+ gap: 12px;
119
+ }
158
120
 
159
- }
121
+ &__bottom-box {
122
+ flex: 1;
123
+ }
160
124
 
161
- .copyright {
162
- flex-direction: column;
163
- align-items: start;
125
+ &__org_info {
126
+ display: flex;
127
+ justify-content: flex-end;
128
+ }
164
129
 
165
- & .footer__link {
166
- padding: 0;
167
- border: none;
168
- }
130
+ &__org-inner {
131
+ display: flex;
132
+ align-items: center;
133
+ gap: 16px;
134
+ flex-wrap: wrap;
135
+ }
169
136
 
170
- .country {
171
- margin-left: 0;
172
- width: auto;
173
- }
137
+ &__copyright {
138
+ font-size: 12px;
139
+ color: rgba(255, 255, 255, 0.4);
140
+ }
174
141
 
175
- .footer__copyright {
176
- border: none;
177
- }
142
+ @keyframes fadeUp {
143
+ from {
144
+ opacity: 0;
145
+ transform: translateY(24px);
178
146
  }
179
147
 
180
- .copyright {
181
-
182
- & .footer__link {
183
- border: none;
184
- }
185
-
186
- .footer__copyright {
187
- border: none;
188
- }
148
+ to {
149
+ opacity: 1;
150
+ transform: translateY(0);
189
151
  }
190
152
  }
153
+ }
191
154
 
192
- @media (max-width: 430px) {
193
- .copyright {
194
- flex-direction: column;
195
- align-items: start;
196
-
197
- & .footer__link {
198
- padding: 0;
199
- border: none;
200
- }
155
+ // Десктоп (от 1101px) - пункты всегда видны, кнопка скрыта
156
+ @media (min-width: 1101px) {
157
+ .footer {
201
158
 
202
- .country {
203
- margin-left: 0;
204
- width: auto;
159
+ &__item {
160
+ .footer__btn-drop {
161
+ display: none;
205
162
  }
206
163
 
207
- .footer__copyright {
208
- border: none;
164
+ .footer__list_active {
165
+ max-height: 500px;
166
+ opacity: 1;
167
+ visibility: visible;
168
+ overflow: visible;
209
169
  }
210
170
  }
171
+ }
172
+ }
211
173
 
212
- .footer {
213
- padding: 22px 16px;
214
-
215
-
216
- &__bottom {
217
- flex-direction: column;
218
- align-items: flex-start;
219
- gap: 1em;
220
- }
174
+ // Планшет/ноутбук (до 1100px)
175
+ @media (max-width: 1100px) {
176
+ .footer {
177
+ &__content {
178
+ padding: 60px 24px;
179
+ }
221
180
 
222
- &__org_info {
223
- justify-content: start !important;
224
- }
181
+ &__nav {
182
+ grid-template-columns: repeat(1, 1fr);
183
+ gap: 16px;
184
+ }
225
185
 
226
- &__btn-drop {
227
- display: inline-block;
186
+ &__item {
187
+ .footer__btn-drop {
188
+ display: block;
228
189
  }
190
+ }
229
191
 
230
- &__upper-box {
231
- border-bottom: none;
232
- }
192
+ // На планшете неактивный список (скрытый)
193
+ &__list_active {
194
+ max-height: 0;
195
+ opacity: 0;
196
+ visibility: hidden;
197
+ overflow: hidden;
198
+ }
233
199
 
234
- &__item {
235
- border-bottom: 1px #D9D9D9 solid;
236
- }
200
+ // На планшете активный список (открытый)
201
+ &__list {
202
+ max-height: 500px;
203
+ opacity: 1;
204
+ visibility: visible;
205
+ overflow: visible;
206
+ }
207
+ }
208
+ }
237
209
 
238
- &__btn-drop {
239
- cursor: pointer;
240
- background-color: inherit;
241
- border: none;
242
- }
210
+ // Мобильная версия (до 430px)
211
+ @media (max-width: 430px) {
212
+ .footer {
213
+ &__content {
214
+ padding: 40px 20px ;
215
+ }
243
216
 
244
- &__title-point {
245
- display: flex;
246
- justify-content: space-between;
247
- min-height: 40px;
248
- align-items: center;
249
- width: 100%;
250
- gap: 24px;
251
- cursor: pointer;
252
- }
217
+ &__upper-box {
218
+ padding-bottom: 32px;
219
+ }
253
220
 
254
- &__title {
255
- margin-bottom: 0;
256
- }
221
+ &__bottom {
222
+ flex-direction: column;
223
+ align-items: flex-start;
224
+ padding-top: 20px;
225
+ }
257
226
 
258
- &__nav {
259
- padding-top: 0;
260
- flex-direction: column;
261
- gap: 0;
262
- }
227
+ &__org_info {
228
+ justify-content: flex-start;
229
+ width: 100%;
230
+ }
263
231
 
264
- &__list {
265
- padding-top: 12px;
266
- padding-bottom: 12px;
232
+ &__item {
233
+ .footer__btn-drop {
234
+ display: block;
267
235
  }
236
+ }
268
237
 
269
- &__list_active {
270
- transition: max-height 0.5s;
271
- max-height: 0;
272
- overflow: hidden;
273
- }
238
+ // На мобильных неактивный список (скрытый)
239
+ &__list_active {
240
+ max-height: 0;
241
+ opacity: 0;
242
+ visibility: hidden;
243
+ overflow: hidden;
274
244
  }
275
245
 
246
+ // На мобильных активный список (открытый)
247
+ &__list {
248
+ max-height: 500px;
249
+ opacity: 1;
250
+ visibility: visible;
251
+ overflow: visible;
252
+ }
276
253
  }
277
254
  }
package/dist/components/ConstructorComponents/Footer/FooterItem/FooterItem.scss CHANGED
@@ -1,127 +1,135 @@
1
- .footer {
1
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
2
+ @import '../../variables.scss';
2
3
 
3
- // Заголовок
4
- &__title {
5
- margin-bottom: 1em;
6
- color: #333;
7
- font-family: "Golos Text";
8
- font-size: 20px;
9
- font-style: normal;
10
- font-weight: 500;
4
+ .footer__item {
5
+ .footer__title-point {
6
+ display: flex;
7
+ justify-content: space-between;
8
+ align-items: center;
9
+ cursor: pointer;
10
+ margin-bottom: 16px;
11
11
  }
12
12
 
13
- // нижняя часть подвала
14
-
15
- &__item {
16
- display: block;
17
- width: 100%;
18
- width: auto;
19
- height: auto;
13
+ .footer__title {
14
+ color: white;
15
+ font-size: 13px;
16
+ font-weight: 700;
17
+ text-transform: uppercase;
18
+ letter-spacing: 0.5px;
19
+ margin: 0;
20
20
  }
21
21
 
22
- &__copyright {
23
- color: grey;
24
- display: inline-block;
25
- font-family: 'Inter';
26
- font-style: normal;
27
- font-weight: 400;
28
- font-size: 0.75em;
29
- // white-space: nowrap;
22
+ .footer__btn-drop {
23
+ background: none;
24
+ border: none;
25
+ cursor: pointer;
26
+ padding: 0;
27
+ display: flex;
28
+ align-items: center;
29
+
30
+ img {
31
+ width: 20px;
32
+ height: 20px;
33
+ filter: brightness(0) invert(1);
34
+ opacity: 0.6;
35
+ transition: transform 0.3s;
36
+ }
30
37
  }
31
38
  }
32
39
 
33
- .icon_square {
34
- display: block;
35
- margin: auto;
40
+ .footer__list {
41
+ list-style: none;
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: 10px;
45
+ margin: 0;
46
+ padding: 0;
47
+ max-height: 800px;
48
+ overflow: visible;
49
+ transition: max-height 0.35s ease, opacity 0.3s ease;
36
50
  }
37
51
 
38
- .address__link {
39
- font-family: 'Inter';
40
- font-style: normal;
41
- font-weight: 400;
42
- font-size: 0.75em;
43
- color: #121212;
44
-
45
- &_tel,
46
- &_mail,
47
- &_send,
48
- &_geol {
49
- &::before {
50
- content: "";
51
- display: inline-block;
52
- background-repeat: no-repeat;
53
- background-position: center;
54
- background-size: 16px;
55
- width: 16px;
56
- height: 16px;
57
- margin-right: 0.75em;
58
- vertical-align: middle;
59
- }
60
- }
61
-
62
- &_send::before {
63
- background-image: url('./img/send-message.svg');
64
- }
52
+ .footer__list_active {
53
+ list-style: none;
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: 10px;
57
+ margin: 0;
58
+ padding: 0;
59
+ max-height: 0;
60
+ overflow: hidden;
61
+ opacity: 0;
62
+ visibility: hidden;
63
+ transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s;
64
+ }
65
65
 
66
- &_tel::before {
67
- background-image: url('./img/tel.svg');
68
- }
66
+ .footer__list_item {
67
+ line-height: 1.4;
68
+ }
69
69
 
70
- &_mail::before {
71
- background-image: url('./img/mail.svg')
72
- }
70
+ .footer__link {
71
+ text-decoration: none;
72
+ color: rgba(255, 255, 255, 0.55);
73
+ font-size: 13px;
74
+ transition: color 0.2s;
73
75
 
74
- &_geol::before {
75
- background-image: url('./img/point.svg');
76
+ &:hover {
77
+ color: white;
76
78
  }
77
-
78
79
  }
79
80
 
80
-
81
-
82
- @media (max-width: 1200px) {
83
- .footer__nav {
84
- display: flex;
85
- justify-content: space-evenly;
81
+ // Десктоп (от 1101px) - пункты всегда видны
82
+ @media (min-width: 1101px) {
83
+ .footer__btn-drop {
84
+ display: none;
86
85
  }
87
86
 
88
- .copyright {
89
- & .country {
90
- justify-self: flex-end;
91
- margin-left: 0;
92
- border-left: none;
93
- padding-right: 2em;
94
- }
87
+ .footer__list_active {
88
+ max-height: 800px;
89
+ opacity: 1;
90
+ visibility: visible;
91
+ overflow: visible;
95
92
  }
96
93
  }
97
94
 
95
+ // Планшет/ноутбук (до 1100px) - кнопка видна, пункты скрыты по умолчанию
98
96
  @media (max-width: 1100px) {
99
- .copyright {
100
- flex-direction: column;
101
- align-items: center;
102
-
103
- & .footer__link {
104
- border: none;
105
- }
106
-
107
- .footer__copyright {
108
- border: none;
109
- }
110
-
111
- & .country {
112
- justify-self: flex-end;
113
- margin-left: auto;
114
- border-left: none;
115
- padding-right: 2em;
116
- }
97
+ .footer__btn-drop {
98
+ display: block;
99
+ }
100
+
101
+ .footer__list_active {
102
+ max-height: 0;
103
+ opacity: 0;
104
+ visibility: hidden;
105
+ overflow: hidden;
106
+ }
107
+
108
+ .footer__list {
109
+ max-height: 800px;
110
+ opacity: 1;
111
+ visibility: visible;
112
+ overflow: visible;
117
113
  }
118
114
  }
119
115
 
116
+ // Мобильная версия (до 430px)
120
117
  @media (max-width: 430px) {
121
- .footer {
122
-
123
- &__item {
124
- max-width: 100% !important;
125
- }
118
+ .footer__btn-drop {
119
+ display: block;
120
+ }
121
+
122
+ .footer__list_active {
123
+ max-height: 0;
124
+ opacity: 0;
125
+ visibility: hidden;
126
+ overflow: hidden;
127
+ }
128
+
129
+ .footer__list {
130
+ max-height: 800px;
131
+ opacity: 1;
132
+ visibility: visible;
133
+ overflow: visible;
126
134
  }
127
135
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.269",
3
+ "version": "0.1.272",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "files": [