@cagovweb/state-template 6.6.0-beta3 → 6.6.0-beta5

package/dist/css/cagov.core.css

@@ -1,5 +1,5 @@
  
-  /*! State Web Template Version 6.6.0-beta3 */
+  /*! State Web Template Version 6.6.0-beta5 */
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.8 (https://getbootstrap.com/)
@@ -14838,6 +14838,10 @@ a.list-group-item {
 
 /* this is how wide website will go on desktop */
 @media (width >= 1200px) {
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
   .container {
     max-width: var(--breakpoint-lg);
   }
@@ -16122,7 +16126,7 @@ div.search-results-header {
 
     &:hover,
     &:focus {
-      color: var(--link-hover-color, #005a7f) !important;
+      color: var(--link-color-hover, #005a7f) !important;
     }
   }
 
@@ -24485,6 +24489,81 @@ a.cagov-external-link {
    SIDE NAVIGATION - /src/css/cagov/side-navigation.css
 ----------------------------------------- */
 
+details.side-navigation-toggle {
+  border: 1px solid var(--border-color-default, #d4d4d7);
+  background: var(--color-s1, #eef8fb);
+  margin-bottom: 1rem;
+
+  /* Hide div by default on mobile */
+  + div {
+    display: none;
+  }
+
+  /* CA.gov Menu Button */
+  > summary {
+    margin-left: auto;
+    width: 100%;
+    color: var(--link-color, var(--color-p2, #046b99));
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 0.65rem 0;
+    list-style: none;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    min-height: 1.875rem;
+
+    &:hover,
+    &:focus {
+      color: var(--link-color-hover, var(--color-p2-darker, #034a6f));
+      outline: 2px solid var(--outline-default-color, #0b8ee5);
+      outline-offset: -4px;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    > span {
+      &::after {
+        margin-left: 0.5rem;
+        content: "";
+        display: inline-block;
+        text-decoration: none;
+        position: relative;
+        width: 0.65rem;
+        height: 0.65rem;
+        border-top: 2px solid var(--link-color, var(--color-p2, #046b99));
+        border-left: 2px solid var(--link-color, var(--color-p2, #046b99));
+        transform: rotate(225deg);
+        transition: 200ms;
+        vertical-align: middle;
+        top: -0.125rem;
+      }
+    }
+  }
+
+  /* Show div when details is open (mobile) */
+  &[open] + div {
+    display: block;
+  }
+
+  &[open] > summary span::after {
+    transform: rotate(45deg);
+    top: 0.125rem;
+  }
+
+  /* On desktop: hide details toggle, always show div */
+  @media (width >= 992px) {
+    display: none;
+
+    + div {
+      display: block;
+    }
+  }
+}
+
 ul.list-navigation,
 nav.side-navigation > ul {
   margin-left: 0;
@@ -24515,7 +24594,7 @@ nav.side-navigation > ul {
         &::before {
           content: "";
           border-left: 3px solid;
-          border-left-color: var(--color-p1, #fdb81e);
+          border-left-color: var(--link-color, #046b99);
           position: absolute;
           top: 0;
           left: 0;
@@ -24576,126 +24655,6 @@ nav.side-navigation > ul {
   }
 }
 
-.sidenav-mobile-btn {
-  display: block;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--gray-200, #d4d4d7);
-  background-color: var(--color-s1, #eef8fb);
-
-  .container {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-.sidenav-toggle {
-  border: none;
-  background: none;
-  font-weight: 500;
-  position: relative;
-  right: 0;
-  padding-right: 2.3rem;
-  color: var(--link-color, var(--color-p2, #046b99));
-
-  &:hover,
-  &:focus {
-    color: var(--link-color-hover, var(--color-p2-darker, #214a68));
-  }
-
-  .ca-gov-icon-caret-down {
-    font-size: 2rem;
-    position: absolute;
-    top: 0.3rem;
-    right: 0.2rem;
-    line-height: 1rem;
-    transition: all 0.3s ease;
-  }
-
-  &[aria-expanded="true"] {
-    .ca-gov-icon-caret-down {
-      transform: rotate(180deg);
-      top: 0.6rem;
-    }
-  }
-}
-
-@media (width >= 992px) {
-  .sidenav-mobile-btn {
-    display: none;
-  }
-}
-
-@media (width <= 991px) {
-  .mobile-sidenav {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.15s ease-out;
-    background-color: var(--mobile-drawer, #214a68);
-
-    &.visible {
-      max-height: 1600px;
-      transition: max-height 0.25s ease-in;
-      overflow-y: auto;
-    }
-
-    .side-navigation {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem 0;
-
-      &.sticky-6 {
-        top: 0;
-        position: relative;
-      }
-
-      & ul {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-
-    .list-navigation,
-    .side-navigation ul {
-      & li {
-        & a {
-          color: var(--white, #fff);
-          border-bottom-color: var(--mobile-drawer, #214a68);
-
-          &:focus {
-            outline: 2px solid var(--outline-dark-mode-color);
-            outline-offset: -2px;
-          }
-
-          &:hover,
-          &:focus {
-            color: var(--white, #fff);
-            background-color: var(--mobile-drawer-active, #046b99);
-          }
-
-          &.active {
-            background-color: var(--mobile-drawer-active, #046b99);
-
-            &::before {
-              color: var(--white, #fff);
-              border-left-color: var(--color-p1, #fdb81e);
-            }
-
-            &:hover,
-            &:focus {
-              color: var(--white, #fff);
-              background-color: var(--mobile-drawer, #214a68);
-            }
-          }
-
-          & ul li a.active::before {
-            border-left-color: var(--color-p1, #fdb81e);
-          }
-        }
-      }
-    }
-  }
-}
-
 a.sidenav {
   font-size: calc(1rem + var(--ratio));
   margin: 0;
@@ -25604,26 +25563,36 @@ a.sidenav {
 /* ------------------------------------
   colors and backgrounds
 ------------------------------------ */
-.color-black {
-  color: var(--black, #000) !important;
-}
-
+.color-black,
 .color-black-hover:hover,
 .color-black-hover:focus {
   color: var(--black, #000) !important;
 }
 
-.color-white {
-  color: var(--white, #fff) !important;
-}
-
+.color-white,
 .color-white-hover:hover,
 .color-white-hover:focus {
   color: var(--white, #fff) !important;
 }
 
+.color-base-light,
+.color-base-light-hover:hover,
+.color-base-light-hover:focus {
+  color: var(--base-light, #fff) !important;
+}
+
+.color-base-dark,
+.color-base-dark-hover:hover,
+.color-base-dark-hover:focus {
+  color: var(--base-dark, #000) !important;
+}
+
 .color-gray-dark,
-.color-grey-dark {
+.color-grey-dark,
+.color-gray-dark-hover:hover,
+.color-gray-dark-hover:focus,
+.color-grey-dark-hover:hover,
+.color-grey-dark-hover:focus {
   color: var(--text-color, var(--gray-900, #3b3a48));
 }
 

package/dist/css/cagov.core.flat.css

@@ -1,5 +1,5 @@
 
-  /*! State Web Template Version 6.6.0-beta3 */
+  /*! State Web Template Version 6.6.0-beta5 */
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.8 (https://getbootstrap.com/)
@@ -14904,6 +14904,10 @@ a.list-group-item {
 
 /* this is how wide website will go on desktop */
 @media (min-width: 1200px) {
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
   .container {
     max-width: var(--breakpoint-lg);
   }
@@ -16223,7 +16227,7 @@ div.search-results-header form .gsc-search-button {
     .gs-result a.gs-title:focus,
     .gs-result a.gs-title b:hover,
     .gs-result a.gs-title b:focus {
-      color: var(--link-hover-color, #005a7f) !important;
+      color: var(--link-color-hover, #005a7f) !important;
     }
 
 .gs-result .gsc-url-top .gs-visibleUrl-breadcrumb span {
@@ -24635,6 +24639,86 @@ a.cagov-external-link::after {
    SIDE NAVIGATION - /src/css/cagov/side-navigation.css
 ----------------------------------------- */
 
+details.side-navigation-toggle {
+  border: 1px solid var(--border-color-default, #d4d4d7);
+  background: var(--color-s1, #eef8fb);
+  margin-bottom: 1rem;
+}
+
+/* Hide div by default on mobile */
+
+details.side-navigation-toggle + div {
+    display: none;
+  }
+
+/* CA.gov Menu Button */
+
+details.side-navigation-toggle > summary {
+    margin-left: auto;
+    width: 100%;
+    color: var(--link-color, var(--color-p2, #046b99));
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 0.65rem 0;
+    list-style: none;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    min-height: 1.875rem;
+  }
+
+details.side-navigation-toggle > summary:hover,
+    details.side-navigation-toggle > summary:focus {
+      color: var(--link-color-hover, var(--color-p2-darker, #034a6f));
+      outline: 2px solid var(--outline-default-color, #0b8ee5);
+      outline-offset: -4px;
+    }
+
+details.side-navigation-toggle > summary::-webkit-details-marker {
+      display: none;
+    }
+
+details.side-navigation-toggle > summary > span::after {
+        margin-left: 0.5rem;
+        content: "";
+        display: inline-block;
+        text-decoration: none;
+        position: relative;
+        width: 0.65rem;
+        height: 0.65rem;
+        border-top: 2px solid var(--link-color, var(--color-p2, #046b99));
+        border-left: 2px solid var(--link-color, var(--color-p2, #046b99));
+        transform: rotate(225deg);
+        transition: 200ms;
+        vertical-align: middle;
+        top: -0.125rem;
+      }
+
+/* Show div when details is open (mobile) */
+
+details.side-navigation-toggle[open] + div {
+    display: block;
+  }
+
+details.side-navigation-toggle[open] > summary span::after {
+    transform: rotate(45deg);
+    top: 0.125rem;
+  }
+
+/* On desktop: hide details toggle, always show div */
+
+@media (min-width: 992px) {
+
+details.side-navigation-toggle {
+    display: none
+}
+
+    details.side-navigation-toggle + div {
+      display: block;
+    }
+  }
+
 ul.list-navigation,
 nav.side-navigation > ul {
   margin-left: 0;
@@ -24671,7 +24755,7 @@ ul.list-navigation > li > a.active, ul.list-navigation > li > ul > li > a.active
 ul.list-navigation > li > a.active::before, ul.list-navigation > li > ul > li > a.active::before, nav.side-navigation > ul > li > a.active::before, nav.side-navigation > ul > li > ul > li > a.active::before {
           content: "";
           border-left: 3px solid;
-          border-left-color: var(--color-p1, #fdb81e);
+          border-left-color: var(--link-color, #046b99);
           position: absolute;
           top: 0;
           left: 0;
@@ -24737,122 +24821,6 @@ ul.list-navigation > li > ul > li > a, ul.list-navigation > li > ul > li > ul >
         padding-left: 2.5rem;
       }
 
-.sidenav-mobile-btn {
-  display: block;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--gray-200, #d4d4d7);
-  background-color: var(--color-s1, #eef8fb);
-}
-
-.sidenav-mobile-btn .container {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-.sidenav-toggle {
-  border: none;
-  background: none;
-  font-weight: 500;
-  position: relative;
-  right: 0;
-  padding-right: 2.3rem;
-  color: var(--link-color, var(--color-p2, #046b99));
-}
-
-.sidenav-toggle:hover,
-  .sidenav-toggle:focus {
-    color: var(--link-color-hover, var(--color-p2-darker, #214a68));
-  }
-
-.sidenav-toggle .ca-gov-icon-caret-down {
-    font-size: 2rem;
-    position: absolute;
-    top: 0.3rem;
-    right: 0.2rem;
-    line-height: 1rem;
-    transition: all 0.3s ease;
-  }
-
-.sidenav-toggle[aria-expanded="true"] .ca-gov-icon-caret-down {
-      transform: rotate(180deg);
-      top: 0.6rem;
-    }
-
-@media (min-width: 992px) {
-  .sidenav-mobile-btn {
-    display: none;
-  }
-}
-
-@media (max-width: 991px) {
-  .mobile-sidenav {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.15s ease-out;
-    background-color: var(--mobile-drawer, #214a68);
-  }
-
-    .mobile-sidenav.visible {
-      max-height: 1600px;
-      transition: max-height 0.25s ease-in;
-      overflow-y: auto;
-    }
-
-    .mobile-sidenav .side-navigation {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem 0;
-    }
-
-      .mobile-sidenav .side-navigation.sticky-6 {
-        top: 0;
-        position: relative;
-      }
-
-      .mobile-sidenav .side-navigation ul {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-        .mobile-sidenav .list-navigation li a, .mobile-sidenav .side-navigation ul li a {
-          color: var(--white, #fff);
-          border-bottom-color: var(--mobile-drawer, #214a68);
-        }
-
-          .mobile-sidenav .list-navigation li a:focus, .mobile-sidenav .side-navigation ul li a:focus {
-            outline: 2px solid var(--outline-dark-mode-color);
-            outline-offset: -2px;
-          }
-
-          .mobile-sidenav .list-navigation li a:hover,
-          .mobile-sidenav .list-navigation li a:focus,
-          .mobile-sidenav .side-navigation ul li a:hover,
-          .mobile-sidenav .side-navigation ul li a:focus {
-            color: var(--white, #fff);
-            background-color: var(--mobile-drawer-active, #046b99);
-          }
-
-          .mobile-sidenav .list-navigation li a.active, .mobile-sidenav .side-navigation ul li a.active {
-            background-color: var(--mobile-drawer-active, #046b99);
-          }
-
-            .mobile-sidenav .list-navigation li a.active::before, .mobile-sidenav .side-navigation ul li a.active::before {
-              color: var(--white, #fff);
-              border-left-color: var(--color-p1, #fdb81e);
-            }
-
-            .mobile-sidenav .list-navigation li a.active:hover,
-            .mobile-sidenav .list-navigation li a.active:focus,
-            .mobile-sidenav .side-navigation ul li a.active:hover,
-            .mobile-sidenav .side-navigation ul li a.active:focus {
-              color: var(--white, #fff);
-              background-color: var(--mobile-drawer, #214a68);
-            }
-
-          .mobile-sidenav .list-navigation li a ul li a.active::before, .mobile-sidenav .side-navigation ul li a ul li a.active::before {
-            border-left-color: var(--color-p1, #fdb81e);
-          }
-}
-
 a.sidenav {
   font-size: calc(1rem + var(--ratio));
   margin: 0;
@@ -25767,26 +25735,36 @@ a.sidenav.back::after {
 /* ------------------------------------
   colors and backgrounds
 ------------------------------------ */
-.color-black {
-  color: var(--black, #000) !important;
-}
-
+.color-black,
 .color-black-hover:hover,
 .color-black-hover:focus {
   color: var(--black, #000) !important;
 }
 
-.color-white {
-  color: var(--white, #fff) !important;
-}
-
+.color-white,
 .color-white-hover:hover,
 .color-white-hover:focus {
   color: var(--white, #fff) !important;
 }
 
+.color-base-light,
+.color-base-light-hover:hover,
+.color-base-light-hover:focus {
+  color: var(--base-light, #fff) !important;
+}
+
+.color-base-dark,
+.color-base-dark-hover:hover,
+.color-base-dark-hover:focus {
+  color: var(--base-dark, #000) !important;
+}
+
 .color-gray-dark,
-.color-grey-dark {
+.color-grey-dark,
+.color-gray-dark-hover:hover,
+.color-gray-dark-hover:focus,
+.color-grey-dark-hover:hover,
+.color-grey-dark-hover:focus {
   color: var(--text-color, var(--gray-900, #3b3a48));
 }