957cf79e45
Add a cart button in the header (right of language switcher) that displays the number of items in parentheses when cart is not empty. Button opens the cart drawer on click and count updates dynamically when items are added/removed. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
119 lines
2 KiB
SCSS
119 lines
2 KiB
SCSS
@keyframes add-border {
|
|
from {
|
|
border-bottom-color: transparent;
|
|
}
|
|
to {
|
|
border-bottom: var(--grey-800);
|
|
}
|
|
}
|
|
|
|
#site-header {
|
|
position: fixed;
|
|
left: var(--padding-body);
|
|
top: 0px;
|
|
z-index: 900;
|
|
|
|
width: calc(100vw - var(--padding-body) * 2);
|
|
// padding: 0 var(--padding-body);
|
|
height: var(--header-h);
|
|
&.is-shrinked {
|
|
height: var(--header-h-shrinked);
|
|
// animation: add-border 0.2s linear 0.2s;
|
|
border-bottom: var(--border-light);
|
|
}
|
|
// transition: all ease-in 0.2s;
|
|
|
|
background-color: var(--color-bg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.site-title {
|
|
display: flex;
|
|
width: 120px;
|
|
transition: all ease-in 0.2s;
|
|
overflow: hidden;
|
|
svg {
|
|
fill: var(--color-txt);
|
|
}
|
|
}
|
|
&.is-shrinked {
|
|
.site-title {
|
|
width: 80px !important;
|
|
}
|
|
}
|
|
|
|
.header-left {
|
|
width: 90px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#toggle-lang {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75ch;
|
|
text-transform: uppercase;
|
|
color: var(--grey-400);
|
|
line-height: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
li.is-selected {
|
|
color: var(--color-txt);
|
|
}
|
|
}
|
|
|
|
.header-cart-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
color: var(--color-txt);
|
|
padding: 0;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.header-cart-count {
|
|
font-weight: normal;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
&:not(:empty)::before {
|
|
content: '(';
|
|
}
|
|
|
|
&:not(:empty)::after {
|
|
content: ')';
|
|
}
|
|
}
|
|
}
|