@solid-design-system/styles 1.0.0-next.1

package/dist/modules/table-cell.css

@@ -0,0 +1,186 @@
+/**
+ * A table cell is a single cell inside a table, used to display discrete data elements.
+ * @name sd-table-cell
+ * @status stable
+ * @since 1.13
+ * @boolean sd-table-cell--divider Displays a divider to the right.
+ * @variant { white | primary-100 | neutral-100 } sd-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
+ * @boolean sd-table-cell--shadow-active Displays the table shadow.
+ * @variant { top | left | right | bottom } sd-table-cell--shadow-... Applies the selected shadow to the table cell.
+ */
+
+.sd-prose td,
+.sd-prose th,
+.sd-table-cell {
+
+    border-top-width: 1px;
+
+    border-bottom-width: 1px;
+
+    border-left-width: 0px;
+
+    border-right-width: 0px;
+
+    border-style: solid;
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
+Used for divider, teaser, container, ...  */;
+
+    background-color: transparent;
+
+    padding: var(--sd-spacing-4, 1rem) /* 16px */;
+
+    text-align: left;
+
+    font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
+
+    
+
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+}
+
+.sd-table-cell--divider {
+
+    border-right-width: 1px
+}
+
+.sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after, .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
+
+    pointer-events: none;
+
+    position: absolute;
+
+    --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
+
+    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+
+    --tw-gradient-to: transparent var(--tw-gradient-to-position);
+
+    opacity: var(--sd-opacity-0, 0);
+
+    transition-property: opacity;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transition-duration: 300ms;
+
+    --tw-content: '';
+
+    content: var(--tw-content)
+}
+
+.sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
+
+    left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+
+    right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+
+    height: var(--sd-spacing-2-5, 0.625rem) /* 10px */
+}
+
+/* fix that shows line on top of table-cell */
+
+.sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
+
+    position: absolute;
+
+    left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+
+    display: block;
+
+    height: 1px;
+
+    width: 100%;
+
+    border-width: 0.5px;
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
+Used for divider, teaser, container, ...  */;
+
+    --tw-content: '';
+
+    content: var(--tw-content)
+}
+
+.sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
+
+    top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+
+    bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+
+    width: var(--sd-spacing-2-5, 0.625rem) /* 10px */
+}
+
+.sd-table-cell.sd-table-cell--shadow-active:after {
+
+    opacity: 100%
+}
+
+.sd-table-cell--shadow-top:after {
+
+    top: -10px;
+
+    background-image: linear-gradient(to top, var(--tw-gradient-stops))
+}
+
+/* fix that shows line on top of table-cell */
+
+.sd-table-cell--shadow-top:before {
+
+    bottom: -1px
+}
+
+.sd-table-cell--shadow-bottom:after {
+
+    bottom: -10px;
+
+    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
+}
+
+/* fix that shows line on top of table-cell */
+
+.sd-table-cell--shadow-bottom:before {
+
+    top: -1px
+}
+
+.sd-table-cell--shadow-left:after {
+
+    left: -10px;
+
+    background-image: linear-gradient(to left, var(--tw-gradient-stops))
+}
+
+.sd-table-cell--shadow-right:after {
+
+    right: -10px;
+
+    background-image: linear-gradient(to right, var(--tw-gradient-stops))
+}
+
+.sd-table-cell--bg-white {
+
+    
+
+    background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */
+}
+
+.sd-table-cell--bg-primary-100 {
+
+    
+
+    background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */
+}
+
+.sd-table-cell--bg-neutral-100 {
+
+    
+
+    background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */
+}

package/dist/modules/table.css

@@ -0,0 +1,24 @@
+/**
+ * A table is organized structured content, used for scanning, comparing, and analyzing the data.
+ * @name sd-table
+ * @status stable
+ * @since 1.13
+ */
+
+/*
+* Remove inherited styles from table before applying our styles.
+*/
+
+.sd-table,
+.sd-prose table {
+  all: unset;
+  display: table;
+  border-collapse: collapse;
+  --tw-border-spacing-x: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  --tw-border-spacing-y: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
+  position: relative;
+}