1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 13:19:42 +02:00
codex.docs/src/frontend/styles/components/header.pcss
Peter Savchenko 237db3e472
chore(ui): a bunch of style updates (#235)
* chore(styles): typography updating started

* page styles updated

* page header nav fix, inline code style fix, table, navigator

* use arrow-right icon instead of "»" in bread crumbs

* a bunch of updates

* make content and write page styles more consistent

* rollback layout change

* upd color text second

* upd sidebar logo text color

* resovle someone's ts errors

* remove duplicated variables
2022-09-06 22:58:50 +03:00

97 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;
@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;
}
}
}
}
}