🚧 [base] Añade nuevo componente menu
This commit is contained in:
parent
744bd700fc
commit
c0577a0773
15 changed files with 1249 additions and 7 deletions
|
|
@ -3,9 +3,3 @@
|
|||
.region--footer {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* PoweredBy component */
|
||||
|
||||
.poweredby {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
12
static/css/components.css
Normal file
12
static/css/components.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* Icon component */
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* PoweredBy component */
|
||||
|
||||
.poweredby {
|
||||
text-align: center;
|
||||
}
|
||||
309
static/css/menu.css
Normal file
309
static/css/menu.css
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
.menu {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 9999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--val-menu--color-bg);
|
||||
}
|
||||
|
||||
.menu__wrapper {
|
||||
padding-right: var(--val-gap);
|
||||
}
|
||||
.menu__wrapper a,
|
||||
.menu__wrapper button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu__nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu__nav li {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: var(--val-menu--line-padding) 0;
|
||||
line-height: var(--val-menu--line-height);
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu__nav li.menu__label,
|
||||
.menu__nav li > a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: var(--val-color--text);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu__nav li > a {
|
||||
border: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.menu__nav li:hover > a,
|
||||
.menu__nav li > a:focus {
|
||||
color: var(--val-menu--color-highlight);
|
||||
}
|
||||
.menu__nav li > a > i.menu__icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.menu__nav li .menu__subs {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--val-menu--color-bg);
|
||||
border-radius: var(--val-menu--border-radius);
|
||||
border-top: 3px solid var(--val-menu--color-highlight);
|
||||
z-index: 500;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
box-shadow: 0 4px 6px -1px var(--val-menu--color-border), 0 2px 4px -1px var(--val-menu--color-shadow);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.menu__nav li.menu__children:hover > .menu__subs,
|
||||
.menu__nav li.menu__children > a:focus + .menu__subs,
|
||||
.menu__nav li.menu__children .menu__subs:focus-within {
|
||||
margin-top: 0.4rem;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.menu__nav li .menu__items {
|
||||
min-width: var(--val-menu--item-width-min);
|
||||
max-width: var(--val-menu--item-width-max);
|
||||
}
|
||||
.menu__nav li .menu__items .menu__title {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: var(--val-menu--line-padding) 0;
|
||||
line-height: var(--val-menu--line-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--val-menu--color-highlight);
|
||||
text-transform: uppercase;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu__nav li .menu__items li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu__nav li .menu__mega {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu__nav li .menu__groups {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.menu__header,
|
||||
.menu__trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Applies <= 992px */
|
||||
@media only screen and (max-width: 62rem) {
|
||||
.menu {
|
||||
border-radius: var(--val-border-radius);
|
||||
}
|
||||
.menu__wrapper {
|
||||
padding-right: var(--val-gap-0-5);
|
||||
}
|
||||
.menu__wrapper button {
|
||||
margin: var(--val-gap-0-5) 0 var(--val-gap-0-5) var(--val-gap-0-5);
|
||||
}
|
||||
.menu__trigger {
|
||||
cursor: pointer;
|
||||
width: var(--val-menu--trigger-width);
|
||||
height: var(--val-menu--item-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu__trigger span {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 12.675% 0;
|
||||
border-radius: var(--val-border-radius);
|
||||
background: var(--val-color--text);
|
||||
}
|
||||
|
||||
.menu__nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--val-menu--side-width);
|
||||
height: 100%;
|
||||
z-index: 9099;
|
||||
overflow: hidden;
|
||||
background: var(--val-menu--color-bg);
|
||||
transform: translate(-100%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu__panel .menu__nav.active {
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.menu__nav li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu__nav li.menu__label,
|
||||
.menu__nav li > a {
|
||||
display: block;
|
||||
padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap);
|
||||
border-bottom: 1px solid var(--val-menu--color-border);
|
||||
}
|
||||
.menu__nav li ul li.menu__label,
|
||||
.menu__nav li ul li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.menu__nav li > a > i.menu__icon {
|
||||
position: absolute;
|
||||
top: var(--val-menu--line-padding);
|
||||
right: var(--val-menu--line-padding);
|
||||
font-size: 1.25rem;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.menu__nav li .menu__subs {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
border-top: 0;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
transform: translateX(0%);
|
||||
box-shadow: none;
|
||||
}
|
||||
.menu__nav li .menu__subs.active {
|
||||
display: block;
|
||||
}
|
||||
.menu__nav li .menu__subs > :first-child {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.menu__nav li .menu__items .menu__title {
|
||||
padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap);
|
||||
}
|
||||
|
||||
.menu__nav li .menu__groups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu__nav .menu__header {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
height: var(--val-menu--item-height);
|
||||
border-bottom: 1px solid var(--val-menu--color-border);
|
||||
background: var(--val-menu--color-bg);
|
||||
z-index: 501;
|
||||
}
|
||||
.menu__nav .menu__header .menu__title {
|
||||
padding: var(--val-menu--line-padding);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.menu__nav .menu__header .menu__close,
|
||||
.menu__nav .menu__header .menu__back {
|
||||
width: var(--val-menu--item-height);
|
||||
min-width: var(--val-menu--item-height);
|
||||
height: var(--val-menu--item-height);
|
||||
line-height: var(--val-menu--item-height);
|
||||
color: var(--val-color--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu__nav .menu__header .menu__close {
|
||||
font-size: 2.25rem;
|
||||
border-left: 1px solid var(--val-menu--color-border);
|
||||
}
|
||||
.menu__nav .menu__header .menu__back {
|
||||
font-size: 1.25rem;
|
||||
border-right: 1px solid var(--val-menu--color-border);
|
||||
display: none;
|
||||
}
|
||||
.menu__nav .menu__header.active .menu__back {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu__nav .menu__list {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9098;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu__overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
211
static/css/root.css
Normal file
211
static/css/root.css
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
:root {
|
||||
--val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--val-font-serif: "Lora","georgia",serif;
|
||||
--val-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
--val-font-family: var(--val-font-sans);
|
||||
|
||||
/* Font size */
|
||||
--val-fs--x3l: 2.5rem;
|
||||
--val-fs--x2l: 2rem;
|
||||
--val-fs--xl: 1.75rem;
|
||||
--val-fs--l: 1.5rem;
|
||||
--val-fs--m: 1.25rem;
|
||||
--val-fs--base: 1rem;
|
||||
--val-fs--s: 0.875rem;
|
||||
--val-fs--xs: 0.75rem;
|
||||
--val-fs--x2s: 0.5625rem;
|
||||
--val-fs--x3s: 0.375rem;
|
||||
|
||||
/* Font weight */
|
||||
--val-fw--light: 300;
|
||||
--val-fw--base: 400;
|
||||
--val-fw--bold: 500;
|
||||
|
||||
/* Line height */
|
||||
--val-lh--base: 1.5;
|
||||
--val-lh--header: 1.2;
|
||||
|
||||
--val-max-width: 90rem;
|
||||
/*
|
||||
--val-color-rgb: 33,37,41;
|
||||
--val-main--bg-rgb: 255,255,255;
|
||||
--val-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
|
||||
--line-height-base: 1.6875rem;
|
||||
--line-height-s: 1.125rem;
|
||||
--max-bg-color: 98.125rem;
|
||||
*/
|
||||
--val-gap: 1.125rem;
|
||||
/*
|
||||
--content-left: 5.625rem;
|
||||
--site-header-height-wide: var(--val-gap10);
|
||||
--container-padding: var(--val-gap);
|
||||
*/
|
||||
}
|
||||
/*
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--container-padding:var(--val-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
--grid-col-count: 6;
|
||||
--grid-gap: var(--val-gap);
|
||||
--grid-gap-count: calc(var(--grid-col-count) - 1);
|
||||
--grid-full-width: calc(100vw - var(--val-gap2) - var(--scrollbar-width));
|
||||
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
:root {
|
||||
--grid-col-count:14;
|
||||
--grid-gap: var(--val-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
:root {
|
||||
--scrollbar-width:0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--val-gap4));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(var(--max-width) - var(--val-gap4));
|
||||
}
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
--val-gap-0-15: calc(0.15 * var(--val-gap));
|
||||
--val-gap-0-25: calc(0.25 * var(--val-gap));
|
||||
--val-gap-0-35: calc(0.35 * var(--val-gap));
|
||||
--val-gap-0-5: calc(0.5 * var(--val-gap));
|
||||
--val-gap-0-75: calc(0.75 * var(--val-gap));
|
||||
--val-gap-1-5: calc(1.5 * var(--val-gap));
|
||||
--val-gap-2: calc(2 * var(--val-gap));
|
||||
|
||||
--primary-hue: 216;
|
||||
--primary-sat: 60%;
|
||||
--val-color--primary: hsl(var(--primary-hue), var(--primary-sat), 50%);
|
||||
--val-color--primary-light: hsl(var(--primary-hue), var(--primary-sat), 60%);
|
||||
--val-color--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 40%);
|
||||
--val-color--primary-link: hsl(var(--primary-hue), var(--primary-sat), 55%);
|
||||
--val-color--primary-link-hover: hsl(var(--primary-hue), var(--primary-sat), 30%);
|
||||
--val-color--primary-link-active: hsl(var(--primary-hue), var(--primary-sat), 70%);
|
||||
|
||||
--info-hue: 190;
|
||||
--info-sat: 90%;
|
||||
--val-color--info: hsl(var(--info-hue), var(--info-sat), 54%);
|
||||
--val-color--info-light: hsl(var(--info-hue), var(--info-sat), 70%);
|
||||
--val-color--info-dark: hsl(var(--info-hue), var(--info-sat), 45%);
|
||||
--val-color--info-link: hsl(var(--info-hue), var(--info-sat), 30%);
|
||||
--val-color--info-link-hover: hsl(var(--info-hue), var(--info-sat), 20%);
|
||||
--val-color--info-link-active: hsl(var(--info-hue), var(--info-sat), 40%);
|
||||
|
||||
--success-hue: 150;
|
||||
--success-sat: 50%;
|
||||
--val-color--success: hsl(var(--success-hue), var(--success-sat), 50%);
|
||||
--val-color--success-light: hsl(var(--success-hue), var(--success-sat), 68%);
|
||||
--val-color--success-dark: hsl(var(--success-hue), var(--success-sat), 38%);
|
||||
--val-color--success-link: hsl(var(--success-hue), var(--success-sat), 26%);
|
||||
--val-color--success-link-hover: hsl(var(--success-hue), var(--success-sat), 18%);
|
||||
--val-color--success-link-active: hsl(var(--success-hue), var(--success-sat), 36%);
|
||||
|
||||
--warning-hue: 44;
|
||||
--warning-sat: 100%;
|
||||
--val-color--warning: hsl(var(--warning-hue), var(--warning-sat), 50%);
|
||||
--val-color--warning-light: hsl(var(--warning-hue), var(--warning-sat), 60%);
|
||||
--val-color--warning-dark: hsl(var(--warning-hue), var(--warning-sat), 40%);
|
||||
--val-color--warning-link: hsl(var(--warning-hue), var(--warning-sat), 30%);
|
||||
--val-color--warning-link-hover: hsl(var(--warning-hue), var(--warning-sat), 20%);
|
||||
--val-color--warning-link-active: hsl(var(--warning-hue), var(--warning-sat), 38%);
|
||||
|
||||
--danger-hue: 348;
|
||||
--danger-sat: 86%;
|
||||
--val-color--danger: hsl(var(--danger-hue), var(--danger-sat), 50%);
|
||||
--val-color--danger-light: hsl(var(--danger-hue), var(--danger-sat), 60%);
|
||||
--val-color--danger-dark: hsl(var(--danger-hue), var(--danger-sat), 35%);
|
||||
--val-color--danger-link: hsl(var(--danger-hue), var(--danger-sat), 25%);
|
||||
--val-color--danger-link-hover: hsl(var(--danger-hue), var(--danger-sat), 10%);
|
||||
--val-color--danger-link-active: hsl(var(--danger-hue), var(--danger-sat), 30%);
|
||||
|
||||
--light-hue: 0;
|
||||
--light-sat: 0%;
|
||||
--val-color--light: hsl(var(--light-hue), var(--light-sat), 96%);
|
||||
--val-color--light-light: hsl(var(--light-hue), var(--light-sat), 98%);
|
||||
--val-color--light-dark: hsl(var(--light-hue), var(--light-sat), 92%);
|
||||
|
||||
--dark-hue: 0;
|
||||
--dark-sat: 0%;
|
||||
--val-color--dark: hsl(var(--dark-hue), var(--dark-sat), 25%);
|
||||
--val-color--dark-light: hsl(var(--dark-hue), var(--dark-sat), 40%);
|
||||
--val-color--dark-dark: hsl(var(--dark-hue), var(--dark-sat), 8%);
|
||||
--val-color--dark-link: hsl(var(--dark-hue), var(--dark-sat), 90%);
|
||||
--val-color--dark-link-hover: hsl(var(--dark-hue), var(--dark-sat), 100%);
|
||||
--val-color--dark-link-active: hsl(var(--dark-hue), var(--dark-sat), 70%);
|
||||
|
||||
|
||||
|
||||
|
||||
--gray-hue: 201;
|
||||
--gray-sat: 15%;
|
||||
--val-color--gray-5: hsl(var(--gray-hue), var(--gray-sat), 5%);
|
||||
--val-color--gray-10: hsl(var(--gray-hue), var(--gray-sat) ,11%);
|
||||
--val-color--gray-20: hsl(var(--gray-hue), var(--gray-sat),20%);
|
||||
--val-color--gray-45: hsl(var(--gray-hue), var(--gray-sat), 44%);
|
||||
--val-color--gray-60: hsl(var(--gray-hue), var(--gray-sat), 57%);
|
||||
--val-color--gray-65: hsl(var(--gray-hue), var(--gray-sat), 63%);
|
||||
--val-color--gray-70: hsl(var(--gray-hue), var(--gray-sat), 72%);
|
||||
--val-color--gray-90: hsl(var(--gray-hue), var(--gray-sat), 88%);
|
||||
--val-color--gray-95: hsl(var(--gray-hue), var(--gray-sat), 93%);
|
||||
--val-color--gray-100: hsl(var(--gray-hue), var(--gray-sat), 97%);
|
||||
|
||||
|
||||
|
||||
|
||||
--val-color--bg: #fafafa;
|
||||
--val-color--text: #212529;
|
||||
--val-color--white: #fff;
|
||||
|
||||
/*
|
||||
|
||||
|
||||
--color-text-neutral-soft: var(--color--gray-45);
|
||||
--color-text-neutral-medium: var(--color--gray-20);
|
||||
--color-text-neutral-loud: var(--color--gray-5);
|
||||
--color-text-primary-medium: var(--val-color--primary-40);
|
||||
--color-text-primary-loud: var(--val-color--primary-30);
|
||||
--color--black: #000;
|
||||
*/
|
||||
/*
|
||||
--color--red: #e33f1e;
|
||||
--color--gold: #fdca40;
|
||||
--color--green: #3fa21c;
|
||||
--header-height-wide-when-fixed: calc(6 * var(--val-gap));
|
||||
--mobile-nav-width: 31.25rem;
|
||||
*/
|
||||
--val-border-radius: 0.375rem;
|
||||
|
||||
/* Menu component */
|
||||
--val-menu--color-bg: var(--val-color--bg);
|
||||
--val-menu--color-highlight: #e91e63;
|
||||
--val-menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--val-menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--val-menu--line-padding: 0.625rem;
|
||||
--val-menu--line-height: calc(1.875rem + 1px);
|
||||
--val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height));
|
||||
--val-menu--item-width-min: 14rem;
|
||||
--val-menu--item-width-max: 20rem;
|
||||
--val-menu--item-gap: 1rem;
|
||||
--val-menu--border-radius: 0.625rem;
|
||||
--val-menu--trigger-width: var(--val-menu--item-height);
|
||||
--val-menu--side-width: 20rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue