@digigov/css 2.0.0-rc.3 → 2.0.0-rc.31

package/src/components/svg-icons.native.css

@@ -0,0 +1,54 @@
+@import './svg-icons.common.css';
+
+.ds-svg-icon {
+  @apply util-svg-icon;
+  flex-flow: 'row' 'wrap';
+}
+.ds-svg-icon--base-content {
+  @apply util-svg-icon--base-content;
+}
+.ds-svg-icon--dark {
+  @apply util-svg-icon--dark;
+}
+.ds-svg-icon--white {
+  @apply util-svg-icon--white;
+}
+.ds-svg-icon--gray {
+  @apply util-svg-icon--gray;
+}
+.ds-svg-icon--primary {
+  @apply util-svg-icon--primary;
+}
+.ds-svg-icon--success {
+  @apply util-svg-icon--success;
+}
+.ds-svg-icon--warning {
+  @apply util-svg-icon--warning;
+}
+.ds-svg-icon--error {
+  @apply util-svg-icon--error;
+}
+.ds-svg-icon--focus {
+  @apply util-svg-icon--focus;
+}
+.ds-svg-icon--link {
+  @apply util-svg-icon--link;
+}
+.ds-svg-icon--info {
+  @apply util-svg-icon--info;
+}
+.ds-svg-icon--xs {
+  @apply util-svg-icon--xs;
+}
+.ds-svg-icon--sm {
+  @apply util-svg-icon--sm;
+}
+.ds-svg-icon--md {
+  @apply util-svg-icon--md;
+}
+.ds-svg-icon--lg {
+  @apply util-svg-icon--lg;
+}
+.ds-svg-icon--xl {
+  @apply util-svg-icon--xl;
+}

package/src/components/table.css

@@ -1,199 +1,215 @@
 .ds-table__caption {
   @apply table-caption text-left font-bold;
-}
-.ds-table__caption--sm {
-  @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
-}
-.ds-table__caption--md {
-  @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
-}
-.ds-table__caption--lg {
-  @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
-}
-.ds-table__caption--xl {
-  @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
+  &.ds-table__caption--sm {
+    @apply md:text-2xl text-lg font-bold mx-0 md:mb-6 mb-4 antialiased;
+  }
+  &.ds-table__caption--md {
+    @apply md:text-3xl text-xl font-bold mx-0 md:mb-8 mb-6 antialiased;
+  }
+  &.ds-table__caption--lg {
+    @apply md:text-4xl text-2xl font-bold mx-0 md:mb-9 mb-7 antialiased;
+  }
+  &.ds-table__caption--xl {
+    @apply md:text-5xl md:leading-tight text-3xl leading-tight font-bold mx-0 md:mb-10 mb-8 max-w-2xl antialiased;
+  }
 }
 .ds-table-container {
   @apply w-full overflow-x-auto md:mb-10 mb-6;
+  &.ds-table-container--border {
+    @apply border border-base-300 p-2;
+  }
   .ds-table {
     @apply mb-0;
   }
 }
-.ds-table-container--border {
-  @apply border border-base-300 p-2;
-}
 .ds-table {
   @apply w-full border-collapse table;
   @apply md:mb-10 mb-6 text-base-content md:text-lg text-base font-normal antialiased;
   border-spacing: 0;
-}
-.ds-table-sort__icons-container {
-  @apply flex flex-col;
-}
-@supports (-moz-appearance: none) {
-  .ds-table {
-    border-collapse: unset;
-  }
-}
-.ds-table--vertical-lines {
-  .ds-table__cell,
-  .ds-table__header {
-    @apply border-l border-r border-solid border-base-300 px-4;
-  }
-  .ds-table__head {
-    @apply border-t border-base-300 text-base-content !important;
-  }
-}
-@supports (-moz-appearance: none) {
-  .ds-table--vertical-lines {
+  &.ds-table--vertical-lines {
+    .ds-table__cell.ds-table__cell--border,
     .ds-table__header {
-      @apply border-t;
-      @apply border-r-0 !important;
-      &:last-child {
-        @apply border-r border-solid border-base-300 px-4 !important;
-      }
+      @apply border-l border-r border-solid border-base-300 px-4;
+    }
+    .ds-table__head {
+      @apply border-t border-base-300 text-base-content !important;
     }
+  }
+  &.ds-table--dark,
+  &.ds-table--zebra {
+    .ds-table__header,
     .ds-table__cell {
-      @apply border-r-0 !important;
-      &:last-child {
-        @apply border-r border-solid border-base-300 px-4 !important;
+      @apply px-4 !important;
+    }
+  }
+  &.ds-table--vertical-lines.ds-table--light {
+    .ds-table__body {
+      .ds-table__header {
+        @apply border-l border-solid border-base-300 !important;
       }
     }
   }
-}
-.ds-table__row {
-  @apply bg-base-100;
-}
-.ds-table__row--highlight {
-  @apply border-l-4 border-warning;
-  .ds-table__cell:first-child {
-    @apply pl-2;
+  &.ds-table--vertical-lines.ds-table--dark {
+    .ds-table__header {
+      @apply border-0;
+      @apply print:border;
+    }
   }
-}
-.ds-table--dark,
-.ds-table--zebra {
-  .ds-table__header,
-  .ds-table__cell {
-    @apply px-4 !important;
+  &.ds-table--dark {
+    .ds-table__header {
+      @apply border-0 bg-primary text-white;
+      @apply print:border-b print:bg-white print:text-base-content;
+    }
   }
-}
-.ds-table--vertical-lines.ds-table--light {
-  .ds-table__body .ds-table__header {
-    @apply border-l border-solid border-base-300 !important;
+  &.ds-table--zebra {
+    .ds-table__body {
+      .ds-table__row:nth-child(even) {
+        @apply bg-base-200 print:bg-white;
+      }
+    }
   }
-}
-.ds-table--vertical-lines.ds-table--dark {
-  .ds-table__header {
-    @apply border-0;
-    @apply print:border;
+  &.ds-table--dense {
+    &.ds-table {
+      .ds-table__row,
+      .ds-table__header,
+      .ds-table__cell {
+        @apply text-sm py-2;
+      }
+    }
   }
-}
-.ds-table--dark {
-  .ds-table__header {
-    @apply border-0 bg-primary text-white;
-    @apply print:border-b print:bg-white print:text-base-content;
+  &.ds-table--stacked-always {
+    .ds-table__header,
+    .ds-table__cell.ds-table__cell--border {
+      &:last-child {
+        @apply border-b-2 border-b-base-content;
+      }
+    }
+    .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply text-left;
+    }
+    .ds-table__head {
+      .ds-table__header {
+        @apply hidden;
+      }
+    }
+    .ds-table__body .ds-table__header,
+    .ds-table__cell {
+      @apply block;
+    }
+    .ds-table__cell[data-label]::before {
+      @apply block font-semibold mb-2;
+      content: attr(data-label);
+    }
   }
-}
-.ds-table--zebra {
-  .ds-table__body {
-    .ds-table__row:nth-child(even) {
-      @apply bg-base-200 print:bg-white;
+  &.ds-table--stacked-sm {
+    @media (min-width: 640px) {
+      .ds-table__cell[data-label]::before {
+        content: none !important;
+      }
+    }
+    .ds-table__header,
+    .ds-table__cell.ds-table__cell--border {
+      &:last-child {
+        @apply xsOnly:border-b-2 xsOnly:border-b-base-content;
+      }
+    }
+    .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply xsOnly:text-left;
+    }
+    .ds-table__head {
+      .ds-table__header {
+        @apply hidden sm:table-cell;
+      }
+    }
+    .ds-table__body .ds-table__header,
+    .ds-table__cell {
+      @apply block sm:table-cell;
+    }
+    .ds-table__cell[data-label]::before {
+      @apply block font-semibold mb-2;
+      content: attr(data-label);
     }
   }
-}
-.ds-table--dense {
-  &.ds-table {
-    .ds-table__row,
+  &.ds-table--stacked-md {
+    @media (min-width: 768px) {
+      .ds-table__cell[data-label]::before {
+        content: none !important;
+      }
+    }
     .ds-table__header,
+    .ds-table__cell.ds-table__cell--border {
+      &:last-child {
+        @apply xsOnly:border-b-2 smOnly:border-b-2 
+        xsOnly:border-b-base-content smOnly:border-b-base-content;
+      }
+    }
+    .ds-table__header--numeric,
+    .ds-table__cell--numeric {
+      @apply smOnly:text-left mdOnly:text-left;
+    }
+    .ds-table__head {
+      .ds-table__header {
+        @apply hidden md:table-cell;
+      }
+    }
+    .ds-table__body .ds-table__header,
     .ds-table__cell {
-      @apply text-sm py-2;
+      @apply block md:table-cell;
+    }
+    .ds-table__cell[data-label]::before {
+      @apply block font-semibold mb-2;
+      content: attr(data-label);
     }
   }
-}
-.ds-table--stacked-always {
-  .ds-table__header,
-  .ds-table__cell {
-    &:last-child {
-      @apply border-b-2;
-      border-bottom-color: rgb(var(--color-base-content-rgb));
+  &.ds-table--align-top {
+    .ds-table__cell {
+      @apply align-top;
     }
   }
-  .ds-table__head .ds-table__header {
-    @apply hidden;
+  &.ds-table--align-bottom {
+    .ds-table__cell {
+      @apply align-bottom;
+    }
   }
-  .ds-table__body .ds-table__header,
   .ds-table__cell {
-    @apply block;
+    .ds-body:last-child {
+      @apply mb-0;
+    }
   }
-  .ds-table__cell[data-label]:before {
-    content: attr(data-label);
-    @apply block font-semibold;
+}
+.ds-table-sort__icons-container {
+  @apply flex flex-col;
+}
+@supports (-moz-appearance: none) {
+  .ds-table {
+    border-collapse: unset;
   }
 }
-.ds-table--stacked-sm {
-  .ds-table__header,
-  .ds-table__cell {
-    &:last-child {
-      @apply border-b-2 sm:border-b;
-      border-bottom-color: rgb(var(--color-base-content-rgb));
-      
+@supports (-moz-appearance: none) {
+  .ds-table--vertical-lines {
+    .ds-table__header {
+      @apply border-t;
+      @apply border-r-0 !important;
+      &:last-child {
+        @apply border-r border-solid border-base-300 px-4 !important;
+      }
     }
-  }
-  @media (min-width: 640px) {
-      .ds-table__header,
-      .ds-table__cell {
-        &:last-child {
-          border-bottom-color: rgb(var(--color-base-300-rgb));
-        }
+    .ds-table__cell.ds-table__cell--border {
+      @apply border-r-0 !important;
+      &:last-child {
+        @apply border-r border-solid border-base-300 px-4 !important;
       }
-  }
-  .ds-table__head .ds-table__header {
-    @apply hidden sm:table-cell;
-  }
-  .ds-table__body .ds-table__header,
-  .ds-table__cell {
-    @apply block sm:table-cell;
-  }
-  .ds-table__cell[data-label]:before {
-    content: attr(data-label);
-    @apply block font-semibold;
-  }
-  @media (min-width: 640px) {
-    .ds-table__cell[data-label]:before {
-      content: none;
     }
   }
 }
-.ds-table--stacked-md {
-  .ds-table__header,
-  .ds-table__cell {
-    &:last-child {
-      @apply border-b-2 md:border-b;
-      border-bottom-color: rgb(var(--color-base-content-rgb));
-    }
-  }
-  @media (min-width: 768px) {
-      .ds-table__header,
-      .ds-table__cell {
-        &:last-child {
-          border-bottom-color: rgb(var(--color-base-300-rgb));
-        }
-      }
-  }
-  .ds-table__head .ds-table__header {
-    @apply hidden md:table-cell;
-  }
-  .ds-table__body .ds-table__header,
-  .ds-table__cell {
-    @apply block md:table-cell;
-  }
-  .ds-table__cell[data-label]:before {
-    content: attr(data-label);
-    @apply block font-semibold;
-  }
-  @media (min-width: 768px) {
-    .ds-table__cell[data-label]:before {
-      content: none;
+.ds-table__row {
+  @apply bg-base-100;
+  &.ds-table__row--highlight {
+    @apply border-l-4 border-warning;
+    .ds-table__cell:first-child {
+      @apply pl-2;
     }
   }
 }
@@ -207,26 +223,34 @@
 }
 .ds-table__body {
   @apply relative;
-}
-.ds-table__body--vertical-top {
-  .ds-table__cell {
-    @apply align-top;
+  &.ds-table__body--vertical-top {
+    .ds-table__cell {
+      @apply align-top;
+    }
   }
-}
-.ds-table__body--vertical-bottom {
-  .ds-table__cell {
-    @apply align-bottom;
+  &.ds-table__body--vertical-bottom {
+    .ds-table__cell {
+      @apply align-bottom;
+    }
   }
 }
-.ds-table__row {
-  @apply bg-base-100;
+.ds-table__header {
+  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
+  &:last-child {
+    @apply pr-0;
+  }
 }
-.ds-table__header,
 .ds-table__cell {
-  @apply pr-5 py-2.5 pl-0 border-b border-solid border-base-300 text-left align-middle;
+  @apply pr-5 py-2.5 pl-0 text-left align-middle;
   &:last-child {
     @apply pr-0;
   }
+  &.ds-table__cell--border {
+    @apply border-b border-solid border-base-300;
+  }
+  &.ds-table__cell--break-all {
+    @apply break-all;
+  }
 }
 .ds-table__header--numeric,
 .ds-table__cell--numeric {
@@ -240,13 +264,6 @@
 .ds-table__cell--no-data {
   @apply border-b-0 pt-2.5;
 }
-.ds-table--dark,
-.ds-table--zebra {
-  .ds-table__header,
-  .ds-table__cell {
-    @apply px-4 !important;
-  }
-}
 .ds-table__loading {
   @apply h-full w-full absolute right-0 left-0 flex items-center justify-center
    bg-white bg-opacity-50 print:hidden;
@@ -256,7 +273,6 @@
 ) {
   .ds-table__loading {
     @apply bg-opacity-30;
-    -webkit-backdrop-filter: blur(0.6px);
     backdrop-filter: blur(0.6px);
   }
 }
@@ -280,9 +296,6 @@
   }
 }
 .ds-table__header {
-  .ds-dropdown__content {
-    @apply py-0;
-  }
   .ds-dropdown__button:not(:focus) {
     @apply no-underline font-bold text-base-content !important;
   }
@@ -290,7 +303,8 @@
     @apply underline !important;
     text-decoration-thickness: 2px !important;
   }
-  .ds-nav__list-item-link, .ds-nav__list-item-btn {
+  .ds-nav__list-item-link,
+  .ds-nav__list-item-btn {
     @apply flex no-underline;
   }
 }

package/src/components/tabs.css

@@ -1,81 +1,65 @@
 .ds-tabs {
   scroll-behavior: smooth;
-  .ds-tabs__title {
-    @apply block md:hidden lg:hidden;
-  }
-  .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 {
-        content: "";
-        @apply absolute top-0 right-0 bottom-0 left-0;
-      }
-      &:focus {
-        background-color: var(--color-focus);
-        outline: 3px solid transparent;
-        -webkit-box-shadow: inset 0 0 0 3px var(--color-focus);
-        box-shadow: inset 0 0 0 3px var(--color-focus);
-        outline-offset: 0px;
-        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--dense, .ds-dense & {
+  &.ds-tabs--dense,
+  .ds-dense & {
     .ds-tabs__list {
-        .ds-tabs__list-item {
-        @apply px-3 py-1;
+      .ds-tabs__list-item {
+        @apply md:px-3 md:py-1;
         &.ds-tabs__list-item-selected {
-            @apply md:px-4 md:pb-3 md:pt-2;
-        }
+          @apply md:px-4 md:pb-3 md:pt-2;
         }
+      }
     }
     .ds-tabs__panel {
-        @apply pb-2 pt-3;
+      @apply pb-2 pt-3;
     }
   }
 }
-
-.ds-tabs--vertical {
-  .ds-tabs__panel {
-    @apply min-h-full pt-4 pl-6;
+.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 {
-    .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__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__tab {
+  @apply text-lg no-underline hover:underline;
+  &::before {
+    @apply absolute top-0 left-0 text-base-content;
+    @apply md:content-[''] !important;
+    content: '_';
+  }
+  &: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;
+  border-radius: var(--tabs__panel-border-radius);
+  &.ds-tabs__panel--visible {
+    @apply block;
+  }
 }

package/src/components/task-list.css

@@ -6,36 +6,36 @@
 }
 .ds-task-list__heading {
   @apply md:text-3xl text-2xl font-bold mx-0 md:mb-4 mb-2;
-}
-.ds-task-list__heading--md {
-  @apply md:text-2xl text-xl md:mb-4 mb-2;
-}
-.ds-task-list__heading--sm {
-  @apply md:text-lg text-base md:mb-3 mb-1;
+  &.ds-task-list__heading--md {
+    @apply md:text-2xl text-xl md:mb-4 mb-2;
+  }
+  &.ds-task-list__heading--sm {
+    @apply md:text-lg text-base md:mb-3 mb-1;
+  }
 }
 .ds-task-list__content {
   @apply mb-4;
 }
 .ds-task-list__content__tag {
   @apply px-2 py-1 mr-2 inline-block font-sans text-sm uppercase tracking-widest print:border-2 print:bg-white print:mr-4;
-}
-.ds-task-list__content__tag--info {
-  @apply bg-info text-white print:border-info-hover print:text-info-hover;
-}
-.ds-task-list__content__tag--primary {
-  @apply bg-secondary text-base-content print:border-info print:text-info;
-}
-.ds-task-list__content__tag--secondary {
-  @apply bg-base-300 print:border-base-800 print:text-base-800;
+  &.ds-task-list__content__tag--info {
+    @apply bg-info text-white print:border-info-hover print:text-info-hover;
+  }
+  &.ds-task-list__content__tag--primary {
+    @apply bg-secondary text-base-content print:border-info print:text-info;
+  }
+  &.ds-task-list__content__tag--secondary {
+    @apply bg-base-300 print:border-base-800 print:text-base-800;
+  }
 }
 
 /* overrides */
 
-.ds-task-list--dense{
+.ds-task-list--dense {
   .ds-task-list__item {
     @apply mb-4 md:mb-6;
-    .ds-summary-list{
-      @apply mb-4 md:mb-6; 
+    .ds-summary-list {
+      @apply mb-4 md:mb-6;
     }
   }
 }