@coreui/data-grid 0.1.0-rc.0 → 0.3.0-rc.0

package/scss/base/_table.scss

@@ -0,0 +1,78 @@
+@use "../config" as *;
+
+// scss-docs-start base-table-variables
+$base-table-cell-padding-y: .5rem !default;
+$base-table-cell-padding-x: .5rem !default;
+$base-table-striped-factor: .05 !default;
+$base-table-active-factor:  .1 !default;
+$base-table-hover-factor:   .075 !default;
+// scss-docs-end base-table-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .table {
+      --#{$prefix}table-color-type: initial;
+      --#{$prefix}table-bg-type: initial;
+      --#{$prefix}table-color-state: initial;
+      --#{$prefix}table-bg-state: initial;
+      --#{$prefix}table-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-bg: var(--#{$prefix}body-bg);
+      --#{$prefix}table-border-color: var(--#{$prefix}border-color);
+      --#{$prefix}table-accent-bg: transparent;
+      --#{$prefix}table-striped-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-striped-factor});
+      --#{$prefix}table-active-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-active-factor});
+      --#{$prefix}table-hover-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-hover-factor});
+
+      width: 100%;
+      margin-bottom: 1rem;
+      vertical-align: top;
+      border-color: var(--#{$prefix}table-border-color);
+
+      > :not(caption) > * > * {
+        padding: $base-table-cell-padding-y $base-table-cell-padding-x;
+        color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+        background-color: var(--#{$prefix}table-bg);
+        border-bottom-width: var(--#{$prefix}border-width);
+        box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+      }
+
+      > tbody {
+        vertical-align: inherit;
+      }
+
+      > thead {
+        vertical-align: bottom;
+      }
+    }
+
+    .table-sm > :not(caption) > * > * {
+      padding: .25rem .25rem;
+    }
+
+    .table-bordered > :not(caption) > * > * {
+      border-width: var(--#{$prefix}border-width) 0;
+    }
+
+    .table-borderless > :not(caption) > * > * {
+      border-bottom-width: 0;
+    }
+
+    .table-striped > tbody > tr:nth-of-type(odd) > * {
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+    }
+
+    .table-hover > tbody > tr:hover > * {
+      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+    }
+
+    .table-active {
+      --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+    }
+  }
+}