@digigov/css 0.38.2 → 1.0.0-rc

package/src/components/card.css

@@ -3,54 +3,28 @@
 }
 .govgr-card--border {
   @apply border-2 border-base-content p-6;
-  &.govgr-card--border-gray {
+  &.govgr-card--border-light {
     @apply border;
   }
 }
-.govgr-card--divider {
-  @apply border-b border-base-300 pb-4 mb-4;
-}
-.govgr-card__heading {
-  word-break: break-word;
-  @apply md:text-2xl text-xl font-bold;
-}
-.govgr-card__text {
-  word-break: break-word;
-  @apply text-base;
-  font-size: var(--card__text-font-size);
-  line-height: var(--card__text-line-height);
-}
-.govgr-card__body {
-  @apply flex flex-col gap-3 md:gap-4 h-full;
-}
-.govgr-card__action {
-  @apply flex flex-wrap items-center gap-y-4 mt-auto;
-  .govgr-link, .govgr-btn {
-    @apply mb-0;
-  }
-}
-@media print {
-  /* When govgr-card__action is empty at print, content at :after limits its height.  */
-  .govgr-card__action:after {
-    content: "";
+.govgr-card--border-top {
+  @apply border-t border-base-300 pt-4;
+  &.govgr-card--border-dark {
+    @apply border-t-3;
   }
 }
-.govgr-grid {
-  .govgr-card {
-    @apply mb-0;
-  }
+.govgr-card--divider {
+  @apply border-b border-base-300 pb-4 mb-4;
 }
 .govgr-card--cta {
   .govgr-card__body {
     @apply pr-8 relative;
-
     &:after {
       content: "";
       transition: all 0.1s ease;
       @apply w-5 h-5 bg-contain bg-no-repeat bg-center absolute right-2 top-2 z-/1;
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' />  </svg>");
     }
-
     &:hover {
       &:after {
         @apply right-1;
@@ -63,7 +37,6 @@
     @apply leading-8 !important;
 
     .govgr-link {
-
       /* Clickable area will be at all the card with 'after' */
       &::after {
         content: "";
@@ -72,15 +45,40 @@
     }
   }
 }
-.govgr-card--border-top {
-  @apply border-t border-base-300 pt-4;
-  &.govgr-card--border-dark {
-    @apply border-t-3; 
-  }
+.govgr-card--border-light {
+  @apply border-base-300;
 }
 .govgr-card--border-dark {
-  @apply border-base-content; 
+  @apply border-base-content;
+}
+.govgr-card__body {
+  @apply flex flex-col gap-3 md:gap-4 h-full;
+}
+.govgr-card__heading {
+  word-break: break-word;
+  @apply md:text-2xl text-xl font-bold;
+}
+.govgr-card__content {
+  word-break: break-word;
+  @apply text-base;
+  font-size: var(--card__text-font-size);
+  line-height: var(--card__text-line-height);
+}
+.govgr-card__action {
+  @apply flex flex-wrap items-center gap-y-4 mt-auto;
+  .govgr-link,
+  .govgr-btn {
+    @apply mb-0;
+  }
+}
+@media print {
+  /* When govgr-card__action is empty at print, content at :after limits its height.  */
+  .govgr-card__action:after {
+    content: "";
+  }
+}
+.govgr-grid {
+  .govgr-card {
+    @apply mb-0;
+  }
 }
-.govgr-card--border-gray {
-  @apply border-base-300; 
-}

package/src/components/checkboxes.css

@@ -1,3 +1,4 @@
+.govgr-checkboxes {}
 .govgr-checkboxes--inline {
     @apply inline-flex flex-wrap;
 }
@@ -47,15 +48,6 @@
     }
   }
 } 
-.govgr-checkboxes__hint {
-  @apply px-2 mb-2;
-}
-.govgr-checkboxes__divider, .govgr-radios__divider {
-  @apply text-lg text-center w-10 mb-4;
-}
-.govgr-checkboxes__conditional, .govgr-radios__conditional {
+.govgr-checkboxes__conditional {
     @apply border-l-4 border-base-500 ml-4 pl-6;
 }
-.govgr-checkboxes__conditional--hidden, .govgr-radios__conditional--hidden {
-    @apply hidden;
-}

package/src/components/chip.css

@@ -0,0 +1,48 @@
+.govgr-chip--heading {
+  @apply font-bold md:text-base text-sm pb-4;
+}
+.govgr-chips--horizontal {
+  @apply md:flex md:flex-row md:flex-wrap;
+}
+.govgr-chips {
+  @apply flex flex-wrap list-none;
+}
+.govgr-chip {
+  @apply list-none;
+  .govgr-chip__content {
+    @apply bg-base-100 text-base-content lg:text-base text-sm border-2 border-base-content 
+    inline-flex items-center px-2 py-1 mr-2 mb-2 rounded shadow;
+    .govgr-svg-icon--close {
+      @apply w-4 h-4 ml-3;
+    }
+    &[role="button"] {
+      &:hover {
+        @apply shadow-lg text-base-content-invert bg-base-900 border-base-900 transition;
+        .govgr-svg-icon--close {
+          fill: var(--color-base-content-invert);
+        }
+      }
+      &:focus {
+        outline: 3px solid var(--color-focus);
+        outline-offset: 0;
+        -webkit-box-shadow: inset 0 0 0 2px;
+        box-shadow: inset 0 0 0 2px;
+      }
+    }
+  }
+}
+.govgr-chip--deletable {
+  .govgr-chip__content {
+    &:hover {
+      @apply shadow-lg transition;
+    }
+    .govgr-svg-icon--close {
+      &:hover {
+        @apply cursor-pointer;
+      }
+    }
+  }
+}
+.govgr-chip__key-value {
+  @apply font-bold mr-2;
+}

package/src/components/copy-to-clipboard.css

@@ -1,25 +1,25 @@
-.govgr-copy-to-clipboard--root {
+.govgr-copy-to-clipboard-root {
   @apply flex;
 }
-.govgr-copy-to-clipboard--container {
+.govgr-copy-to-clipboard-container {
   @apply relative;
-  &>button {
+  & > button {
     @apply m-0;
   }
 }
 .govgr-copy-to-clipboard--banner {
   @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
-  &>* {
+  & > * {
     @apply text-white;
   }
 }
 .govgr-copy-to-clipboard--tooltip {
-  @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max ;
-  &>* {
+  @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max;
+  & > * {
     @apply text-white;
   }
   &::before {
-    content: '';
+    content: "";
     @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
     absolute -top-1;
     transform: rotate(45deg);
@@ -28,19 +28,17 @@
 .govgr-copy-to-clipboard--tooltip-right {
   @apply right-0;
   &::before {
-    content: '';
+    content: "";
     @apply right-4;
   }
 }
 .govgr-copy-to-clipboard--tooltip-left {
   @apply left-0;
   &::before {
-    content: '';
+    content: "";
     @apply left-4;
   }
 }
 .govgr-copy-to-clipboard--hidden {
-  visibility: hidden;
-  width: 0;
-  height: 0;
+  @apply invisible w-0 h-0;
 }

package/src/components/details.css

@@ -5,8 +5,7 @@
   line-height: var(--details-line-height);
 }
 .govgr-details__summary {
-  width: fit-content;
-  @apply mb-0 underline cursor-pointer;
+  @apply mb-0 underline cursor-pointer w-fit;
   &:hover {
     text-decoration-thickness: 2px;
   }
@@ -19,12 +18,12 @@
     @apply outline-none;
   }
 }
-.govgr-details__summary--l {
+.govgr-details__summary--lg {
   @apply font-semibold;
-  font-size: var(--details__summary--l-font-size);
-  line-height: var(--details__summary--l-line-height);
+  font-size: var(--details__summary--lg-font-size);
+  line-height: var(--details__summary--lg-line-height);
 }
-.govgr-details__summary-text {
+.govgr-details__content {
   @apply border-l-2 border-base-500 py-2 px-4 mt-4;
   >*:last-child {
     @apply mb-0;

package/src/components/drawer.css

@@ -27,25 +27,25 @@
 }
 .govgr-drawer__close-icon {
   @apply flex flex-nowrap text-right w-max float-right items-center;
-  .govgr-close-icon {
+  .govgr-svg-icon--close {
     @apply w-5 h-5 z-30 float-right;
     @apply ml-1 !important;
     fill: var(--color-link);
   }
   &:focus {
-    .govgr-close-icon {
+    .govgr-svg-icon--close {
       fill: var(--color-link-active);
     }
   }
   &:hover {
-    .govgr-close-icon {
+    .govgr-svg-icon--close {
       fill: var(--color-link-hover);
     }
   }
 }
 .govgr-drawer__heading {
   @apply p-0 mb-4 flex justify-between align-baseline;
-  .govgr--drawer__close-icon, .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl {
+  .govgr--drawer__close-icon, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
     @apply m-0;
   }
 }

package/src/components/dropdown.css

@@ -2,7 +2,7 @@
   @apply w-fit relative;
   &[open] {
     .govgr-dropdown__button--arrow {
-      .govgr-arrow--down {
+      .govgr-svg-icon--arrow {
         @apply transform -rotate-180;
       }
     }
@@ -22,11 +22,34 @@
     }
   }
   .govgr-dropdown__button--arrow {
-    .govgr-arrow--down {
+    .govgr-svg-icon--arrow {
       @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--right {
+  .govgr-dropdown__content {
+    @apply right-0 mr-0 ml-4 text-right;
+    .govgr-field {
+      @apply text-left;
+    }
+  }
+}
+.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 {
@@ -43,7 +66,7 @@
 .govgr-dropdown__button.govgr-link + .govgr-dropdown__content {
   @apply mt-4 print:text-base-content;
 }
-.govgr-button-group .govgr-btn + .govgr-dropdown__content {
+.govgr-btn-group .govgr-btn + .govgr-dropdown__content {
   @apply mt-4;
 }
 .govgr-dropdown__content {
@@ -74,26 +97,6 @@
     }
   }
 }
-.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 text-right;
-  }
-}
-.govgr-dropdown--disabled {
-  @apply cursor-not-allowed;
-  .govgr-dropdown__button {
-    pointer-events: none; 
-    user-select: none; 
-    opacity: 0.5;
-  }
-} 
 .govgr-header, .govgr-admin-header {
   .govgr-dropdown__button.govgr-link {
     @apply text-lg text-white focus:text-base-content print:text-base-800;
@@ -102,14 +105,3 @@
     @apply print:hidden;
   }
 }
-.govgr-table {
-  .govgr-dropdown__content{
-    @apply mt-0;
-  }
-  .govgr-dropdown__button {
-    @apply mb-0;
-  }
-  .govgr-caret-container{
-    @apply flex flex-col;
-  }
-}

package/src/components/filter.css

@@ -56,20 +56,20 @@
     align-items: flex-end;
   }
 }
-.govgr-filter__close-link {
+.govgr-filter__close-btn {
   @apply flex flex-nowrap md:hidden text-right w-max float-right;
-  .govgr-close-icon {
+  .govgr-svg-icon--close {
     @apply w-5 h-5 float-right;
     @apply ml-1 !important;
     fill: var(--color-link);
   }
   &:focus {
-    .govgr-close-icon {
+    .govgr-svg-icon--close {
       fill: var(--color-link-active);
     }
   }
   &:hover {
-    .govgr-close-icon {
+    .govgr-svg-icon--close {
       fill: var(--color-link-hover);
     }
   }
@@ -79,7 +79,7 @@
   }
 .govgr-filter__heading {
   @apply mb-4;
-  .govgr-filter__close-link, .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl {
+  .govgr-filter__close-btn, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
     @apply m-0;
   }
 }
@@ -91,42 +91,10 @@
 }
 .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-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl {
+  .govgr-link, .govgr-heading-sm, .govgr-heading-md, .govgr-heading-lg, .govgr-heading-xl {
     @apply m-0 h-full;
   }
 }
-.govgr-chip--heading {
-  @apply font-bold md:text-base text-sm pb-4;
-}
-.govgr-chip--horizontal {
-  @apply md:flex md:flex-row md:flex-wrap;
-}
-.govgr-chips {
-  @apply flex flex-wrap list-none;
-}
-.govgr-chip {
-  @apply bg-base-100 text-base-content lg:text-base text-sm border-2 border-base-content 
-  inline-flex items-center px-2 py-1 mr-2 mb-2 rounded shadow;
-  .govgr-close-icon {
-    @apply w-4 h-4 ml-3;
-  }
-  &:hover {
-    @apply shadow-lg text-base-content-invert bg-base-900 border-base-900 transition;
-    .govgr-close-icon {
-      fill: var(--color-base-content-invert);
-    }
-  }
-  &:focus {
-    outline: 3px solid var(--color-focus);
-    outline-offset: 0;
-    -webkit-box-shadow: inset 0 0 0 2px;
-    box-shadow: inset 0 0 0 2px;
-  }
-}
-.govgr-chip__key-value {
-  @apply font-bold mr-2;
-}
-
 .govgr-input__search-btn {
   @apply shadow-none !important;
   @apply 
@@ -134,7 +102,7 @@
   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-search-icon {
+  .govgr-svg-icon--search {
     fill: var(--color-white);
     @apply w-7 h-7;
   }

package/src/components/footer.css

@@ -84,10 +84,7 @@
     column-count: 2;
   }
 }
-.govgr-footer__section-break {
-  @apply m-auto px-4 py-2 border-t border-base-300 mb-5
-  print:hidden;
-}
+.govgr-footer__list-item {}
 .govgr-footer__heading {
   @apply mb-4 pb-4 border-b border-base-300;
 }

package/src/components/form.css

@@ -9,23 +9,21 @@
       :not(.govgr-field) {
         @apply col-span-12;
       }
-    } 
+    }
     :not(.govgr-field) {
       @apply col-span-12;
     }
   }
 }
-.govgr-form--row {
-  @apply flex flex-wrap gap-x-4;
-}
 .govgr-field {
   @apply mb-8 md:mb-10;
   .govgr-fieldset {
-  > .govgr-field:last-child, > .govgr-btn:last-child { 
-    @apply mb-0; 
+    > .govgr-field:last-child,
+    > .govgr-btn:last-child {
+      @apply mb-0;
     }
   }
-  .govgr-fieldset + .govgr-btn { 
+  .govgr-fieldset + .govgr-btn {
     @apply mt-4 md:mt-6;
   }
 }
@@ -42,11 +40,18 @@
   font-size: var(--label-font-size);
   line-height: var(--label-line-height);
   letter-spacing: var(--label-letter-spacing);
-  .govgr-heading-s, .govgr-heading-m, .govgr-heading-l, .govgr-heading-xl, .govgr-hint, .govgr-error-message {
+  .govgr-heading-sm,
+  .govgr-heading-md,
+  .govgr-heading-lg,
+  .govgr-heading-xl,
+  .govgr-hint,
+  .govgr-error-message {
     @apply mb-0;
   }
 }
-.govgr-input, .govgr-select, .govgr-textarea{
+.govgr-input,
+.govgr-select,
+.govgr-textarea {
   @apply md:text-lg text-base w-full p-2 border-2 border-base-content bg-base-100;
   text-indent: 2px;
   &:focus {
@@ -62,17 +67,18 @@
 .govgr-file-input {
   @apply hidden;
 }
-.govgr-uploaded-file{
+.govgr-uploaded-file {
   @apply flex flex-wrap gap-x-4 mb-0;
-  .govgr-link{
+  .govgr-link {
     @apply h-fit text-lg;
   }
 }
-.govgr-date-input, .govgr-single-character-input--container {
+.govgr-date-input,
+.govgr-single-character-input--container {
   @apply flex;
-  .form-group {
-    @apply mr-4;
-  }
+}
+.govgr-select {
+  @apply w-auto max-w-full;
 }
 .govgr-input--width-20 {
   max-width: 41ex;
@@ -96,16 +102,16 @@
   max-width: 3.1ex;
   @apply text-center pl-0 pr-0;
 }
-.govgr-date-input__item, .govgr-otp-input__item {
-  @apply mr-4; 
+.govgr-date-input__item,
+.govgr-otp-input__item {
+  @apply mr-4;
 }
-
 .govgr-\!-width-one-quarter,
 .govgr-\!-width-one-third,
 .govgr-\!-width-one-half,
 .govgr-\!-width-two-thirds,
 .govgr-\!-width-three-quarters,
-.govgr-\!-width-full-width {
+.govgr-\!-width-full {
   width: 100% !important;
 }
 @screen sm {
@@ -124,46 +130,48 @@
   .govgr-\!-width-three-quarters {
     width: 75% !important;
   }
-  .govgr-\!-width-full-width {
+  .govgr-\!-width-full {
     width: 100% !important;
   }
 }
-.govgr-select {
-  @apply w-auto max-w-full;
-}
+
 /* error handling  */
-.govgr-field__error {
+
+.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;
 }
 .govgr-error-message {
-    @apply md:text-lg text-base block mb-4 text-error font-semibold;
-}
-.govgr-error-input {
-    @apply border-error border-3;
-    &:focus {
-      outline: 4px solid var(--color-focus);
-      outline-offset: 0;
-      -webkit-box-shadow: inset 0 0 0 1px var(--color-error);
-      box-shadow: inset 0 0 0 1px var(--color-error);
+  @apply md:text-lg text-base block mb-4 text-error font-semibold;
+}
+.govgr-input--error {
+  @apply border-error border-3;
+  &:focus {
+    outline: 4px solid var(--color-focus);
+    outline-offset: 0;
+    -webkit-box-shadow: inset 0 0 0 1px var(--color-error);
+    box-shadow: inset 0 0 0 1px var(--color-error);
   }
 }
 
-/* disabled inputs */ 
+/* disabled inputs */
 
-.govgr-input:disabled, 
-.govgr-textarea:disabled, 
-.govgr-select:disabled, 
-.govgr-checkboxes__input:disabled, 
-.govgr-checkboxes__input:disabled::before, 
-.govgr-checkboxes__input:disabled:checked:before, 
+.govgr-input:disabled,
+.govgr-textarea:disabled,
+.govgr-select:disabled,
+.govgr-checkboxes__input:disabled,
+.govgr-checkboxes__input:disabled::before,
+.govgr-checkboxes__input:disabled:checked:before,
 .govgr-radios__input:disabled,
 .govgr-radios__input:disabled::before,
 .govgr-radios__input:disabled:checked:before {
   @apply bg-base-300 cursor-not-allowed;
 }
-.govgr-input:disabled, 
-.govgr-textarea:disabled, 
-.govgr-checkboxes__input:disabled::before, 
+.govgr-input:disabled,
+.govgr-textarea:disabled,
+.govgr-checkboxes__input:disabled::before,
 .govgr-radios__input:disabled::before {
   @apply border-base-700 text-base-800;
 }
@@ -176,3 +184,6 @@
 .govgr-checkboxes__label--disabled {
   @apply opacity-40;
 }
+.govgr-choice-divider {
+  @apply text-lg text-center w-10 mb-4;
+}

package/src/components/full-page-background.css

@@ -1,7 +1,4 @@
 .govgr-full-page-background {
   @apply flex justify-center items-center content-center bg-opacity-50 bg-base-1000
   fixed z-10 left-0 top-0 w-full h-full;
-}
-.govgr-loader__icon {
-  @apply h-fit w-fit;
 }