Added WIP Menu
This commit is contained in:
403
src/components/Page/Menu/Menu.module.css
Normal file
403
src/components/Page/Menu/Menu.module.css
Normal file
@@ -0,0 +1,403 @@
|
||||
@layer components {
|
||||
/* === MenuGrid === */
|
||||
|
||||
.menu {
|
||||
pointer-events: none;
|
||||
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
top: var(--el-header-height);
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"area_1"
|
||||
"area_2"
|
||||
"area_3"
|
||||
"area_4"
|
||||
"area_5";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
gap: 0;
|
||||
gap: var(--spacing-cozy);
|
||||
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - var(--el-header-height));
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
background-color: var(--color-palette-charcoal-gray);
|
||||
|
||||
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
|
||||
|
||||
&.isOpen {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (--bp-tablet) {
|
||||
@mixin px var(--spacing-comfortable);
|
||||
|
||||
grid-template-areas:
|
||||
"area_1"
|
||||
"area_2"
|
||||
"area_3"
|
||||
"area_4"
|
||||
"area_5";
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: var(--spacing-comfortable);
|
||||
}
|
||||
|
||||
@media screen and (--bp-desktop) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"area_4 area_4 area_3 area_3 area_3 area_3 area_2"
|
||||
"area_4 area_4 area_3 area_3 area_3 area_3 area_2"
|
||||
"area_5 area_5 area_3 area_3 area_3 area_3 area_2"
|
||||
"area_5 area_5 area_3 area_3 area_3 area_3 area_1"
|
||||
"area_5 area_5 area_3 area_3 area_3 area_3 area_1";
|
||||
grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr 1fr 4fr;
|
||||
grid-template-rows: 3fr 1fr 2.5fr 1.5fr 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* === MenuArea === */
|
||||
.area {
|
||||
/* === AREA VARIABLES === */
|
||||
--area-bg: transparent;
|
||||
--area-border: transparent;
|
||||
--area-animation-keyframe: none;
|
||||
--area-animation-duration: 0s;
|
||||
--area-animation-timing: linear;
|
||||
--area-bg-filter: grayscale(100%) contrast(150) brightness(150);
|
||||
|
||||
/** === TITLE VARIABLES === */
|
||||
--title-color: var(--color-palette-light-silver);
|
||||
--title-font: var(--font-header);
|
||||
--title-font-size: var(--typo-size-2xl);
|
||||
--title-font-weight: var(--typo-weight-black);
|
||||
--title-line-height: 1;
|
||||
--title-transform: uppercase;
|
||||
--title-spacing: var(--typo-spacing-comfortable);
|
||||
--title-hover-color: var(--color-tertiary);
|
||||
--title-current-color: var(--color-primary);
|
||||
--title-current-bg: var(--color-primary);
|
||||
|
||||
/** === SUBLINK VARIABLES === */;
|
||||
--sublink-color: var(--color-palette-light-silver);
|
||||
--sublink-font: var(--font-header);
|
||||
--sublink-font-size: var(--typo-size-2xl);
|
||||
--sublink-font-weight: var(--typo-weight-black);
|
||||
--sublink-transform: uppercase;
|
||||
--sublink-spacing: var(--typo-spacing-relaxed);
|
||||
--sublink-line-height: var(--typo-leading-relaxed);
|
||||
--sublink-letter-spacing: var(--typo-spacing-relaxed);
|
||||
--sublink-current-color: var(--color-primary);
|
||||
--sublink-current-bg: var(--color-primary);
|
||||
|
||||
/** === SUBTITLE VARIABLES === **/
|
||||
--divider-color: var(--color-palette-light-silver);
|
||||
--divider-width: var(--size-6);
|
||||
--divider-height: var(--size-2);
|
||||
--divider-font: var(--font-mono);
|
||||
--divider-symbol: ⯆;
|
||||
--divider-font-size: var(--typo-size-2xl);
|
||||
--divider-padding: 0 var(--typo-spacing-cozy);
|
||||
--subtitle-color: var(--color-palette-light-silver);
|
||||
--subtitle-font: var(--font-mono);
|
||||
--subtitle-font-size: var(--typo-size-2xl);
|
||||
--subtitle-text-transform: uppercase;
|
||||
--subtitle-letter-spacing: var(--typo-spacing-cozy);
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: var(--size-1) solid var(--area-border);
|
||||
|
||||
text-align: center;
|
||||
|
||||
background: var(--area-bg);
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:not(.current) {
|
||||
&:hover {
|
||||
animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area_1 { grid-area: area_1; }
|
||||
.area_2 { grid-area: area_2; }
|
||||
.area_3 { grid-area: area_3; }
|
||||
.area_4 { grid-area: area_4; }
|
||||
.area_5 { grid-area: area_5; }
|
||||
|
||||
.hasBGImg {
|
||||
&:hover {
|
||||
.bgImg {
|
||||
animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bgImg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
filter: var(--area-bg-filter);
|
||||
|
||||
@media screen and (--bp-tablet-down) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === MenuTitle === */
|
||||
.title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mainlink {
|
||||
position: relative;
|
||||
|
||||
font-family: var(--title-font);
|
||||
font-size: var(--title-font-size);
|
||||
font-weight: var(--title-font-weight);
|
||||
line-height: var(--title-line-height);
|
||||
color: var(--title-color);
|
||||
text-transform: var(--title-transform);
|
||||
letter-spacing: var(--title-spacing);
|
||||
|
||||
transition: any 0.5s ease-in-out;
|
||||
|
||||
&:focus {
|
||||
&:hover {
|
||||
color: var(--title-current-color);
|
||||
}
|
||||
|
||||
@media screen and (--bp-tablet-down) {
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--title-current-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
pointer-events: none;
|
||||
|
||||
@media screen and (--bp-tablet-down) {
|
||||
&:hover {
|
||||
color: var(--title-current-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--bp-desktop) {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (--bp-tablet-down) {
|
||||
transition: border 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* === MenuSublinks === */
|
||||
.list {
|
||||
@media screen and (--bp-tablet-down) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sublink {
|
||||
position: relative;
|
||||
|
||||
font-family: var(--sublink-font);
|
||||
font-size: var(--sublink-font-size);
|
||||
font-weight: var(--sublink-font-weight);
|
||||
line-height: var(--sublink-line-height);
|
||||
color: var(--sublink-color);
|
||||
text-transform: var(--sublink-transform);
|
||||
letter-spacing: var(--sublink-spacing);;
|
||||
|
||||
&:not(.current),
|
||||
&:not(.focus) {
|
||||
transition: var(--sublink-hover-transition);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
font-family: var(--sublink-hover-decorator-font);
|
||||
opacity: 0;
|
||||
transition: var(--sublink-hover-decorator-transition);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: var(--sublink-hover-decorator-left-symbol);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: var(--sublink-hover-decorator-right-symbol);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--sublink-hover-color);
|
||||
|
||||
&::before {
|
||||
top: var(--sublink-hover-decorator-left-pos-y);
|
||||
left: var(--sublink-hover-decorator-left-pos-x);
|
||||
transform: var(--sublink-hover-decorator-left-transform);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: var(--sublink-hover-decorator-right-pos-y);
|
||||
right: var(--sublink-hover-decorator-rightt-pos-x);
|
||||
transform: var(--sublink-hover-decorator-right-transform);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:hover {
|
||||
color: var(--sublink-current-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* === MenuSubtitle === */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
|
||||
@media screen and (--bp-tablet-down) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === UTILITY Classes */
|
||||
@media screen and (--bp-desktop) {
|
||||
.pos_tr {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
.pos_tc {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pos_tl {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.pos_cr {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1em;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.pos_c {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.pos_cl {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1em;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.pos_br {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
.pos_bc {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pos_bl {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
|
||||
& * {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-lr {
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
& * {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
}
|
||||
|
||||
.sideways-rl {
|
||||
writing-mode: sideways-rl;
|
||||
|
||||
& * {
|
||||
writing-mode: sideways-rl;
|
||||
}
|
||||
}
|
||||
|
||||
.sideways-lr {
|
||||
writing-mode: sideways-lr;
|
||||
|
||||
& * {
|
||||
writing-mode: sideways-lr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* === CATEGORY Variants === */
|
||||
@media screen and (--bp-desktop) {
|
||||
.meta {}
|
||||
.kitchensink {}
|
||||
.awq {}
|
||||
.worldburner {}
|
||||
.chainbreaker {}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user