@digigov/css 1.0.0-079f34f3d → 1.0.0-290a96e2

package/src/components/typography.css

@@ -1,43 +1,43 @@
 .govgr-heading-xl {
   @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);
+  line-height: var(--heading-xl-line-height);
+  margin-bottom: var(--heading-xl-margin-bottom);
   font-weight: var(--heading-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
 .govgr-heading-lg {
   @apply mx-0;
   font-size: var(--heading-lg-font-size);
-  line-height:var(--heading-lg-line-height);
-  margin-bottom:var(--heading-lg-margin-bottom);
+  line-height: var(--heading-lg-line-height);
+  margin-bottom: var(--heading-lg-margin-bottom);
   font-weight: var(--heading-lg-font-weight);
   letter-spacing: var(--heading-lg-letter-spacing);
 }
 .govgr-heading-md {
   @apply mx-0;
   font-size: var(--heading-md-font-size);
-  line-height:var(--heading-md-line-height);
-  margin-bottom:var(--heading-md-margin-bottom);
+  line-height: var(--heading-md-line-height);
+  margin-bottom: var(--heading-md-margin-bottom);
   font-weight: var(--heading-md-font-weight);
   letter-spacing: var(--heading-md-letter-spacing);
 }
 .govgr-heading-sm {
-  @apply mx-0 ;
+  @apply mx-0;
   font-size: var(--heading-sm-font-size);
-  line-height:var(--heading-sm-line-height);
-  margin-bottom:var(--heading-sm-margin-bottom);
+  line-height: var(--heading-sm-line-height);
+  margin-bottom: var(--heading-sm-margin-bottom);
   font-weight: var(--heading-sm-font-weight);
   letter-spacing: var(--heading-sm-letter-spacing);
-} 
+}
 .govgr-heading-xs {
-  @apply mx-0 ;
+  @apply mx-0;
   font-size: var(--heading-xs-font-size);
-  line-height:var(--heading-xs-line-height);
-  margin-bottom:var(--heading-xs-margin-bottom);
+  line-height: var(--heading-xs-line-height);
+  margin-bottom: var(--heading-xs-margin-bottom);
   font-weight: var(--heading-xs-font-weight);
   letter-spacing: var(--heading-xs-letter-spacing);
-} 
+}
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
   color: var(--caption-xl-color);
@@ -46,7 +46,6 @@
   margin-bottom: var(--caption-xl-margin-bottom);
   font-weight: var(--caption-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
-
 }
 .govgr-caption-lg {
   @apply block mx-0 font-normal;
@@ -56,7 +55,6 @@
   margin-bottom: var(--caption-lg-margin-bottom);
   font-weight: var(--caption-lg-font-weight);
   letter-spacing: var(--caption-lg-letter-spacing);
-
 }
 .govgr-caption-md {
   @apply block mx-0 font-normal;
@@ -66,7 +64,6 @@
   margin-bottom: var(--caption-md-margin-bottom);
   font-weight: var(--caption-md-font-weight);
   letter-spacing: var(--caption-md-letter-spacing);
-
 }
 .govgr-\!-font-size-14 {
   @apply text-xs md:text-sm !important;
@@ -99,21 +96,26 @@
   letter-spacing: var(--list-letter-spacing);
   .govgr-list__item {
     @apply mb-2;
-    &:last-child{
+    &:last-child {
       @apply mb-0;
     }
   }
 }
-.govgr-list__item>.govgr-list--bullet:nth-child(1){
+.govgr-list__item > .govgr-list--bullet:nth-child(1) {
   list-style: circle inside none;
 }
-.govgr-list__item>.govgr-list>.govgr-list__item>.govgr-list--bullet:nth-child(1){
+.govgr-list__item
+  > .govgr-list
+  > .govgr-list__item
+  > .govgr-list--bullet:nth-child(1) {
   @apply list-disc;
 }
-.govgr-list__item>.govgr-list:not(.govgr-list--bullet):not(.govgr-list--number):nth-child(1)>.govgr-list__item{
+.govgr-list__item
+  > .govgr-list:not(.govgr-list--bullet):not(.govgr-list--number):nth-child(1)
+  > .govgr-list__item {
   @apply pl-10;
 }
-.govgr-list__item>.govgr-list{
+.govgr-list__item > .govgr-list {
   @apply mb-0 mt-2;
 }
 .govgr-list--bullet {
@@ -122,9 +124,9 @@
 .govgr-list--number {
   @apply list-decimal list-outside pl-6;
 }
-.govgr-list--spaced:not(.govgr-list--horizontal)>.govgr-list__item {
+.govgr-list--spaced:not(.govgr-list--horizontal) > .govgr-list__item {
   @apply mb-4;
-  &:last-child{
+  &:last-child {
     @apply mb-0;
   }
 }
@@ -132,7 +134,6 @@
   @apply flex flex-wrap gap-x-6 gap-y-3;
   .govgr-list__item {
     @apply w-full sm:w-auto;
-    
   }
   &.govgr-list--spaced {
     @apply gap-x-10 gap-y-5;
@@ -146,10 +147,11 @@
     column-count: 2;
   }
 }
-.govgr-list, .govgr-blockquote {
+.govgr-list {
   @apply md:mb-8 mb-4 text-base-content;
 }
 .govgr-blockquote {
+  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500 text-base-content;
   font-size: var(--blockquote-font-size);
   line-height: var(--blockquote-line-height);
 }
@@ -175,11 +177,6 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
-.govgr-background-dark, .govgr-masthead--primary {
-  .govgr-hint {
-    @apply opacity-70 text-white print:text-base-content;
-  }
-}
 
 .govgr-\!-font-weight-regular {
   @apply font-normal !important;
@@ -201,36 +198,16 @@
   &:focus {
     color: var(--link-color-active);
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none !important;
-    outline: none; 
-  }
-}
-.govgr-header {
-  .govgr-header__content > .govgr-link {
-    @apply text-white focus:text-link-active print:text-base-content;
-  }
-  .govgr-header__section > .govgr-link {
-    @apply text-white focus:text-link-active print:text-base-content;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none !important;
+    outline: none;
   }
 }
 .govgr-link--no-underline {
   @apply no-underline hover:underline;
 }
-.govgr-masthead--primary {
-  .govgr-link {
-    @apply text-white hover:text-white focus:text-base-content print:text-base-content;
-    &:hover {
-      text-decoration-thickness: 2px;
-    }
-  }
-  .govgr-link--no-underline {
-    @apply no-underline hover:underline;
-    &:hover {
-      text-decoration-thickness: 2px;
-    }
-  }
-}
 
 .govgr-back-link {
   font-size: var(--back-link-font-size);
@@ -241,18 +218,11 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none;
-    outline: none; 
-  }
-  .govgr-svg-icon--caret {
-    fill:var(--color-base-content);
-    @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
-  }
-}
-.govgr-masthead--primary {
-  .govgr-back-link {
-    @apply text-white print:text-base-content;
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
+    text-decoration: none;
+    outline: none;
   }
 }
 
@@ -278,7 +248,8 @@
   .govgr-body .govgr-link[href^="#"]:after {
     display: none;
   }
-  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after {
+  .govgr-link[href^="http://"]:after, .govgr-link[href^="https://"]:after
+  {
     content: " (" attr(href) ")";
     font-size: 80%;
   }
@@ -288,4 +259,28 @@
   .govgr-link {
     @apply text-base-content;
   }
-}
+}
+
+/* overrides */
+
+.govgr-link {
+  .govgr-svg-icon {
+    fill: var(--color-link);
+  }
+  &:hover {
+    .govgr-svg-icon {
+      fill: var(--color-link-hover);
+    }
+  }
+  &:focus {
+    .govgr-svg-icon {
+      fill: var(--color-link-active);
+    }
+  }
+}
+.govgr-back-link {
+  .govgr-svg-icon--caret {
+    fill: var(--color-base-content);
+    @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
+  }
+}

package/src/components/warning-text.css

@@ -0,0 +1,19 @@
+.govgr-warning-text {
+  font-size: var(--warning-text-font-size);
+  @apply p-4;
+  @apply flex pt-4 pb-4 pl-0 pr-0;
+  .govgr-warning-text__icon {
+    @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
+    rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
+    print:bg-white print:border-2 print:border-base-content print:text-base-content;
+  }
+  .govgr-warning-text__text {
+    @apply flex items-center;
+  }
+  .govgr-warning-text__assistive {
+    @apply absolute w-px h-px m-0 p-0 border-0 overflow-hidden whitespace-nowrap !important;
+    clip: rect(0 0 0 0) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+  }
+}

package/src/utilities/index.css

@@ -462,4 +462,124 @@
 }
 .govgr-gap-12 {
   @apply gap-12;
+}
+.govgr-gap-xs-1 {
+  @apply gap-1;
+}
+.govgr-gap-xs-2 {
+  @apply gap-2;
+}
+.govgr-gap-xs-4 {
+  @apply gap-4;
+}
+.govgr-gap-xs-5 {
+  @apply gap-5;
+}
+.govgr-gap-xs-6 {
+  @apply gap-6;
+}
+.govgr-gap-xs-8 {
+  @apply gap-8;
+}
+.govgr-gap-xs-10 {
+  @apply gap-10;
+}
+.govgr-gap-xs-12 {
+  @apply gap-12;
+}
+.govgr-gap-sm-1 {
+  @apply sm:gap-1;
+}
+.govgr-gap-sm-2 {
+  @apply sm:gap-2;
+}
+.govgr-gap-sm-4 {
+  @apply sm:gap-4;
+}
+.govgr-gap-sm-5 {
+  @apply sm:gap-5;
+}
+.govgr-gap-sm-6 {
+  @apply sm:gap-6;
+}
+.govgr-gap-sm-8 {
+  @apply sm:gap-8;
+}
+.govgr-gap-sm-10 {
+  @apply sm:gap-10;
+}
+.govgr-gap-sm-12 {
+  @apply sm:gap-12;
+}
+.govgr-gap-md-1 {
+  @apply md:gap-1;
+}
+.govgr-gap-md-2 {
+  @apply md:gap-2;
+}
+.govgr-gap-md-4 {
+  @apply md:gap-4;
+}
+.govgr-gap-md-5 {
+  @apply md:gap-5;
+}
+.govgr-gap-md-6 {
+  @apply md:gap-6;
+}
+.govgr-gap-md-8 {
+  @apply md:gap-8;
+}
+.govgr-gap-md-10 {
+  @apply md:gap-10;
+}
+.govgr-gap-md-12 {
+  @apply md:gap-12;
+}
+.govgr-gap-lg-1 {
+  @apply lg:gap-1;
+}
+.govgr-gap-lg-2 {
+  @apply lg:gap-2;
+}
+.govgr-gap-lg-4 {
+  @apply lg:gap-4;
+}
+.govgr-gap-lg-5 {
+  @apply lg:gap-5;
+}
+.govgr-gap-lg-6 {
+  @apply lg:gap-6;
+}
+.govgr-gap-lg-8 {
+  @apply lg:gap-8;
+}
+.govgr-gap-lg-10 {
+  @apply lg:gap-10;
+}
+.govgr-gap-lg-12 {
+  @apply lg:gap-12;
+}
+.govgr-gap-xl-1 {
+  @apply xl:gap-1;
+}
+.govgr-gap-xl-2 {
+  @apply xl:gap-2;
+}
+.govgr-gap-xl-4 {
+  @apply xl:gap-4;
+}
+.govgr-gap-xl-5 {
+  @apply xl:gap-5;
+}
+.govgr-gap-xl-6 {
+  @apply xl:gap-6;
+}
+.govgr-gap-xl-8 {
+  @apply xl:gap-8;
+}
+.govgr-gap-xl-10 {
+  @apply xl:gap-10;
+}
+.govgr-gap-xl-12 {
+  @apply xl:gap-12;
 }

package/src/utilities/utilities.css

@@ -390,12 +390,12 @@
   .govgr-pr-12 {
     @apply pr-11 md:pr-20 !important;
   }
-  .govgr-grid {
-    @apply grid grid-cols-12;
-  }
   .govgr-grid-inline {
     @apply inline-grid;
   }
+  .govgr-grid {
+    @apply grid grid-cols-12;
+  }
   .govgr-grid__col-auto {
     @apply col-auto;
   }
@@ -453,6 +453,9 @@
   .govgr-gap-4 {
     @apply gap-4;
   }
+  .govgr-gap-5 {
+    @apply gap-5;
+  }
   .govgr-gap-6 {
     @apply gap-6;
   }
@@ -465,5 +468,125 @@
   .govgr-gap-12 {
     @apply gap-12;
   }
+  .govgr-gap-xs-1 {
+    @apply gap-1;
+  }
+  .govgr-gap-xs-2 {
+    @apply gap-2;
+  }
+  .govgr-gap-xs-4 {
+    @apply gap-4;
+  }
+  .govgr-gap-xs-5 {
+    @apply gap-5;
+  }
+  .govgr-gap-xs-6 {
+    @apply gap-6;
+  }
+  .govgr-gap-xs-8 {
+    @apply gap-8;
+  }
+  .govgr-gap-xs-10 {
+    @apply gap-10;
+  }
+  .govgr-gap-xs-12 {
+    @apply gap-12;
+  }
+  .govgr-gap-sm-1 {
+    @apply sm:gap-1;
+  }
+  .govgr-gap-sm-2 {
+    @apply sm:gap-2;
+  }
+  .govgr-gap-sm-4 {
+    @apply sm:gap-4;
+  }
+  .govgr-gap-sm-5 {
+    @apply sm:gap-5;
+  }
+  .govgr-gap-sm-6 {
+    @apply sm:gap-6;
+  }
+  .govgr-gap-sm-8 {
+    @apply sm:gap-8;
+  }
+  .govgr-gap-sm-10 {
+    @apply sm:gap-10;
+  }
+  .govgr-gap-sm-12 {
+    @apply sm:gap-12;
+  }
+  .govgr-gap-md-1 {
+    @apply md:gap-1;
+  }
+  .govgr-gap-md-2 {
+    @apply md:gap-2;
+  }
+  .govgr-gap-md-4 {
+    @apply md:gap-4;
+  }
+  .govgr-gap-md-5 {
+    @apply md:gap-5;
+  }
+  .govgr-gap-md-6 {
+    @apply md:gap-6;
+  }
+  .govgr-gap-md-8 {
+    @apply md:gap-8;
+  }
+  .govgr-gap-md-10 {
+    @apply md:gap-10;
+  }
+  .govgr-gap-md-12 {
+    @apply md:gap-12;
+  }
+  .govgr-gap-lg-1 {
+    @apply lg:gap-1;
+  }
+  .govgr-gap-lg-2 {
+    @apply lg:gap-2;
+  }
+  .govgr-gap-lg-4 {
+    @apply lg:gap-4;
+  }
+  .govgr-gap-lg-5 {
+    @apply lg:gap-5;
+  }
+  .govgr-gap-lg-6 {
+    @apply lg:gap-6;
+  }
+  .govgr-gap-lg-8 {
+    @apply lg:gap-8;
+  }
+  .govgr-gap-lg-10 {
+    @apply lg:gap-10;
+  }
+  .govgr-gap-lg-12 {
+    @apply lg:gap-12;
+  }
+  .govgr-gap-xl-1 {
+    @apply xl:gap-1;
+  }
+  .govgr-gap-xl-2 {
+    @apply xl:gap-2;
+  }
+  .govgr-gap-xl-4 {
+    @apply xl:gap-4;
+  }
+  .govgr-gap-xl-5 {
+    @apply xl:gap-5;
+  }
+  .govgr-gap-xl-6 {
+    @apply xl:gap-6;
+  }
+  .govgr-gap-xl-8 {
+    @apply xl:gap-8;
+  }
+  .govgr-gap-xl-10 {
+    @apply xl:gap-10;
+  }
+  .govgr-gap-xl-12 {
+    @apply xl:gap-12;
+  }
 };