@cagovweb/state-template 6.6.0-beta4 → 6.6.0-beta6

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-beta6 */
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.8 (https://getbootstrap.com/)
@@ -14554,7 +14554,7 @@ p {
 
 h1,
 .h1 {
-  span[class^="ca-gov-icon-"]:first-child {
+  & span[class^="ca-gov-icon-"]:first-child {
     display: none;
   }
 
@@ -14714,7 +14714,7 @@ code {
 }
 
 .main-content {
-  a:not(.btn) {
+  & a:not(.btn) {
     text-decoration: underline;
   }
 }
@@ -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);
   }
@@ -14851,7 +14855,7 @@ a.list-group-item {
 .socialsharer-container {
   float: left;
 
-  a {
+  & a {
     line-height: 1em;
     font-size: 1.375rem;
     cursor: pointer;
@@ -15211,14 +15215,14 @@ a.list-group-item {
   display: block;
   position: relative;
 
-  p {
+  & p {
     font-size: 2.9375rem;
     color: #fff;
     font-weight: 200;
     line-height: 3.675rem;
     margin-bottom: 2rem;
 
-    span {
+    & span {
       font-weight: 600;
     }
   }
@@ -16122,7 +16126,7 @@ div.search-results-header {
 
     &:hover,
     &:focus {
-      color: var(--link-hover-color, #005a7f) !important;
+      color: var(--link-color-hover, #005a7f) !important;
     }
   }
 
@@ -18174,7 +18178,7 @@ header.nav-overlay {
     border: 1px solid var(--color-s3-dark, #507b97);
   }
 
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--white, #fff);
     text-decoration: underline;
 
@@ -18379,7 +18383,7 @@ header.nav-overlay {
   }
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--white, #fff);
 
     &:hover,
@@ -18623,7 +18627,7 @@ header.nav-overlay {
   }
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--color-s3, #4993b5);
     text-decoration: underline;
 
@@ -18759,7 +18763,7 @@ textarea.sourcecode {
 
 .bg-highlight {
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--gray-900, #3b3a48);
     text-decoration: underline;
 
@@ -18801,7 +18805,7 @@ textarea.sourcecode {
   color: var(--white, #fff);
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--color-s3, #4993b5);
     text-decoration: underline;
 
@@ -19712,14 +19716,14 @@ html {
     border-bottom: none;
     background: var(--gray-75, #f3f3f4);
 
-    li:first-child a,
-    li:first-child a:hover,
-    li:first-child a:focus,
-    li:first-child a:active {
+    & li:first-child a,
+    & li:first-child a:hover,
+    & li:first-child a:focus,
+    & li:first-child a:active {
       border-left: 0 !important;
     }
 
-    li {
+    & li {
       &.active {
         border-top: 0;
       }
@@ -19933,7 +19937,7 @@ html {
       padding: 0;
       background: none;
 
-      a {
+      & a {
         display: block;
         width: 100%;
         padding: 0.5rem 1rem;
@@ -20841,14 +20845,14 @@ hr.hr-light {
       border-left-color: var(--white, #fff);
     }
 
-    p,
+    & p,
     .executive-name,
-    a {
+    & a {
       color: var(--white, #fff);
     }
 
-    a:hover,
-    a:focus {
+    & a:hover,
+    & a:focus {
       color: var(--color-p1, #fdb81e);
     }
   }
@@ -22214,14 +22218,14 @@ table.table {
 ul.list-overstated {
   padding: 0;
 
-  a {
+  & a {
     font-weight: bold;
   }
 }
 
 .list-overstated,
 .list-understated {
-  li {
+  & li {
     list-style: none;
     position: relative;
     padding: 0 0 14px 18px;
@@ -22255,7 +22259,7 @@ ul.list-overstated {
   padding: 0;
   padding-left: 0.2em;
 
-  li {
+  & li {
     padding-left: 1.5em;
 
     &::before {
@@ -22281,7 +22285,7 @@ ul.list-overstated {
   margin: 12px 0 10px;
   line-height: 1.5;
 
-  li {
+  & li {
     padding-left: 1.5em;
     margin: 10px 0;
 
@@ -22301,11 +22305,11 @@ ul.list-overstated {
     }
   }
 
-  ul li::before {
+  & ul li::before {
     content: none;
   }
 
-  ul.list-standout li::before {
+  & ul.list-standout li::before {
     content: "\35";
   }
 }
@@ -22314,7 +22318,7 @@ ul.list-overstated {
   height: 350px;
   overflow-y: auto;
 
-  li {
+  & li {
     border-top: 1px solid var(--gray-100, #ededef);
     padding-top: 10px;
     padding-bottom: 10px;
@@ -22345,8 +22349,8 @@ ul.list-overstated {
 .list-overstated,
 .list-understated,
 .list-standout {
-  ul li,
-  ol li {
+  & ul li,
+  & ol li {
     background: none;
     padding-left: 0;
   }
@@ -22428,7 +22432,7 @@ ul.list-overstated {
   background: var(--color-s3, #4993b5);
   color: var(--gray-900, #3b3a48);
 
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--gray-900, #3b3a48);
     text-decoration: none;
 
@@ -22444,7 +22448,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  & footer {
     color: var(--black, #000);
   }
 }
@@ -22454,7 +22458,7 @@ ul.list-overstated {
   color: var(--white, #fff);
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--color-p1, #fdb81e);
     text-decoration: none;
 
@@ -22470,7 +22474,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  & footer {
     color: var(--white, #fff);
   }
 }
@@ -22480,7 +22484,7 @@ ul.list-overstated {
   color: var(--white, #fff);
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--white, #fff);
     text-decoration: none;
 
@@ -22496,7 +22500,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  & footer {
     color: var(--white, #fff);
   }
 }
@@ -22506,7 +22510,7 @@ ul.list-overstated {
   color: var(--gray-900, #3b3a48);
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--gray-900, #3b3a48);
     text-decoration: none;
 
@@ -22522,7 +22526,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  & footer {
     color: var(--gray-900, #3b3a48);
   }
 }
@@ -22532,7 +22536,7 @@ ul.list-overstated {
   color: #fff;
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--color-p1, #fdb81e);
     text-decoration: none;
 
@@ -22548,7 +22552,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  & footer {
     color: #fff;
   }
 }
@@ -22558,7 +22562,7 @@ ul.list-overstated {
   color: #fff;
 
   /* stylelint-disable-next-line no-descending-specificity */
-  a:not(.btn) {
+  & a:not(.btn) {
     color: var(--black, #000);
     text-decoration: none;
 
@@ -22574,7 +22578,7 @@ ul.list-overstated {
     }
   }
 
-  footer {
+  &footer {
     color: #fff;
   }
 }
@@ -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;
@@ -25038,7 +24997,7 @@ a.sidenav {
     }
 
     /* White Color */
-    span.has-black-color,
+    & span.has-black-color,
     .cagov-step-list-content {
       margin-top: 1rem;
       padding-bottom: 1.75rem;