@digigov/css 0.29.15 → 0.30.1-navlist.alpha

package/src/components/nav.css

@@ -1,11 +1,44 @@
 .govgr-header {
+  @apply relative;
   .govgr-burger-icon {
     fill: var(--color-header-content) ;
   }
+  .govgr-drawer__close-icon{
+  @apply sm:hidden;
+  .govgr-close-icon {
+      fill: var(--color-link) !important;
+    }
+  }
+  .govgr-horizontal-nav__list{
+    @apply sm:flex !important;
+    @apply sm:w-min xs:hidden;
+  }
+    .govgr-horizontal-nav__list-item {
+      @apply sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2;
+      .govgr-svg-icon {
+        fill: var(--color-white) !important;
+      }
+    }
+  .govgr-horizontal-nav__list-item-link, .govgr-horizontal-nav__list-item-btn{
+      @apply underline xs:text-white text-lg sm:flex !important;
+      @apply xs:hidden  items-center xs:gap-1;
+      &:focus {
+          @apply sm:bg-focus sm:text-link-active !important;
+          .govgr-svg-icon {
+            fill: var(--color-link-active) !important;
+          }   
+        }
+  }
+  .govgr-horizontal-nav__list--active{
+    @apply sm:bg-secondary600 !important;
+  }
 }
+.govgr-burger-icon {
+  @apply cursor-pointer;
+  }
 .govgr-burger-icon {
   fill: var(--color-base-content) ;
-  @apply w-8 h-8 float-right cursor-pointer transition-all z-30
+  @apply w-8 h-8 float-right cursor-pointer transition-all 
   focus:bg-focus;
   #govgr-burger-icon__line-1, #govgr-burger-icon__line-2, #govgr-burger-icon__line-3 {
     @apply transition-all;
@@ -46,41 +79,75 @@
     transform-origin: 3px 16px
   }
 }
-
 /* --- HORIZONTAL ---  */
 .govgr-horizontal-nav {
-  @apply fixed w-3/4 sm:w-full h-full bg-secondary800 text-content-dark
-  sm:relative sm:h-auto sm:bg-white sm:text-content
-  z-30 sm:z-auto
-  opacity-10 sm:opacity-100 sm:block transition-all duration-1000 sm:transition-none
-  -right-3/4 sm:right-auto top-0 sm:top-auto overflow-x-scroll sm:overflow-visible
-  border-b border-base150 
-  ;
+  @apply sm:block !important;
+  @apply xs:hidden  fixed sm:relative w-3/4 sm:w-full h-full bg-white
+   sm:h-auto sm:bg-white xs:text-content
+  z-30 sm:z-auto sm:border-b sm:border-base150
+  opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
+  .govgr-horizontal-nav{
+    @apply sm:border-b-0 static w-full z-1;
+    @apply  block overflow-x-visible !important;
+    .govgr-nav-horizontal__container {
+        @apply sm:border-b-0;
+      }
+    .govgr-horizontal-nav__list {
+      @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
+    }
+}
+  .govgr-drawer__close-icon {
+    @apply sm:hidden mt-3;
+  }
+  .govgr-heading-m{
+    @apply mb-0;
+  }
+}
+.govgr-nav-horizontal__container{
+  @apply sm:border-b border-base150;
 }
-.govgr-horizontal-nav__container {
-  @apply w-full m-0 max-w-5xl sm:mx-auto px-4 sm:px-4 sm:py-2
-  flex flex-wrap flex-col sm:flex-row gap-4 sm:gap-2;
+.govgr-horizontal-nav--open {
+  @apply xs:block;
 }
-.govgr-horizontal-nav--active {
-  @apply block opacity-100 right-0;
-  .govgr-horizontal-nav__container { 
-      @apply mt-24 sm:mt-auto;
+.govgr-horizontal-nav__list,.govgr-main-wrapper {
+  .govgr-drawer__heading {
+    @apply flex-row-reverse;
   }
-  .govgr-horizontal-nav__container {
-      @apply py-4 md:py-1;
+}
+.govgr-horizontal-nav__list {
+  @apply w-full m-0 max-w-5xl sm:mx-auto sm:gap-x-6 static sm:py-1 xs:px-3 sm:px-0
+  flex flex-wrap flex-col sm:flex-row;
+  .govgr-section-break{
+    margin-top:31px !important;
+    @apply sm:flex !important;
+    @apply xs:hidden sm:p-0 absolute left-0 right-0;
   }
 }
-.govgr-horizontal-nav__item  {
-  @apply p-1 text-xl text-base-content
-  sm:py-1 sm:px-1 sm:text-base
-  no-underline hover:underline;
+.govgr-horizontal-nav__list-item  {
+  @apply text-xl text-base-content
+  xs:py-1 sm:text-base sm:gap-x-6;
 }
-.govgr-horizontal-nav__item:focus {
+.govgr-horizontal-nav__list-item-link:focus {
   @apply bg-focus text-base-content outline-none;
   box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
 }
-.govgr-horizontal-nav__item-active, .govgr-vertical-nav__item--active {
-  @apply font-semibold;
+.govgr-horizontal-nav__list-item-btn{
+  .govgr-svg-icon{
+    @apply ml-0.5;
+  }
+  &:focus{
+  @apply bg-focus text-base-content outline-none;
+  box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+  }
+}
+.govgr-horizontal-nav__list-item-link, .govgr-horizontal-nav__list-item-btn{
+@apply md:no-underline hover:underline !important;
+}
+.govgr-horizontal-nav__list-item-link--active,.govgr-horizontal-nav__list-item-btn--active {
+  @apply font-semibold text-base-content !important;
+  >.govgr-svg-icon {
+      fill: var(--color-base-content) !important;
+    }
 }
 
 /* --- VERTICAL --- */
@@ -88,5 +155,24 @@
   @apply flex flex-wrap;
 }
 .govgr-vertical-nav__item {
-  @apply w-full p-2;
+  @apply w-full p-2 !important;
 }
+/* ---------- --- */
+.govgr-nav-list__menu{
+  @apply flex sm:order-2 sm:left-0 sm:right-0 sm:relative sm:bg-white z-1 w-full;
+  &.govgr-main-wrapper {
+    @apply xs:gap-y-2;
+  };
+}
+.govgr-nav-list__menu-hidden {
+  @apply hidden;
+}
+.govgr-nav-list__content-list{
+  @apply sm:grid-cols-2 sm:grid-rows-1 !important;
+  @apply p-0 sm:grid grid-flow-row xs:grid-cols-1 xs:grid-rows-6; 
+      
+}
+.govgr-nav-list__content-list-item {
+ @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
+}
+

package/src/components/phase-banner.css

@@ -2,7 +2,7 @@
   @apply py-2 mb-4;
 }
 .govgr-phase-banner__underline {
-  @apply border-base200 border-b;
+  @apply border-gray300 border-b;
 }
 .govgr-phase-banner__content {
   @apply table;

package/src/components/stepnav.css

@@ -60,7 +60,7 @@
   @apply md:border-0 border-0;
 }
 .govgr-step-nav__accordion {
-  @apply  border-base150;
+  @apply  border-gray200;
 
   &:first-child {
     @apply border-t-2;

package/src/components/table.css

@@ -99,7 +99,7 @@
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {
-      @apply bg-base100 print:bg-white;
+      @apply bg-gray100 print:bg-white;
     }
   }
 }

package/src/components/tabs.css

@@ -12,7 +12,7 @@
     }
     .govgr-tabs__list-item {
       @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left  md:border md:border-base100 md:bg-base100 md:rounded-t-sm md:mr-2 ;
+      @apply md:float-left  md:border md:border-gray100 md:bg-gray100 md:rounded-t-sm md:mr-2 ;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
         @apply no-underline md:border-gray200 md:border bg-white md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
@@ -45,7 +45,7 @@
     }
   }
   .govgr-tabs__panel {
-    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-base150 mb-0
+    @apply bg-white md:hidden block md:px-4 py-4 pt-8 md:border md:border-gray200 mb-0
     print:block print:border-0 print:py-3;
     &.govgr-tabs__panel-visible {
       @apply block;

package/src/components/task-list.css

@@ -20,10 +20,10 @@
   }
   .govgr-summary-list__row:first-child  {
     &>dt {
-      @apply border-t-2 border-base150;
+      @apply border-t-2 border-gray200;
     }
     &>dd {
-      @apply sm:border-t-2 sm:border-base150;
+      @apply sm:border-t-2 sm:border-gray200;
     }
   }
   .govgr-summary-list__key {
@@ -40,5 +40,5 @@
   @apply bg-secondary50 text-primary print:border-2 print:bg-white print:border-secondary600 print:text-secondary600 print:mr-4;
 }
 .govgr-tag__gray {
-  @apply bg-base100 print:border-2 print:bg-white print:border-base300 print:text-base300 print:mr-4;
+  @apply bg-gray100 print:border-2 print:bg-white print:border-gray600 print:text-gray600 print:mr-4;
 }

package/src/components/typography.css

@@ -1,23 +1,57 @@
 .govgr-heading-xl {
-  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-12 mb-8 max-w-2xl;
+  @apply mx-0 max-w-2xl;
+  font-size: var(--heading-xl-font-size);
+  line-height:var(--heading-xl-line-height);
+  margin-bottom:var(--heading-xl-margin-bottom);
+  font-weight: var(--heading-xl-font-weight);
 }
 .govgr-heading-l {
-  @apply md:text-4xl text-2xl font-bold mx-0 md:mb-10 mb-8;
+  @apply mx-0;
+  font-size: var(--heading-l-font-size);
+  line-height:var(--heading-l-line-height);
+  margin-bottom:var(--heading-l-margin-bottom);
+  font-weight: var(--heading-l-font-weight);
 }
 .govgr-heading-m {
-  @apply md:text-2xl text-xl font-bold mx-0 md:mb-8 mb-6;
+  @apply mx-0;
+  font-size: var(--heading-m-font-size);
+  line-height:var(--heading-m-line-height);
+  margin-bottom:var(--heading-m-margin-bottom);
+  font-weight: var(--heading-m-font-weight);
 }
 .govgr-heading-s {
-  @apply md:text-lg text-base font-bold mx-0 md:mb-5 mb-3;
-}
+  @apply mx-0 ;
+  font-size: var(--heading-s-font-size);
+  line-height:var(--heading-s-line-height);
+  margin-bottom:var(--heading-s-margin-bottom);
+  font-weight: var(--heading-s-font-weight);
+} 
 .govgr-caption-xl {
-  @apply block md:text-2xl text-xl mx-0 lg:mb-2 mb-1 text-base300 font-normal;
+  @apply block mx-0 font-normal;
+  color: var(--caption-xl-color);
+  font-size: var(--caption-xl-font-size);
+  line-height: var(--caption-xl-line-height);
+  margin-bottom: var(--caption-xl-margin-bottom);
+  font-weight: var(--caption-xl-font-weight);
+
 }
 .govgr-caption-l {
-  @apply block md:text-xl text-lg mx-0 mb-0 text-base300 font-normal;
+  @apply block mx-0 font-normal;
+  color: var(--caption-l-color);
+  font-size: var(--caption-l-font-size);
+  line-height: var(--caption-l-line-height);
+  margin-bottom: var(--caption-l-margin-bottom);
+  font-weight: var(--caption-l-font-weight);
+
 }
 .govgr-caption-m {
-  @apply block md:text-lg text-base mx-0 mb-0 text-base300 font-normal;
+  @apply block mx-0 font-normal;
+  color: var(--caption-m-color);
+  font-size: var(--caption-m-font-size);
+  line-height: var(--caption-m-line-height);
+  margin-bottom: var(--caption-m-margin-bottom);
+  font-weight: var(--caption-m-font-weight);
+
 }
 .govgr-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
@@ -73,24 +107,35 @@
 .govgr-list--spaced>.govgr-list__item {
   @apply mb-4;
 }
-.govgr-body, .govgr-list, .govgr-blockquote {
-	@apply md:mb-8 mb-4 text-base-content md:text-lg md:leading-normal text-base;
+.govgr-list, .govgr-blockquote {
+  @apply md:mb-8 mb-4 text-base-content md:text-lg md:leading-normal text-base;
+}
+.govgr-body {
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  margin-bottom: var(--body-margin-bottom);
+  color: var(--body-color);
 }
 .govgr-body-l {
-  @apply lg:text-2xl text-lg;
+  font-size: var(--body-l-font-size);
+  line-height: var(--body-l-line-height);
 }
 .govgr-body-s {
-  @apply lg:text-base text-sm;
+  font-size: var(--body-s-font-size);
+  line-height: var(--body-s-line-height);
 }
 .govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-base300;
+  @apply mb-4 lg:text-2xl text-lg text-gray600;
 }
 .govgr-hint {
-  @apply mb-4 md:text-lg text-base text-base300;
+  font-size: var(--hint-font-size);
+  line-height: var(--hint-line-height);
+  margin-bottom: var(--hint-margin-bottom);
+  color: var(--hint-color);
 }
 .govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-base300;
-}
+  @apply mb-4 lg:text-base text-sm text-gray600;
+} 
 .govgr-background-dark, .govgr-masthead {
   .govgr-hint {
     @apply opacity-70 text-white print:text-base-content;
@@ -103,9 +148,12 @@
   @apply font-bold !important;
 }
 .govgr-link {
-  @apply text-link hover:text-link-hover focus:text-link-active underline cursor-pointer;
+  @apply focus:text-link-active underline cursor-pointer;
+  color: var(--link-color);
+  padding: var(--link-padding);
   &:hover {
     text-decoration-thickness: 2px;
+    color: var(--link-color-hover);
   }
   &:focus {
     background-color: var(--color-focus);
@@ -127,7 +175,7 @@
 }
 .govgr-background-dark, .govgr-masthead {
   .govgr-link {
-    @apply text-white hover:text-white focus:text-white print:text-base-content;
+    @apply text-white hover:text-white focus:text-base-content print:text-base-content;
     &:hover {
       text-decoration-thickness: 2px;
     }

package/src/utilities/index.css

@@ -1,6 +1,6 @@
 .govgr-m-0 {
   @apply m-0 !important;
-}  
+}
 .govgr-m-1 {
   @apply m-1 !important;
 }
@@ -28,9 +28,18 @@
 .govgr-m-9 {
   @apply m-8 md:m-12 !important;
 }
+.govgr-m-10 {
+  @apply m-9 md:m-14 !important;
+}
+.govgr-m-11 {
+  @apply m-10 md:m-16 !important;
+}
+.govgr-m-12 {
+  @apply m-11 md:m-20 !important;
+}
 .govgr-mt-0 {
   @apply mt-0 !important;
-}  
+}
 .govgr-mt-1 {
   @apply mt-1 !important;
 }
@@ -58,9 +67,18 @@
 .govgr-mt-9 {
   @apply mt-8 md:mt-12 !important;
 }
+.govgr-mt-10 {
+  @apply mt-9 md:mt-14 !important;
+}
+.govgr-mt-11 {
+  @apply mt-10 md:mt-16 !important;
+}
+.govgr-mt-12 {
+  @apply mt-11 md:mt-20 !important;
+}
 .govgr-mb-0 {
   @apply mb-0 !important;
-}  
+}
 .govgr-mb-1 {
   @apply mb-1 !important;
 }
@@ -88,9 +106,18 @@
 .govgr-mb-9 {
   @apply mb-8 md:mb-12 !important;
 }
+.govgr-mb-10 {
+  @apply mb-9 md:mb-14 !important;
+}
+.govgr-mb-11 {
+  @apply mb-10 md:mb-16 !important;
+}
+.govgr-mb-12 {
+  @apply mb-11 md:mb-20 !important;
+}
 .govgr-ml-0 {
   @apply ml-0 !important;
-}  
+}
 .govgr-ml-1 {
   @apply ml-1 !important;
 }
@@ -118,9 +145,18 @@
 .govgr-ml-9 {
   @apply ml-8 md:ml-12 !important;
 }
+.govgr-ml-10 {
+  @apply ml-9 md:ml-14 !important;
+}
+.govgr-ml-11 {
+  @apply ml-10 md:ml-16 !important;
+}
+.govgr-ml-12 {
+  @apply ml-11 md:ml-20 !important;
+}
 .govgr-mr-0 {
   @apply mr-0 !important;
-}  
+}
 .govgr-mr-1 {
   @apply mr-1 !important;
 }
@@ -148,9 +184,18 @@
 .govgr-mr-9 {
   @apply mr-8 md:mr-12 !important;
 }
+.govgr-mr-10 {
+  @apply mr-9 md:mr-14 !important;
+}
+.govgr-mr-11 {
+  @apply mr-10 md:mr-16 !important;
+}
+.govgr-mr-12 {
+  @apply mr-11 md:mr-20 !important;
+}
 .govgr-p-0 {
   @apply p-0 !important;
-}  
+}
 .govgr-p-1 {
   @apply p-1 !important;
 }
@@ -178,9 +223,18 @@
 .govgr-p-9 {
   @apply p-8 md:p-12 !important;
 }
+.govgr-p-10 {
+  @apply p-9 md:p-14 !important;
+}
+.govgr-p-11 {
+  @apply p-10 md:p-16 !important;
+}
+.govgr-p-12 {
+  @apply p-11 md:p-20 !important;
+}
 .govgr-pt-0 {
   @apply pt-0 !important;
-}  
+}
 .govgr-pt-1 {
   @apply pt-1 !important;
 }
@@ -208,9 +262,18 @@
 .govgr-pt-9 {
   @apply pt-8 md:pt-12 !important;
 }
+.govgr-pt-10 {
+  @apply pt-9 md:pt-14 !important;
+}
+.govgr-pt-11 {
+  @apply pt-10 md:pt-16 !important;
+}
+.govgr-pt-12 {
+  @apply pt-11 md:pt-20 !important;
+}
 .govgr-pb-0 {
   @apply pb-0 !important;
-}  
+}
 .govgr-pb-1 {
   @apply pb-1 !important;
 }
@@ -238,9 +301,18 @@
 .govgr-pb-9 {
   @apply pb-8 md:pb-12 !important;
 }
+.govgr-pb-10 {
+  @apply pb-9 md:pb-14 !important;
+}
+.govgr-pb-11 {
+  @apply pb-10 md:pb-16 !important;
+}
+.govgr-pb-12 {
+  @apply pb-11 md:pb-20 !important;
+}
 .govgr-pl-0 {
   @apply pl-0 !important;
-}  
+}
 .govgr-pl-1 {
   @apply pl-1 !important;
 }
@@ -268,9 +340,18 @@
 .govgr-pl-9 {
   @apply pl-8 md:pl-12 !important;
 }
+.govgr-pl-10 {
+  @apply pl-9 md:pl-14 !important;
+}
+.govgr-pl-11 {
+  @apply pl-10 md:pl-16 !important;
+}
+.govgr-pl-12 {
+  @apply pl-11 md:pl-20 !important;
+}
 .govgr-pr-0 {
   @apply pr-0 !important;
-}  
+}
 .govgr-pr-1 {
   @apply pr-1 !important;
 }
@@ -298,6 +379,15 @@
 .govgr-pr-9 {
   @apply pr-8 md:pr-12 !important;
 }
+.govgr-pr-10 {
+  @apply pr-9 md:pr-14 !important;
+}
+.govgr-pr-11 {
+  @apply pr-10 md:pr-16 !important;
+}
+.govgr-pr-12 {
+  @apply pr-11 md:pr-20 !important;
+}
 .govgr-grid {
   @apply grid grid-cols-12;
 }
@@ -399,4 +489,10 @@
 }
 .govgr-print-hidden {
   @apply print:hidden !important;
+}
+.govgr-print-visible-block {
+  @apply print:block !important;
+}
+.govgr-print-visible-inline {
+  @apply print:inline !important;
 }