gorbenko.pavel
74 lines
2.2 KiB
SCSS
74 lines
2.2 KiB
SCSS
@import '../../../../styles/design-tokens';
|
|
|
|
.topnav {
|
|
background: $grad-header;
|
|
padding: 0 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 54px;
|
|
box-shadow: 0 1px 0 rgba(212,160,30,.35);
|
|
border-radius: $r-md $r-md 0 0;
|
|
// Без переноса: высота шапки фиксирована (54px), поэтому перенесённая
|
|
// строка вкладок вылезала бы за её пределы вместе с подчёркиванием.
|
|
// Вместо переноса вкладки скроллятся по горизонтали.
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-right: 28px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.brandText {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
letter-spacing: .4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-wrap: nowrap;
|
|
// min-width: 0 обязателен — иначе flex-элемент не сожмётся уже своего
|
|
// содержимого и overflow-x никогда не сработает.
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
// Делает контейнер offsetParent'ом для вкладок: автопрокрутка в TopNav.tsx
|
|
// считает offsetLeft относительно него. Без этого offsetLeft отсчитывался
|
|
// бы от body и прокрутка уезжала бы не туда.
|
|
position: relative;
|
|
|
|
// Полоса прокрутки на тёмной шапке выглядит инородно, скрываем её —
|
|
// вкладки остаются доступны свайпом/колесом.
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
&::-webkit-scrollbar { display: none; }
|
|
}
|
|
|
|
.tab {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
padding: 0 16px;
|
|
border: none;
|
|
background: 0;
|
|
color: rgba(255,255,255,.5);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: .18s;
|
|
height: 54px;
|
|
border-bottom: 2px solid transparent;
|
|
letter-spacing: .2px;
|
|
|
|
&:hover { color: rgba(255,255,255,.85); }
|
|
&.on { color: $gold-300; border-bottom-color: $gold-400; }
|
|
}
|