@digigov/css 1.0.0-88820b1e → 1.0.0-8b33e4c8

package/src/components/layout.css

@@ -1,3 +1,4 @@
+
 .govgr-layout {
   display: flex;
   flex-direction: column;
@@ -13,30 +14,37 @@
 .govgr-container--full-width {
   @apply max-w-full;
 }
-.govgr-main-wrapper {
-  @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16
-  print:gap-4 print:grid-cols-1;
-}
-.govgr-grid-column-two-thirds {
-  @apply col-span-2;
-}
-.govgr-grid-column-one-third {
-  @apply col-span-1;
-}
 .govgr-top {
   @apply mb-4;
 }
 .govgr-aside {
-  @apply flex flex-wrap flex-col md:sticky md:top-8 h-fit print:order-1;
+  @apply flex flex-wrap flex-col md:top-8 h-fit print:order-1;
+  .govgr-back-to-top {
+    @apply flex flex-1 content-end flex-wrap;
+    .govgr-back-to-top-link {
+      @apply md:mx-6 md:my-4;
+    }
+    &.govgr-back-to-top--persistent {
+      .govgr-back-to-top-content {
+        @apply sticky bottom-0 mb-4;
+      }
+    }
+  }
+}
+.govgr-aside--sticky {
+  @apply md:sticky;
+  &.govgr-aside--full-height {
+    max-height: calc(100vh - 2rem);
+  }
+}
+.govgr-aside--full-height {
+  @apply h-full;
 }
 .govgr-bottom {
   @apply w-full flex flex-wrap  box-border;
 }
 .govgr-btn-group {
   @apply flex flex-wrap items-center gap-4 mb-6 print:items-baseline;
-  .govgr-btn, .govgr-link {
-    @apply mb-0;
-  }
 }
 @media print {
   /* When govgr-btn-group is empty at print, content at :after limits its height.  */
@@ -51,11 +59,36 @@
   @apply border-t border-base-300 border-solid;
 }
 .govgr-section-break--md {
- @apply mb-5;
+  @apply mb-5;
 }
 .govgr-section-break--lg {
- @apply mb-7;
+  @apply mb-7;
 }
 .govgr-section-break--xl {
- @apply mb-9;
-}
+  @apply mb-9;
+}
+
+/* overrides */
+
+.govgr-main {
+  >.govgr-back-to-top--persistent {
+    @apply fixed bottom-0 right-0 bg-base-200 w-full z-5;
+    .govgr-back-to-top-link {
+      @apply mx-6 my-4;
+    }
+    .govgr-back-to-top-content {
+      @apply max-w-5xl mx-auto my-0;
+    }
+  }
+}
+.govgr-container {
+  &.govgr-grid {
+    @apply py-4 print:gap-4 print:grid-cols-1;
+  }
+}
+.govgr-btn-group {
+  .govgr-btn,
+  .govgr-link {
+    @apply mb-0;
+  }
+}

package/src/components/loader.css

@@ -5,15 +5,15 @@
   animation: rotate 10s linear infinite;
   @apply w-fit h-10;
 }
-.govgr-loader__circle {
+.govgr-circular-progress__circle {
   fill: none;
   stroke-miterlimit: 10;
   stroke-width: 42px;
 }
-.govgr-loader__circle--1 {
+.govgr-circular-progress__circle--1 {
   stroke: var(--color-secondary);
 }
-.govgr-loader__circle--2 {
+.govgr-circular-progress__circle--2 {
   --full-length: 470;
   stroke: var(--color-primary);
   stroke-dasharray: var(--full-length);
@@ -21,26 +21,15 @@
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
 .govgr-circular-progress--secondary {
-  .govgr-loader__circle--1 {
+  .govgr-circular_progress__circle--1 {
     @apply opacity-40;
     stroke: var(--color-white);
   }
 
-  .govgr-loader__circle--2 {
+  .govgr-circular-progress__circle--2 {
     stroke: var(--color-white);
   }
 }
-@media print {
-  .govgr-btn {
-    .govgr-circular-progress--secondary {
-      .govgr-loader__circle--1,
-      .govgr-loader__circle--2 {
-        stroke: var(--color-base-content);
-      }
-    }
-  }
-}
-
 .govgr-circular-progress--sm {
   @apply h-5 w-5;
 }

package/src/components/masthead.css

@@ -0,0 +1,78 @@
+.govgr-masthead {
+  @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
+}
+.govgr-masthead--primary {
+  @apply bg-tertiary text-white;
+  .govgr-masthead__body {
+    @apply text-white;
+  }
+}
+.govgr-masthead--secondary {
+  @apply border-b border-base-400 !important;
+  @apply bg-base-200;
+  .govgr-masthead__body {
+    @apply text-base-content;
+  }
+}
+.govgr-masthead__body {
+  @apply md:mb-10 mb-6 md:text-lg text-base leading-7 print:text-base-content;
+}
+.govgr-masthead__logo {
+  @apply md:mb-6 mb-4 h-10;
+}
+
+/* overrides */
+
+.govgr-masthead {
+  .govgr-main > *:last-child {
+    @apply mb-0;
+  }
+  .govgr-header__content {
+    @apply flex-wrap;
+  }
+}
+.govgr-masthead--primary {
+  .govgr-body {
+    @apply text-white;
+  }
+  .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 {
+    @apply text-white print:text-base-content;
+  }
+  .govgr-phase-banner__text {
+    @apply text-white print:text-base-content;
+  }
+}
+.govgr-masthead--primary,
+.govgr-background-dark {
+  .govgr-btn {
+    @apply border-white hover:border-white border-2 shadow-none;
+    &:focus {
+      -webkit-box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
+      box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
+    }
+  }
+  .govgr-btn-primary {
+    @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-btn-secondary {
+    @apply print:border-0 print:border-b-2 print:border-base-500 print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-btn-warning {
+    @apply print:border-0 print:border-b-2  print:border-error print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-hint {
+    @apply opacity-70 text-white print:text-base-content;
+  }
+}

package/src/components/misc.css

@@ -1,35 +1,3 @@
-.govgr-blockquote {
-  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500;
-}
-
-.govgr-warning-text {
-  @apply p-4;
-}
-.govgr-warning-text {
-  font-size: var(--warning-text-font-size);
-  @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 {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    border: 0 !important;
-    white-space: nowrap !important;
-  }
-}
 .tooltip {
   @apply inline-block relative m-0 p-0 underline w-min cursor-pointer;
   text-decoration-style: dotted;
@@ -52,15 +20,23 @@
     }
   }
 }
-.govgr-visually-hidden {
-  @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
-  width: 1px !important;
-  height: 1px !important;
-  clip: rect(0 0 0 0) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-}
-
 .govgr-cookie-banner {
   @apply bg-base-200;
 }
+
+/* overrides */
+
+div[class*="govgr-grid__col-span"] {
+  >.govgr-card {
+    @apply mb-0;
+  }
+}
+.govgr-image-logo {
+  @apply h-10;
+}
+.govgr-image-logo--light {
+  @apply h-10;
+}
+.govgr-image-logo--dark {
+  @apply h-10 hidden;
+}

package/src/components/modal.css

@@ -3,6 +3,7 @@
   mb-7 text-base-content bg-opacity-50 bg-base-700
   fixed z-50 left-0 top-0 w-full h-full overflow-auto;
 }
+
 .govgr-modal--open {
   @apply flex;
 }
@@ -21,8 +22,17 @@
 }
 .govgr-modal__action {
   @apply flex flex-wrap items-center gap-4;
+}
+
+.govgr-modal__action {
   .govgr-link,
   .govgr-btn {
     @apply mb-0;
   }
 }
+
+.govgr-modal--dense, .govgr-dense & {
+  .govgr-modal__container {
+    @apply px-4 py-0 gap-4;
+  }
+}

package/src/components/nav.css

@@ -1,123 +1,69 @@
-.govgr-header {
-  @apply relative;
-  .govgr-svg-icon--burger {
-    fill: var(--color-white);
-    @apply float-right focus:bg-focus;
-  }
-  .govgr-close-btn {
-    @apply sm:hidden;
-    .govgr-svg-icon--close {
-      fill: var(--color-link) !important;
-    }
-  }
-  .govgr-nav {
-    @apply fixed;
-  }
-  .govgr-nav__list {
-    @apply sm:flex !important;
-    @apply sm:w-min xs:hidden 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-nav__list-item {
-    @apply text-base-content sm:mr-auto sm:ml-auto sm:text-center sm:underline mr-0 xs:px-2 xs:py-1 sm:gap-x-6;
-    .govgr-svg-icon {
-      fill: var(--color-white) !important;
-    }
-  }
+.govgr-nav {
+  @apply relative block w-full h-auto bg-base-100 text-base-content;
+  /* .govgr-nav__list {
+    @apply px-3;
+  } */
   .govgr-nav__list-item-link,
   .govgr-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;
-      }
-    }
+    @apply md:no-underline !important;
   }
-  .govgr-nav__list--active {
-    @apply sm:bg-tertiary !important;
+}
+.govgr-nav--hidden {
+  @apply hidden;
+}
+.govgr-nav--drawer {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4;
+  @apply shadow-thick !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0;
   }
 }
-/* --- NAV ---  */
-.govgr-nav {
-  @apply sm:block !important;
-  @apply xs:hidden w-3/4 sm:w-full h-full bg-base-100
-   sm:h-auto sm:bg-base-100 xs:text-base-content
-  z-30 sm:z-auto 
-  opacity-100 right-0 top-0 sm:top-auto overflow-x-scroll sm:overflow-visible;
+.govgr-nav--drawer-smDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  sm:relative sm:block sm:w-full sm:h-auto sm:z-auto sm:top-auto sm:overflow-visible sm:p-0;
+  @apply shadow-thick sm:shadow-none !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0 sm:px-4;
+  }
+}
+.govgr-nav--drawer-mdDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  md:relative md:block md:w-full md:h-auto md:z-auto md:top-auto md:overflow-visible md:p-0;
+  @apply shadow-thick md:shadow-none !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0 md:px-4;
+  }
 }
-.govgr-nav--fixed {
-  @apply fixed sm:relative;
+
+.govgr-nav--drawer-lgDown {
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto p-4
+  lg:relative lg:block lg:w-full lg:h-auto lg:z-auto lg:top-auto lg:overflow-visible lg:p-0;
+  @apply shadow-thick lg:shadow-none !important;
+  .govgr-nav__list--horizontal {
+    @apply px-0 lg:px-4;
+  }
 }
 .govgr-nav--border {
   @apply sm:border-b sm:border-base-400;
 }
-.govgr-nav--open {
-  @apply xs:block;
+.govgr-nav__list {
+  @apply w-full m-0 max-w-5xl static flex flex-wrap flex-col;
 }
-.govgr-nav--hidden {
-  @apply hidden !important;
-}
-.govgr-nav__list-item {
-  @apply text-base-content
-  xs:py-1;
-}
-.govgr-nav--horizontal {
-  .govgr-nav--horizontal {
-    @apply sm:mt-2 sm:border-b-0 static w-full z-1 sm:order-1;
-    @apply block overflow-x-visible;
-    .govgr-nav__list {
-      @apply sm:px-0 sm:pb-0 sm:ml-6 !important;
-    }
-  }
-  .govgr-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: 41px !important;
-      @apply sm:flex !important;
-      @apply xs:hidden sm:p-0 absolute left-0 right-0;
-    }
-  }
+.govgr-nav__list--horizontal {
+  @apply sm:mx-auto sm:gap-x-6 sm:py-1 px-4 sm:flex-row;
   .govgr-nav__list-item {
     @apply sm:gap-x-6;
   }
-  .govgr-close-btn {
-    @apply sm:hidden mt-3;
-  }
-  .govgr-heading-md {
-    @apply mb-0;
-  }
 }
-.govgr-nav--vertical {
-  .govgr-nav--vertical {
-    @apply sm:mt-2 sm:border-b-0 static w-full z-1;
-    @apply block overflow-x-visible;
-  }
-  .govgr-nav__list {
-    @apply w-full m-0 max-w-5xl static xs:px-3
-    flex flex-wrap flex-col;
-  }
-  .govgr-close-btn {
-    @apply sm:hidden mt-3;
-  }
-  .govgr-heading-md {
-    @apply mb-0;
-  }
+.govgr-nav__list--full-width {
+  @apply max-w-none;
 }
-.govgr-nav__list,
-.govgr-main-wrapper {
-  .govgr-drawer__heading {
-    @apply flex-row-reverse;
-  }
+.govgr-nav__list-item {
+  @apply text-base-content font-normal py-1;
 }
 .govgr-nav__list-item-link,
 .govgr-nav__list-item-btn {
-  @apply md:no-underline !important;
-  .govgr-svg-icon {
-    @apply ml-0.5;
-  }
+  @apply text-left;
   &:focus {
     @apply bg-focus text-base-content outline-none;
     box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
@@ -130,50 +76,71 @@
 .govgr-nav__list-item-btn--active {
   @apply text-base-content !important;
   @apply font-semibold;
-  > .govgr-svg-icon {
-    fill: var(--color-base-content) !important;
-  }
 }
 
-/* --- NAV-MENU --- */
 .govgr-nav-menu {
-  @apply flex z-1 w-full;
+  @apply flex w-full;
 }
 .govgr-nav-menu--hidden {
   @apply hidden;
 }
 .govgr-nav-menu--horizontal {
   @apply sm:order-2 sm:left-0 sm:right-0 sm:relative sm:mt-3 sm:bg-base-100;
-  .govgr-main-wrapper {
-    @apply xs:gap-y-2;
-  }
   .govgr-nav-menu__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;
+    @apply sm:grid-rows-1 sm:grid-cols-3;
+  }
+  .govgr-nav-menu__title {
+    @apply hidden sm:block;
+    + .govgr-nav-menu__content > .govgr-nav-menu__content-list {
+      @apply sm:grid-cols-2;
+    }
   }
 }
 .govgr-nav-menu--vertical {
-  .govgr-nav-menu__content-list {
-    @apply p-0 grid-flow-row xs:grid-cols-1 xs:grid-rows-6;
-  }
-  .govgr-nav-menu__container-title {
-    @apply mt-3;
-  }
-  .govgr-nav-menu__container-title-heading {
+  .govgr-nav-menu__title {
     @apply hidden;
   }
+  .govgr-nav-menu__content-list {
+    @apply py-2 sm:py-4;
+  }
+}
+.govgr-nav-menu__content-list {
+  @apply p-0 grid grid-flow-row grid-cols-1;
 }
 .govgr-nav-menu__content-list-item {
-  @apply relative pt-0 pb-5 pr-3 pl-0  box-border;
+  @apply relative pt-0 pb-5 pr-3 pl-0 box-border;
 }
 
-/* --- VERTICAL LIST --- */
-.govgr-vertical-nav {
-  @apply flex flex-wrap;
+/* overrides */
+
+.govgr-nav {
+  .govgr-close-btn {
+    @apply mb-4;
+  }
+  .govgr-heading-md {
+    @apply mb-2 md:mb-0;
+  }
 }
-.govgr-vertical-nav__item {
-  @apply w-full py-2 !important;
+/* .govgr-nav__list,
+.govgr-grid {
+  .govgr-drawer__heading {
+    @apply flex-row-reverse;
+  }
+} */
+.govgr-nav__list-item-link,
+.govgr-nav__list-item-btn {
+  > .govgr-svg-icon {
+    @apply ml-1;
+  }
 }
-.govgr-vertical-nav__item--active {
-  @apply font-semibold !important;
+.govgr-nav__list-item-link--active,
+.govgr-nav__list-item-btn--active {
+  > .govgr-svg-icon {
+    fill: var(--color-base-content) !important;
+  }
+}
+.govgr-nav-menu--horizontal {
+  .govgr-grid {
+    @apply gap-y-2;
+  }
 }

package/src/components/notification-banner.css

@@ -1,5 +1,14 @@
 .govgr-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+  &.govgr-notification-banner--dense, .govgr-dense & {
+    @apply border-4 mb-4 md:mb-5;
+    .govgr-notification-banner__title {
+      @apply px-2 sm:px-3 pb-1;
+    }
+    .govgr-notification-banner__content {
+      @apply p-3 md:p-4;
+    }
+  }
 }
 .govgr-notification-banner--info {
   @apply bg-info border-info;
@@ -9,7 +18,7 @@
   .govgr-notification-banner__link {
     &:link:not(:focus) {
       @apply text-success;
-    } 
+    }
   }
 }
 .govgr-notification-banner--error {
@@ -46,7 +55,9 @@
   }
   &:focus {
     background-color: var(--color-focus);
-    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    box-shadow:
+      0 -2px var(--color-focus),
+      0 4px var(--color-base-content);
     text-decoration: none;
     outline: none;
   }
@@ -55,4 +66,4 @@
   .govgr-notification-banner__link {
     font-size: inherit;
   }
-}
+}