@digigov/css 0.29.7 → 0.29.9

package/src/components/admin-layout.css

@@ -9,13 +9,13 @@
   flex: 1 1 0%;
 }
 .govgr-admin-main-wrapper {
-  @apply grid p-4 md:grid-cols-12 gap-x-8 md:gap-x-10 gap-y-4 grid-cols-1;
+  @apply grid p-4 md:grid-cols-12 gap-x-8 md:gap-x-10 gap-y-4 grid-cols-1 print:grid-cols-1;
 }
 .govgr-admin-main-content {
   @apply lg:col-span-8 md:col-span-7;
 }
 .govgr-admin-side-content {
-  @apply lg:col-span-4 md:col-span-5;
+  @apply lg:col-span-4 md:col-span-5 print:order-1;
 }
 .govgr-admin-grid-column-1 {
   @apply md:col-span-1;
@@ -52,4 +52,5 @@
 }
 .govgr-admin-grid-column-12 {
   @apply md:col-span-12;
-}
+}
+

package/src/components/breadcrumbs.css

@@ -23,6 +23,16 @@
     }
   }
 }
+@media print {
+  .govgr-breadcrumbs__list-item {
+    &::before {
+      background-image: none;
+      top:2px;
+      left:0px;
+      content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>" );
+    }
+  }
+}
 .govgr-breadcrumbs__link {
   @apply underline;
   &:hover {

package/src/components/button.css

@@ -1,6 +1,7 @@
 .govgr-btn {
   @apply tracking-wide leading-relaxed font-medium text-base md:text-lg cursor-pointer
   m-0 mb-8 px-5 py-2 w-max min-h-10 md:min-h-12 
+  print:px-4
   flex gap-x-3 items-center ;
   &:focus {
     -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 6px var(--color-base-content),0 0 0 10px var(--color-focus);
@@ -17,6 +18,16 @@
   .govgr-btn {
     @apply border-white hover:border-white border-2 shadow-none;
   }
+    .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-gray300 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-btn-primary {
     -webkit-box-shadow: 0 2px 0 var(--color-base-content);
@@ -25,12 +36,11 @@
     bg-success text-white
     rounded-none
     hover:bg-success-hover active:bg-success-hover hover:text-white hover:no-underline
-    print:border-b-2 print:border-success print:text-base-content print:bg-white;
+    print:border-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
   }
   .govgr-btn-cta {
-    @apply text-xl py-4;
+    @apply text-xl py-4 print:pr-2;
     .govgr-arrow--right {
-      fill:white;
       @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
     }
     &:hover {
@@ -46,7 +56,7 @@
     bg-base100 text-base-content
     rounded-none
     hover:bg-base150 active:bg-gray300 hover:no-underline
-    print:border-b-2 print:border-gray300 print:text-base-content print:bg-white;
+    print:border-2 print:border-gray300 print:text-base-content print:bg-white print:shadow-none;
   }
   .govgr-btn-warning {
     webkit-box-shadow: 0 2px 0 var(--color-base-content);
@@ -55,13 +65,14 @@
     bg-error text-white
     rounded-none
     hover:bg-error-hover active:bg-error-hover hover:text-white hover:no-underline
-    print:border-b-2 print:border-error print:text-base-content print:bg-white;
+    print:border-2 print:border-error print:text-base-content print:bg-white print:shadow-none;
     &:active {
       --tw-bg-opacity: 1;
   }
 }
 .govgr-btn-disabled {
-  @apply bg-opacity-50 hover:bg-opacity-50 cursor-not-allowed;
+  @apply bg-opacity-50 hover:bg-opacity-50 cursor-not-allowed
+  print:text-gray200 print:border-opacity-50;
 }
 .govgr-btn-link {
   @apply block;

package/src/components/card.css

@@ -8,7 +8,7 @@
   }
 }
 .govgr-card--divider {
-  @apply border-b border-gray50 pb-4 mb-4;
+  @apply border-b border-gray100 pb-4 mb-4;
 }
 .govgr-card__heading {
   @apply md:text-2xl text-xl font-bold;
@@ -25,6 +25,12 @@
     @apply mb-0;
   }
 }
+@media print {
+  /* When govgr-card__action is empty at print, content at :after limits its height.  */
+  .govgr-card__action:after {
+    content: "";
+  }
+}
 .govgr-grid {
   .govgr-card {
     @apply mb-0;
@@ -58,7 +64,7 @@
   }
 }
 .govgr-card--border-top {
-  @apply border-t border-gray50 pt-4;
+  @apply border-t border-gray100 pt-4;
   &.govgr-card--border-dark {
     @apply border-t-3; 
   }
@@ -67,5 +73,5 @@
   @apply border-base-content; 
 }
 .govgr-card--border-gray {
-  @apply border-gray50; 
+  @apply border-gray100; 
 }

package/src/components/checkboxes.css

@@ -4,6 +4,9 @@
 .govgr-checkboxes__item {
     @apply block relative mb-4 pl-12; 
     min-height: 40px;
+    &:last-child {
+      @apply mb-0;
+    }
 }
 .govgr-checkboxes__label {
   @apply inline-block py-1 px-2 cursor-pointer;

package/src/components/cookie.css

@@ -1,3 +1,3 @@
 .govgr-cookie-banner {
-  @apply bg-gray100;
+  @apply bg-gray50;
 }

package/src/components/drawer.css

@@ -1,5 +1,5 @@
 .govgr-drawer{
-  @apply border border-gray50 md:block bg-white p-4
+  @apply border border-gray100 md:block bg-white p-4
   h-full max-h-screen overflow-y-scroll w-4/5 min-h-screen
   fixed top-0 bottom-0 z-40 md:shadow-none shadow-thick
   md:relative md:overflow-auto md:w-full;

package/src/components/dropdown.css

@@ -60,7 +60,7 @@
   .govgr-vertical-nav {
     @apply -mx-4 flex-col; 
     .govgr-vertical-nav__item {
-      @apply border-b border-gray50 py-2 px-4;
+      @apply border-b border-gray100 py-2 px-4;
       &:last-child {
         @apply border-0;
       }

package/src/components/fillable.css

@@ -1,9 +1,9 @@
 .govgr-fillable-text {
-  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-gray50 bg-gray100
+  @apply lg:mb-8 mb-4 md:mb-8 p-4 border-l-6 border-gray100 bg-gray50
 text-base-content md:text-lg leading-relaxed text-base;
 }
 .govgr-labeled-text {
-@apply bg-gray50 w-fit inline-block px-3 mx-1 mt-px font-bold border-0 border-b-2 border-gray600;
+@apply bg-gray100 w-fit inline-block px-3 mx-1 mt-px font-bold border-0 border-b-2 border-gray600;
 }
 .govgr-labeled-text--active {
   @apply bg-focus;

package/src/components/filter.css

@@ -1,5 +1,5 @@
 .govgr-filter {
-  @apply border border-gray50 md:block bg-white;
+  @apply border border-gray100 md:block bg-white;
   @apply fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
   box-shadow: 0 0 30px var(--color-shadow600);
   @apply md:relative md:overflow-auto md:w-full md:shadow-none md:z-0;
@@ -8,7 +8,7 @@
   }
 }
 .govgr-filter--horizontal {
-  @apply border border-gray50 md:block bg-white
+  @apply border border-gray100 md:block bg-white
   fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5
   md:relative md:overflow-auto md:w-full ;
   box-shadow: 0 0 30px var(--color-shadow600);
@@ -54,7 +54,7 @@
   }
 }
 .govgr-filter__selected {
-  @apply bg-gray100 p-4 m-2 mt-0 rounded;
+  @apply bg-gray50 p-4 m-2 mt-0 rounded;
 }
 .govgr-filter__selected--indicator {
   @apply md:hidden;

package/src/components/footer.css

@@ -1,7 +1,8 @@
 .govgr-footer {
   @apply border-0 border-solid font-normal text-base py-4 md:py-8 
-  border-t-4 border-secondary600 text-gray600 bg-gray100 w-full
-  print:py-2 print:bg-none;
+  border-t-4 border-secondary600 text-gray600 bg-gray50 w-full
+  print:py-2 print:bg-white print:border-t-2
+  dark:border-secondary800 dark:text-gray800;
   .govgr-section-break {
     @apply print:hidden;
   }
@@ -22,11 +23,11 @@
   @apply w-full;
 }
 .govgr-footer__content--logos {
-  @apply flex flex-wrap items-center mb-6 md:mb-8
-  print:hidden;
+  @apply flex flex-wrap items-center mb-6 md:mb-8;
 }
 .govgr-footer__logo {
   @apply mr-4;
+  @apply print:w-32 print:min-w-32 !important;
   &:last-child {
     @apply mr-0;
   }
@@ -77,9 +78,9 @@
   }
 }
 .govgr-footer__section-break {
-  @apply m-auto px-4 py-2 border-t border-gray50 mb-5
+  @apply m-auto px-4 py-2 border-t border-gray100 mb-5
   print:hidden;
 }
 .govgr-footer__heading {
-  @apply mb-4 pb-4 border-b border-gray50;
+  @apply mb-4 pb-4 border-b border-gray100;
 }

package/src/components/form.css

@@ -20,13 +20,26 @@
 }
 .govgr-field {
   @apply mb-8 md:mb-10;
+  .govgr-fieldset {
+  > .govgr-field:last-child, > .govgr-btn:last-child { 
+    @apply mb-0; 
+    }
+  }
+  .govgr-fieldset + .govgr-btn { 
+    @apply mt-4 md:mt-6;
+  }
+}
+.govgr-fieldset {
+  > .govgr-field {
+    @apply mb-4 md:mb-6;
+  }
 }
 .govgr-fieldset__legend {
   @apply md:text-lg text-base font-bold mx-0 lg:mb-4;
   @apply mb-4 !important;
 }
 .govgr-label {
-  @apply md:text-lg text-base mb-2
+  @apply md:text-lg text-base mb-0
   flex gap-y-3 flex-col;
   .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl, .govgr-hint, .govgr-error-message {
     @apply mb-0;
@@ -41,6 +54,9 @@
     box-shadow: inset 0 0 0 2px;
   }
 }
+.govgr-label-file {
+  @apply mb-0;
+}
 .govgr-file-input {
   @apply hidden;
 }
@@ -137,7 +153,7 @@
 .govgr-radios__input:disabled,
 .govgr-radios__input:disabled::before,
 .govgr-radios__input:disabled:checked:before {
-  @apply bg-gray100 cursor-not-allowed;
+  @apply bg-gray50 cursor-not-allowed;
 }
 .govgr-input:disabled, 
 .govgr-textarea:disabled, 

package/src/components/header.css

@@ -1,5 +1,5 @@
 .govgr-header {
-  @apply bg-primary border-b-8 border-secondary600;
+  @apply bg-primary border-b-8 print:border-b-2 border-secondary600;
   @apply print:bg-white;
   border-bottom-style: solid;
 }
@@ -26,10 +26,11 @@
 }
 .govgr-header-logo {
   -webkit-print-color-adjust: exact !important;
-  @apply h-12 ;
-  @apply print:bg-primary print:mr-4;
+  @apply h-12 print:hidden;
+}
+.govgr-header-logo-inverted {
+  @apply h-12 hidden print:block;
 }
-
 .govgr-header-secondary-logo {
   @apply h-10 print:hidden;
 }
@@ -41,7 +42,7 @@
   text-decoration: none;
 }
 .govgr-masthead {
-  @apply bg-secondary600 text-content-dark;
+  @apply bg-secondary600 text-content-dark print:border-2 print:bg-white print:border-secondary800 print:text-base-content;
   .govgr-grid-column-two-thirds >*:last-child {
     @apply mb-0;
   }
@@ -50,7 +51,7 @@
   }
 }
 .govgr-masthead-body {
-  @apply md:mb-10 mb-6 text-base-content-invert md:text-lg text-base leading-7;
+  @apply md:mb-10 mb-6 text-base-content-invert md:text-lg text-base leading-7 print:text-base-content;
 }
 .govgr-masthead-logo {
   @apply md:mb-6 mb-4 h-10;

package/src/components/layout.css

@@ -16,13 +16,13 @@
 }
 .govgr-main-wrapper {
   @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16
-  print:gap-4;
+  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 flex flex-wrap flex-col md:sticky md:top-8 h-fit;
+  @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit print:order-1;
 }
 .govgr-top {
   @apply mb-4;
@@ -31,16 +31,22 @@
   @apply w-full flex flex-wrap  box-border;
 }
 .govgr-button-group {
-  @apply flex flex-wrap items-center gap-4 mb-6;
+  @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 {
+    content: "";
+  }
+}
 .govgr-section-break {
   @apply m-auto px-4 py-2 border-0 w-full;
 }
 .govgr-section-break--visible {
-  @apply border-t border-gray50;
+  @apply border-t border-gray100;
 }
 .govgr-section-break--m {
  @apply mb-5;

package/src/components/loader.css

@@ -2,7 +2,7 @@
   --full-length: 470;
 }
 .govgr-loader__container {
-  @apply h-fit w-fit m-auto overflow-hidden;
+  @apply h-fit w-fit m-auto overflow-hidden print:hidden;
 }
 .govgr-loader {
   animation: rotate 10s linear infinite;
@@ -22,7 +22,6 @@
   stroke-dashoffset: 0;
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
-
 .govgr-loader--inverse{
   .govgr-loader__circle--1 {
     @apply opacity-40;
@@ -33,20 +32,25 @@
     stroke: var(--color-white);
   }
 }
-
+@media print {
+  .govgr-btn {
+    .govgr-loader--inverse{
+      .govgr-loader__circle--1, .govgr-loader__circle--2 {
+        stroke: var(--color-base-content);
+      }
+    }
+  }
+}
 
 .govgr-loader--small {
   @apply h-5 w-5;
 }
-
 .govgr-loader--medium {
   @apply h-10 w-10;
 }
-
 .govgr-loader--large {
   @apply h-12 w-12;
 }
-
 @keyframes dash {
   0% {
     stroke-dashoffset: 0;

package/src/components/misc.css

@@ -14,7 +14,9 @@
 .govgr-warning-text {
   @apply flex pl-0 pr-0;
   .govgr-warning-text__icon {
-    @apply text-white font-bold bg-base-content text-3xl leading-10 text-center rounded-3xl min-h-10 min-w-10 h-fit mr-6 mt-2;
+    @apply text-white font-bold bg-base-content text-3xl leading-10 text-center 
+    rounded-3xl 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 text-lg flex items-center;

package/src/components/modal.css

@@ -5,7 +5,7 @@
 }
 .govgr-modal__body {
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
-  h-fit md:h-auto mx-4 overflow-y-scroll
+  h-fit md:h-auto mx-4 overflow-y-auto
   bg-white
   border border-solid border-base200;
   max-height:95vh;

package/src/components/notification-banner.css

@@ -1,8 +1,10 @@
 .govgr-notification-banner {
-  @apply bg-secondary600 border-5 border-secondary600 mb-6 md:mb-8 font-normal;
+  @apply bg-secondary600 border-5 border-secondary600 mb-6 md:mb-8 font-normal
+  print:bg-white;
 }
 .govgr-notification-banner--success{
-  @apply bg-success border-success;
+  @apply bg-success border-success
+  print:bg-white;
   .govgr-notification-banner__link{
     &:link {
       @apply text-success;
@@ -10,7 +12,8 @@
   }
 }
 .govgr-notification-banner__header {
-  @apply text-white p-0 m-0 text-base md:text-lg;
+  @apply text-white p-0 m-0 text-base md:text-lg
+  print:border-b print:border-gray200 print:text-base-content print:pt-2;
 }
 .govgr-notification-banner__title {
   @apply border-b border-transparent pt-1 px-4 sm:px-5 pb-2 font-bold;

package/src/components/panel.css

@@ -4,7 +4,7 @@
 }
 .govgr-panel--confirmation {
   @apply bg-success text-white
-  print:border-4 print:border-success print:text-base-content;
+  print:border-4 print:border-success print:text-base-content print:bg-white;
 }
 .govgr-panel__title {
   @apply text-4xl md:text-5xl print:text-4xl mt-0 mb-6 font-bold;

package/src/components/phase-banner.css

@@ -8,16 +8,18 @@
   @apply table;
 }
 .govgr-phase-banner__content__tag {
-  @apply px-2 py-1 mr-2 inline-block bg-secondary600 font-sans text-white text-sm uppercase tracking-widest;
+  @apply px-2 py-1 mr-2 inline-block bg-secondary600 font-sans text-white text-sm uppercase tracking-widest
+  print:bg-white print:border-2 print:border-secondary600 print:text-secondary600 print:mr-4;
 }
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;
 }
 .govgr-header .govgr-phase-banner__text, .govgr-masthead .govgr-phase-banner__text {
-  @apply text-white;
+  @apply text-white print:text-base-content;
 }
 .govgr-phase-banner_header {
-  @apply bg-focus top-0 z-30;
+  @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;
   }

package/src/components/summary-list.css

@@ -15,8 +15,8 @@
 
 .govgr-summary-list__row {  
   @apply block sm:flex
-  pb-4 mb-4 border-b border-solid border-gray50
-  sm:pb-0 sm:mb-0 sm:border-0 ;
+  pb-4 mb-4 border-b border-solid border-gray100
+  sm:pb-0 sm:mb-0 sm:border-0 print:flex print:flex-row print:flex-nowrap;
 }
 .govgr-summary-list--no-border .govgr-summary-list__row {  
   @apply border-0;
@@ -25,20 +25,18 @@
   @apply border-0;
 }
 .govgr-summary-list__key {
-  @apply font-bold mb-1 sm:w-9/12;
+  @apply font-bold mb-1 sm:w-3/12;
 }
-
-.govgr-summary-list__value {
-  @apply sm:w-9/12;
-
-  &:last-child {
-    @apply w-full;
+@media print {
+  .govgr-summary-list__key{
+   flex:100%;
   }
-
+}
+.govgr-summary-list__value {
+  @apply sm:w-6/12;
   .govgr-link {
     @apply pl-4;
   }
-
   .govgr-btn {
     @apply ml-4;
   }
@@ -46,20 +44,42 @@
 .govgr-summary-list__actions {
   @apply sm:w-3/12 sm:pr-0 sm:text-right;
 }
-.govgr-summary-list__key, .govgr-summary-list__value {
+/* When "actions" are right after "key" */
+.govgr-summary-list__key + .govgr-summary-list__actions {
+  @apply sm:w-9/12;
+}
+/* When "value" is 1st or 2nd among 2 children */
+.govgr-summary-list__value:nth-child(2):nth-last-child(1),
+.govgr-summary-list__value:nth-child(1):nth-last-child(2){
+  @apply sm:w-9/12;
+}
+/* When there is only one child */
+.govgr-summary-list__key:only-child, 
+.govgr-summary-list__value:only-child, 
+.govgr-summary-list__actions:only-child {
+    @apply sm:w-full sm:text-left;
+}
+.govgr-summary-list__key, 
+.govgr-summary-list__value {
   @apply break-words;
 }
-.govgr-summary-list__key, .govgr-summary-list__value, .govgr-summary-list__actions {
+.govgr-summary-list__key, 
+.govgr-summary-list__value, 
+.govgr-summary-list__actions {
   @apply m-0 
-  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray50; 
+  sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-gray100; 
 }
-.govgr-summary-list--no-border .govgr-summary-list__key, 
-.govgr-summary-list--no-border .govgr-summary-list__value, 
-.govgr-summary-list--no-border .govgr-summary-list__actions {
-  @apply sm:border-0 pb-2;
+.govgr-summary-list--no-border {
+  .govgr-summary-list__key, 
+  .govgr-summary-list__value, 
+  .govgr-summary-list__actions {
+    @apply sm:border-0 pb-2;
+  }
 }
-.govgr-summary-list__row--no-border .govgr-summary-list__key, 
-.govgr-summary-list__row--no-border .govgr-summary-list__value, 
-.govgr-summary-list__row--no-border .govgr-summary-list__actions {
-  @apply sm:border-0 pb-2;
+.govgr-summary-list__row--no-border {
+  .govgr-summary-list__key, 
+  .govgr-summary-list__value, 
+  .govgr-summary-list__actions {
+    @apply sm:border-0 pb-2;
+  }
 }

package/src/components/svg-icons.css

@@ -18,6 +18,13 @@
     @apply h-6 w-6;
   }
 }
+@media print {
+  .govgr-btn-primary, .govgr-btn-warning, .govgr-btn-secondary {
+    .govgr-svg-icon {
+      fill: var(--color-base-content);
+    }
+  }
+}
 .govgr-link {
   .govgr-svg-icon {
     fill:var(--color-link);
@@ -36,11 +43,11 @@
 .govgr-header, .govgr-admin-header {
   .govgr-link {
     .govgr-svg-icon {
-      fill:var(--color-gray100);
+      fill:var(--color-gray50);
     }
     &:hover {
       .govgr-svg-icon {
-        fill:var(--color-gray100);
+        fill:var(--color-gray50);
       }
     }
     &:focus {