@digigov/css 2.0.0-cbc56209 → 2.0.0-f0a886ce

package/src/components/index.css

@@ -1,46 +1,48 @@
 @import './accordion.css';
+@import './admin-header.css';
+@import './admin-layout.css';
 @import './autocomplete.css';
-@import './button.css';
+@import './back-to-top.css';
 @import './bottom-info.css';
-@import './chip.css';
+@import './breadcrumbs.css';
+@import './button.css';
+@import './card.css';
+@import './code.css';
 @import './form.css';
 @import './checkboxes.css';
+@import './chip.css';
+@import './copy-to-clipboard.css';
+@import './details.css';
+@import './dev-theme.css';
+@import './drawer.css';
 @import './dropdown.css';
-@import './radios.css';
-@import './header.css';
+@import './fillable.css';
+@import './filter.css';
 @import './footer.css';
+@import './full-page-background.css';
+@import './header.css';
+@import './hidden.css';
 @import './layout.css';
-@import './nav.css';
-@import './typography.css';
-@import './back-to-top.css';
-@import './table.css';
-@import './filter.css';
-@import './admin-layout.css';
-@import './admin-header.css';
-@import './breadcrumbs.css';
-@import './card.css';
-@import './details.css';
-@import './notification-banner.css';
+@import './loader.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';
-@import './svg-icons.css';
+@import './nav.css';
 @import './pagination.css';
-@import './loader.css';
-@import './full-page-background.css';
-@import './drawer.css';
-@import './copy-to-clipboard.css';
-@import './fillable.css';
+@import './panel.css';
+@import './phase-banner.css';
+@import './radios.css';
+@import './skeleton.css';
 @import './skiplink.css';
-@import './timeline.css';
-@import './task-list.css';
+@import './stack.css';
 @import './stepnav.css';
-@import './dev-theme.css';
-@import './kitchensink.css';
-@import './hidden.css';
+@import './summary-list.css';
+@import './svg-icons.css';
+@import './table.css';
+@import './tabs.css';
+@import './task-list.css';
+@import './timeline.css';
+@import './typography.css';
+@import './notification-banner.css';
 @import './warning-text.css';
+@import './kitchensink.css';

package/src/components/loader.css

@@ -29,11 +29,11 @@
   stroke-miterlimit: 10;
   stroke-width: 42px;
   &.ds-circular-progress__circle--1 {
-    stroke: var(--color-secondary);
+    stroke: var(--circular-progress__circle--1-stroke);
   }
   &.ds-circular-progress__circle--2 {
     --full-length: 470;
-    stroke: var(--color-primary);
+    stroke: var(--circular-progress__circle--2-stroke);
     stroke-dasharray: var(--full-length);
     stroke-dashoffset: 0;
     animation: dash 4s ease-in-out 0s forwards infinite;

package/src/components/misc.css

@@ -57,3 +57,27 @@ div[class*='ds-grid__col-span'] {
 .ds-image-logo-dark {
   @apply h-10 hidden;
 }
+
+.ds-test-variant {
+  @apply mb-4 mx-2;
+}
+
+.ds-test-variant__title {
+  @apply font-semibold text-3xl break-all -mb-1;
+  color: var(--color-red-300);
+}
+
+.ds-test-variant__content {
+  border-color: var(--color-red-100);
+  border-width: 10px;
+
+  /* For transparency check:
+  padding: 25px;
+  background-image:
+  linear-gradient(45deg, #ccc 25%, transparent 25%), 
+  linear-gradient(135deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(135deg, transparent 75%, #ccc 75%);
+  background-size:25px 25px;
+  background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; */
+}

package/src/components/modal.css

@@ -9,8 +9,11 @@
 
   &.ds-modal--dense,
   &.ds-dense & {
+    .ds-modal__body {
+      @apply px-4 py-0;
+    }
     .ds-modal__container {
-      @apply px-4 py-0 gap-4;
+      @apply gap-4 my-0;
     }
   }
 }
@@ -18,11 +21,17 @@
   @apply w-full max-w-md md:max-w-lg lg:max-w-4xl 
   h-fit md:h-auto overflow-y-auto
   bg-base-100
-  border border-solid border-base-500;
+  border border-solid border-base-500 p-6;
   max-height: 95vh;
 }
 .ds-modal__container {
-  @apply grid p-10 gap-6 px-6 py-2;
+  @apply grid gap-6 -my-4;
+  .ds-modal__action {
+    @apply mb-0;
+  }
+  >.ds-heading-xs, >.ds-heading-sm, >.ds-heading-md, >.ds-heading-lg, >.ds-heading-xl {
+    @apply mb-0;
+  }
 }
 .ds-modal__content {
   @apply text-base lg:text-xl text-lg;

package/src/components/nav.css

@@ -38,10 +38,6 @@
   &.ds-nav--border {
     @apply sm:border-b sm:border-base-400;
   }
-
-  /* .ds-nav__list {
-    @apply px-3;
-  } */
   .ds-nav__list-item-link,
   .ds-nav__list-item-btn {
     @apply md:no-underline !important;
@@ -81,6 +77,13 @@
   @apply font-semibold;
 }
 
+.ds-nav__list-item-badge {
+  @apply inline-flex w-fit items-center justify-center p-1 ml-2
+  bg-error text-white text-xs md:text-xs font-semibold no-underline rounded-3xl
+  relative bottom-1;
+  min-width: 24px;
+  min-height: 24px;
+}
 .ds-nav-menu {
   @apply flex w-full;
   &.ds-nav-menu--hidden {

package/src/components/notification-banner.css

@@ -1,5 +1,6 @@
 .ds-notification-banner {
   @apply border-5 mb-6 md:mb-8 font-normal print:bg-white;
+  border-radius: var(--notification-banner-border-radius);
   &.ds-notification-banner--dense,
   .ds-dense & {
     @apply border-4 mb-4 md:mb-5;

package/src/components/panel.css

@@ -2,6 +2,7 @@
   @apply box-border mb-4 p-8 border-5 border-transparent text-center
   print:p-4 text-white
   print:border-4 print:text-base-content print:bg-white;
+  border-radius: var(--panel-border-radius);
   &.ds-panel--success {
     @apply bg-success print:border-success;
   }

package/src/components/skeleton.css

@@ -0,0 +1,85 @@
+.ds-skeleton {
+  @apply block bg-base-300 h-auto w-full max-w-full rounded-sm;
+
+  /* max-width: 105ch; */
+  &.ds-skeleton--text {
+    /* @apply text-lg; */
+    &::before {
+      content: '\00a0';
+      visibility: hidden;
+    }
+    &.ds-skeleton--font-xs {
+      @apply text-sm md:text-base mb-2 md:mb-4;
+      line-height: 1rem;
+    }
+    &.ds-skeleton--font-sm {
+      @apply text-base md:text-lg mb-3 md:mb-5;
+    }
+    &.ds-skeleton--font-md {
+      @apply text-xl md:text-2xl mb-5 md:mb-6;
+    }
+    &.ds-skeleton--font-lg {
+      @apply text-2xl md:text-3xl mb-6 md:mb-7;
+    }
+    &.ds-skeleton--font-xl {
+      @apply text-3xl md:text-4xl mb-8 md:mb-10;
+    }
+  }
+  &.ds-skeleton--circular {
+    border-radius: 50%;
+  }
+  &.ds-skeleton--rectangular {
+  }
+  &.ds-skeleton--button {
+    @apply mb-8 w-fit min-h-10 md:min-h-12 px-6 py-3
+    border-b-2 border-gray-400
+    flex items-center justify-center;
+    .ds-skeleton__line {
+      @apply block bg-base-400 w-full max-w-full max-h-full visible;
+      &::before {
+        content: '\00a0';
+      }
+      &.ds-skeleton__line--size-default {
+        @apply h-4 w-20;
+      }
+    }
+  }
+
+  /* Skeleton with a child. */
+  &.ds-skeleton--width-fit-content {
+    @apply w-fit;
+  }
+  &.ds-skeleton--animate {
+    /* @apply animate-pulse; */
+    position: relative;
+    overflow: hidden;
+    mask-image: radial-gradient(white, black);
+    &::after {
+      @apply absolute top-0 bottom-0 left-0 right-0;
+      animation: wave 2s linear 0.5s infinite;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 0, 0, 0.05),
+        transparent
+      );
+      content: '';
+      transform: translateX(-100%);
+    }
+  }
+  > * {
+    @apply invisible;
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/summary-list.css

@@ -3,13 +3,27 @@
   sm:table sm:w-full sm:table-fixed;
   font-size: var(--summary-list-font-size);
   &.ds-summary-list--no-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+    }
     .ds-summary-list__key,
     .ds-summary-list__value,
     .ds-summary-list__actions {
       @apply sm:border-0 pb-2;
     }
   }
+  &.ds-summary-list--no-last-border {
+    >.ds-summary-list__row:last-child {
+      @apply border-b-0 pb-0 mb-0;
+      .ds-summary-list__key,
+      .ds-summary-list__value,
+      .ds-summary-list__actions {
+        @apply border-b-0;
+      }
+    }
+  }
 }
+
 .ds-summary-list__row {
   @apply block sm:flex
   pb-4 mb-4 border-b border-solid border-base-300

package/src/components/svg-icons.css

@@ -23,7 +23,7 @@
     fill: var(--color-warning) !important;
   }
   &.ds-svg-icon--error {
-    fill: var(--color-error) !important;
+    fill: var(--color-error-text) !important;
   }
   &.ds-svg-icon--focus {
     fill: var(--color-focus) !important;

package/src/components/table.css

@@ -95,14 +95,14 @@
       @apply block;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
   &.ds-table--stacked-sm {
     @media (min-width: 640px) {
       .ds-table__cell[data-label]::before {
-        content: none;
+        content: none !important;
       }
     }
     .ds-table__header,
@@ -121,14 +121,14 @@
       @apply block sm:table-cell;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
   &.ds-table--stacked-md {
     @media (min-width: 768px) {
       .ds-table__cell[data-label]::before {
-        content: none;
+        content: none !important;
       }
     }
     .ds-table__header,
@@ -147,10 +147,15 @@
       @apply block md:table-cell;
     }
     .ds-table__cell[data-label]::before {
-      @apply block font-semibold;
+      @apply block font-semibold mb-2;
       content: attr(data-label);
     }
   }
+  .ds-table__cell {
+    .ds-body:last-child {
+      @apply mb-0;
+    }
+  }
 }
 .ds-table-sort__icons-container {
   @apply flex flex-col;
@@ -258,9 +263,6 @@
   }
 }
 .ds-table__header {
-  .ds-dropdown__content {
-    @apply py-0;
-  }
   .ds-dropdown__button:not(:focus) {
     @apply no-underline font-bold text-base-content !important;
   }

package/src/components/tabs.css

@@ -4,7 +4,7 @@
   .ds-dense & {
     .ds-tabs__list {
       .ds-tabs__list-item {
-        @apply px-3 py-1;
+        @apply md:px-3 md:py-1;
         &.ds-tabs__list-item-selected {
           @apply md:px-4 md:pb-3 md:pt-2;
         }
@@ -14,69 +14,52 @@
       @apply pb-2 pt-3;
     }
   }
-
-  &.ds-tabs--vertical {
-    .ds-tabs__panel {
-      @apply min-h-full pt-4 pl-6;
-    }
-    .ds-tabs__list {
-      .ds-tabs__list-item {
-        @apply w-full rounded-none mb-1 md:bg-base-200 border-base-200;
-        width: calc(100% - 0.25rem);
-        &.ds-tabs__list-item-selected {
-          @apply md:border-b md:border-r-0 mb-1 mt-0 px-4 py-2;
-
-          /* margin-right: -1px; */
-          width: calc(100% + 1px);
-
-          /* margin-top: 0px; */
-        }
-      }
+}
+.ds-tabs__title {
+  @apply block md:hidden;
+}
+.ds-tabs__list {
+  @apply list-none m-0 p-0 
+  md:flex md:flex-nowrap md:w-full md:items-start;
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ds-tabs__list-item {
+  @apply relative px-4 py-1 md:py-2 m-0 shadow-none cursor-pointer text-link
+  md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2 md:text-base-content
+  print:hidden;
+  word-break: break-word;
+  &.ds-tabs__list-item-selected {
+    @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
+    margin-bottom: -1px;
+    &:hover {
+      text-decoration-thickness: 2px;
     }
   }
-  .ds-tabs__title {
-    @apply block md:hidden lg:hidden;
+}
+.ds-tabs__tab {
+  @apply text-lg no-underline hover:underline;
+  &::before {
+    @apply absolute top-0 left-0 text-base-content;
+    @apply md:content-[''] !important;
+    content: '_';
   }
-  .ds-tabs__list {
-    @apply list-none m-0 p-0;
-    &::after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-    .ds-tabs__list-item {
-      @apply relative px-4 py-2 m-0 shadow-none cursor-pointer;
-      @apply md:float-left md:border md:border-base-300 md:bg-base-300 md:rounded-t-sm md:mr-2;
-      @apply print:hidden;
-      &.ds-tabs__list-item-selected {
-        @apply no-underline md:border-base-400 md:border bg-base-100 md:border-b-0 md:px-5 md:py-4 md:-mt-1;
-        margin-bottom: -1px;
-        &:hover {
-          text-decoration-thickness: 2px;
-        }
-      }
-    }
-    .ds-tabs__tab {
-      @apply text-lg no-underline hover:underline focus:underline;
-      text-underline-offset: 0.1em;
-      &::after {
-        @apply absolute top-0 right-0 bottom-0 left-0;
-        content: '';
-      }
-      &:focus {
-        background-color: var(--color-focus);
-        outline: 3px solid transparent;
-        box-shadow: inset 0 0 0 3px var(--color-focus);
-        outline-offset: 0;
-        text-decoration-thickness: 0.2rem;
-      }
-    }
+  &:focus {
+    @apply bg-focus underline text-link-active;
+    outline: 3px solid transparent;
+    box-shadow: inset 0 0 0 3px var(--color-focus);
+    outline-offset: 0;
+    text-decoration-thickness: 0.2rem;
   }
-  .ds-tabs__panel {
-    @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
-    print:block print:border-0 print:py-3;
-    &.ds-tabs__panel--visible {
-      @apply block;
-    }
+}
+.ds-tabs__panel {
+  @apply bg-base-100 md:hidden block md:px-4 py-4 pt-8 md:border md:border-base-400 mb-0
+  print:block print:border-0 print:py-3;
+  border-radius: var(--tabs__panel-border-radius);
+  &.ds-tabs__panel--visible {
+    @apply block;
   }
 }

package/src/components/typography.css

@@ -309,6 +309,7 @@
 }
 
 /* overrides */
+
 .ds-hint {
   .ds-svg-icon {
     fill: var(--hint-color);
@@ -340,19 +341,8 @@ button.ds-link {
     fill: var(--color-base-content);
   }
 }
-.ds-code-block__container {
-  @apply p-4 bg-base-200 border border-base-300 w-full;
-  & > pre {
-    @apply bg-transparent p-0 m-0;
-    font: inherit;
-    color: inherit;
-  }
-}
 .ds-table__cell {
   & > code {
     @apply border-none;
   }
 }
-.ds-code-block__content {
-  @apply text-sm sm:text-base;
-}