@harjs/react-ui 1.0.0

package/dist/assets/css/components/data-display/table/scroll.css

@@ -0,0 +1,208 @@
+.ar-table {
+  /* Scroll durumu */
+  &:is(.scroll) {
+    > .content {
+      max-width: 100%;
+      overflow: auto;
+
+      > table {
+        > thead {
+          > tr {
+            > th {
+              position: sticky;
+              top: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  > .content {
+    > table {
+      th[class^="sticky-"] {
+        z-index: 50;
+      }
+
+      > thead {
+        > tr {
+          > th {
+            &:is(.sticky-left, .sticky-right) {
+              &:is(.sticky, .active-sticky) {
+                background-color: var(--gray-100);
+
+                &::after {
+                  position: absolute;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  content: "";
+                  background-color: var(--gray-200);
+                  width: 1px;
+                  height: 50%;
+                }
+              }
+            }
+
+            &.sticky-left {
+              position: sticky;
+              left: 0;
+
+              &:is(.sticky, .active-sticky) {
+                &::after {
+                  right: 0;
+                }
+              }
+            }
+
+            &.sticky-right {
+              position: sticky;
+              right: 0;
+
+              &:is(.sticky, .active-sticky) {
+                &::after {
+                  left: 0;
+                  right: auto;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      > tbody {
+        > tr {
+          > td {
+            &:is(.sticky-left, .sticky-right) {
+              &:is(.sticky, .active-sticky) {
+                background-color: var(--gray-100);
+              }
+            }
+
+            &.sticky-left {
+              position: sticky;
+              left: 0;
+
+              &:is(.sticky, .active-sticky) {
+                box-shadow: inset -1px 0 0 0 var(--gray-200);
+              }
+            }
+
+            &.sticky-right {
+              position: sticky;
+              right: 0;
+
+              &.sticky {
+                box-shadow: inset 1px 0 0 0 var(--gray-200);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
+/* Çok dar ekranlar için özel düzeltmeler */
+@media (max-width: 375px) {
+}
+
+/* --- [MOBİL - STANDART] --- */
+/* Ekran 576px ve altına düştüğünde çalışır */
+@media (max-width: 576px) {
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-table {
+    /* Scroll durumu */
+    &:is(.scroll) {
+      > .content {
+        > table {
+          > thead {
+            > tr {
+              > th {
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > .content {
+      > table {
+        th[class^="sticky-"] {
+        }
+
+        > thead {
+          > tr {
+            > th {
+              &:is(.sticky-left, .sticky-right) {
+                &:is(.sticky, .active-sticky) {
+                  &::after {
+                  }
+                }
+              }
+
+              &.sticky-left {
+                position: static;
+                left: auto;
+
+                &:is(.sticky, .active-sticky) {
+                  &::after {
+                  }
+                }
+              }
+
+              &.sticky-right {
+                position: static;
+                right: auto;
+
+                &:is(.sticky, .active-sticky) {
+                  &::after {
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        > tbody {
+          > tr {
+            > td {
+              &:is(.sticky-left, .sticky-right) {
+                &:is(.sticky, .active-sticky) {
+                  background-color: transparent;
+                }
+              }
+
+              &.sticky-left {
+                position: static;
+                left: auto;
+
+                &:is(.sticky, .active-sticky) {
+                  box-shadow: none;
+                }
+              }
+
+              &.sticky-right {
+                position: static;
+                right: auto;
+
+                &.sticky {
+                  box-shadow: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}