@digigov/css 0.14.0 → 0.15.0

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-content 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;
@@ -15,7 +14,6 @@
 .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;
 }
-
 .govgr-header-title:focus {
   text-decoration:none;
   outline: 4px solid var(--color-focus) !important;
@@ -37,7 +35,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,5 @@
 @import "./modal.css";
 @import "./svg-icons.css";
 @import "./pagination.css";
+@import "./loader.css";
+@import "./full-page-background.css";

package/src/components/layout.css

@@ -10,42 +10,42 @@
 }
 
 .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-content;
 }
 .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;

package/src/components/loader.css

@@ -0,0 +1,47 @@
+:root {
+  --full-length: 470;
+}
+.govgr-loader__container {
+  @apply h-fit-content w-fit;
+}
+.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,7 +13,6 @@
 }
 .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;
   }
@@ -73,7 +72,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/nav.css

@@ -1,10 +1,8 @@
-/* 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
@@ -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;
+  }
+  > * {
+    @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/svg-icons.css

@@ -18,7 +18,6 @@
     @apply h-6 w-6;
   }
 }
-
 .govgr-link {
   .govgr-svg-icon {
     fill:var(--color-link);
@@ -32,7 +31,6 @@
     .govgr-svg-icon {
       fill:var(--color-link-active);
     }
-
   }
 }
 .govgr-svg-icon--dark {
@@ -62,7 +60,6 @@
 .govgr-svg-icon--link {
   fill: var(--color-link) !important;
 }
-
 .govgr-svg-icon--s {
   @apply h-3 w-3;
 }

package/src/components/table.css

@@ -13,41 +13,32 @@
 .govgr-table--with-vertical-lines {
   .govgr-table__cell {
     @apply border-l border-r border-solid border-gray-50 !important;
-  }
-  
- 
+  } 
 }
-
 .govgr-table--with-vertical-lines.govgr-table--light {
   th, td {
     @apply px-4 !important;
   }
 }
-
 .govgr-table--dark, .govgr-table--zebra {
   th, td {
     @apply px-4 !important;
   }
 }
-
 .govgr-table--with-vertical-lines.govgr-table--light .govgr-table__body .govgr-table__header {
     @apply border-l border-solid border-gray-50 !important;
   }
-
 .govgr-table--with-vertical-lines.govgr-table--dense.govgr-table--dark {
-  .govgr-table__head .govgr-table__row .govgr-table__header:first-child{
-        @apply border-b-0 border-l border-solid border-primary !important;
-    }
+  .govgr-table__head .govgr-table__row .govgr-table__header:first-child {
+    @apply border-b-0 border-l border-solid border-primary !important;
+  }
 }
-
-
 .govgr-table--with-vertical-lines.govgr-table--dark{
-  .govgr-table__head .govgr-table__row .govgr-table__header:last-child{
+  .govgr-table__head .govgr-table__row .govgr-table__header:last-child {
         @apply border-b-0 border-r border-solid border-primary !important;
     }
 }
-
-.govgr-table--dark{
+.govgr-table--dark {
   th {
     @apply border-none bg-primary text-white;
   }
@@ -58,7 +49,6 @@
     @apply border-r border-solid border-gray-50 !important;
   }
 }
-
 .govgr-table--zebra {
   .govgr-table__body {
     .govgr-table__row:nth-child(even) {

package/src/components/tabs.css

@@ -12,16 +12,16 @@
       @apply float-left relative md:border md:border-base-100 md:bg-base-100 md:rounded-t-sm md:px-4 md:py-2 m-0 md:mr-2 shadow-none
       cursor-pointer;
       &.govgr-tabs__list-item-selected {
-          @apply no-underline md:border-base-150 bg-white z-20 md:border-b-0;
-          margin-top: -5px;
-          margin-bottom: -1px;
-          padding-top: 14px;
-          padding-right: 19px;
-          padding-bottom: 16px;
-          padding-left: 19px;
-          border: 1px solid #b1b4b6;
-          border-bottom: 0;
-          background-color: #fff;
+        @apply no-underline md:border-base-150 bg-white z-20 md:border-b-0;
+        margin-top: -5px;
+        margin-bottom: -1px;
+        padding-top: 14px;
+        padding-right: 19px;
+        padding-bottom: 16px;
+        padding-left: 19px;
+        border: 1px solid var(--color-gray-200);
+        border-bottom: 0;
+        background-color: var(--color-white);
         &:hover {
           text-decoration-thickness: 2px;
         }

package/src/components/typography.css

@@ -93,7 +93,6 @@
 
 .govgr-link {
   @apply text-link hover:text-link-hover focus:text-link-active underline items-center cursor-pointer flex gap-2;
-  
   .right-arrow::after {
     content: "";
     @apply w-06rem h-06rem bg-primary rounded-xl border-white block border-t-2_5 border-r-2_5 ml-3 transform rotate-45;
@@ -102,10 +101,10 @@
     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; 
   }
 }
 .govgr-link--no-underline {
@@ -129,13 +128,13 @@
   width: fit-content;
   @apply text-base-content underline flex items-center mb-4 cursor-pointer;
   &:hover {
-      text-decoration-thickness: 2px;
-    }
+    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; 
   }
   .govgr-caret--left {
     fill:var(--color-base-content);
@@ -144,7 +143,7 @@
 }
 .govgr-background-dark {
   .govgr-back-link {
-      @apply text-white;
+    @apply text-white;
   }
 }
 

package/tailwind.config.js

@@ -37,7 +37,6 @@ module.exports = {
       width: {
         '06rem': '0.6rem',
         'fit': 'fit-content'
-
       },
       minWidth: {
         '8': '2rem',
@@ -105,6 +104,6 @@ module.exports = {
     }
   },
   plugins: [
-    plugin(colorVarsPlugin) 
+    plugin(colorVarsPlugin)
   ],
 };