@digigov/css 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

package/src/components/form.css

@@ -1,20 +1,4 @@
-.govgr-form {
-  .govgr-body {
-    @apply mb-4;
-  }
-  &.govgr-grid {
-    @apply grid gap-4;
-    .govgr-fieldset {
-      @apply grid gap-4;
-      :not(.govgr-field) {
-        @apply col-span-12;
-      }
-    }
-    :not(.govgr-field) {
-      @apply col-span-12;
-    }
-  }
-}
+.govgr-form {}
 .govgr-field {
   @apply mb-8 md:mb-10;
   .govgr-fieldset {
@@ -40,14 +24,6 @@
   font-size: var(--label-font-size);
   line-height: var(--label-line-height);
   letter-spacing: var(--label-letter-spacing);
-  .govgr-heading-sm,
-  .govgr-heading-md,
-  .govgr-heading-lg,
-  .govgr-heading-xl,
-  .govgr-hint,
-  .govgr-error-message {
-    @apply mb-0;
-  }
 }
 .govgr-input,
 .govgr-select,
@@ -69,41 +45,38 @@
 }
 .govgr-uploaded-file {
   @apply flex flex-wrap gap-x-4 mb-0;
-  .govgr-link {
-    @apply h-fit text-lg;
-  }
 }
 .govgr-date-input,
-.govgr-single-character-input--container {
-  @apply flex;
+.govgr-single-character-input {
+  @apply flex flex-wrap gap-y-2;
 }
 .govgr-select {
   @apply w-auto max-w-full;
 }
-.govgr-input--width-20 {
+.govgr-select__option {}
+.govgr-input--width-20-char {
   max-width: 41ex;
 }
-.govgr-input--width-10 {
+.govgr-input--width-10-char {
   max-width: 23ex;
 }
-.govgr-input--width-5 {
+.govgr-input--width-5-char {
   max-width: 10.8ex;
 }
-.govgr-input--width-4 {
+.govgr-input--width-4-char {
   max-width: 9ex;
 }
-.govgr-input--width-3 {
+.govgr-input--width-3-char {
   max-width: 7.2ex;
 }
-.govgr-input--width-2 {
+.govgr-input--width-2-char {
   max-width: 5.4ex;
 }
-.govgr-otp-input--width {
-  max-width: 3.1ex;
-  @apply text-center pl-0 pr-0;
+.govgr-single-character-input__item {
+  max-width: 4.4ex;
+  @apply text-center px-0 mr-3;
 }
-.govgr-date-input__item,
-.govgr-otp-input__item {
+.govgr-date-input__item {
   @apply mr-4;
 }
 .govgr-\!-width-one-quarter,
@@ -176,7 +149,6 @@
 .govgr-radios__input:disabled:checked:after {
   @apply opacity-40;
 }
-
 .govgr-radios__label--disabled,
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
@@ -184,3 +156,39 @@
 .govgr-choice-divider-text {
   @apply text-lg text-center min-w-10 w-max mb-4;
 }
+
+/* overrides */
+
+.govgr-form {
+  .govgr-body {
+    @apply mb-4;
+  }
+  &.govgr-grid {
+    @apply grid gap-4;
+    .govgr-fieldset {
+      @apply grid gap-4;
+      :not(.govgr-field) {
+        @apply col-span-12;
+      }
+    }
+    :not(.govgr-field) {
+      @apply col-span-12;
+    }
+  }
+}
+.govgr-label {
+  .govgr-heading-xs,
+  .govgr-heading-sm,
+  .govgr-heading-md,
+  .govgr-heading-lg,
+  .govgr-heading-xl,
+  .govgr-hint,
+  .govgr-error-message {
+    @apply mb-0;
+  }
+}
+.govgr-uploaded-file {
+  .govgr-link {
+    @apply h-fit text-lg;
+  }
+}

package/src/components/header.css

@@ -1,21 +1,17 @@
 .govgr-header {
-  @apply bg-primary border-b-8 print:border-b-2 border-tertiary;
-  @apply print:bg-white;
+  @apply relative bg-primary border-b-8 print:border-b-2 border-tertiary print:bg-white;
   border-bottom-style: solid;
-  .govgr-svg-icon--burger {
-    fill: var(--color-base-content);
-    @apply float-right cursor-pointer;
-  }
 }
-.govgr-header__container {
+.govgr-header__content {
   @apply px-4 py-2 mx-auto max-w-5xl w-full flex justify-between items-center
   print:px-0 gap-3;
 }
-.govgr-header__content {
+.govgr-header__section {
   @apply flex justify-start flex-wrap items-center gap-x-4 gap-y-2
   print:gap-1;
 }
 .govgr-header__logo {
+  print-color-adjust: exact !important;
   -webkit-print-color-adjust: exact !important;
   @apply h-12 print:hidden;
 }
@@ -48,34 +44,94 @@
 .govgr-header-nav-menu__content {
   @apply flex justify-start items-center gap-x-4 gap-y-2 print:gap-1;
 }
-.govgr-masthead {
-  @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
-  .govgr-grid-column-two-thirds > *:last-child {
-    @apply mb-0;
+
+/* overrides */
+
+.govgr-header {
+  .govgr-header__content,
+  .govgr-header__section {
+    > .govgr-link {
+      @apply text-white focus:text-link-active print:text-base-content;
+    }
   }
-  .govgr-header__container {
-    @apply flex-wrap;
+  .govgr-dropdown {
+    @apply print:hidden;
   }
-}
-.govgr-masthead--primary {
-  @apply bg-tertiary text-white;
-  .govgr-masthead__body {
-    @apply text-white;
+  .govgr-dropdown__button {
+    @apply sm:w-max;
   }
-  .govgr-body {
-    @apply text-white;
+  .govgr-dropdown__button.govgr-link {
+    @apply text-lg text-white focus:text-base-content print:text-base-800;
   }
-}
-.govgr-masthead--secondary {
-  @apply border-b border-base-400 !important;
-  @apply bg-base-200;
-  .govgr-masthead__body {
-    @apply text-base-content;
+  .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-phase-banner__text {
+    @apply text-white print:text-base-content;
+  }
+  .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-masthead__body {
-  @apply md:mb-10 mb-6 md:text-lg text-base leading-7 print:text-base-content;
+.govgr-header__section {
+  .govgr-phase-banner {
+    @apply mb-0;
+  }
 }
-.govgr-masthead__logo {
-  @apply md:mb-6 mb-4 h-10;
+.govgr-header-nav-menu__content,
+.govgr-header__content,
+.govgr-header__section {
+  > .govgr-svg-icon--burger {
+    fill: var(--color-white);
+    @apply float-right focus:bg-focus;
+  }
+  > .govgr-close-btn {
+    @apply sm:hidden;
+    .govgr-svg-icon--close {
+      fill: var(--color-link) !important;
+    }
+  }
+  > .govgr-nav__list {
+    > .govgr-nav__list-item {
+      > .govgr-nav__list-item-link,
+      > .govgr-nav__list-item-btn {
+        &:not(:focus) {
+          @apply text-white;
+        }
+      }
+      > .govgr-nav__list-item-link--active,
+      > .govgr-nav__list-item-btn--active {
+        &:not(:focus) {
+          @apply text-white !important;
+        }
+        .govgr-svg-icon {
+          fill: var(--color-white);
+        }
+      }
+    }
+  }
 }

package/src/components/hidden.css

@@ -1,3 +1,6 @@
+.govgr-hidden {
+  @apply hidden;
+}
 .govgr-hidden-xs--up {
   @apply xs:hidden;
 }

package/src/components/index.css

@@ -22,9 +22,11 @@
 @import "./card.css";
 @import "./details.css";
 @import "./notification-banner.css";
+@import "./masthead.css";
 @import "./panel.css";
 @import "./phase-banner.css";
 @import "./summary-list.css";
+@import "./stack.css";
 @import "./tabs.css";
 @import "./misc.css";
 @import "./modal.css";
@@ -42,3 +44,4 @@
 @import "./dev-theme.css";
 @import "./kitchensink.css";
 @import "./hidden.css";
+@import "./warning-text.css";

package/src/components/kitchensink.css

@@ -46,7 +46,7 @@
 .govgr-kitchensink-card .govgr-table__cell .govgr-dropdown {
   margin: 0 !important;
 }
-.govgr-kitchensink-card .govgr-layout-wrapper__full-height {
+.govgr-kitchensink-card .govgr-layout--full-height {
   min-height: inherit;
 }
 @container (min-width: 400px) {
@@ -58,7 +58,7 @@
   .govgr-kitchensink-card .govgr-drawer--closed {
     @apply hidden;
   }
-  .govgr-kitchensink-card .govgr-drawer__close-icon {
+  .govgr-kitchensink-card .govgr-close-btn {
     @apply block;
   }
 }

package/src/components/layout.css

@@ -1,9 +1,9 @@
-.govgr-layout-wrapper {
+.govgr-layout {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }
-.govgr-layout-wrapper__full-height {
+.govgr-layout--full-height {
   min-height: 100vh;
 }
 .govgr-container {
@@ -13,16 +13,6 @@
 .govgr-container--full-width {
   @apply max-w-full;
 }
-.govgr-main-wrapper {
-  @apply grid py-4 md:grid-cols-3 md:gap-12 grid-cols-1 gap-y-16
-  print:gap-4 print:grid-cols-1;
-}
-.govgr-grid-column-two-thirds {
-  @apply col-span-2;
-}
-.govgr-grid-column-one-third {
-  @apply col-span-1;
-}
 .govgr-top {
   @apply mb-4;
 }
@@ -34,9 +24,6 @@
 }
 .govgr-btn-group {
   @apply flex flex-wrap items-center gap-4 mb-6 print:items-baseline;
-  .govgr-btn, .govgr-link {
-    @apply mb-0;
-  }
 }
 @media print {
   /* When govgr-btn-group is empty at print, content at :after limits its height.  */
@@ -48,7 +35,7 @@
   @apply m-auto px-4 py-2 border-0 w-full bg-transparent;
 }
 .govgr-section-break--visible {
-  @apply border-t border-base-300 border-solid	;
+  @apply border-t border-base-300 border-solid;
 }
 .govgr-section-break--md {
  @apply mb-5;
@@ -58,4 +45,17 @@
 }
 .govgr-section-break--xl {
  @apply mb-9;
-}
+}
+
+/* overrides */
+
+.govgr-container {
+  &.govgr-grid {
+    @apply py-4 print:gap-4 print:grid-cols-1;
+  }
+}
+.govgr-btn-group {
+  .govgr-btn, .govgr-link {
+    @apply mb-0;
+  }
+}

package/src/components/loader.css

@@ -5,15 +5,15 @@
   animation: rotate 10s linear infinite;
   @apply w-fit h-10;
 }
-.govgr-loader__circle {
+.govgr-circular-progress__circle {
   fill: none;
   stroke-miterlimit: 10;
   stroke-width: 42px;
 }
-.govgr-loader__circle--1 {
+.govgr-circular-progress__circle--1 {
   stroke: var(--color-secondary);
 }
-.govgr-loader__circle--2 {
+.govgr-circular-progress__circle--2 {
   --full-length: 470;
   stroke: var(--color-primary);
   stroke-dasharray: var(--full-length);
@@ -21,26 +21,15 @@
   animation: dash 4s ease-in-out 0s forwards infinite;
 }
 .govgr-circular-progress--secondary {
-  .govgr-loader__circle--1 {
+  .govgr-circular_progress__circle--1 {
     @apply opacity-40;
     stroke: var(--color-white);
   }
 
-  .govgr-loader__circle--2 {
+  .govgr-circular-progress__circle--2 {
     stroke: var(--color-white);
   }
 }
-@media print {
-  .govgr-btn {
-    .govgr-circular-progress--secondary {
-      .govgr-loader__circle--1,
-      .govgr-loader__circle--2 {
-        stroke: var(--color-base-content);
-      }
-    }
-  }
-}
-
 .govgr-circular-progress--sm {
   @apply h-5 w-5;
 }

package/src/components/masthead.css

@@ -0,0 +1,78 @@
+.govgr-masthead {
+  @apply print:border-2 print:bg-white print:border-tertiary-300 print:text-base-content;
+}
+.govgr-masthead--primary {
+  @apply bg-tertiary text-white;
+  .govgr-masthead__body {
+    @apply text-white;
+  }
+}
+.govgr-masthead--secondary {
+  @apply border-b border-base-400 !important;
+  @apply bg-base-200;
+  .govgr-masthead__body {
+    @apply text-base-content;
+  }
+}
+.govgr-masthead__body {
+  @apply md:mb-10 mb-6 md:text-lg text-base leading-7 print:text-base-content;
+}
+.govgr-masthead__logo {
+  @apply md:mb-6 mb-4 h-10;
+}
+
+/* overrides */
+
+.govgr-masthead {
+  .govgr-main > *:last-child {
+    @apply mb-0;
+  }
+  .govgr-header__content {
+    @apply flex-wrap;
+  }
+}
+.govgr-masthead--primary {
+  .govgr-body {
+    @apply text-white;
+  }
+  .govgr-link {
+    @apply text-white hover:text-white focus:text-base-content print:text-base-content;
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+  .govgr-link--no-underline {
+    @apply no-underline hover:underline;
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+  .govgr-back-link {
+    @apply text-white print:text-base-content;
+  }
+  .govgr-phase-banner__text {
+    @apply text-white print:text-base-content;
+  }
+}
+.govgr-masthead--primary,
+.govgr-background-dark {
+  .govgr-btn {
+    @apply border-white hover:border-white border-2 shadow-none;
+    &:focus {
+      -webkit-box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
+      box-shadow: 0 0 0 4px var(--color-base-content), 0 0 0 8px var(--color-focus);
+    }
+  }
+  .govgr-btn-primary {
+    @apply print:border-0 print:border-b-2 print:border-success print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-btn-secondary {
+    @apply print:border-0 print:border-b-2 print:border-base-500 print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-btn-warning {
+    @apply print:border-0 print:border-b-2  print:border-error print:text-base-content print:bg-white print:shadow-none;
+  }
+  .govgr-hint {
+    @apply opacity-70 text-white print:text-base-content;
+  }
+}

package/src/components/misc.css

@@ -1,35 +1,3 @@
-.govgr-blockquote {
-  @apply lg:mb-8 mb-4 mt-8 md:mb-8 p-4 border-l-8 border-base-500;
-}
-
-.govgr-warning-text {
-  @apply p-4;
-}
-.govgr-warning-text {
-  font-size: var(--warning-text-font-size);
-  @apply flex pt-4 pb-4 pl-0 pr-0;
-  .govgr-warning-text__icon {
-    @apply text-base-content-invert font-bold bg-base-content text-3xl leading-10 text-center 
-    rounded-3xl md:min-h-10 min-w-10 h-fit mr-6 mt-1
-    print:bg-white print:border-2 print:border-base-content print:text-base-content;
-  }
-  .govgr-warning-text__text {
-    @apply flex items-center;
-  }
-  .govgr-warning-text__assistive {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    border: 0 !important;
-    white-space: nowrap !important;
-  }
-}
 .tooltip {
   @apply inline-block relative m-0 p-0 underline w-min cursor-pointer;
   text-decoration-style: dotted;
@@ -52,15 +20,23 @@
     }
   }
 }
-.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;
-}
-
 .govgr-cookie-banner {
   @apply bg-base-200;
 }
+
+/* overrides */
+
+div[class*="govgr-grid__col-span"] {
+  >.govgr-card {
+    @apply mb-0;
+  }
+}
+.govgr-image-logo {
+  @apply h-10;
+}
+.govgr-image-logo--light {
+  @apply h-10;
+}
+.govgr-image-logo--dark {
+  @apply h-10 hidden;
+}

package/src/components/modal.css

@@ -16,14 +16,16 @@
 .govgr-modal__container {
   @apply grid p-10 gap-6 px-6 py-2;
 }
-.govgr-modal__heading {
-  @apply md:text-2xl text-xl font-bold;
-}
 .govgr-modal__content {
   @apply text-base lg:text-xl text-lg;
 }
 .govgr-modal__action {
   @apply flex flex-wrap items-center gap-4;
+}
+
+/* overrides */
+
+.govgr-modal__action {
   .govgr-link,
   .govgr-btn {
     @apply mb-0;