@digigov/css 1.0.0-7c9716da → 1.0.0-871b6be5

package/src/components/footer.css

@@ -9,13 +9,13 @@
     @apply print:text-base-content;
   }
 }
-.govgr-footer__meta {
+.govgr-footer__info {
   @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
 }
-.govgr-footer__meta-item {
+.govgr-footer__info-section {
   @apply mx-2 md:mx-4 mb-6 print:mb-4;
 }
-.govgr-footer__meta-item--grow {
+.govgr-footer__info-section--grow {
   @apply flex flex-grow;
 }
 .govgr-footer__content {
@@ -38,19 +38,13 @@
 .govgr-footer__logo, .govgr-footer__government-logo {
   @apply max-w-full h-auto w-52 min-w-52 block;
 }
-.govgr-footer__licence-description {
+.govgr-footer__copyright {
   @apply mt-6 print:mt-4;
-  font-size: var(--footer__licence-description-font-size);
+  font-size: var(--footer__copyright-font-size);
   .govgr-link {
     font-size: inherit;
   }
 }
-.govgr-footer__inline-list {
-  @apply mt-0 mb-4 p-0 print:hidden;
-}
-.govgr-footer__inline-list-item {
-  @apply inline-block mr-4 mb-2;
-}
 .govgr-footer__link {
   @apply underline ;
   &:hover {
@@ -66,20 +60,26 @@
 .govgr-footer__navigation {
     @apply flex flex-wrap print:hidden;
 }
-.govgr-footer__section {
+.govgr-footer__navigation-section {
     @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink
     print:hidden;
 }
-@media (min-width: 48em) {
-  .govgr-footer__section:first-child:nth-last-child(2) {
+@media (min-width: 768px) {
+  .govgr-footer__navigation-section:first-child:nth-last-child(2) {
     @apply flex-grow-2;
   }
 }
 .govgr-footer__list {
-  @apply m-0 p-0 list-none gap-x-6 
+  @apply m-0 p-0 list-none gap-x-6 text-sm md:text-base
   print:hidden;
 }
-@media (min-width: 48em) {
+.govgr-footer__list--horizontal {
+  @apply mb-4;
+  .govgr-footer__list-item {
+    @apply inline-block mr-4 mb-2;
+  }
+}
+@media (min-width: 768px) {
   .govgr-footer__list--columns-2 {
     column-count: 2;
   }

package/src/components/form.css

@@ -74,36 +74,35 @@
   }
 }
 .govgr-date-input,
-.govgr-single-character-input--container {
-  @apply flex;
+.govgr-single-character-input {
+  @apply flex flex-wrap gap-y-2;
 }
 .govgr-select {
   @apply w-auto max-w-full;
 }
-.govgr-input--width-20 {
+.govgr-input--width-20-char {
   max-width: 41ex;
 }
-.govgr-input--width-10 {
+.govgr-input--width-10-char {
   max-width: 23ex;
 }
-.govgr-input--width-5 {
+.govgr-input--width-5-char {
   max-width: 10.8ex;
 }
-.govgr-input--width-4 {
+.govgr-input--width-4-char {
   max-width: 9ex;
 }
-.govgr-input--width-3 {
+.govgr-input--width-3-char {
   max-width: 7.2ex;
 }
-.govgr-input--width-2 {
+.govgr-input--width-2-char {
   max-width: 5.4ex;
 }
-.govgr-otp-input--width {
-  max-width: 3.1ex;
-  @apply text-center pl-0 pr-0;
+.govgr-single-character-input__item {
+  max-width: 4.4ex;
+  @apply text-center px-0 mr-3;
 }
-.govgr-date-input__item,
-.govgr-otp-input__item {
+.govgr-date-input__item {
   @apply mr-4;
 }
 .govgr-\!-width-one-quarter,
@@ -137,9 +136,6 @@
 
 /* error handling  */
 
-.govgr-error-summary {
-  @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
-}
 .govgr-field--error {
   @apply border-l-5 border-error px-0 pl-4;
 }
@@ -184,6 +180,6 @@
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
 }
-.govgr-choice-divider {
-  @apply text-lg text-center w-10 mb-4;
+.govgr-choice-divider-text {
+  @apply text-lg text-center min-w-10 w-max mb-4;
 }

package/src/components/header.css

@@ -2,16 +2,12 @@
   @apply bg-primary border-b-8 print:border-b-2 border-tertiary;
   @apply print:bg-white;
   border-bottom-style: solid;
-  .govgr-svg-icon--burger {
-    fill: var(--color-base-content);
-    @apply float-right cursor-pointer;
-  }
 }
-.govgr-header__container {
+.govgr-header__content {
   @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
   print:px-0 gap-3;
 }
-.govgr-header__content {
+.govgr-header__section {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
 }
@@ -53,7 +49,7 @@
   .govgr-grid-column-two-thirds > *:last-child {
     @apply mb-0;
   }
-  .govgr-header__container {
+  .govgr-header__content {
     @apply flex-wrap;
   }
 }
@@ -79,3 +75,43 @@
 .govgr-masthead__logo {
   @apply md:mb-6 mb-4 h-10;
 }
+
+/* overrides */
+
+.govgr-header {
+  @apply relative;
+  .govgr-dropdown__button {
+    @apply sm:w-max;
+  }
+}
+.govgr-header-nav-menu__content, .govgr-header__content, .govgr-header__section {
+  >.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__list {
+    > .govgr-nav__list-item {
+      > .govgr-nav__list-item-link,
+      > .govgr-nav__list-item-btn {
+        &:not(:focus) {
+          @apply text-white;
+        }
+      }
+      > .govgr-nav__list-item-link--active,
+      > .govgr-nav__list-item-btn--active {
+        &:not(:focus) {
+          @apply text-white !important;
+        }
+        .govgr-svg-icon {
+          fill: var(--color-white);
+        }
+      }
+    }
+  }
+}

package/src/components/hidden.css

@@ -1,3 +1,6 @@
+.govgr-hidden {
+  @apply hidden;
+}
 .govgr-hidden-xs--up {
   @apply xs:hidden;
 }

package/src/components/index.css

@@ -25,6 +25,7 @@
 @import "./panel.css";
 @import "./phase-banner.css";
 @import "./summary-list.css";
+@import "./stack.css";
 @import "./tabs.css";
 @import "./misc.css";
 @import "./modal.css";

package/src/components/kitchensink.css

@@ -46,7 +46,7 @@
 .govgr-kitchensink-card .govgr-table__cell .govgr-dropdown {
   margin: 0 !important;
 }
-.govgr-kitchensink-card .govgr-layout-wrapper__full-height {
+.govgr-kitchensink-card .govgr-layout--full-height {
   min-height: inherit;
 }
 @container (min-width: 400px) {
@@ -58,7 +58,7 @@
   .govgr-kitchensink-card .govgr-drawer--closed {
     @apply hidden;
   }
-  .govgr-kitchensink-card .govgr-drawer__close-icon {
+  .govgr-kitchensink-card .govgr-close-btn {
     @apply block;
   }
 }

package/src/components/layout.css

@@ -1,18 +1,17 @@
-.govgr-layout-wrapper {
+.govgr-layout {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }
-.govgr-layout-wrapper__full-height {
+.govgr-layout--full-height {
   min-height: 100vh;
 }
-.govgr-width-container {
-  @apply  max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
+.govgr-container {
+  @apply max-w-5xl box-border mx-auto px-3 md:px-6 w-full;
   flex: 1 1 0%;
 }
-.govgr-full-width-container {
-  @apply max-w-full box-border mx-auto px-3 md:px-6 w-full;
-  flex: 1 1 0%;
+.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
@@ -49,7 +48,7 @@
   @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
 }
 .govgr-section-break--visible {
-  @apply border-t border-base-300 border-solid	;
+  @apply border-t border-base-300 border-solid;
 }
 .govgr-section-break--md {
  @apply mb-5;

package/src/components/loader.css

@@ -1,7 +1,7 @@
-.govgr-loader__container {
+.govgr-loader {
   @apply h-fit w-fit m-auto overflow-hidden print:hidden;
 }
-.govgr-loader {
+.govgr-circular-progress {
   animation: rotate 10s linear infinite;
   @apply w-fit h-10;
 }
@@ -20,7 +20,7 @@
   stroke-dashoffset: 0;
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
-.govgr-loader--inverse {
+.govgr-circular-progress--secondary {
   .govgr-loader__circle--1 {
     @apply opacity-40;
     stroke: var(--color-white);
@@ -32,7 +32,7 @@
 }
 @media print {
   .govgr-btn {
-    .govgr-loader--inverse {
+    .govgr-circular-progress--secondary {
       .govgr-loader__circle--1,
       .govgr-loader__circle--2 {
         stroke: var(--color-base-content);
@@ -41,13 +41,13 @@
   }
 }
 
-.govgr-loader--sm {
+.govgr-circular-progress--sm {
   @apply h-5 w-5;
 }
-.govgr-loader--md {
+.govgr-circular-progress--md {
   @apply h-10 w-10;
 }
-.govgr-loader--lg {
+.govgr-circular-progress--lg {
   @apply h-12 w-12;
 }
 @keyframes dash {

package/src/components/modal.css

@@ -16,9 +16,6 @@
 .govgr-modal__container {
   @apply grid p-10 gap-6 px-6 py-2;
 }
-.govgr-modal__heading {
-  @apply md:text-2xl text-xl font-bold;
-}
 .govgr-modal__content {
   @apply text-base lg:text-xl text-lg;
 }

package/src/components/nav.css

@@ -1,123 +1,44 @@
-.govgr-header {
-  @apply relative;
-  .govgr-svg-icon--burger {
-    fill: var(--color-white);
-    @apply float-right focus:bg-focus;
-  }
-  .govgr-drawer__close-icon {
-    @apply sm:hidden;
-    .govgr-svg-icon--close {
-      fill: var(--color-link) !important;
-    }
-  }
-  .govgr-nav {
-    @apply fixed;
-  }
+.govgr-nav {
+  @apply relative block w-full h-auto bg-base-100 text-base-content;
   .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;
-    }
+    @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;
-      }
-    }
-  }
-  .govgr-nav__list--active {
-    @apply sm:bg-tertiary !important;
+    @apply md:no-underline !important;
   }
 }
-/* --- 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--fixed {
-  @apply fixed sm:relative;
+  @apply fixed w-4/5 h-full z-30 right-0 top-0 overflow-x-auto
+  sm:relative sm:block sm:w-full sm:h-auto sm:z-auto sm:top-auto sm:overflow-visible;
+  @apply shadow-thick sm:shadow-none !important;
+  .govgr-nav__list {
+    @apply p-4;
+  }
+}
+.govgr-nav--open {
+  @apply block;
 }
 .govgr-nav--border {
   @apply sm:border-b sm:border-base-400;
 }
-.govgr-nav--open {
-  @apply xs:block;
-}
-.govgr-nav--hidden {
-  @apply hidden !important;
+.govgr-nav__list {
+  @apply w-full m-0 max-w-5xl static flex flex-wrap flex-col;
 }
-.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-3 sm:px-0 sm:flex-row;
   .govgr-nav__list-item {
     @apply sm:gap-x-6;
   }
-  .govgr-drawer__close-icon {
-    @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-drawer__close-icon {
-    @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 py-1;
 }
 .govgr-nav__list-item-link,
 .govgr-nav__list-item-btn {
-  @apply md:no-underline !important;
-  .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);
@@ -130,14 +51,10 @@
 .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;
@@ -145,35 +62,58 @@
 .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;
+    @apply 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 sm:hidden mt-3;
+  }
+  .govgr-heading-md {
+    @apply mb-2 md:mb-0;
+  }
 }
-.govgr-vertical-nav__item {
-  @apply w-full p-2 !important;
+.govgr-nav__list,
+.govgr-main-wrapper {
+  .govgr-drawer__heading {
+    @apply flex-row-reverse;
+  }
+}
+.govgr-nav__list-item-link,
+.govgr-nav__list-item-btn {
+  > .govgr-svg-icon {
+    @apply ml-0.5;
+  }
 }
-.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;
+  }
 }

package/src/components/notification-banner.css

@@ -1,13 +1,22 @@
 .govgr-notification-banner {
-  @apply bg-info border-5 border-info mb-6 md:mb-8 font-normal
-  print:bg-base-100;
+  @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+}
+.govgr-notification-banner--info {
+  @apply bg-info border-info;
 }
 .govgr-notification-banner--success {
-  @apply bg-success border-success
-  print:bg-white;
+  @apply bg-success border-success;
   .govgr-notification-banner__link {
-    &:link {
+    &:link:not(:focus) {
       @apply text-success;
+    } 
+  }
+}
+.govgr-notification-banner--error {
+  @apply bg-error border-error;
+  .govgr-notification-banner__link {
+    &:link:not(:focus) {
+      @apply text-error;
     }
   }
 }
@@ -27,11 +36,8 @@
     @apply mb-0;
   }
 }
-.govgr-notification-banner__heading {
-  @apply p-0 m-0 mb-4 text-lg md:text-2xl font-bold;
-}
 .govgr-notification-banner__link {
-  @apply underline;
+  @apply underline text-base md:text-lg;
   &:link {
     @apply text-link;
   }
@@ -45,3 +51,8 @@
     outline: none;
   }
 }
+.govgr-notification-banner__heading {
+  .govgr-notification-banner__link {
+    font-size: inherit;
+  }
+}

package/src/components/pagination.css

@@ -18,7 +18,7 @@
       }
   }
 }
-.govgr-pagination--size-sm {
+.govgr-pagination--sm {
   .govgr-pagination__label, .govgr-label, .govgr-select, .govgr-pagination__item--current {
    @apply md:text-base text-sm;
   }

package/src/components/panel.css

@@ -1,10 +1,10 @@
 .govgr-panel {
   @apply box-border mb-4 p-8 border-5 border-transparent text-center
-  print:p-4;
+  print:p-4 text-white
+  print:border-4 print:text-base-content print:bg-white;
 }
-.govgr-panel--confirmation {
-  @apply bg-success text-white
-  print:border-4 print:border-success print:text-base-content print:bg-white;
+.govgr-panel--success {
+  @apply bg-success print:border-success;
 }
 .govgr-panel__title {
   @apply mx-auto mt-0;

package/src/components/phase-banner.css

@@ -1,4 +1,4 @@
-.govgr-phase-banner_header {
+.govgr-phase-banner__header {
   @apply bg-focus top-0 z-30
   print:bg-white print:border-focus print:border-2 print:px-4;
   .govgr-phase-banner {
@@ -8,6 +8,11 @@
 .govgr-phase-banner {
   @apply py-2 mb-4;
 }
+.govgr-header__section {
+  .govgr-phase-banner {
+    @apply mb-0;
+  }
+}
 .govgr-phase-banner--underline {
   @apply border-base-500 border-b;
 }

package/src/components/radios.css

@@ -3,14 +3,10 @@
   @apply block relative mb-4 pl-12;
   min-height: 40px;
 }
-.govgr-radios--inline {
-  .govgr-radios__item {
-    @apply sm:mr-6 sm:float-left sm:clear-none;
-  }
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
+.govgr-radios--horizontal {
+  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
+  .govgr-choice-divider-text {
+    @apply min-w-max mx-2;
   }
 }
 .govgr-radios__item {