feat: bootstrap Community Works Collaborative theme from starter
This commit is contained in:
Keith Solomon
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Navigation component
|
||||
* A composite component consisting of
|
||||
* following components:
|
||||
* - nav-main-mega.php
|
||||
* - menu-items
|
||||
* - index.php
|
||||
* - nav-functional.php
|
||||
*
|
||||
* Desktop Navigation Styles:
|
||||
* Choose one or the other for the main navigation, based on theme needs.
|
||||
* @import 'nav-main-default'; (standard dropdown)
|
||||
* @import 'nav-main-mega'; (mega menu style)
|
||||
*
|
||||
* Mobile Navigation Styles:
|
||||
* Choose one for mobile navigation behavior:
|
||||
* @import 'nav-mobile-accordion'; (traditional dropdown/accordion style)
|
||||
* @import 'nav-mobile-sliding'; (sliding viewport style)
|
||||
*/
|
||||
|
||||
@import "./nav-functional.css";
|
||||
@import "./nav-aux.css";
|
||||
|
||||
/* Mobile Navigation Style - Choose one of the following: */
|
||||
/* Traditional dropdown style */
|
||||
@import "./nav-main-default.css";
|
||||
/* Mega menu style */
|
||||
/* @import "./nav-main-mega.css"; */
|
||||
|
||||
/* Mobile Navigation Style - Choose one of the following: */
|
||||
/* Accordion/dropdown style */
|
||||
/* @import "./nav-mobile-accordion.css"; */
|
||||
/* Sliding viewport style */
|
||||
@import "./nav-mobile-sliding.css";
|
||||
|
||||
@import "./nav-footer.css";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles (Desktop Only)
|
||||
*
|
||||
* This file contains only desktop navigation styles.
|
||||
* For mobile navigation, choose one of:
|
||||
* - nav-mobile-accordion.css (traditional dropdown/accordion style)
|
||||
* - nav-mobile-sliding.css (sliding viewport style)
|
||||
*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Mobile Accordion Navigation
|
||||
*
|
||||
* Traditional mobile accordion/dropdown style navigation
|
||||
* Include this file for accordion-style mobile navigation
|
||||
*/
|
||||
|
||||
/* Mobile accordion navigation */
|
||||
@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;
|
||||
@apply absolute hidden; /* Hidden by default */
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Show menu when toggle button is expanded */
|
||||
.nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) {
|
||||
@apply !flex; /* Use !important to override hidden */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* VDI Navs & Menu - Mobile Sliding Viewport Navigation
|
||||
*
|
||||
* Sliding viewport style for mobile navigation where
|
||||
* users can navigate through menu levels by sliding between views
|
||||
* Include this file for sliding-style mobile navigation
|
||||
*/
|
||||
|
||||
/* Mobile sliding viewport navigation */
|
||||
@media screen and (max-width: 62.5rem) {
|
||||
.nav-main {
|
||||
.nav-main__toggle {
|
||||
/* display */
|
||||
@apply text-white p-3;
|
||||
}
|
||||
|
||||
.menu-vdi--sliding {
|
||||
@apply relative overflow-hidden bg-white w-[95%] right-0 z-10 py-6;
|
||||
@apply absolute hidden; /* Hidden by default */
|
||||
top: var(--hgtHeader);
|
||||
min-height: calc(100vh - var(--hgtHeader));
|
||||
|
||||
/* Container for all navigation levels */
|
||||
.menu-vdi__viewport {
|
||||
@apply flex transition-transform duration-300 ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Each navigation level */
|
||||
.menu-vdi__level {
|
||||
@apply w-full flex-shrink-0 flex-col;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* Back button for secondary levels */
|
||||
.menu-vdi__back {
|
||||
@apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-black hover:bg-secondary-200 focus-visible:bg-secondary-200 cursor-pointer;
|
||||
|
||||
svg {
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Level indicator for context */
|
||||
.menu-vdi__level-title {
|
||||
@apply p-4 border-b border-gray-200 font-bold text-lg text-center bg-gray-50;
|
||||
}
|
||||
|
||||
/* Navigation items in sliding mode */
|
||||
.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 items-center;
|
||||
|
||||
/* Arrow indicator for items with children */
|
||||
svg {
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide submenu toggles in sliding mode as they become navigation buttons */
|
||||
.menu-vdi__toggle {
|
||||
/* Override the accordion toggle behavior */
|
||||
&[aria-expanded="true"] {
|
||||
svg {
|
||||
@apply rotate-0; /* Don't rotate arrow */
|
||||
}
|
||||
|
||||
+.menu-vdi__submenu {
|
||||
@apply hidden; /* Don't show dropdown */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide traditional submenus in sliding mode */
|
||||
.menu-vdi__submenu {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* Ensure menu items in sliding viewport have proper styling */
|
||||
.menu-vdi__level-items {
|
||||
@apply flex-col;
|
||||
|
||||
.menu-vdi__item {
|
||||
@apply w-full;
|
||||
|
||||
a {
|
||||
@apply p-4 block w-full no-underline;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply p-4 block w-full font-bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style nested items that were converted from submenus */
|
||||
.menu-vdi__nested-items {
|
||||
@apply block;
|
||||
|
||||
.menu-vdi__item {
|
||||
@apply w-full;
|
||||
|
||||
a {
|
||||
@apply p-4 pl-8 block w-full no-underline; /* Add indent for nested items */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Show sliding menu when toggle button is expanded and menu has sliding class */
|
||||
.nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
|
||||
@apply !block; /* Use !important to override hidden */
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user