itube-specs 0.0.957 → 0.0.958
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.
- package/components/layout/header.vue +22 -4
- package/package.json +1 -1
|
@@ -164,18 +164,36 @@ function closeLanguage() {
|
|
|
164
164
|
|
|
165
165
|
/* Поиск живёт в своей колонке (свободный 1fr между лого и правым блоком), а не оверлеем
|
|
166
166
|
поверх всей строки: так он сжимается вместе с ней и на него ничто не наезжает */
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Поиск стоит строго по центру ШАПКИ, а не по центру свободного места: он растянут
|
|
170
|
+
* на всю строку сетки и центрирован `justify-self`. Иначе центр уезжал влево —
|
|
171
|
+
* правая группа (ниша, колокольчик, язык, вход) шире логотипа, и с добавлением
|
|
172
|
+
* переключателя ниш перекос дошёл до сотни пикселей.
|
|
173
|
+
*
|
|
174
|
+
* Наезжать при этом не на что: по обе стороны резервируется `--header-side-space`
|
|
175
|
+
* — ширина более широкой (правой) группы: ниша 54 + колокольчик, язык и вход.
|
|
176
|
+
* Считается БЕЗ бокового паддинга шапки, потому что `100%` у поиска — это уже
|
|
177
|
+
* контентная ширина. Не хватило места — поиск сужается, а боковые группы остаются
|
|
178
|
+
* на своих местах. Значение вынесено в переменную: у сайта без переключателя ниш
|
|
179
|
+
* правая группа уже, и он может его уменьшить.
|
|
180
|
+
*/
|
|
167
181
|
.layout-header__search {
|
|
182
|
+
--header-side-space: 358px;
|
|
183
|
+
|
|
168
184
|
@include from-br($brkpnt-burger) {
|
|
169
|
-
grid-column:
|
|
185
|
+
grid-column: 1 / -1;
|
|
170
186
|
grid-row: 1;
|
|
187
|
+
justify-self: center;
|
|
171
188
|
width: 100%;
|
|
172
189
|
min-width: 0;
|
|
173
|
-
|
|
174
|
-
|
|
190
|
+
|
|
191
|
+
// 24px — два column-gap шапки по бокам от поиска
|
|
192
|
+
max-width: min($search-max-width, calc(100% - 2 * var(--header-side-space) - 24px));
|
|
175
193
|
}
|
|
176
194
|
|
|
177
195
|
@include from-br(md) {
|
|
178
|
-
max-width: $search-max-width-md;
|
|
196
|
+
max-width: min($search-max-width-md, calc(100% - 2 * var(--header-side-space) - 24px));
|
|
179
197
|
}
|
|
180
198
|
}
|
|
181
199
|
|