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

package/src/components/dropdown.css

@@ -1,5 +1,68 @@
 .govgr-dropdown {
   @apply w-fit relative;
+  &.govgr-dropdown--up {
+    .govgr-dropdown__content {
+      @apply mb-4 border border-b-0 bottom-full;
+      -webkit-box-box-shadow:
+        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+        0 2px 0 var(--color-base-500);
+      box-shadow:
+        0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+        0 2px 0 var(--color-base-500);
+    }
+  }
+  &.govgr-dropdown--right {
+    .govgr-dropdown__content {
+      @apply right-0 mr-0 ml-4;
+    }
+  }
+  &.govgr-dropdown--disabled {
+    @apply cursor-not-allowed;
+    .govgr-dropdown__button {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
+    }
+  }
+  &.govgr-dropdown--dense,
+  .govgr-dense & {
+    .govgr-dropdown__content {
+      @apply p-2;
+    }
+  }
+  .govgr-dropdown__button {
+    @apply w-fit print:text-base-content;
+    &::marker {
+      font-size: 0px;
+    }
+  }
+  .govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
+    @apply mt-4 print:text-base-content;
+  }
+  .govgr-btn-group .govgr-btn + .govgr-dropdown__content {
+    @apply mt-4;
+  }
+  .govgr-dropdown__content {
+    @apply border border-base-400 p-4 bg-base-100 border-t-0
+    max-w-xs w-max min-w-full absolute transition z-3 mr-4 -mt-4;
+    -webkit-box-box-shadow:
+      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+      0 -2px 0 var(--color-base-500);
+    box-shadow:
+      0 2px 8px rgba(var(--color-base-900-rgb), 0.3),
+      0 -2px 0 var(--color-base-500);
+    *: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 {
@@ -7,10 +70,10 @@
       }
     }
     .govgr-dropdown__button {
-      &.govgr-btn-primary {    
+      &.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);
@@ -26,82 +89,44 @@
       @apply transition duration-300;
     }
   }
-}
-.govgr-dropdown--up {
-  .govgr-dropdown__content {
-    @apply mb-4 border border-b-0 bottom-full;
-    -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
-    box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 2px 0 var(--color-base-500);
+  .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--right {
   .govgr-dropdown__content {
-    @apply right-0 mr-0 ml-4 text-right;
     .govgr-field {
-      @apply text-left;
+      @apply mb-4;
+    }
+    .govgr-section-break {
+      @apply -mx-4 w-auto;
+    }
+    > .govgr-nav__list {
+      @apply w-auto -mx-4 flex-col;
+      .govgr-nav__list-item {
+        @apply border-b border-base-300 py-2 px-4;
+        &:last-child {
+          @apply border-0;
+        }
+        &:focus {
+          @apply border-focus;
+        }
+      }
     }
   }
-}
-.govgr-dropdown--disabled {
-  @apply cursor-not-allowed;
-  .govgr-dropdown__button {
-    pointer-events: none; 
-    user-select: none; 
-    opacity: 0.5;
-  }
-} 
-.govgr-dropdown__button {
-  @apply w-fit print:text-base-content;
-  &::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;
-}
-.govgr-btn-group .govgr-btn + .govgr-dropdown__content {
-  @apply mt-4;
-}
-.govgr-dropdown__content {
-  @apply border border-base-400 p-4 bg-base-100 border-t-0
-  max-w-xs w-max min-w-full absolute transition z-1 mr-4 -mt-4;
-  -webkit-box-box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
-  box-shadow: 0 2px 8px rgba(var(--color-base-900-rgb), 0.3), 0 -2px 0 var(--color-base-500);
-  *:last-child {
-    @apply mb-0;
-  }
-  .govgr-field {
-    @apply mb-4;
-  }
-  .govgr-section-break {
-    @apply -mx-4 w-auto;
-  }
-  .govgr-vertical-nav {
-    @apply -mx-4 flex-col; 
-    .govgr-vertical-nav__item {
-      @apply border-b border-base-300 py-2 px-4;
-      &:last-child {
-        @apply border-0;
+  &.govgr-dropdown--dense,
+  .govgr-dense & {
+    .govgr-dropdown__content {
+      .govgr-section-break {
+        @apply -mx-2 w-auto;
       }
-      .govgr-link {
-        @apply text-base-content no-underline
-        hover:underline;
+      > .govgr-nav__list {
+        @apply w-auto -mx-2 flex-col;
       }
     }
   }
 }
-.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-0 !important;
-    &.govgr-filter--closed  {
+    @apply block relative overflow-visible w-full shadow-none z-2 !important;
+    &.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-0 ;
-    &.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-0 ;
-    &.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-0 ;
-    &.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,87 +41,98 @@
   @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__close-btn {
-  @apply flex flex-nowrap md:hidden text-right w-max float-right;
-  .govgr-svg-icon--close {
-    @apply w-5 h-5 float-right;
-    @apply ml-1 !important;
-    fill: var(--color-link);
-  }
-  &:focus {
-    .govgr-svg-icon--close {
-      fill: var(--color-link-active);
-    }
-  }
-  &:hover {
-    .govgr-svg-icon--close {
-      fill: var(--color-link-hover);
-    }
-  }
+.govgr-filter__heading,
+.govgr-filter__selected,
+.govgr-filter__options {
+  @apply p-0;
 }
-  .govgr-filter__heading, .govgr-filter__selected, .govgr-filter__options {
-    @apply p-0;
-  }
 .govgr-filter__heading {
   @apply mb-4;
-  .govgr-filter__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--indicator {
-  @apply md:hidden;
-}
 .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;
- }
+.govgr-results__action-bar {
+  @apply py-2 mb-8 flex flex-wrap justify-start gap-4 items-baseline;
+  > * {
+    @apply mb-0;
+  }
 }
-.govgr-results-heading {
+.govgr-results__heading {
   @apply flex flex-wrap justify-between items-baseline gap-x-2;
 }
-.govgr-results-heading__actions {
+.govgr-results__actions {
   @apply flex flex-wrap gap-4 justify-start min-w-min mb-4;
 }
 .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,20 +2,14 @@
   @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__meta {
+.govgr-footer__info {
   @apply w-full flex flex-1 flex-wrap md:flex-nowrap items-end justify-between box-border;
 }
-.govgr-footer__meta-item {
+.govgr-footer__info-section {
   @apply mx-2 md:mx-4 mb-6 print:mb-4;
 }
-.govgr-footer__meta-item--grow {
+.govgr-footer__info-section--grow {
   @apply flex flex-grow;
 }
 .govgr-footer__content {
@@ -38,23 +32,18 @@
 .govgr-footer__logo, .govgr-footer__government-logo {
   @apply max-w-full h-auto w-52 min-w-52 block;
 }
-.govgr-footer__licence-description {
+.govgr-footer__copyright {
   @apply mt-6 print:mt-4;
-  font-size: var(--footer__licence-description-font-size);
+  font-size: var(--footer__copyright-font-size);
   .govgr-link {
     font-size: inherit;
   }
 }
-.govgr-footer__inline-list {
-  @apply mt-0 mb-4 p-0 print:hidden;
-}
-.govgr-footer__inline-list-item {
-  @apply inline-block mr-4 mb-2;
-}
 .govgr-footer__link {
   @apply underline ;
   &:hover {
     text-decoration-thickness: 2px;
+    color: var(--color-base-800);
   }
   &:focus {
     background-color: var(--color-focus) !important;
@@ -66,20 +55,26 @@
 .govgr-footer__navigation {
     @apply flex flex-wrap print:hidden;
 }
-.govgr-footer__section {
+.govgr-footer__navigation-section {
     @apply inline-block mx-4 mb-8 align-top flex-grow flex-shrink
     print:hidden;
 }
-@media (min-width: 48em) {
-  .govgr-footer__section:first-child:nth-last-child(2) {
+@media (min-width: 768px) {
+  .govgr-footer__navigation-section:first-child:nth-last-child(2) {
     @apply flex-grow-2;
   }
 }
 .govgr-footer__list {
-  @apply m-0 p-0 list-none gap-x-6 
+  @apply m-0 p-0 list-none gap-x-6 text-sm md:text-base
   print:hidden;
 }
-@media (min-width: 48em) {
+.govgr-footer__list--horizontal {
+  @apply mb-4;
+  .govgr-footer__list-item {
+    @apply inline-block mr-4 mb-2;
+  }
+}
+@media (min-width: 768px) {
   .govgr-footer__list--columns-2 {
     column-count: 2;
   }
@@ -87,4 +82,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,
@@ -61,6 +37,17 @@
     box-shadow: inset 0 0 0 2px;
   }
 }
+.govgr-input--dense,.govgr-dense .govgr-input ,
+.govgr-textarea--dense, .govgr-dense .govgr-textarea ,
+.govgr-select--dense, .govgr-dense .govgr-select,
+.govgr-date-input--dense .govgr-input, .govgr-dense .govgr-date-input .govgr-input
+{
+  @apply p-1;
+  &:focus {
+    -webkit-box-shadow: inset 0 0 0 1px;
+    box-shadow: inset 0 0 0 1px;
+  }
+}
 .govgr-label-file {
   @apply mb-0;
 }
@@ -69,41 +56,45 @@
 }
 .govgr-uploaded-file {
   @apply flex flex-wrap gap-x-4 mb-0;
-  .govgr-link {
-    @apply h-fit text-lg;
+}
+.govgr-date-input {
+  @apply flex flex-wrap gap-y-2;
+  &.govgr-date-input--dense, .govgr-dense & {
+    .govgr-date-input__item {
+      @apply mr-2;
+    }
   }
 }
-.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,
@@ -137,9 +128,6 @@
 
 /* error handling  */
 
-.govgr-error-summary {
-  @apply border-5 border-error mb-6 md:mb-8 p-4 md:p-5;
-}
 .govgr-field--error {
   @apply border-l-5 border-error px-0 pl-4;
 }
@@ -179,11 +167,46 @@
 .govgr-radios__input:disabled:checked:after {
   @apply opacity-40;
 }
-
 .govgr-radios__label--disabled,
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
 }
-.govgr-choice-divider {
-  @apply text-lg text-center w-10 mb-4;
+.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;
+  }
 }