@digigov/css 1.0.0-blabla-test → 1.0.0-e322b0cc

package/src/components/stepnav.css

@@ -1,7 +1,14 @@
 .govgr-step-nav {
   @apply mb-8 md:mb-12;
-  .govgr-link {
-    @apply md:text-base text-sm;
+&.govgr-step-nav--dense, .govgr-dense & {
+    @apply mb-4 md:mb-8;
+    .govgr-step-nav__circle {
+      margin-left: 0.1rem;
+      @apply md:w-8 md:h-8;
+    }
+    .govgr-step-nav__accordion__summary {
+      @apply py-3;
+    }
   }
 }
 .govgr-step-nav__controls {
@@ -17,7 +24,7 @@
     height: calc(100% - 2rem);
   }
   &:after {
-    @apply absolute z-/1 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
+    @apply absolute z-0 w-0 h-full bg-base-100 left-0 top-8 border-2 border-base-400 border-r-0 border-t-0 border-b-0 md:border-l-3;
     content: "";
     margin-left: calc(0.75rem + 1px);
   }
@@ -39,6 +46,14 @@
   &:first-child {
     @apply border-t-2;
   }
+  .govgr-step-nav__accordion__opened {
+    visibility: hidden;
+    display: none;
+  }
+  .govgr-step-nav__accordion__closed {
+    visibility: visible;
+    display: block;
+  }
 }
 .govgr-step-nav__accordion[open] {
 
@@ -50,15 +65,10 @@
     visibility: hidden;
     display: none;
   }
-  .govgr-nav-step__accordion__content {
-    @apply block;
-  }
 }
+
 .govgr-step-nav__accordion__summary {
   @apply list-none w-fit mb-0 py-4 pr-8 cursor-pointer;
-  .govgr-hint {
-    @apply mb-0 mt-1;
-  }
   &::-webkit-details-marker {
     @apply hidden;
   }
@@ -136,8 +146,22 @@
     0 0.1em 0 var(--color-white), -0.1em 0 0 var(--color-white);
 }
 .govgr-nav-step__accordion__content {
-  @apply hidden md:pt-2 mb-6 pt-1 mx-0;
+  @apply md:pt-2 mb-6 pt-1 mx-0;
   > *:last-child {
     @apply mb-0;
   }
 }
+
+/* overrides */
+
+.govgr-step-nav {
+  .govgr-link {
+    @apply md:text-base text-sm;
+  }
+}
+.govgr-step-nav__accordion__summary {
+  .govgr-hint {
+    @apply mb-0 mt-1;
+  }
+}
+

package/src/components/summary-list.css

@@ -2,15 +2,6 @@
   font-size: var(--summary-list-font-size);
   @apply m-0 mb-6 sm:mb-8 w-full
   sm:table sm:w-full sm:table-fixed;
-  .govgr-btn {
-    @apply m-0 inline-flex;
-  }
-  .govgr-dropdown__content {
-    @apply mt-2;
-  }
-  .govgr-btn-group {
-    @apply mb-0 text-right sm:justify-end gap-y-2;
-  }
 }
 .govgr-summary-list--no-border {
   .govgr-summary-list__key,
@@ -41,12 +32,6 @@
 }
 .govgr-summary-list__value {
   @apply sm:w-6/12;
-  .govgr-link {
-    @apply pl-4;
-  }
-  .govgr-btn {
-    @apply ml-4;
-  }
 }
 .govgr-summary-list__actions {
   @apply sm:w-3/12 sm:pr-0 sm:text-right;
@@ -76,3 +61,25 @@
   @apply m-0 
   sm:table-cell sm:py-2 sm:pr-4 sm:border-b sm:border-solid sm:border-base-300;
 }
+
+/* overrides */
+
+.govgr-summary-list {
+  .govgr-dropdown__content {
+    @apply mt-2;
+  }
+  .govgr-btn {
+    @apply m-0 inline-flex;
+  }
+  .govgr-btn-group {
+    @apply mb-0 text-right sm:justify-end gap-y-2;
+  }
+}
+.govgr-summary-list__value {
+  .govgr-btn {
+    @apply ml-4;
+  }
+  .govgr-link {
+    @apply pl-4;
+  }
+}

package/src/components/svg-icons.css

@@ -44,74 +44,14 @@
 .govgr-svg-icon--xl {
   @apply h-10 w-10 !important;
 }
-.govgr-btn-primary,
-.govgr-btn-warning {
-  .govgr-svg-icon {
-    fill: var(--color-white);
-  }
-  .govgr-svg-icon--more-vert {
-    @apply h-6 w-6 md:h-8 md:w-8;
-  }
-}
-.govgr-btn-secondary {
-  .govgr-svg-icon {
-    fill: var(--color-base-content);
-  }
-  .govgr-svg-icon--more-vert {
-    @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);
-  }
-  &:hover {
-    .govgr-svg-icon {
-      fill: var(--color-link-hover);
-    }
-  }
-  &:focus {
-    .govgr-svg-icon {
-      fill: var(--color-link-active);
-    }
-  }
-}
-.govgr-header,
-.govgr-admin-header {
-  .govgr-link {
-    .govgr-svg-icon {
-      fill: var(--color-white);
-    }
-    &:hover {
-      .govgr-svg-icon {
-        fill: var(--color-white);
-      }
-    }
-    &:focus {
-      .govgr-svg-icon {
-        fill: var(--color-link-active);
-      }
-    }
-  }
-}
 .govgr-svg-icon--burger {
   fill: var(--color-base-content);
-  /* @apply w-8 h-8 float-right cursor-pointer transition-all  */
-  @apply transition-all focus:bg-focus;
+  @apply transition-transform focus:bg-focus;
   @apply cursor-pointer;
   #govgr-svg-icon--burger__line-1,
   #govgr-svg-icon--burger__line-2,
   #govgr-svg-icon--burger__line-3 {
-    @apply transition-all;
+    @apply transition-transform;
   }
   #govgr-svg-icon--burger__line-1 {
     x: 2px;

package/src/components/table.css

@@ -26,12 +26,6 @@
   @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;
@@ -70,20 +64,12 @@
 .govgr-table__row {
   @apply bg-base-100;
 }
-.govgr-table__row--warning {
+.govgr-table__row--highlight {
   @apply border-l-4 border-warning;
   .govgr-table__cell:first-child {
     @apply pl-2;
   }
 }
-.govgr-table__cell {
-  .govgr-btn {
-    @apply mb-0;
-  }
-  .govgr-btn-group {
-    @apply mb-0;
-  }
-}
 .govgr-table--dark,
 .govgr-table--zebra {
   .govgr-table__header,
@@ -211,6 +197,14 @@
     }
   }
 }
+.govgr-table:not(.govgr-table--zebra) {
+  .govgr-table__row--secondary {
+    @apply bg-base-200 print:bg-white;
+  }
+}
+.govgr-table__cell--bold {
+  @apply font-semibold;
+}
 .govgr-table__body {
   @apply relative;
 }
@@ -227,38 +221,6 @@
 .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;
@@ -298,3 +260,37 @@
     backdrop-filter: blur(0.6px);
   }
 }
+
+/* overrides */
+
+.govgr-table {
+  .govgr-dropdown__content {
+    @apply mt-0;
+  }
+  .govgr-dropdown__button {
+    @apply mb-0;
+  }
+}
+.govgr-table__cell {
+  .govgr-btn {
+    @apply mb-0;
+  }
+  .govgr-btn-group {
+    @apply mb-0;
+  }
+}
+.govgr-table__header {
+  .govgr-dropdown__content {
+    @apply py-0;
+  }
+  .govgr-dropdown__button:not(:focus) {
+    @apply no-underline font-bold text-base-content !important;
+  }
+  .govgr-dropdown__button--underline:not(:focus) {
+    @apply underline !important;
+    text-decoration-thickness: 2px !important;
+  }
+  .govgr-nav__list-item-link, .govgr-nav__list-item-btn {
+    @apply flex no-underline;
+  }
+}

package/src/components/tabs.css

@@ -15,7 +15,7 @@
       @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;
+        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
         margin-bottom: -1px;
         &:hover {
           text-decoration-thickness: 2px;
@@ -46,4 +46,36 @@
       @apply block;
     }
   }
+  &.govgr-tabs--dense, .govgr-dense & {
+    .govgr-tabs__list {
+        .govgr-tabs__list-item {
+        @apply px-3 py-1;
+        &.govgr-tabs__list-item-selected {
+            @apply md:px-4 md:pb-3 md:pt-2;
+        }
+        }
+    }
+    .govgr-tabs__panel {
+        @apply pb-2 pt-3;
+    }
+  }
+}
+
+.govgr-tabs--vertical {
+  .govgr-tabs__panel {
+    @apply min-h-full pt-4 pl-6;
+  }
+  .govgr-tabs__list {
+    .govgr-tabs__list-item {
+      @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
+      width: calc(100% - 0.25rem);
+      &.govgr-tabs__list-item-selected {
+        @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
+        /* margin-right: -1px; */
+        width: calc(100% + 1px);
+        /* margin-top: 0px; */
+      }
+    }
+  }
+
 }

package/src/components/tailwind.config.js

@@ -1,10 +1,16 @@
-const plugin = require('tailwindcss/plugin')
-const tailwindConfig = require('../../tailwind.config.js');
+const plugin = require("tailwindcss/plugin");
+const tailwindConfig = require("../../tailwind.config");
+
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   ...tailwindConfig,
+  content: {
+    files: ["./*.css"],
+    relative: true,
+  },
   plugins: [
-    plugin(function ({ addBase, addUtilities }) {
-      addUtilities(require('../../dist/utilities'), { variants: ['responsive'] })
-    })
+    plugin(function ({ addUtilities }) {
+      addUtilities(require("../../dist/utilities"));
+    }),
   ],
-}
+};

package/src/components/task-list.css

@@ -15,14 +15,40 @@
 }
 .govgr-task-list__content {
   @apply mb-4;
+}
+.govgr-task-list__content__tag {
+  @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
+}
+.govgr-task-list__content__tag--info {
+  @apply bg-info text-white print:border-info-hover print:text-info-hover;
+}
+.govgr-task-list__content__tag--primary {
+  @apply bg-secondary text-base-content print:border-info print:text-info;
+}
+.govgr-task-list__content__tag--secondary {
+  @apply bg-base-300 print:border-base-800 print:text-base-800;
+}
+
+/* overrides */
+
+.govgr-task-list--dense{
+  .govgr-task-list__item {
+    @apply mb-4 md:mb-6;
+    .govgr-summary-list{
+      @apply mb-4 md:mb-6; 
+    }
+  }
+}
+.govgr-task-list__content {
   .govgr-body {
     @apply mb-2 md:mb-3;
   }
   .govgr-summary-list__row:first-child {
-    & > dt {
+    & > .govgr-summary-list__key {
       @apply border-t-2 border-base-400;
     }
-    & > dd {
+    & > .govgr-summary-list__value,
+    & > .govgr-summary-list__actions {
       @apply sm:border-t-2 sm:border-base-400;
     }
   }
@@ -30,16 +56,3 @@
     @apply font-normal sm:mb-0 mb-2 pt-2;
   }
 }
-.govgr-task-list__content__tag {
-  @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest;
-}
-.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-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-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

@@ -1,13 +1,22 @@
 .govgr-timeline {
   @apply mb-4 pl-6 pb-2 border-l-4 border-secondary;
-}
-.govgr-timeline--spaced {
-  .govgr-timeline__item {
-    @apply mb-10 md:mb-12;
+  &.govgr-timeline--dense, .govgr-dense & {
+    @apply pb-0 border-l-3;
+    .govgr-timeline__item {
+      @apply mb-4 md:mb-6;
+    }
+    .govgr-timeline__heading {
+      @apply mb-2;
+      &::before {
+        content: "";
+        @apply border-b-3;
+      }
+    }
   }
 }
+
 .govgr-timeline__item {
-  @apply mb-8 md:mb-10;
+  @apply mb-10 md:mb-12;
 }
 .govgr-timeline__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2 relative;
@@ -31,13 +40,19 @@
 }
 .govgr-timeline__content {
   @apply mb-4;
+}
+.govgr-timeline__actions {
+  @apply flex flex-wrap items-center gap-4 mb-6;
+}
+
+/* overrides */
+.govgr-timeline__content {
   .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 {
     @apply mb-0;