@digigov/css 0.38.3 → 1.0.0-blabla-test

package/src/components/table.css

@@ -1,24 +1,20 @@
-/* don't use the .example class */
-.example {
-  @apply px-5 py-5;
-}
 .govgr-table__caption {
   @apply table-caption text-left font-bold;
 }
-.govgr-table__caption--s {
+.govgr-table__caption--sm {
   @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
 }
-.govgr-table__caption--m {
+.govgr-table__caption--md {
   @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
 }
-.govgr-table__caption--l {
-  @apply md:text-4xl text-2xl font-bold mx-0 lg:mb-9 mb-7 antialiased;
+.govgr-table__caption--lg {
+  @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
 }
 .govgr-table__caption--xl {
-  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 lg:mb-10 mb-8 max-w-2xl antialiased;
+  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
 }
 .govgr-table-container {
-  @apply w-full  overflow-x-auto md:mb-10 mb-6;
+  @apply w-full overflow-x-auto md:mb-10 mb-6;
   .govgr-table {
     @apply mb-0;
   }
@@ -30,8 +26,22 @@
   @apply w-full border-collapse table;
   @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
+  .govgr-dropdown__content {
+    @apply mt-0;
+  }
+  .govgr-dropdown__button {
+    @apply mb-0;
+  }
+}
+.govgr-table-sort__icons-container {
+  @apply flex flex-col;
 }
-.govgr-table--with-vertical-lines {
+@supports (-moz-appearance: none) {
+  .govgr-table {
+    border-collapse: unset;
+  }
+}
+.govgr-table--vertical-lines {
   .govgr-table__cell,
   .govgr-table__header {
     @apply border-l border-r border-solid border-base-300 px-4;
@@ -40,33 +50,8 @@
     @apply border-t border-base-300 text-base-content !important;
   }
 }
-.govgr-table__header {
-  .govgr-dropdown__button {
-    @apply no-underline font-bold text-base-content !important;
-  }
-  .govgr-dropdown__button--underline:not(:focus) {
-    @apply underline !important;
-    text-decoration-thickness: 2px !important;
-  }
-  .govgr-dropdown__content {
-    @apply py-0;
-  }
-  .govgr-vertical-nav__item {
-    @apply flex font-normal no-underline;
-  }
-  .govgr-vertical-nav__item--active:not(:focus) {
-    @apply bg-base-200 font-normal !important;
-  }
-}
-.govgr-table__body {
-  @apply relative;
-}
-
 @supports (-moz-appearance: none) {
-  .govgr-table {
-    border-collapse: unset;
-  }
-  .govgr-table--with-vertical-lines {
+  .govgr-table--vertical-lines {
     .govgr-table__header {
       @apply border-t;
       @apply border-r-0 !important;
@@ -95,7 +80,7 @@
   .govgr-btn {
     @apply mb-0;
   }
-  .govgr-button-group {
+  .govgr-btn-group {
     @apply mb-0;
   }
 }
@@ -106,12 +91,12 @@
     @apply px-4 !important;
   }
 }
-.govgr-table--with-vertical-lines.govgr-table--light {
+.govgr-table--vertical-lines.govgr-table--light {
   .govgr-table__body .govgr-table__header {
     @apply border-l border-solid border-base-300 !important;
   }
 }
-.govgr-table--with-vertical-lines.govgr-table--dark {
+.govgr-table--vertical-lines.govgr-table--dark {
   .govgr-table__header {
     @apply border-0;
     @apply print:border;
@@ -143,12 +128,14 @@
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content;
+      @apply border-b-2;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
     }
   }
-  .govgr-table__header {
+  .govgr-table__head .govgr-table__header {
     @apply hidden;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block;
   }
@@ -157,16 +144,27 @@
     @apply block font-semibold;
   }
 }
-.govgr-table--stacked-s {
+.govgr-table--stacked-sm {
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content sm:border-b sm:border-base-300;
+      @apply border-b-2 sm:border-b;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
+      
     }
   }
-  .govgr-table__header {
+  @media (min-width: 640px) {
+      .govgr-table__header,
+      .govgr-table__cell {
+        &:last-child {
+          border-bottom-color: rgb(var(--color-base-300-rgb));
+        }
+      }
+  }
+  .govgr-table__head .govgr-table__header {
     @apply hidden sm:table-cell;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block sm:table-cell;
   }
@@ -180,16 +178,26 @@
     }
   }
 }
-.govgr-table--stacked-m {
+.govgr-table--stacked-md {
   .govgr-table__header,
   .govgr-table__cell {
     &:last-child {
-      @apply border-b-2 border-base-content md:border-b md:border-base-300;
+      @apply border-b-2 md:border-b;
+      border-bottom-color: rgb(var(--color-base-content-rgb));
     }
   }
-  .govgr-table__header {
+  @media (min-width: 768px) {
+      .govgr-table__header,
+      .govgr-table__cell {
+        &:last-child {
+          border-bottom-color: rgb(var(--color-base-300-rgb));
+        }
+      }
+  }
+  .govgr-table__head .govgr-table__header {
     @apply hidden md:table-cell;
   }
+  .govgr-table__body .govgr-table__header,
   .govgr-table__cell {
     @apply block md:table-cell;
   }
@@ -203,16 +211,8 @@
     }
   }
 }
-.govgr-table__header,
-.govgr-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
-  &:last-child {
-    @apply pr-0;
-  }
-}
-.govgr-table__header--numeric,
-.govgr-table__cell--numeric {
-  @apply text-right;
+.govgr-table__body {
+  @apply relative;
 }
 .govgr-table__body--vertical-top {
   .govgr-table__cell {
@@ -224,6 +224,52 @@
     @apply align-bottom;
   }
 }
+.govgr-table__row {
+  @apply bg-base-100;
+}
+.govgr-table__row--warning {
+  @apply border-l-4 border-warning;
+  .govgr-table__cell:first-child {
+    @apply pl-2;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__button {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus) {
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-dropdown__content {
+    @apply py-0;
+  }
+  .govgr-vertical-nav__item {
+    @apply flex font-normal no-underline;
+  }
+  .govgr-vertical-nav__item--active:not(:focus) {
+    @apply bg-base-200 font-normal !important;
+  }
+}
+.govgr-table__cell {
+  .govgr-btn {
+    @apply mb-0;
+  }
+  .govgr-button-group {
+    @apply mb-0;
+  }
+}
+.govgr-table__header,
+.govgr-table__cell {
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
+  &:last-child {
+    @apply pr-0;
+  }
+}
+.govgr-table__header--numeric,
+.govgr-table__cell--numeric {
+  @apply text-right;
+}
 .govgr-table__cell--numeric {
   @apply font-normal;
   font-feature-settings: normal;
@@ -232,11 +278,17 @@
 .govgr-table__cell--no-data {
   @apply border-b-0 pt-2.5;
 }
+.govgr-table--dark,
+.govgr-table--zebra {
+  .govgr-table__header,
+  .govgr-table__cell {
+    @apply px-4 !important;
+  }
+}
 .govgr-table__loading {
   @apply h-full w-full absolute right-0 left-0 flex items-center justify-center
    bg-white bg-opacity-50 print:hidden;
 }
-
 @supports (
   (-webkit-backdrop-filter: blur(0.6px)) or (backdrop-filter: blur(0.6px))
 ) {

package/src/components/tabs.css

@@ -11,8 +11,8 @@
       clear: both;
     }
     .govgr-tabs__list-item {
-      @apply relative  px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left  md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 ;
+      @apply relative px-4 py-2 m-0 shadow-none cursor-pointer;
+      @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
       @apply print:hidden;
       &.govgr-tabs__list-item-selected {
         @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:pb-4 md:-mt-1 md:pt-4;
@@ -24,14 +24,10 @@
     }
     .govgr-tabs__tab {
       @apply text-lg no-underline hover:underline focus:underline;
-      text-underline-offset: .1em;
+      text-underline-offset: 0.1em;
       &:after {
         content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        @apply absolute top-0 right-0 bottom-0 left-0;
       }
       &:focus {
         background-color: var(--color-focus);
@@ -39,16 +35,15 @@
         -webkit-box-shadow: inset 0 0 0 3px var(--color-focus);
         box-shadow: inset 0 0 0 3px var(--color-focus);
         outline-offset: 0px;
-        text-decoration-thickness: .2rem;
+        text-decoration-thickness: 0.2rem;
       }
-
     }
   }
   .govgr-tabs__panel {
     @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
     print:block print:border-0 print:py-3;
-    &.govgr-tabs__panel-visible {
+    &.govgr-tabs__panel--visible {
       @apply block;
     }
   }
-}
+}

package/src/components/task-list.css

@@ -7,10 +7,10 @@
 .govgr-task-list__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
 }
-.govgr-task-list__heading-m {
+.govgr-task-list__heading--md {
   @apply md:text-2xl text-xl md:mb-4 mb-2;
 }
-.govgr-task-list__heading-s {
+.govgr-task-list__heading--sm {
   @apply md:text-lg text-base md:mb-3 mb-1;
 }
 .govgr-task-list__content {
@@ -18,11 +18,11 @@
   .govgr-body {
     @apply mb-2 md:mb-3;
   }
-  .govgr-summary-list__row:first-child  {
-    &>dt {
+  .govgr-summary-list__row:first-child {
+    & > dt {
       @apply border-t-2 border-base-400;
     }
-    &>dd {
+    & > dd {
       @apply sm:border-t-2 sm:border-base-400;
     }
   }
@@ -33,12 +33,13 @@
 .govgr-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
 }
-.govgr-tag__primary {
-  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4; 
+.govgr-task-list__content__tag--primary {
+  @apply bg-info text-white print:border-2 print:bg-white print:border-info-hover print:text-info-hover print:mr-4;
 }
-.govgr-tag__secondary {
+.govgr-task-list__content__tag--secondary {
   @apply bg-secondary text-base-content print:border-2 print:bg-white print:border-info print:text-info print:mr-4;
 }
-.govgr-tag__gray {
+.govgr-task-list__content__tag--gray {
   @apply bg-base-300 print:border-2 print:bg-white print:border-base-800 print:text-base-800 print:mr-4;
-}
+}
+.govgr-tag {}

package/src/components/timeline.css

@@ -17,27 +17,29 @@
     border-b-4 border-secondary;
   }
 }
-.govgr-timeline__heading-m {
-  @apply md:text-2xl text-xl md:mb-4 mb-2 ;
+.govgr-timeline__heading-md {
+  @apply md:text-2xl text-xl md:mb-4 mb-2;
   &::before {
     @apply top-3 w-3;
   }
 }
-.govgr-timeline__heading-s {
-  @apply md:text-lg text-base md:mb-3 mb-1 ;
+.govgr-timeline__heading-sm {
+  @apply md:text-lg text-base md:mb-3 mb-1;
   &::before {
     @apply top-2.5 w-3;
   }
 }
 .govgr-timeline__content {
   @apply mb-4;
-  .govgr-hint, .govgr-body {
+  .govgr-hint,
+  .govgr-body {
     @apply mb-2 md:mb-3;
   }
 }
 .govgr-timeline__actions {
   @apply flex flex-wrap items-center gap-4 mb-6;
-  .govgr-btn, .govgr-link {
+  .govgr-btn,
+  .govgr-link {
     @apply mb-0;
   }
-}
+}

package/src/components/typography.css

@@ -6,29 +6,29 @@
   font-weight: var(--heading-xl-font-weight);
   letter-spacing: var(--heading-xl-letter-spacing);
 }
-.govgr-heading-l {
+.govgr-heading-lg {
   @apply mx-0;
-  font-size: var(--heading-l-font-size);
-  line-height:var(--heading-l-line-height);
-  margin-bottom:var(--heading-l-margin-bottom);
-  font-weight: var(--heading-l-font-weight);
-  letter-spacing: var(--heading-l-letter-spacing);
+  font-size: var(--heading-lg-font-size);
+  line-height:var(--heading-lg-line-height);
+  margin-bottom:var(--heading-lg-margin-bottom);
+  font-weight: var(--heading-lg-font-weight);
+  letter-spacing: var(--heading-lg-letter-spacing);
 }
-.govgr-heading-m {
+.govgr-heading-md {
   @apply mx-0;
-  font-size: var(--heading-m-font-size);
-  line-height:var(--heading-m-line-height);
-  margin-bottom:var(--heading-m-margin-bottom);
-  font-weight: var(--heading-m-font-weight);
-  letter-spacing: var(--heading-m-letter-spacing);
+  font-size: var(--heading-md-font-size);
+  line-height:var(--heading-md-line-height);
+  margin-bottom:var(--heading-md-margin-bottom);
+  font-weight: var(--heading-md-font-weight);
+  letter-spacing: var(--heading-md-letter-spacing);
 }
-.govgr-heading-s {
+.govgr-heading-sm {
   @apply mx-0 ;
-  font-size: var(--heading-s-font-size);
-  line-height:var(--heading-s-line-height);
-  margin-bottom:var(--heading-s-margin-bottom);
-  font-weight: var(--heading-s-font-weight);
-  letter-spacing: var(--heading-s-letter-spacing);
+  font-size: var(--heading-sm-font-size);
+  line-height:var(--heading-sm-line-height);
+  margin-bottom:var(--heading-sm-margin-bottom);
+  font-weight: var(--heading-sm-font-weight);
+  letter-spacing: var(--heading-sm-letter-spacing);
 } 
 .govgr-caption-xl {
   @apply block mx-0 font-normal;
@@ -40,24 +40,24 @@
   letter-spacing: var(--heading-xl-letter-spacing);
 
 }
-.govgr-caption-l {
+.govgr-caption-lg {
   @apply block mx-0 font-normal;
-  color: var(--caption-l-color);
-  font-size: var(--caption-l-font-size);
-  line-height: var(--caption-l-line-height);
-  margin-bottom: var(--caption-l-margin-bottom);
-  font-weight: var(--caption-l-font-weight);
-  letter-spacing: var(--caption-l-letter-spacing);
+  color: var(--caption-lg-color);
+  font-size: var(--caption-lg-font-size);
+  line-height: var(--caption-lg-line-height);
+  margin-bottom: var(--caption-lg-margin-bottom);
+  font-weight: var(--caption-lg-font-weight);
+  letter-spacing: var(--caption-lg-letter-spacing);
 
 }
-.govgr-caption-m {
+.govgr-caption-md {
   @apply block mx-0 font-normal;
-  color: var(--caption-m-color);
-  font-size: var(--caption-m-font-size);
-  line-height: var(--caption-m-line-height);
-  margin-bottom: var(--caption-m-margin-bottom);
-  font-weight: var(--caption-m-font-weight);
-  letter-spacing: var(--caption-m-letter-spacing);
+  color: var(--caption-md-color);
+  font-size: var(--caption-md-font-size);
+  line-height: var(--caption-md-line-height);
+  margin-bottom: var(--caption-md-margin-bottom);
+  font-weight: var(--caption-md-font-weight);
+  letter-spacing: var(--caption-md-letter-spacing);
 
 }
 .govgr-\!-font-size-14 {
@@ -114,8 +114,21 @@
 .govgr-list--number {
   @apply list-decimal list-outside pl-6;
 }
-.govgr-list--spaced>.govgr-list__item {
+.govgr-list--spaced:not(.govgr-list--horizontal)>.govgr-list__item {
   @apply mb-4;
+  &:last-child{
+    @apply mb-0;
+  }
+}
+.govgr-list--horizontal {
+  @apply flex flex-wrap gap-x-6 gap-y-3;
+  .govgr-list__item {
+    @apply w-full sm:w-auto;
+    
+  }
+  &.govgr-list--spaced {
+    @apply gap-x-10 gap-y-5;
+  }
 }
 .govgr-list, .govgr-blockquote {
   @apply md:mb-8 mb-4 text-base-content;
@@ -131,16 +144,13 @@
   color: var(--body-color);
   letter-spacing: var(--body-letter-spacing);
 }
-.govgr-body-l {
-  font-size: var(--body-l-font-size);
-  line-height: var(--body-l-line-height);
+.govgr-body-lg {
+  font-size: var(--body-lg-font-size);
+  line-height: var(--body-lg-line-height);
 }
-.govgr-body-s {
-  font-size: var(--body-s-font-size);
-  line-height: var(--body-s-line-height);
-}
-.govgr-hint-l {
-  @apply mb-4 lg:text-2xl text-lg text-base-800;
+.govgr-body-sm {
+  font-size: var(--body-sm-font-size);
+  line-height: var(--body-sm-line-height);
 }
 .govgr-hint {
   font-size: var(--hint-font-size);
@@ -149,9 +159,6 @@
   color: var(--hint-color);
   letter-spacing: var(--hint-letter-spacing);
 }
-.govgr-hint-s {
-  @apply mb-4 lg:text-base text-sm text-base-800;
-}
 .govgr-background-dark, .govgr-masthead--primary {
   .govgr-hint {
     @apply opacity-70 text-white print:text-base-content;
@@ -222,7 +229,7 @@
     text-decoration:none;
     outline: none; 
   }
-  .govgr-caret--left {
+  .govgr-svg-icon--caret {
     fill:var(--color-base-content);
     @apply md:w-4 md:h-4 w-3 h-3 inline-block mr-2;
   }
@@ -243,7 +250,14 @@
     }
   }
 }
-
+.govgr-visually-hidden {
+  @apply absolute m-0 p-0 overflow-hidden border-0 whitespace-nowrap !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+}
 @media print {
   .govgr-body .govgr-link[href^="#"]:after {
     display: none;