@digigov/css 0.39.0-b5106f43 → 1.0.0-6b93ebf2

package/src/components/header.css

@@ -2,63 +2,64 @@
   @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 {
   @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
   print:px-0 gap-3;
 }
-.govgr-header__container-full {
-  @apply max-w-full;
-}
 .govgr-header__content {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
 }
-.govgr-header-nav-menu__content {
-  @apply flex justify-start items-center gap-x-4 gap-y-2 print:gap-1;
-}
-.govgr-header-title {
-  @apply text-white font-bold text-2xl leading-10 tracking-wide no-underline
-  w-auto align-middle hover:no-underline 
-  print:text-base-content;
-  &:hover {
-    @apply text-white
-  }
-}
-.govgr-header-title:focus {
-  text-decoration:none;
-  outline: 4px solid var(--color-focus) !important;
-  outline-offset: 4px;
-}
-.govgr-header-logo {
+.govgr-header__logo {
   -webkit-print-color-adjust: exact !important;
   @apply h-12 print:hidden;
 }
-.govgr-header-logo-inverted {
+.govgr-header__logo-inverted {
   @apply h-12 hidden print:block;
 }
-.govgr-header-secondary-logo {
+.govgr-header__secondary-logo {
   @apply h-10 print:hidden;
 }
-.govgr-header-link:focus{
+.govgr-header__link:focus {
   box-shadow: 0px 0px 0px 4px var(--color-focus);
   -webkit-box-shadow: 0px 0px 0px 4px var(--color-focus);
   -moz-box-shadow: 0px 0px 0px 4px var(--color-focus);
-  outline: none; 
+  outline: none;
   text-decoration: none;
 }
+.govgr-header__title {
+  @apply text-white font-bold text-2xl leading-10 tracking-wide no-underline
+  w-auto align-middle hover:no-underline 
+  print:text-base-content;
+  &:hover {
+    @apply text-white;
+  }
+  &:focus {
+    text-decoration: none;
+    outline: 4px solid var(--color-focus) !important;
+    outline-offset: 4px;
+  }
+}
+.govgr-header-nav-menu__content {
+  @apply flex justify-start items-center gap-x-4 gap-y-2 print:gap-1;
+}
 .govgr-masthead {
   @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
-  .govgr-grid-column-two-thirds >*:last-child {
+  .govgr-grid-column-two-thirds > *:last-child {
     @apply mb-0;
   }
-  .govgr-header__container{
+  .govgr-header__container {
     @apply flex-wrap;
   }
 }
-.govgr-masthead--primary{
+.govgr-masthead--primary {
   @apply bg-tertiary text-white;
-  .govgr-masthead-body{
+  .govgr-masthead__body {
     @apply text-white;
   }
   .govgr-body {
@@ -68,13 +69,13 @@
 .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 text-base-content;
+  }
 }
-.govgr-masthead-body {
+.govgr-masthead__body {
   @apply md:mb-10 mb-6 md:text-lg text-base leading-7 print:text-base-content;
 }
-.govgr-masthead-logo {
+.govgr-masthead__logo {
   @apply md:mb-6 mb-4 h-10;
-}
+}

package/src/components/index.css

@@ -6,6 +6,7 @@
 @import "./chip.css";
 @import "./form.css";
 @import "./checkboxes.css";
+@import "./chip.css";
 @import "./dropdown.css";
 @import "./radios.css";
 @import "./header.css";
@@ -16,12 +17,9 @@
 @import "./table.css";
 @import "./filter.css";
 @import "./admin-layout.css";
-@import "./admin-form.css";
 @import "./admin-header.css";
-@import "./admin-footer.css";
 @import "./breadcrumbs.css";
 @import "./card.css";
-@import "./cookie.css";
 @import "./details.css";
 @import "./notification-banner.css";
 @import "./panel.css";

package/src/components/kitchensink.css

@@ -13,13 +13,13 @@
 .govgr-kitchensink-content {
   @apply max-w-2xl w-2xl;
 }
-.govgr-kitchensink-content-wide {
+.govgr-kitchensink-content--wide {
   @apply max-w-4xl w-4xl;
 }
 .govgr-kitchensink-content__info {
   @apply max-w-2xl;
 }
-.govgr-firma-tags {
+.govgr-kitchensink-content__tags {
   @apply flex flex-nowrap gap-2 h-16;
 }
 .govgr-kitchensink-card {

package/src/components/layout.css

@@ -6,13 +6,12 @@
 .govgr-layout-wrapper__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
@@ -22,23 +21,26 @@
   @apply col-span-2;
 }
 .govgr-grid-column-one-third {
-  @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit print:order-1;
+  @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;
+}
 .govgr-bottom {
   @apply w-full flex flex-wrap  box-border;
 }
-.govgr-button-group {
+.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-button-group is empty at print, content at :after limits its height.  */
-  .govgr-button-group:after {
+  /* When govgr-btn-group is empty at print, content at :after limits its height.  */
+  .govgr-btn-group:after {
     content: "";
   }
 }
@@ -48,10 +50,10 @@
 .govgr-section-break--visible {
   @apply border-t border-base-300 border-solid	;
 }
-.govgr-section-break--m {
+.govgr-section-break--md {
  @apply mb-5;
 }
-.govgr-section-break--l {
+.govgr-section-break--lg {
  @apply mb-7;
 }
 .govgr-section-break--xl {

package/src/components/loader.css

@@ -1,10 +1,7 @@
-:root {
-  --full-length: 470;
-}
-.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;
 }
@@ -17,12 +14,13 @@
   stroke: var(--color-secondary);
 }
 .govgr-loader__circle--2 {
+  --full-length: 470;
   stroke: var(--color-primary);
   stroke-dasharray: var(--full-length);
   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);
@@ -34,21 +32,22 @@
 }
 @media print {
   .govgr-btn {
-    .govgr-loader--inverse{
-      .govgr-loader__circle--1, .govgr-loader__circle--2 {
+    .govgr-circular-progress--secondary {
+      .govgr-loader__circle--1,
+      .govgr-loader__circle--2 {
         stroke: var(--color-base-content);
       }
     }
   }
 }
 
-.govgr-loader--small {
+.govgr-circular-progress--sm {
   @apply h-5 w-5;
 }
-.govgr-loader--medium {
+.govgr-circular-progress--md {
   @apply h-10 w-10;
 }
-.govgr-loader--large {
+.govgr-circular-progress--lg {
   @apply h-12 w-12;
 }
 @keyframes dash {
@@ -69,7 +68,7 @@
   }
 }
 @keyframes rotate {
-  to { 
-    transform: rotate(360deg); 
-  } 
+  to {
+    transform: rotate(360deg);
+  }
 }

package/src/components/misc.css

@@ -1,26 +1,19 @@
-.govgr-warning-text,
-.govgr-border-message {
-  @apply p-4;
-}
-.govgr-border-message {
-  @apply border-8;
-}
 .govgr-blockquote {
   @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500;
 }
-.govgr-error-summary {
-  @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
+
+.govgr-warning-text {
+  @apply p-4;
 }
 .govgr-warning-text {
   font-size: var(--warning-text-font-size);
-  @apply flex pl-0 pr-0;
+  @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 {
@@ -66,4 +59,8 @@
   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;
+}

package/src/components/modal.css

@@ -1,21 +1,21 @@
 .govgr-modal {
   @apply hidden justify-center items-center content-center text-left
   mb-7 text-base-content bg-opacity-50 bg-base-700
-  fixed z-50 left-0 top-0 w-full h-full overflow-auto; 
+  fixed z-50 left-0 top-0 w-full h-full overflow-auto;
+}
+.govgr-modal--open {
+  @apply flex;
 }
 .govgr-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
   bg-base-100
   border border-solid border-base-500;
-  max-height:95vh;
+  max-height: 95vh;
 }
 .govgr-modal__container {
   @apply grid p-10 gap-6 px-6 py-2;
 }
-.govgr-modal__open {
-  @apply flex;
-}
 .govgr-modal__heading {
   @apply md:text-2xl text-xl font-bold;
 }
@@ -24,7 +24,8 @@
 }
 .govgr-modal__action {
   @apply flex flex-wrap items-center gap-4;
-  .govgr-link, .govgr-btn {
+  .govgr-link,
+  .govgr-btn {
     @apply mb-0;
   }
 }

package/src/components/nav.css

@@ -1,11 +1,12 @@
 .govgr-header {
   @apply relative;
-  .govgr-burger-icon {
+  .govgr-svg-icon--burger {
     fill: var(--color-white);
+    @apply float-right focus:bg-focus;
   }
   .govgr-drawer__close-icon {
     @apply sm:hidden;
-    .govgr-close-icon {
+    .govgr-svg-icon--close {
       fill: var(--color-link) !important;
     }
   }
@@ -38,45 +39,6 @@
     @apply sm:bg-tertiary !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 
-  focus:bg-focus;
-  #govgr-burger-icon__line-1,
-  #govgr-burger-icon__line-2,
-  #govgr-burger-icon__line-3 {
-    @apply transition-all;
-  }
-}
-#govgr-burger-icon__line-1 {
-  x: 2px;
-  y: 3px;
-}
-#govgr-burger-icon__line-2 {
-  x: 2px;
-  y: 10.3px;
-}
-#govgr-burger-icon__line-3 {
-  @apply origin-top-left;
-  x: 2px;
-  y: 17.7px;
-}
-.govgr-burger-icon--active {
-  #govgr-burger-icon__line-1 {
-    transform: rotate(45deg);
-    transform-origin: 3px 8px;
-  }
-  #govgr-burger-icon__line-2 {
-    @apply w-0 origin-center;
-  }
-  #govgr-burger-icon__line-3 {
-    transform: rotate(-45deg);
-    transform-origin: 3px 16px;
-  }
-}
 
 /* --- NAV ---  */
 .govgr-nav {
@@ -125,7 +87,7 @@
   .govgr-drawer__close-icon {
     @apply sm:hidden mt-3;
   }
-  .govgr-heading-m {
+  .govgr-heading-md {
     @apply mb-0;
   }
 }
@@ -141,7 +103,7 @@
   .govgr-drawer__close-icon {
     @apply sm:hidden mt-3;
   }
-  .govgr-heading-m {
+  .govgr-heading-md {
     @apply mb-0;
   }
 }
@@ -211,7 +173,7 @@
   @apply flex flex-wrap;
 }
 .govgr-vertical-nav__item {
-  @apply w-full pt-2 pb-2 !important;
+  @apply w-full p-2 !important;
 }
 .govgr-vertical-nav__item--active {
   @apply font-semibold !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;
-}
-.govgr-notification-banner--success{
-  @apply bg-success border-success
-  print:bg-white;
-  .govgr-notification-banner__link{
-    &:link {
+  @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;
+  .govgr-notification-banner__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;
     }
   }
 }
@@ -20,18 +29,15 @@
 }
 .govgr-notification-banner__content {
   @apply bg-base-100 text-base-content p-4 md:p-5;
-  &>* {
+  & > * {
     @apply box-border max-w-xl;
   }
-  &>:last-child {
+  & > :last-child {
     @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;
+.govgr-notification-banner__link {
+  @apply underline text-base md:text-lg;
   &:link {
     @apply text-link;
   }
@@ -41,7 +47,12 @@
   &:focus {
     background-color: var(--color-focus);
     box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
-    text-decoration:none;
-    outline: none; 
+    text-decoration: none;
+    outline: none;
+  }
+}
+.govgr-notification-banner__heading {
+  .govgr-notification-banner__link {
+    font-size: inherit;
   }
 }

package/src/components/pagination.css

@@ -55,8 +55,4 @@
     pointer-events: none;
     @apply text-base-800;
   }
-  .govgr-arrow--left,
-  .govgr-arrow--right {
-    fill: var(--color-base-800);
-  }
 }

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,27 +1,30 @@
+.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 {
+    @apply mb-0;
+  }
+}
 .govgr-phase-banner {
   @apply py-2 mb-4;
 }
-.govgr-phase-banner__underline {
+.govgr-phase-banner--underline {
   @apply border-base-500 border-b;
 }
 .govgr-phase-banner__content {
   font-size: var(--phase-banner__content-font-size);
   @apply table;
 }
-.govgr-phase-banner__content__tag {
+.govgr-phase-banner__tag {
   @apply px-2 py-1 mr-2 inline-block bg-info font-sans text-white text-sm uppercase tracking-widest
   print:bg-white print:border-2 print:border-info print:text-info print:mr-4;
 }
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;
 }
-.govgr-header .govgr-phase-banner__text, .govgr-masthead--primary .govgr-phase-banner__text {
-  @apply text-white print:text-base-content;
-}
-.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 {
-    @apply mb-0;
+.govgr-header,
+.govgr-masthead--primary {
+  .govgr-phase-banner__text {
+    @apply text-white print:text-base-content;
   }
 }

package/src/components/radios.css

@@ -1,17 +1,18 @@
+.govgr-radios {}
 .govgr-radios__item {
   @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 {
+  @apply block relative mb-4 pl-12;
+  min-height: 40px;
+}
 .govgr-radios__label {
   font-size: var(--radios__label-font-size);
   @apply inline-block py-1 px-2 cursor-pointer;
@@ -19,7 +20,7 @@
 .govgr-radios__input {
   @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl
   w-10 h-10 opacity-100 cursor-pointer
-  bg-base-100 m-0;
+  bg-base-100;
   appearance: none;
   width: 40px;
   height: 40px;
@@ -49,3 +50,6 @@
     }
   }
 }
+.govgr-radios__conditional {
+    @apply border-l-4 border-base-500 ml-4 pl-6;
+}

package/src/components/skiplink.css

@@ -1,9 +1,8 @@
-.govgr--skip-link {
+.govgr-skip-link {
   @apply absolute w-px h-px underline overflow-hidden top-auto;
-  left: -1px;
+  &:focus {
+    @apply z-0 overflow-auto bg-focus static py-2 px-4 top-auto left-auto w-auto h-auto;
+    outline-offset: 0px;
+    outline: 0px solid var(--color-focus);
+  }
 }
-.govgr--skip-link:focus {
-  @apply z-0 overflow-auto bg-focus static py-2 px-4 top-auto left-auto w-auto h-auto;
-  outline-offset: 0px;
-  outline: 0px solid var(--color-focus);
-}