Initial commit to github
This commit is contained in:
Keith Solomon
19
styles/navigation/index.css
Normal file
19
styles/navigation/index.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Navigation component
|
||||
* A composite component consisting of
|
||||
* following components:
|
||||
* - nav-main-mega.php
|
||||
* - menu-items
|
||||
* - index.php
|
||||
* - nav-functional.php
|
||||
*
|
||||
* Choose one or the other for the main navigation, based on theme needs.
|
||||
*
|
||||
* @import 'nav-main-default';
|
||||
* @import 'nav-main-mega';
|
||||
*/
|
||||
|
||||
@import "./nav-functional.css";
|
||||
@import "./nav-aux.css";
|
||||
@import "./nav-main-default.css";
|
||||
@import "./nav-footer.css";
|
||||
36
styles/navigation/nav-aux.css
Normal file
36
styles/navigation/nav-aux.css
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Auxiliary Nav Styles
|
||||
*
|
||||
* Please review documentation upon first use, and, as-needed:
|
||||
* https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
|
||||
*/
|
||||
|
||||
.nav-aux {
|
||||
@apply relative flex flex-wrap gap-2 items-center justify-end p-0 m-0;
|
||||
|
||||
.menu-vdi {
|
||||
@apply relative flex flex-wrap gap-4 items-center gap-y-2 gap-x-4 p-0 m-0;
|
||||
|
||||
.menu-vdi__toggle {
|
||||
/* styles */
|
||||
@apply flex items-center gap-2;
|
||||
/* interaction */
|
||||
@apply focus-visible:underline hover:underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop overrides */
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-aux {
|
||||
@apply gap-4;
|
||||
|
||||
.menu-vdi {
|
||||
@apply justify-end;
|
||||
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
102
styles/navigation/nav-footer.css
Normal file
102
styles/navigation/nav-footer.css
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Footer Navigation
|
||||
*
|
||||
* Please review documentation upon first use, and, as-needed:
|
||||
* ___Link_Here___
|
||||
*/
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-footer .menu-vdi {
|
||||
@apply flex flex-col items-start justify-start p-0 m-0;
|
||||
|
||||
>li {
|
||||
>a {
|
||||
/* text */
|
||||
@apply font-normal leading-snug text-secondary text-18px;
|
||||
/* spacing & display */
|
||||
@apply mx-0 p-0 no-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media screen and (max-width: 62.5rem) {
|
||||
.nav-footer {
|
||||
.nav-footer__toggle {
|
||||
/* display */
|
||||
@apply text-primary p-3;
|
||||
}
|
||||
|
||||
.menu-vdi {
|
||||
@apply flex-col w-[95%] py-6;
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply py-2 px-7 flex-col;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
a,
|
||||
button {
|
||||
/* text */
|
||||
@apply font-normal leading-snug text-lg;
|
||||
/* spacing & display */
|
||||
@apply block w-full p-4;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply flex w-full justify-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-footer .menu-vdi {
|
||||
.menu-vdi__toggle {
|
||||
@apply font-semibold underline text-20px mt-3 pb-1;
|
||||
|
||||
>svg {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vdi__item--parent {
|
||||
@apply static;
|
||||
}
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply static block m-0 mb-3 p-0 pl-2 shadow-none;
|
||||
|
||||
>li {
|
||||
@apply w-full m-0 p-0;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
/* text */
|
||||
@apply font-normal leading-snug text-18px;
|
||||
/* spacing & display */
|
||||
@apply block w-full;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
|
||||
a {
|
||||
@apply block w-full;
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-vdi__item,
|
||||
.menu-vdi__item a {
|
||||
@apply p-0 text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
100
styles/navigation/nav-functional.css
Normal file
100
styles/navigation/nav-functional.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Functional Styles
|
||||
*
|
||||
* Please review documentation upon first use, and, as-needed:
|
||||
* https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
|
||||
*/
|
||||
|
||||
/* all sizes */
|
||||
.menu-vdi {
|
||||
@apply hidden;
|
||||
|
||||
>li {
|
||||
@apply list-none;
|
||||
>a {
|
||||
@apply focus-visible:underline hover:underline;
|
||||
}
|
||||
|
||||
a[aria-current="true"] {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.menu-vdi__toggle {
|
||||
&[aria-expanded="true"] {
|
||||
svg {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
+.menu-vdi__submenu {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply hidden container z-10;
|
||||
|
||||
/* should also put current page here */
|
||||
.menu-vdi__item--grandchild a {
|
||||
@apply no-underline focus-visible:underline hover:underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media screen and (max-width: 62.5rem) {
|
||||
#app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
|
||||
|
||||
.nav-main__toggle {
|
||||
.nav-toggle-hamburger { display: inline-block !important; }
|
||||
|
||||
.nav-toggle-x { display: none !important; }
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
.nav-toggle-hamburger { display: none !important; }
|
||||
|
||||
.nav-toggle-x { display: inline-block !important; }
|
||||
}
|
||||
}
|
||||
.nav-main {
|
||||
.nav-main__toggle[aria-expanded="true"] {
|
||||
+ul {
|
||||
@apply absolute flex;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vdi {
|
||||
@apply absolute right-0 z-10;
|
||||
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-aux {
|
||||
.menu-vdi__submenu {
|
||||
@apply absolute list-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-main__toggle {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.menu-vdi {
|
||||
@apply flex list-none;
|
||||
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply absolute list-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
102
styles/navigation/nav-main-default.css
Normal file
102
styles/navigation/nav-main-default.css
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles
|
||||
*
|
||||
* Please review documentation upon first use, and, as-needed:
|
||||
* TODO: Add documenation link here
|
||||
*/
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-main .menu-vdi {
|
||||
@apply flex items-center justify-end p-0 m-0;
|
||||
|
||||
>li {
|
||||
>a,
|
||||
>.menu-vdi__toggle {
|
||||
/* text*/
|
||||
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply mx-4 p-0 no-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media screen and (max-width: 62.5rem) {
|
||||
.nav-main {
|
||||
.nav-main__toggle {
|
||||
/* display */
|
||||
@apply text-white p-3;
|
||||
}
|
||||
|
||||
.menu-vdi {
|
||||
@apply flex-col bg-white w-[95%] right-0 z-10 py-6;
|
||||
top: var(--hgtHeader);
|
||||
min-height: calc(100vh - var(--hgtHeader));
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply py-2 px-7 flex-col;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
a,
|
||||
button {
|
||||
/* text */
|
||||
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply block w-full p-4;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply flex w-full justify-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.menu-vdi {
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.menu-vdi__item--parent {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply bg-white shadow-lg left-4 w-64 flex-col;
|
||||
top: calc(100% + 1rem);
|
||||
|
||||
>li {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
/* text */
|
||||
@apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply block w-full;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
|
||||
a {
|
||||
@apply block w-full;
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-vdi__item,
|
||||
.menu-vdi__item a {
|
||||
@apply p-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
styles/navigation/nav-main-mega.css
Normal file
129
styles/navigation/nav-main-mega.css
Normal file
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Main Navigation + Mega Menu Styles
|
||||
*
|
||||
* Please review documentation upon first use, and, as-needed:
|
||||
* https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
|
||||
*/
|
||||
|
||||
/* all sizes */
|
||||
.nav-main .menu-vdi {
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media screen and (max-width: 62.5rem) {
|
||||
.nav-main {
|
||||
.nav-main__toggle {
|
||||
/* display */
|
||||
@apply text-white p-3;
|
||||
}
|
||||
|
||||
.menu-vdi {
|
||||
@apply flex-col bg-white w-[95%] right-0 z-10 py-6;
|
||||
top: var(--hgtHeader);
|
||||
min-height: calc(100vh - var(--hgtHeader));
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply py-2 px-7 flex-col;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
a,
|
||||
button {
|
||||
/* text */
|
||||
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply block w-full p-4;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply flex w-full justify-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media screen and (min-width: 62.5rem) {
|
||||
.nav-main .menu-vdi {
|
||||
@apply flex items-center justify-end p-0 m-0;
|
||||
|
||||
>li {
|
||||
>a,
|
||||
>.menu-vdi__toggle {
|
||||
/* text */
|
||||
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply w-max mx-4 p-0 no-underline;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vdi__toggle {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.menu-vdi__item--parent {
|
||||
@apply relative;
|
||||
|
||||
/* Mega Menu */
|
||||
&:has(.menu-vdi__item--grandchild) {
|
||||
@apply static;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vdi__submenu {
|
||||
@apply bg-white shadow-lg left-4 w-64 flex-col;
|
||||
|
||||
top: calc(100% + 1rem);
|
||||
|
||||
>li {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.menu-vdi__item {
|
||||
/* text */
|
||||
@apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
|
||||
/* spacing & display */
|
||||
@apply block w-full;
|
||||
/* interaction */
|
||||
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
||||
|
||||
a {
|
||||
@apply block w-max;
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-vdi__item,
|
||||
.menu-vdi__item a {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
/* Mega Menu */
|
||||
&:has(.menu-vdi__item--grandchild) {
|
||||
@apply flex-row gap-x-8 right-0 ml-auto mr-0 p-4 w-max;
|
||||
|
||||
span {
|
||||
@apply font-bold text-xl underline w-max;
|
||||
}
|
||||
|
||||
a.menu-vdi__item,
|
||||
.menu-vdi__item a {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.menu-vdi__megaCol {
|
||||
@apply px-0 w-max;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user