1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-18 20:59:42 +02:00
codex.docs/src/frontend/styles/components/header.pcss
Peter Savchenko 7f51a72bcb
Some checks are pending
Build and push Docker image / build (push) Waiting to run
Release Drafter / update_release_draft (push) Waiting to run
fix(ui): broken sidebar, table of content and header on linux (#315)
* move squircle to only to active and hover states

* fix hover

* fix squircle in header

* fix toc

* rm redundant line
2024-04-26 13:47:43 +03:00

100 lines
1.6 KiB
Text

html {
scroll-padding-top: calc(var(--layout-height-header) + 50px);
}
.docs-header {
display: flex;
justify-content: space-between;
flex-shrink: 0;
padding: 12px var(--layout-padding-horizontal);
border-bottom: 1px solid var(--color-line-gray);
font-size: 18px;
flex-wrap: wrap;
box-sizing: border-box;
position: sticky;
top: 0;
background: white;
z-index: 10;
@media (--not-mobile){
height: var(--layout-height-header);
}
&__menu-link,
&__logo {
display: inline-block;
text-decoration: none;
align-self: center;
line-height: 24px;
}
&__logo {
padding: 4px 0;
font-weight: bold;
color: inherit;
}
&__menu-link {
font-weight: 500;
transition: background-color .13s;
@media (--not-mobile) {
padding: 4px 10px;
&:hover {
@apply --squircle;
}
}
&:hover {
background-color: var(--color-link-hover);
}
}
&__menu {
display: flex;
margin: 0;
gap: 10px;
padding-left: 0;
font-size: 16px;
@media (--mobile) {
margin-top: 6px;
flex-basis: 100%;
font-size: 14px;
}
li {
display: inline-flex;
align-items: center;
list-style: none;
@media (--mobile) {
margin-left: 0;
margin-right: 15px;
}
}
li&-add {
flex-shrink: 0;
&--desktop {
@media (--mobile) {
display: none;
}
}
&--mobile {
display: none;
@media (--mobile) {
display: block;
position: absolute;
right: 0;
top: 13px;
line-height: 1em;
}
}
}
}
}