Files
commerce/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
2021-09-10 11:42:50 +07:00

81 lines
2.1 KiB
SCSS

@import "../../../../../styles/utilities";
.headerMenu {
padding-top: 1.6rem;
padding-bottom: 0.8rem;
@screen md {
@apply flex justify-between items-center;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
&.full {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
}
.left {
.top {
@apply flex justify-between items-center;
.iconCart {
}
}
.inputSearch {
margin-top: 2.4rem;
@screen lg {
min-width: 51.2rem;
max-width: 50%;
}
}
@screen md {
@apply flex items-center;
.top {
.iconCart {
@apply hidden;
}
}
.inputSearch {
margin-left: 4.8rem;
margin-top: 0;
}
}
}
.menu {
@apply hidden;
@screen md {
@apply flex items-center list-none;
> li {
@apply flex justify-center items-center w-full;
&:not(:last-child) {
margin-right: 4.8rem;
@screen lg {
margin-right: 6.4rem;
}
}
a {
@appy no-underline;
&:hover {
opacity: 0.8;
}
&.iconFavourite {
svg path {
fill: var(--negative);
}
}
}
.btnCart {
all: unset;
cursor: pointer;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);
opacity: 0.8;
}
}
}
}
}
}
}