@digigov/css 1.0.0-rc → 1.0.0-rc.1

package/src/components/pagination.css

@@ -3,31 +3,16 @@
   .govgr-pagination__label {
     @apply md:text-lg text-base;
   }
-  .govgr-label {
-    @apply text-base-content md:leading-normal flex-row items-center gap-2 md:text-lg text-base;
-  }
   .govgr-pagination__item--current {
     @apply md:text-lg text-base;
   }
-  .govgr-select {
-    text-indent: 0px;
-    @apply flex text-base-content md:leading-normal border md:text-lg text-base;
-    &:focus {
-        -webkit-box-shadow: inset 0 0 0 1px;
-        box-shadow: inset 0 0 0 1px;
-      }
-  }
 }
-.govgr-pagination--size-sm {
-  .govgr-pagination__label, .govgr-label, .govgr-select, .govgr-pagination__item--current {
-   @apply md:text-base text-sm;
-  }
-  .govgr-pagination__list {
-   .govgr-link{
-     @apply md:text-base text-sm !important; 
-   }
+.govgr-pagination--sm {
+  .govgr-pagination__label,
+  .govgr-pagination__item--current {
+    @apply md:text-base text-sm;
   }
- }
+}
 .govgr-pagination__label {
   @apply text-base-content md:leading-normal;
 }
@@ -35,9 +20,6 @@
   @apply flex items-center;
 }
 .govgr-pagination__item {
-  .govgr-link{
-    @apply flex items-center no-underline;
-  }
   @apply inline-block p-2 m-0;
   &:first-child {
     @apply pl-0;
@@ -50,9 +32,41 @@
 .govgr-pagination__item--dots {
   @apply font-bold;
 }
+
+/* overrides */
+
+.govgr-pagination {
+  .govgr-label {
+    @apply text-base-content md:leading-normal flex-row items-center gap-2 md:text-lg text-base;
+  }
+  .govgr-select {
+    text-indent: 0px;
+    @apply flex text-base-content md:leading-normal border md:text-lg text-base;
+    &:focus {
+      -webkit-box-shadow: inset 0 0 0 1px;
+      box-shadow: inset 0 0 0 1px;
+    }
+  }
+}
+.govgr-pagination--sm {
+  .govgr-label,
+  .govgr-select {
+    @apply md:text-base text-sm;
+  }
+  .govgr-pagination__list {
+    .govgr-link {
+      @apply md:text-base text-sm !important;
+    }
+  }
+}
+.govgr-pagination__item {
+  .govgr-link {
+    @apply flex items-center no-underline;
+  }
+}
 .govgr-pagination__item--inactive {
   .govgr-link {
     pointer-events: none;
     @apply text-base-800;
   }
-}
+}

package/src/components/panel.css

@@ -1,10 +1,10 @@
 .govgr-panel {
   @apply box-border mb-4 p-8 border-5 border-transparent text-center
-  print:p-4;
+  print:p-4 text-white
+  print:border-4 print:text-base-content print:bg-white;
 }
-.govgr-panel--confirmation {
-  @apply bg-success text-white
-  print:border-4 print:border-success print:text-base-content print:bg-white;
+.govgr-panel--success {
+  @apply bg-success print:border-success;
 }
 .govgr-panel__title {
   @apply mx-auto mt-0;

package/src/components/phase-banner.css

@@ -1,4 +1,4 @@
-.govgr-phase-banner_header {
+.govgr-phase-banner__header {
   @apply bg-focus top-0 z-30
   print:bg-white print:border-focus print:border-2 print:px-4;
   .govgr-phase-banner {
@@ -22,9 +22,3 @@
 .govgr-phase-banner__text {
   @apply table-cell text-base-content;
 }
-.govgr-header,
-.govgr-masthead--primary {
-  .govgr-phase-banner__text {
-    @apply text-white print:text-base-content;
-  }
-}

package/src/components/postcss.config.js

@@ -1,20 +1,19 @@
-module.exports = {
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss')('./src/components/tailwind.config.js'),
-    require('postcss-nested')({
-      "bubble": [
-        "screen"
-      ]
-    }),
-    require('autoprefixer'),
-    require('cssnano')({
-      "preset": [
+    require("postcss-import"),
+    require("tailwindcss/nesting"),
+    require("tailwindcss")("./src/components/tailwind.config.js"),
+    require("autoprefixer"),
+    require("cssnano")({
+      preset: [
         "default",
         {
-          "mergeRules": false
-        }
-      ]
+          mergeRules: false,
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
+
+module.exports = config;

package/src/components/radios.css

@@ -1,17 +1,22 @@
-.govgr-radios {}
+.govgr-radios {
+  &.govgr-radios--dense, govgr-dense & {
+    .govgr-radios__item {
+      @apply mb-2 pl-9 min-h-8;
+    }
+    .govgr-radios__input {
+      @apply left-0.5 top-0 w-8 h-8;
+      &:focus {
+        border-width: 3px;
+      }
+    }
+  }
+}
 .govgr-radios__item {
   @apply block relative mb-4 pl-12;
   min-height: 40px;
 }
-.govgr-radios--inline {
-  .govgr-radios__item {
-    @apply sm:mr-6 sm:float-left sm:clear-none;
-  }
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
+.govgr-radios--horizontal {
+  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
 }
 .govgr-radios__item {
   @apply block relative mb-4 pl-12;
@@ -22,7 +27,7 @@
   @apply inline-block py-1 px-2 cursor-pointer;
 }
 .govgr-radios__input {
-  @apply absolute z-1 left-0.5 -top-1 m-0 rounded-3xl
+  @apply absolute z-1 left-0.5 -top-1 m-0
   w-10 h-10 opacity-100 cursor-pointer
   bg-base-100;
   appearance: none;
@@ -30,17 +35,10 @@
   height: 40px;
   border: 2px solid currentColor;
   border-radius: 50%;
-  &::before {
-    content: "";
-    @apply absolute bg-base-100 opacity-0 w-0 h-0;
-    top: 6px;
-    left: 6px;
-    border: 12px solid currentColor;
-    border-radius: 50%;
-  }
   &:checked {
-    &::before {
-      @apply opacity-100;
+    box-shadow: inset 0 0 0px 6px var(--color-base-100), inset 0 0 0 20px var(--color-base-content);
+    &:focus {
+      box-shadow: 0 0 0 4px var(--color-focus), inset 0 0 0px 4px var(--color-base-100), inset 0 0 0 20px var(--color-base-content);
     }
   }
   &:focus {
@@ -48,12 +46,23 @@
     outline-offset: 1px;
     box-shadow: 0 0 0 4px var(--color-focus);
     border-width: 4px;
-    &::before {
-      top: 4px;
-      left: 4px;
-    }
   }
 }
 .govgr-radios__conditional {
     @apply border-l-4 border-base-500 ml-4 pl-6;
 }
+
+/* overrides */
+
+.govgr-radios--horizontal {
+  .govgr-choice-divider-text {
+    @apply min-w-max mx-2;
+  }
+}
+.govgr-radios {
+  &.govgr-radios--dense, .govgr-dense & {
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
+}

package/src/components/stack.css

@@ -0,0 +1,66 @@
+.govgr-stack {
+  @apply flex flex-col flex-wrap;
+}
+.govgr-stack--row {
+  @apply flex-row;
+}
+.govgr-stack--reverse-row {
+  @apply flex-row-reverse;
+}
+.govgr-stack--col-reverse {
+  @apply flex-col-reverse;
+}
+.govgr-stack--nowrap {
+  @apply flex-nowrap;
+}
+.govgr-stack--justify-flex-start {
+  @apply justify-start;
+}
+.govgr-stack--justify-flex-end {
+  @apply justify-end;
+}
+.govgr-stack--justify-center {
+  @apply justify-center;
+}
+.govgr-stack--justify-space-between {
+  @apply justify-between;
+}
+.govgr-stack--justify-space-around {
+  @apply justify-around;
+}
+.govgr-stack--justify-space-evenly  {
+  @apply justify-evenly;
+}
+.govgr-stack--align-stretch {
+  @apply items-stretch;
+}
+.govgr-stack--align-flex-start {
+  @apply items-start;
+}
+.govgr-stack--align-flex-end {
+  @apply items-end;
+}
+.govgr-stack--align-center {
+  @apply items-center;
+}
+.govgr-stack--align-baseline {
+  @apply items-baseline;
+}
+.govgr-stack--content-flex-start {
+  @apply content-start;
+}
+.govgr-stack--content-flex-end {
+  @apply content-end;
+}
+.govgr-stack--content-center {
+  @apply content-center;
+}
+.govgr-stack--content-space-between {
+  @apply content-between;
+}
+.govgr-stack--content-space-around {
+  @apply content-around;
+}
+.govgr-stack--content-space-evenly  {
+  @apply content-evenly;
+}

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;