@digigov/css 0.14.0 → 0.17.0

package/src/components/footer.css

@@ -1,51 +1,50 @@
 .govgr-footer {
-    @apply border-0 border-solid font-normal text-base py-4 md:py-8 border-t-4 border-secondary-600 text-base-300 bg-gray-100 w-full;
+  @apply border-0 border-solid font-normal text-base py-4 md:py-8 border-t-4 border-secondary-600 text-base-300 bg-gray-100 w-full;
 }
 .govgr-footer__meta {
-    @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
+  @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
 }
 .govgr-footer__meta-item {
-    @apply mx-2 md:mx-4 mb-6;
+  @apply mx-2 md:mx-4 mb-6;
 }
 .govgr-footer__meta-item--grow {
-    @apply flex flex-grow;
+  @apply flex flex-grow;
 }
 .govgr-footer__content {
-    @apply w-full;
+  @apply w-full;
 }
 .govgr-footer__content--logos {
-    @apply flex flex-wrap mb-6 md:mb-8;
+  @apply flex flex-wrap items-center mb-6 md:mb-8;
 }
 .govgr-footer__logo {
-    @apply mr-4;
-    &:last-child {
-        @apply mr-0;
-    }
+  @apply mr-4;
+  &:last-child {
+    @apply mr-0;
+  }
 }
 .govgr-footer__logo, .govgr-footer__government-logo {
-    @apply max-w-full max-h-14 h-auto w-52;
+  @apply max-w-full h-auto w-52;
 }
 .govgr-footer__licence-description {
-    @apply mt-6;
+  @apply mt-6;
 }
-
 .govgr-footer__inline-list {
-    @apply mt-0 mb-4 p-0;
+  @apply mt-0 mb-4 p-0;
 }
 .govgr-footer__inline-list-item {
-    @apply inline-block mr-4 mb-2;
+  @apply inline-block mr-4 mb-2;
 }
 .govgr-footer__link {
-    @apply underline ;
-    &:hover {
-        text-decoration-thickness: 2px;
-    }
-    &:focus {
-        background-color: var(--color-focus) !important;
-        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
-        outline: none; 
-        text-decoration: none;
-      }
+  @apply underline ;
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
+  &:focus {
+    background-color: var(--color-focus) !important;
+    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    outline: none; 
+    text-decoration: none;
+  }
 }
 .govgr-footer__navigation {
     @apply flex flex-wrap;
@@ -54,21 +53,21 @@
     @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink;
 }
 @media (min-width: 48em) {
-    .govgr-footer__section:first-child:nth-last-child(2) {
-        @apply flex-grow-2;
-    }
+  .govgr-footer__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;
 }
 @media (min-width: 48em) {
-    .govgr-footer__list--columns-2 {
-        column-count: 2;
-    }
+  .govgr-footer__list--columns-2 {
+    column-count: 2;
+  }
 }
 .govgr-footer__section-break {
-    @apply m-auto px-4 py-2 border-t border-gray-50 mb-5;
+  @apply m-auto px-4 py-2 border-t border-gray-50 mb-5;
 }
 .govgr-footer__heading {
-    @apply mb-4 pb-4 border-b border-gray-50;
+  @apply mb-4 pb-4 border-b border-gray-50;
 }

package/src/components/form.css

@@ -1,64 +1,64 @@
 .govgr-form {
-    p {
-        @apply mb-4;
-    }
+  .govgr-body {
+    @apply mb-4;
+  }
 }
 .govgr-form--row {
-    @apply flex flex-wrap gap-x-4;
+  @apply flex flex-wrap gap-x-4;
 }
 .govgr-field {
-    @apply mb-8 md:mb-10;
+  @apply mb-8 md:mb-10;
 }
 .govgr-fieldset__legend {
-    @apply md:text-lg text-base font-bold mx-0 lg:mb-4;
-    @apply mb-4 !important;
+  @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
-    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;
-    }
+  @apply md:text-lg text-base mb-2
+  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;
+  }
 }
 .govgr-input, .govgr-select, .govgr-textarea{
-    @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-white;
-    &:focus {
-        outline: 4px solid var(--color-focus);
-        outline-offset: 0;
-        -webkit-box-shadow: inset 0 0 0 2px;
-        box-shadow: inset 0 0 0 2px;
-    }
+  @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-white;
+  &:focus {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 2px;
+    box-shadow: inset 0 0 0 2px;
+  }
 }
 .govgr-file-upload:focus {
-    outline: 3px solid;
-    box-shadow: 0 0 0 7px var(--color-focus);
+  outline: 3px solid;
+  box-shadow: 0 0 0 7px var(--color-focus);
 }
 .govgr-date-input {
-    @apply flex;
-    .form-group {
-        @apply mr-4;
-    }
+  @apply flex;
+  .form-group {
+    @apply mr-4;
+  }
 }
 .govgr-input--width-20 {
-    max-width: 41ex;
+  max-width: 41ex;
 }
 .govgr-input--width-10 {
-    max-width: 23ex;
+  max-width: 23ex;
 }
 .govgr-input--width-5 {
-    max-width: 10.8ex;
+  max-width: 10.8ex;
 }
 .govgr-input--width-4 {
-    max-width: 9ex;
+  max-width: 9ex;
 }
 .govgr-input--width-3 {
-    max-width: 7.2ex;
+  max-width: 7.2ex;
 }
 .govgr-input--width-2 {
-    max-width: 5.4ex;
+  max-width: 5.4ex;
 }
 .govgr-date-input__item {
-   @apply mr-4; 
+  @apply mr-4; 
 }
 .govgr-\!-width-one-quarter,
 .govgr-\!-width-one-third,
@@ -66,30 +66,30 @@
 .govgr-\!-width-two-thirds,
 .govgr-\!-width-three-quarters,
 .govgr-\!-width-full-width {
-    width: 100% !important;
+  width: 100% !important;
 }
 @screen sm {
-    .govgr-\!-width-one-quarter {
-        width: 25% !important;
-    }
-    .govgr-\!-width-one-third {
-        width: 33.33% !important;
-    }
-    .govgr-\!-width-one-half {
-        width: 50% !important;
-    }
-    .govgr-\!-width-two-thirds {
-        width: 66.66% !important;
-    }
-    .govgr-\!-width-three-quarters {
-        width: 75% !important;
-    }
-    .govgr-\!-width-full-width {
-        width: 100% !important;
-    }
+  .govgr-\!-width-one-quarter {
+    width: 25% !important;
+  }
+  .govgr-\!-width-one-third {
+    width: 33.33% !important;
+  }
+  .govgr-\!-width-one-half {
+    width: 50% !important;
+  }
+  .govgr-\!-width-two-thirds {
+    width: 66.66% !important;
+  }
+  .govgr-\!-width-three-quarters {
+    width: 75% !important;
+  }
+  .govgr-\!-width-full-width {
+    width: 100% !important;
+  }
 }
 .govgr-select {
-    @apply w-auto max-w-full;
+  @apply w-auto max-w-full;
 }
 /* error handling  */
 .govgr-field__error {
@@ -107,5 +107,3 @@
       box-shadow: inset 0 0 0 1px var(--color-error);
   }
 }
-
-

package/src/components/full-page-background.css

@@ -0,0 +1,7 @@
+.govgr-full-page-background {
+  @apply flex justify-center items-center content-center bg-opacity-50 bg-gray-900
+  fixed z-10 left-0 top-0 w-full h-full;
+}
+.govgr-loader__icon {
+  @apply h-fit w-fit;
+}

package/src/components/header.css

@@ -1,7 +1,6 @@
 .govgr-header {
   @apply bg-primary border-b-8 border-secondary-600;
   border-bottom-style: solid;
-  
 }
 .govgr-header__container {
   @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center;
@@ -13,9 +12,9 @@
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2;
 }
 .govgr-header-title {
-  @apply text-2xl font-bold align-middle text-base-100 leading-10 tracking-wide w-auto hover:text-base-100 hover:no-underline;
+  @apply text-base-100 font-bold text-2xl leading-10 tracking-wide no-underline
+  w-auto align-middle hover:text-base-100 hover:no-underline ;
 }
-
 .govgr-header-title:focus {
   text-decoration:none;
   outline: 4px solid var(--color-focus) !important;
@@ -37,7 +36,7 @@
 .govgr-masthead {
   @apply bg-secondary-600 text-content-dark;
   .govgr-grid-column-two-thirds >*:last-child {
-      @apply mb-0;
+    @apply mb-0;
   }
   .govgr-body {
     @apply text-content-dark;

package/src/components/index.css

@@ -26,3 +26,6 @@
 @import "./modal.css";
 @import "./svg-icons.css";
 @import "./pagination.css";
+@import "./loader.css";
+@import "./full-page-background.css";
+@import "./drawer.css";

package/src/components/layout.css

@@ -3,49 +3,46 @@
   flex-direction: column;
   flex-wrap: wrap;
 }
-
 .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;
-    flex: 1 1 0%;
+  @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%;
+  flex: 1 1 0%;
 }
 .govgr-main-wrapper {
-    @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16;
+  @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16;
 }
 .govgr-grid-column-two-thirds {
-    @apply col-span-2;
+  @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-content;
+  @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit;
 }
 .govgr-top {
-    @apply mb-4;
+  @apply mb-4;
 }
 .govgr-bottom {
-    @apply w-full flex flex-wrap  box-border;
+  @apply w-full flex flex-wrap  box-border;
 }
 .govgr-button-group {
-    @apply flex flex-wrap gap-4 mb-6;
-    &>.govgr-link {
-        @apply flex mb-8 text-lg;
-    }
-    .govgr-btn {
-      @apply mb-0;
-    }
+  @apply flex flex-wrap gap-4 mb-6;
+  &>.govgr-link {
+      @apply flex mb-8 text-lg;
+  }
+  .govgr-btn {
+    @apply mb-0;
+  }
 }
 .govgr-section-break {
-    @apply m-auto px-4 py-2 border-0 w-full;
+  @apply m-auto px-4 py-2 border-0 w-full;
 }
 .govgr-section-break--visible {
-    @apply border-t border-gray-50;
+  @apply border-t border-gray-50;
 }
 .govgr-section-break--m {
  @apply mb-5;
@@ -55,10 +52,4 @@
 }
 .govgr-section-break--xl {
  @apply mb-9;
-}
-.important-bg {
-    @apply bg-error;
-}
-.info-bg {
-    @apply bg-base-100 text-base-content;
 }

package/src/components/loader.css

@@ -0,0 +1,47 @@
+:root {
+  --full-length: 470;
+}
+.govgr-loader__container {
+  @apply h-fit w-fit m-auto;
+}
+.govgr-loader {
+  animation: rotate 10s linear infinite;
+  width: 3rem;
+  height: 3rem;
+}
+.govgr-loader__circle {
+  fill: none;
+  stroke-miterlimit: 10;
+  stroke-width: 42px;
+}
+.govgr-loader__circle--1 {
+  stroke: var(--color-secondary);
+}
+.govgr-loader__circle--2 {
+  stroke: var(--color-primary);
+  stroke-dasharray: var(--full-length);
+  stroke-dashoffset: 0;
+  animation: dash 4s ease-in-out 0s forwards infinite;
+}
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  40% {
+    stroke-dashoffset: var(--full-length);
+  }
+  50% {
+    stroke-dashoffset: var(--full-length);
+  }
+  90% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes rotate {
+  to { 
+    transform: rotate(360deg); 
+  } 
+}

package/src/components/misc.css

@@ -13,9 +13,8 @@
 }
 .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-content 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-2;
   }
   .govgr-warning-text__text {
     @apply text-lg flex items-center;
@@ -34,30 +33,13 @@
     white-space: nowrap !important;
   }
 }
-span.govgr-caret-right, span.govgr-caret-left {
-  content: "";
-  width: 5px;
-  height: 10px;
-  @apply border-base-content block border-5 mr-3;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  @apply transition-all;
-}
-span.govgr-caret-right {
-  @apply border-r-0;
-}
-span.govgr-caret-left {
-  @apply border-l-0;
-}
 .tooltip {
   @apply inline-block relative m-0 p-0 underline w-min cursor-pointer;
   text-decoration-style: dotted;
-
   .tooltiptext {
     @apply hidden opacity-0 transition-all;
     backdrop-filter: blur(2px);
   }
-
   &:hover {
     .tooltiptext {
       @apply block opacity-100 absolute w-64 -ml-32 top-8 left-1/2 px-4 py-2 z-10;
@@ -73,7 +55,6 @@ span.govgr-caret-left {
     }
   }
 }
-
 .govgr-visually-hidden {
   @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
   width: 1px !important;

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-content md:h-auto my-auto mx-4
+  h-fit md:h-auto my-auto mx-4
   bg-white
   border border-solid border-base-200;
 }
@@ -22,8 +22,8 @@
   @apply text-base lg:text-xl text-lg;
 }
 .govgr-modal__action {
-  @apply flex flex-wrap items-center gap-y-4;
-  * {
+  @apply flex flex-wrap items-center gap-4;
+  .govgr-link, .govgr-btn {
     @apply mb-0;
   }
 }

package/src/components/nav.css

@@ -1,15 +1,13 @@
-/* icon and transition of the burger icon */
 .govgr-header {
   .govgr-burger-icon {
-      fill: var(--color-white) ;
+    fill: var(--color-white) ;
   }
 }
-
 .govgr-burger-icon {
   fill: var(--color-base-content) ;
   @apply w-8 h-8 float-right cursor-pointer transition-all z-30
   focus:bg-focus;
-  * {
+  #govgr-burger-icon__line-1, #govgr-burger-icon__line-2, #govgr-burger-icon__line-3 {
     @apply transition-all;
   }
 }
@@ -50,49 +48,45 @@
 }
 
 /* --- HORIZONTAL ---  */
-
 .govgr-horizontal-nav {
-    @apply fixed w-3/4 sm:w-full h-full bg-secondary-800 text-content-dark
-    sm:relative sm:h-auto sm:bg-white sm:text-content
-    z-30 sm:z-auto
-    opacity-10 sm:opacity-100 sm:block transition-all duration-1000 sm:transition-none
-    -right-3/4 sm:right-auto top-0 sm:top-auto overflow-x-scroll sm:overflow-visible
-    border-b border-base-150 
-    ;
+  @apply fixed w-3/4 sm:w-full h-full bg-secondary-800 text-content-dark
+  sm:relative sm:h-auto sm:bg-white sm:text-content
+  z-30 sm:z-auto
+  opacity-10 sm:opacity-100 sm:block transition-all duration-1000 sm:transition-none
+  -right-3/4 sm:right-auto top-0 sm:top-auto overflow-x-scroll sm:overflow-visible
+  border-b border-base-150 
+  ;
 }
 .govgr-horizontal-nav__container {
-    @apply w-full m-0 max-w-5xl sm:mx-auto px-4 sm:px-4 sm:py-2
-    flex flex-wrap flex-col sm:flex-row gap-4 sm:gap-2;
+  @apply w-full m-0 max-w-5xl sm:mx-auto px-4 sm:px-4 sm:py-2
+  flex flex-wrap flex-col sm:flex-row gap-4 sm:gap-2;
 }
 .govgr-horizontal-nav--active {
-    @apply block opacity-100 right-0;
-    .govgr-horizontal-nav__container { 
-        @apply mt-24 sm:mt-auto;
-    }
-    > * {
-        @apply py-4 md:py-1;
-    }
+  @apply block opacity-100 right-0;
+  .govgr-horizontal-nav__container { 
+      @apply mt-24 sm:mt-auto;
+  }
+  .govgr-horizontal-nav__container {
+      @apply py-4 md:py-1;
+  }
 }
 .govgr-horizontal-nav__item  {
-    @apply p-1 text-xl
-    sm:py-1 sm:px-1 sm:text-base
-    no-underline hover:underline;
-    
+  @apply p-1 text-xl
+  sm:py-1 sm:px-1 sm:text-base
+  no-underline hover:underline;
 }
-
 .govgr-horizontal-nav__item:focus {
   @apply bg-focus text-base-content outline-none;
-  box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
+  box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
   }
 .govgr-horizontal-nav__item-active, .govgr-vertical-nav__item--active {
-    @apply font-semibold;
+  @apply font-semibold;
 }
 
 /* --- VERTICAL --- */
-
 .govgr-vertical-nav {
-    @apply flex flex-wrap;
+  @apply flex flex-wrap;
 }
 .govgr-vertical-nav__item {
-    @apply w-full p-2;
+  @apply w-full p-2;
 }

package/src/components/notification-banner.css

@@ -36,9 +36,9 @@
     text-decoration-thickness: 2px;
   }
   &:focus {
-        background-color: var(--color-focus);
-        box-shadow: 0 -2px var(--color-focus), 0 4px #0b0c0c;
-        text-decoration:none;
-        outline: none; 
+    background-color: var(--color-focus);
+    box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-base-content);
+    text-decoration:none;
+    outline: none; 
   }
 }

package/src/components/pagination.css

@@ -12,7 +12,6 @@
     @apply flex no-underline;
   }
   @apply inline-block p-2;
-
   &:first-child {
     @apply pl-0
   }

package/src/components/phase-banner.css

@@ -1,11 +1,9 @@
 .govgr-phase-banner {
   @apply py-2 mb-4;
 }
-
 .govgr-phase-banner__underline {
   @apply border-base-200 border-b;
 }
-
 .govgr-phase-banner__content {
   @apply table;
 }

package/src/components/radios.css

@@ -1,7 +1,6 @@
 .govgr-radios__item {
   @apply block relative mb-4 pl-12; 
   min-height: 40px;
-
 }
 .govgr-radios--inline {
   .govgr-radios__item {

package/src/components/summary-list.css

@@ -1,6 +1,6 @@
 .govgr-summary-list {
   @apply m-0 mb-6 sm:mb-8 w-full
-  sm:table sm:w-full sm:table-fixed
+  sm:table sm:w-full sm:table-fixed text-lg
   ;
 }
 .govgr-summary-list__row {