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

package/src/components/button.css

@@ -15,23 +15,15 @@
   &:focus-within {
     @apply outline-none;
   }
-  .govgr-svg-icon {
-    @apply h-4 w-4 inline transition-all;
-  }
-}
-.govgr-background-dark,
-.govgr-masthead--primary {
-  .govgr-btn {
-    @apply border-white hover:border-white border-2 shadow-none;
-  }
-  .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-btn--dense, .govgr-dense & {
+    --btn-padding: 0.375rem 0.75rem;
+    @apply min-h-8;
+    &:focus {
+      -webkit-box-shadow: 0 0 0 2px var(--color-white),
+        0 0 0 5px var(--color-base-content), 0 0 0 8px var(--color-focus);
+      box-shadow: 0 0 0 2px var(--color-white),
+        0 0 0 5px var(--color-base-content), 0 0 0 8px var(--color-focus);
+    }
   }
 }
 .govgr-btn-primary {
@@ -52,14 +44,6 @@
 .govgr-btn-cta {
   @apply py-4 print:pr-2;
   font-size: var(--btn-cta-font-size);
-  .govgr-svg-icon--arrow {
-    @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
-  }
-  &:hover {
-    .govgr-svg-icon--arrow {
-      @apply ml-4 mr-0;
-    }
-  }
 }
 .govgr-btn-secondary {
   -webkit-box-shadow: 0 2px 0 var(--color-base-500);
@@ -77,7 +61,7 @@
   }
 }
 .govgr-btn-warning {
-  webkit-box-shadow: 0 2px 0 var(--color-base-content);
+  -webkit-box-shadow: 0 2px 0 var(--color-base-content);
   box-shadow: 0 2px 0 var(--color-base-content);
   @apply hover:no-underline
     print:border-2 print:border-error print:shadow-none;
@@ -93,10 +77,85 @@
   }
 }
 .govgr-btn--disabled {
-  @apply opacity-50 hover:bg-opacity-50 cursor-not-allowed
+  @apply opacity-50 hover:bg-opacity-50
   print:text-base-400 print:border-opacity-50;
+  @apply cursor-not-allowed !important;
 }
 .govgr-svg-icon--caret {
   fill: var(--color-base-content);
   @apply w-4 h-4 inline-block;
 }
+.govgr-close-btn {
+  @apply flex flex-nowrap text-right w-max float-right items-center;
+}
+
+/* overrides */
+
+.govgr-btn {
+  .govgr-svg-icon {
+    @apply h-4 w-4 inline transition-all;
+  }
+}
+.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-cta {
+  .govgr-svg-icon--arrow {
+    @apply w-5 h-5 inline-block ml-2 mr-2 transition-all;
+  }
+  &:hover {
+    .govgr-svg-icon--arrow {
+      @apply ml-4 mr-0;
+    }
+  }
+}
+.govgr-btn-secondary {
+  .govgr-svg-icon {
+    fill: var(--color-base-content);
+  }
+  .govgr-svg-icon--more-vert {
+    @apply h-6 w-6;
+  }
+}
+.govgr-close-btn {
+  .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);
+    }
+  }
+}
+@media print {
+  .govgr-btn {
+    .govgr-circular-progress--secondary {
+      .govgr-circular-progress__circle--1,
+      .govgr-circular-progress__circle--2 {
+        stroke: var(--color-base-content);
+      }
+    }
+  }
+}
+@media print {
+  .govgr-btn-primary,
+  .govgr-btn-warning,
+  .govgr-btn-secondary {
+    .govgr-svg-icon {
+      fill: var(--color-base-content);
+    }
+  }
+}

package/src/components/card.css

@@ -1,17 +1,29 @@
 .govgr-card {
   @apply mb-7 text-base-content;
+  &.govgr-card--dense, .gov-dense & {
+    @apply mb-5;
+    .govgr-card__body {
+      @apply gap-2 md:gap-3;
+    }
+  }
 }
 .govgr-card--border {
   @apply border-2 border-base-content p-6;
   &.govgr-card--border-light {
     @apply border;
   }
+  &.govgr-card--dense, .govgr-dense & {
+    @apply p-4 pt-3;
+  }
 }
 .govgr-card--border-top {
   @apply border-t border-base-300 pt-4;
   &.govgr-card--border-dark {
     @apply border-t-3;
   }
+  &.govgr-card--dense, .govgr-dense & {
+    @apply p-3;
+  }
 }
 .govgr-card--divider {
   @apply border-b border-base-300 pb-4 mb-4;
@@ -22,7 +34,7 @@
     &: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;
+      @apply w-5 h-5 bg-contain bg-no-repeat bg-center absolute right-2 top-2;
       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 {
@@ -35,14 +47,6 @@
   .govgr-card__heading {
     @apply md:text-xl text-lg tracking-wide;
     @apply leading-8 !important;
-
-    .govgr-link {
-      /* Clickable area will be at all the card with 'after' */
-      &::after {
-        content: "";
-        @apply block absolute top-0 bottom-0 right-0 left-0;
-      }
-    }
   }
 }
 .govgr-card--border-light {
@@ -66,10 +70,6 @@
 }
 .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.  */
@@ -77,8 +77,23 @@
     content: "";
   }
 }
-.govgr-grid {
-  .govgr-card {
+
+/* overrides */
+
+.govgr-card--cta {
+  .govgr-card__heading {
+    .govgr-link {
+      /* Clickable area will be at all the card with 'after' */
+      &::after {
+        content: "";
+        @apply block absolute top-0 bottom-0 right-0 left-0;
+      }
+    }
+  }
+}
+.govgr-card__action {
+  .govgr-link,
+  .govgr-btn {
     @apply mb-0;
   }
 }

package/src/components/checkboxes.css

@@ -1,13 +1,43 @@
-.govgr-checkboxes {}
-.govgr-checkboxes--inline {
-    @apply inline-flex flex-wrap;
+.govgr-checkboxes {
+  &.govgr-checkboxes--dense,
+  .govgr-dense & {
+    .govgr-checkboxes__item {
+      @apply mb-2 pl-10 min-h-8;
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+    .govgr-checkboxes__input {
+      @apply w-8 h-8 left-0.5 md:top-0.5;
+      &:before {
+        @apply w-8 h-8;
+      }
+      &:after {
+        top: 10px;
+        left: 7px;
+        width: 19px;
+        height: 10px;
+        @apply border-b-4 border-l-4;
+      }
+      &:focus {
+        &:before {
+          @apply border-3;
+        }
+      }
+    }
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
+}
+.govgr-checkboxes--horizontal {
+  @apply inline-flex flex-wrap items-baseline gap-4 md:gap-6;
 }
 .govgr-checkboxes__item {
-    @apply block relative mb-4 pl-12; 
-    min-height: 40px;
-    &:last-child {
-      @apply mb-0;
-    }
+  @apply block relative mb-4 pl-12 min-h-10;
+  &:last-child {
+    @apply mb-0;
+  }
 }
 .govgr-checkboxes__label {
   @apply inline-block py-1 px-2 cursor-pointer;
@@ -47,7 +77,23 @@
       @apply border-4;
     }
   }
-} 
+}
 .govgr-checkboxes__conditional {
-    @apply border-l-4 border-base-500 ml-4 pl-6;
+  @apply border-l-4 border-base-500 ml-4 pl-6;
+}
+
+/* overrides */
+
+.govgr-checkboxes--horizontal {
+  .govgr-choice-divider-text {
+    @apply min-w-max mx-2;
+  }
+}
+.govgr-checkboxes {
+  &.govgr-checkboxes--dense,
+  .govgr-dense & {
+    .govgr-field {
+      @apply mb-4 md:mb-6;
+    }
+  }
 }

package/src/components/chip.css

@@ -1,26 +1,20 @@
-.govgr-chip--heading {
-  @apply font-bold md:text-base text-sm pb-4;
+.govgr-chips {
+  @apply flex flex-wrap list-none gap-2;
+  .govgr-chip:last-child .govgr-chip__content {
+    @apply mr-0;
+  }
 }
 .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;
-    }
+    inline-flex items-center px-2 py-1 rounded shadow;
     &[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);
@@ -30,12 +24,41 @@
       }
     }
   }
+  &:last-child {
+    .govgr-chip__content {
+      @apply mr-0;
+    }
+  }
 }
 .govgr-chip--deletable {
   .govgr-chip__content {
     &:hover {
       @apply shadow-lg transition;
     }
+  }
+}
+.govgr-chip__key-value {
+  @apply font-bold mr-2;
+}
+
+/* overrides */
+
+.govgr-chip {
+  .govgr-chip__content {
+    .govgr-svg-icon--close {
+      @apply w-4 h-4 ml-3;
+    }
+    &[role="button"] {
+      &:hover {
+        .govgr-svg-icon--close {
+          fill: var(--color-base-content-invert);
+        }
+      }
+    }
+  }
+}
+.govgr-chip--deletable {
+  .govgr-chip__content {
     .govgr-svg-icon--close {
       &:hover {
         @apply cursor-pointer;
@@ -43,6 +66,3 @@
     }
   }
 }
-.govgr-chip__key-value {
-  @apply font-bold mr-2;
-}

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

@@ -1,44 +1,66 @@
-.govgr-copy-to-clipboard-root {
-  @apply flex;
+.govgr-copy-to-clipboard {
+  @apply flex w-fit;
 }
-.govgr-copy-to-clipboard-container {
+.govgr-copy-to-clipboard__tooltip {
   @apply relative;
-  & > button {
-    @apply m-0;
+  .govgr-copy-to-clipboard__message {
+    @apply bg-success py-4 px-6 absolute mt-4 text-center z-50 w-fit md:w-max;
+    &::before {
+      content: "";
+      @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
+      absolute -top-1;
+      transform: rotate(45deg);
+    }
   }
-}
-.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--dense, .govgr-dense & {
+    .govgr-copy-to-clipboard__message {
+      @apply py-2 px-4;
+    }
+    &::before {
+      @apply w-2 h-2;
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip {
-  @apply bg-success p-4 absolute mt-4 text-center z-50 w-fit md:w-max;
-  & > * {
-    @apply text-white;
-  }
-  &::before {
-    content: "";
-    @apply w-4 h-4 border-t-8 border-l-8 border-success transform rotate-45
-    absolute -top-1;
-    transform: rotate(45deg);
+.govgr-copy-to-clipboard__tooltip--right {
+  .govgr-copy-to-clipboard__message {
+    @apply right-0;
+    &::before {
+      content: "";
+      @apply right-4;
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip-right {
-  @apply right-0;
-  &::before {
-    content: "";
-    @apply right-4;
+.govgr-copy-to-clipboard__tooltip--left {
+  .govgr-copy-to-clipboard__message {
+    @apply left-0;
+    &::before {
+      content: "";
+      @apply left-4;
+    }
   }
 }
-.govgr-copy-to-clipboard--tooltip-left {
-  @apply left-0;
-  &::before {
-    content: "";
-    @apply left-4;
+.govgr-copy-to-clipboard__banner {
+  .govgr-copy-to-clipboard__message {
+    @apply bg-success bg-opacity-95 p-2 w-full fixed top-0 right-0 text-center;
   }
 }
+
 .govgr-copy-to-clipboard--hidden {
   @apply invisible w-0 h-0;
 }
+
+/* overrides */
+
+.govgr-copy-to-clipboard__tooltip {
+  & > .govgr-btn {
+    @apply m-0;
+  }
+}
+.govgr-copy-to-clipboard__tooltip,
+.govgr-copy-to-clipboard__banner {
+  .govgr-copy-to-clipboard__message {
+    & > .govgr-body {
+      @apply text-white;
+    }
+  }
+}

package/src/components/drawer.css

@@ -1,51 +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__close-container {
-  @apply flex-grow;
-}
-.govgr-drawer__close-icon {
-  @apply flex flex-nowrap text-right w-max float-right items-center;
-  .govgr-svg-icon--close {
-    @apply w-5 h-5 z-30 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-drawer__heading {
+  @apply p-0 mb-4 flex justify-between align-baseline;
+  .govgr--drawer__close-icon {
+    @apply m-0;
   }
 }
+
+/* overrides */
+
 .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-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 {
@@ -36,10 +10,7 @@
 }
 .govgr-dropdown--right {
   .govgr-dropdown__content {
-    @apply right-0 mr-0 ml-4 text-right;
-    .govgr-field {
-      @apply text-left;
-    }
+    @apply right-0 mr-0 ml-4;
   }
 }
 .govgr-dropdown--disabled {
@@ -55,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;
@@ -71,37 +35,73 @@
 }
 .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;
+  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 {
+        @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;
   }
   .govgr-section-break {
     @apply -mx-4 w-auto;
   }
-  .govgr-vertical-nav {
-    @apply -mx-4 flex-col; 
-    .govgr-vertical-nav__item {
+  >.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;
       }
-      .govgr-link {
-        @apply text-base-content no-underline
-        hover:underline;
+      &:focus {
+        @apply border-focus;
       }
     }
   }
 }
-.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;
-  }
-}