@digigov/css 1.0.0-079f34f3d → 1.0.0-290a96e2

package/src/components/drawer.css

@@ -1,30 +1,42 @@
-.govgr-drawer{
+.govgr-drawer {
   @apply border border-base-300 bg-base-100 p-4
   h-full max-h-screen min-h-screen overflow-y-scroll w-4/5 max-w-md
   fixed top-0 bottom-0 z-40;
   @apply shadow-thick !important;
 }
-.govgr-drawer--relative-sm{
+.govgr-drawer--relative-sm {
   @apply sm:block sm:relative sm:w-full max-h-full shadow-thick sm:shadow-none !important;
 }
-.govgr-drawer--relative-md{
+.govgr-drawer--relative-md {
   @apply md:block md:relative md:w-full max-h-full shadow-thick md:shadow-none !important;
 }
-.govgr-drawer--relative-lg{
+.govgr-drawer--relative-lg {
   @apply lg:block lg:relative lg:w-full max-h-full shadow-thick lg:shadow-none !important;
 }
 .govgr-drawer--right {
   @apply right-0;
 }
 .govgr-drawer--left {
-  @apply left-0 ;
+  @apply left-0;
 }
 .govgr-drawer--closed {
   @apply hidden;
 }
 .govgr-drawer__heading {
   @apply p-0 mb-4 flex justify-between align-baseline;
-  .govgr--drawer__close-icon, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
+  .govgr--drawer__close-icon {
+    @apply m-0;
+  }
+}
+
+/* overrides */
+
+.govgr-drawer__heading {
+  .govgr-heading-xs,
+  .govgr-heading-sm,
+  .govgr-heading-md,
+  .govgr-heading-lg,
+  .govgr-heading-xl {
     @apply m-0;
   }
 }

package/src/components/dropdown.css

@@ -1,31 +1,5 @@
 .govgr-dropdown {
   @apply w-fit relative;
-  &[open] {
-    .govgr-dropdown__button--arrow {
-      .govgr-svg-icon--arrow {
-        @apply transform -rotate-180;
-      }
-    }
-    .govgr-dropdown__button {
-      &.govgr-btn-primary {    
-        background-color: var(--btn-primary-background-color-hover);
-        color: var(--btn-primary-color-hover);
-        }
-      &.govgr-btn-secondary {
-        background-color: var(--btn-secondary-background-color-hover);
-        color: var(--btn-secondary-color-hover);
-      }
-      &.govgr-btn-warning {
-        background-color: var(--btn-warning-background-color-hover);
-        color: var(--btn-warning-color-hover);
-      }
-    }
-  }
-  .govgr-dropdown__button--arrow {
-    .govgr-svg-icon--arrow {
-      @apply transition duration-300;
-    }
-  }
 }
 .govgr-dropdown--up {
   .govgr-dropdown__content {
@@ -52,13 +26,6 @@
   &::marker {
     font-size: 0px;
   }
-  .govgr-svg-icon {
-    @apply w-5 h-6 md:h-8;
-    @apply print:hidden; 
-  }
-  &.govgr-link {
-    @apply inline-flex gap-1 items-center;
-  }
 }
 .govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
   @apply mt-4 print:text-base-content;
@@ -74,6 +41,51 @@
   *:last-child {
     @apply mb-0;
   }
+}
+.govgr-dropdown__content--full-width {
+  @apply min-w-full;
+}
+
+/* overrides */
+
+.govgr-dropdown {
+  &[open] {
+    .govgr-dropdown__button--arrow {
+      .govgr-svg-icon--arrow {
+        @apply transform -rotate-180;
+      }
+    }
+    .govgr-dropdown__button {
+      &.govgr-btn-primary {
+        background-color: var(--btn-primary-background-color-hover);
+        color: var(--btn-primary-color-hover);
+        }
+      &.govgr-btn-secondary {
+        background-color: var(--btn-secondary-background-color-hover);
+        color: var(--btn-secondary-color-hover);
+      }
+      &.govgr-btn-warning {
+        background-color: var(--btn-warning-background-color-hover);
+        color: var(--btn-warning-color-hover);
+      }
+    }
+  }
+  .govgr-dropdown__button--arrow {
+    .govgr-svg-icon--arrow {
+      @apply transition duration-300;
+    }
+  }
+}
+.govgr-dropdown__button {
+  .govgr-svg-icon {
+    @apply w-5 h-6 md:h-8;
+    @apply print:hidden;
+  }
+  &.govgr-link {
+    @apply inline-flex gap-1 items-center;
+  }
+}
+.govgr-dropdown__content {
   .govgr-field {
     @apply mb-4;
   }
@@ -93,14 +105,3 @@
     }
   }
 }
-.govgr-dropdown__content--full-width {
-  @apply min-w-full;
-}
-.govgr-header, .govgr-admin-header {
-  .govgr-dropdown__button.govgr-link {
-    @apply text-lg text-white focus:text-base-content print:text-base-800;
-  }
-  .govgr-dropdown {
-    @apply print:hidden;
-  }
-}

package/src/components/filter.css

@@ -1,32 +1,29 @@
 .govgr-filter {
   @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
   box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
-  .govgr-select {
-    @apply w-full;
-  }
 }
 .govgr-filter {
   &.govgr-filter--position-relative-always {
     @apply block relative overflow-visible w-full shadow-none z-2 !important;
-    &.govgr-filter--closed  {
+    &.govgr-filter--closed {
       @apply block !important;
     }
   }
   &.govgr-filter--position-relative-sm {
-    @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-2 ;
-    &.govgr-filter--closed  {
+    @apply sm:block sm:relative sm:overflow-visible sm:w-full sm:shadow-none sm:z-2;
+    &.govgr-filter--closed {
       @apply sm:block;
     }
   }
   &.govgr-filter--position-relative-md {
-    @apply md:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-2 ;
-    &.govgr-filter--closed  {
+    @apply md:block md:relative md:overflow-visible md:w-full md:shadow-none md:z-2;
+    &.govgr-filter--closed {
       @apply md:block;
     }
   }
   &.govgr-filter--position-relative-lg {
-    @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-2 ;
-    &.govgr-filter--closed  {
+    @apply lg:block lg:relative lg:overflow-visible lg:w-full lg:shadow-none lg:z-2;
+    &.govgr-filter--closed {
       @apply lg:block;
     }
   }
@@ -44,59 +41,41 @@
   @apply flex gap-4 flex-col;
   align-items: stretch;
   @apply md:flex-row md:flex-wrap;
-  .govgr-field {
-    @apply mb-0;
-  }
-  .govgr-label, .govgr-btn {
-    @apply mb-0;
-  }
 }
 @media (min-width: 768px) {
   .govgr-filter__options--horizontal {
     align-items: flex-end;
   }
 }
-.govgr-filter__heading, .govgr-filter__selected, .govgr-filter__options {
+.govgr-filter__heading,
+.govgr-filter__selected,
+.govgr-filter__options {
   @apply p-0;
 }
 .govgr-filter__heading {
   @apply mb-4;
-  .govgr-close-btn, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
-    @apply m-0;
-  }
 }
 .govgr-filter__selected {
   @apply bg-base-200 p-4 m-0 rounded;
 }
 .govgr-filter__selected-heading {
   @apply flex flex-wrap sm:flex-nowrap mb-4 md:mb-6 justify-between gap-x-2;
-  .govgr-link, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
-    @apply m-0 h-full;
-  }
 }
 .govgr-input__search-btn {
   @apply shadow-none !important;
-  @apply 
-  border-b-2 border-base-content rounded-none
+  @apply border-b-2 border-base-content rounded-none
   px-4 py-2 w-min m-0 ml-3
   flex gap-2
   hover:bg-success-hover active:bg-success-hover hover:no-underline;
-  .govgr-svg-icon--search {
-    fill: var(--color-white);
-    @apply w-7 h-7;
-  }
 }
 .govgr-search {
   @apply flex w-full max-w-3xl;
 }
 .govgr-results__action-bar {
- @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline; 
- > * {
-   @apply mb-0;
- }
- .govgr-field {
-   @apply flex items-baseline gap-2;
- }
+  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  > * {
+    @apply mb-0;
+  }
 }
 .govgr-results__heading {
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
@@ -106,4 +85,54 @@
 }
 .govgr-link-filters {
   @apply block md:hidden;
-}
+}
+
+/* overrides */
+
+.govgr-filter {
+  @apply bg-base-100 fixed top-0 right-0 bottom-0 overflow-y-scroll z-40 w-4/5;
+  box-shadow: 0 0 30px rgba(var(--color-base-900-rgb), 0.9);
+  .govgr-select {
+    @apply w-full;
+  }
+}
+.govgr-filter__options--horizontal {
+  .govgr-field {
+    @apply mb-0;
+  }
+  .govgr-label,
+  .govgr-btn {
+    @apply mb-0;
+  }
+}
+.govgr-filter__heading {
+  .govgr-close-btn,
+  .govgr-heading-xs,
+  .govgr-heading-sm,
+  .govgr-heading-md,
+  .govgr-heading-lg,
+  .govgr-heading-xl {
+    @apply m-0;
+  }
+}
+.govgr-filter__selected-heading {
+  .govgr-link,
+  .govgr-heading-xs,
+  .govgr-heading-sm,
+  .govgr-heading-md,
+  .govgr-heading-lg,
+  .govgr-heading-xl {
+    @apply m-0 h-full;
+  }
+}
+.govgr-input__search-btn {
+  .govgr-svg-icon--search {
+    fill: var(--color-white);
+    @apply w-7 h-7;
+  }
+}
+.govgr-results__action-bar {
+  .govgr-field {
+    @apply flex items-baseline gap-2;
+  }
+}

package/src/components/footer.css

@@ -2,12 +2,6 @@
   @apply border-0 border-solid font-normal text-base py-4 md:py-8 
   border-t-4 border-tertiary text-base-800 bg-base-200 w-full
   print:py-2 print:bg-white print:border-t-2;
-  .govgr-section-break {
-    @apply print:hidden;
-  }
-  .govgr-link {
-    @apply print:text-base-content;
-  }
 }
 .govgr-footer__info {
   @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
@@ -87,4 +81,15 @@
 .govgr-footer__list-item {}
 .govgr-footer__heading {
   @apply mb-4 pb-4 border-b border-base-300;
-}
+}
+
+/* overrides */
+
+.govgr-footer {
+  .govgr-section-break {
+    @apply print:hidden;
+  }
+  .govgr-link {
+    @apply print:text-base-content;
+  }
+}

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,9 +45,6 @@
 }
 .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 {
@@ -80,6 +53,7 @@
 .govgr-select {
   @apply w-auto max-w-full;
 }
+.govgr-select__option {}
 .govgr-input--width-20-char {
   max-width: 41ex;
 }
@@ -175,7 +149,6 @@
 .govgr-radios__input:disabled:checked:after {
   @apply opacity-40;
 }
-
 .govgr-radios__label--disabled,
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
@@ -183,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,6 +1,5 @@
 .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-header__content {
@@ -12,6 +11,7 @@
   print:gap-1;
 }
 .govgr-header__logo {
+  print-color-adjust: exact !important;
   -webkit-print-color-adjust: exact !important;
   @apply h-12 print:hidden;
 }
@@ -44,52 +44,72 @@
 .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;
-  }
-  .govgr-header__content {
-    @apply flex-wrap;
-  }
-}
-.govgr-masthead--primary {
-  @apply bg-tertiary text-white;
-  .govgr-masthead__body {
-    @apply text-white;
-  }
-  .govgr-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-header {
-  @apply relative;
+  .govgr-header__content,
+  .govgr-header__section {
+    > .govgr-link {
+      @apply text-white focus:text-link-active print:text-base-content;
+    }
+  }
+  .govgr-dropdown {
+    @apply print:hidden;
+  }
   .govgr-dropdown__button {
     @apply sm:w-max;
   }
+  .govgr-dropdown__button.govgr-link {
+    @apply text-lg text-white focus:text-base-content print:text-base-800;
+  }
+  .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-header__section {
+  .govgr-phase-banner {
+    @apply mb-0;
+  }
 }
-.govgr-header-nav-menu__content, .govgr-header__content, .govgr-header__section {
-  >.govgr-svg-icon--burger {
+.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 {
+  > .govgr-close-btn {
     @apply sm:hidden;
     .govgr-svg-icon--close {
       fill: var(--color-link) !important;

package/src/components/index.css

@@ -22,6 +22,7 @@
 @import "./card.css";
 @import "./details.css";
 @import "./notification-banner.css";
+@import "./masthead.css";
 @import "./panel.css";
 @import "./phase-banner.css";
 @import "./summary-list.css";
@@ -43,3 +44,4 @@
 @import "./dev-theme.css";
 @import "./kitchensink.css";
 @import "./hidden.css";
+@import "./warning-text.css";

package/src/components/layout.css

@@ -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.  */
@@ -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;
 }