@planningcenter/tapestry 3.7.0 → 3.7.1-qa-1061.0

package/dist/unstable.css

@@ -74,6 +74,148 @@
   --t-banner-spacing:calc(var(--t-spacing-half) + var(--t-spacing-1));
 }
 
+.tds-data-table-wrapper{
+  --tds-data-table-background-color:var(--t-surface-color-canvas);
+  --tds-data-table-border-color:var(--t-border-color);
+  --tds-data-table-column-background-color:var(--t-fill-color-neutral-090);
+  --tds-data-table-cell-padding-inline:var(--t-spacing-2);
+  --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
+  position:relative;
+  overflow:hidden;
+
+  background-color:var(--tds-data-table-column-background-color);
+  border:1px solid var(--tds-data-table-border-color);
+  border-radius:var(--t-border-radius);
+}
+.tds-data-table-scroll{
+  overflow-x:auto;
+  scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
+}
+@supports (timeline-scope: --tds){
+  .tds-data-table-wrapper{
+    --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
+
+    timeline-scope:--tds-data-table-scroll-timeline;
+  }
+
+    .tds-data-table-wrapper::before,.tds-data-table-wrapper::after{
+      position:absolute;
+      inset-block:0;
+      z-index:1;
+      width:var(--tds-data-table-scroll-shadow-size);
+      pointer-events:none;
+      content:"";
+      opacity:0;
+      animation-duration:auto;
+      animation-timeline:--tds-data-table-scroll-timeline;
+      animation-timing-function:linear;
+      animation-fill-mode:both;
+    }
+
+    .tds-data-table-wrapper::before{
+      inset-inline-start:0;
+      background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
+      animation-name:tds-data-table-scroll-shadow;
+      animation-range:0 var(--tds-data-table-scroll-shadow-size);
+    }
+
+    .tds-data-table-wrapper::after{
+      inset-inline-end:0;
+      background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
+      animation-name:tds-data-table-scroll-shadow;
+      animation-direction:reverse;
+      animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
+    }
+
+  .tds-data-table-scroll{
+    scroll-timeline:--tds-data-table-scroll-timeline inline;
+  }
+
+  @keyframes tds-data-table-scroll-shadow{
+    from{ opacity:0; }
+    to{ opacity:1; }
+  }
+}
+.tds-data-table{
+  width:100%;
+  font-size:var(--t-font-size-md);
+  color:var(--t-text-color);
+  border-collapse:collapse;
+  background-color:var(--tds-data-table-background-color);
+}
+.tds-data-table th,.tds-data-table td{
+    white-space:nowrap;
+  }
+.tds-data-table-column{
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  font-weight:var(--t-font-weight-medium);
+  color:var(--t-text-color-secondary);
+  background-color:var(--tds-data-table-column-background-color);
+}
+.tds-data-table-column[data-allows-sorting="true"]{
+    --_sort-icon-color:var(--t-text-color-disabled);
+    --_sort-icon-opacity:.5;
+    --_sort-icon-rotate:0;
+    cursor:pointer;
+  }
+.tds-data-table-column[data-allows-sorting="true"][data-hovered]{
+      --_sort-icon-opacity:1;
+    }
+.tds-data-table-column[data-sort-direction]{
+    --_sort-icon-color:inherit;
+    --_sort-icon-opacity:1;
+  }
+.tds-data-table-column[data-sort-direction="descending"]{
+    --_sort-icon-rotate:.5turn;
+  }
+.tds-data-table-column-icon{
+  margin-inline-start:var(--t-spacing-1);
+}
+.tds-data-table-column-icon--sort{
+  color:var(--_sort-icon-color);
+  opacity:var(--_sort-icon-opacity);
+  transform:translateY(1px) rotate(var(--_sort-icon-rotate));
+  transition-timing-function:var(--t-ease-in-out);
+  transition-duration:var(--t-duration-300);
+  transition-property:color, opacity, transform;
+}
+.tds-data-table-column-label--hidden,
+.tds-data-table-cell-label--hidden{
+  position:absolute;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
+.tds-data-table-cell{
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  border-top:1px solid var(--tds-data-table-border-color);
+}
+.tds-data-table-empty{
+  padding:var(--tds-data-table-cell-padding-block);
+  padding-inline:var(--tds-data-table-cell-padding-inline);
+  text-align:center;
+  white-space:normal;
+}
+.tds-data-table-column,
+.tds-data-table-cell{
+  text-align:start;
+}
+.tds-data-table-column--align-center,
+.tds-data-table-cell--align-center{
+  text-align:center;
+}
+.tds-data-table-column--align-end,
+.tds-data-table-cell--align-end{
+  text-align:end;
+}
+.tds-data-table-cell--numeric{
+  font-variant-numeric:tabular-nums;
+}
+
 @layer t-critical, t-component;
 
 :root{