pixel-react 1.8.1 → 1.8.3

package/src/components/TableTree/TableTree.scss

@@ -1,218 +1,210 @@
-.tree-table-space-block {
-  display: inline-block;
-  width: 20px;
-  height: 16px;
-  text-align: center;
-  line-height: 16px;
-  vertical-align: top;
-  font-size: 19px;
-  position: relative;
-  box-sizing: border-box;
-  // margin-top: 7px;
-  border-radius: 50%;
-
-  &.btn-toggle {
-    position: relative;
-    cursor: pointer;
-    width: 22px;
-    height: 18px;
-    z-index: 12;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  &.last-block::after,
-  &.no-folder::after {
-    position: absolute;
-    content: '';
-    height: 1px;
-    background: var(--tree-connecting-lines-color);
-    top: 50%;
-    margin-top: -1px;
-  }
-
-  &.last-block::after {
-    width: 12px;
-    left: -10px;
-  }
-
-  &.no-folder {
-    width: 8px;
-
-    &::after {
-      width: 18px;
-      left: -10px;
-    }
-  }
-
-  &:not(.last-block, .no-lines, .last-node)::before {
-    position: absolute;
-    content: '';
-    width: 1px;
-    height: 40px;
-    background: var(--tree-connecting-lines-color);
-    left: 50%;
-    top: -4px;
-    z-index: 99;
-  }
-
-  &.last-node::before {
-    position: absolute;
-    content: '';
-    width: 1px;
-    height: 12px;
-    background: var(--tree-connecting-lines-color);
-    left: 50%;
-    top: -4px;
-    z-index: -1;
-  }
-}
-
-.hidden {
-  display: none;
-}
-
-.show {
-  display: table-row;
-  visibility: visible;
-}
-
-.btn-toggle {
-  cursor: pointer;
-
-  &.is-close {
-    background: #f1f1f1;
-    border: 1px solid transparent;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  }
-
-  &::before,
-  &::after {
-    display: none;
-  }
-}
-
-.tree-table-wrap {
-  width: 100%;
-}
-
-tbody {
-  overflow: scroll;
-  height: 300px;
-}
-
-.tree-table {
-  border: 1px solid #f1f1f1;
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  overflow: scroll;
-
-  tr {
-    .table-tree-row-action {
-      display: none;
-    }
-
-    &:hover {
-      background-color: var(--hover-color);
-      td {
-        &:first-child {
-          background-color: var(--hover-color);
-        }
-      }
-
-      .table-tree-row-action {
-        display: inline-flex;
-        align-items: center;
-      }
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      visibility: hidden;
-      clear: both;
-    }
-  }
-
-  th,
-  td {
-    text-align: left;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  th {
-    color: var(--brand-color);
-    background: var(--slider-table-color);
-    font-size: 13px;
-    width: 400px;
-
-    &:first-child {
-      position: sticky;
-      left: 0;
-    }
-  }
-
-  td {
-    font-size: 14px;
-    color: var(--brand-color);
-    height: 18px;
-
-    &:first-child {
-      overflow: initial;
-      position: sticky;
-      left: 0;
-      background-color: white;
-
-      &:hover {
-        background-color: var(--hover-color);
-      }
-    }
-  }
-}
-
-.tree-table-td-content {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 8px;
-  font-size: 12px;
-  font-family: 'Poppins', sans-serif;
-}
-
-.tree-row-expanded,
-.tree-row-collapsed {
-  svg {
-    height: 12px;
-    width: 12px;
-
-    path {
-      fill: var(--brand-color);
-    }
-  }
-}
-
-.tree-row-collapsed svg {
-  transform: rotate(-90deg);
-  transition: transform 0.3s ease;
-}
-
-tr:after {
-  content: ' ';
-  display: block;
-  visibility: hidden;
-  clear: both;
-}
-
-.tree-table-space-container {
-  display: inline-flex;
-  // flex-direction: row-reverse;
-}
-
-.tree-title-container {
-  display: inline-flex;
-  align-items: center;
-}
+.tree-table-space-block {
+  display: inline-block;
+  width: 20px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  vertical-align: top;
+  font-size: 19px;
+  position: relative;
+  box-sizing: border-box;
+  // margin-top: 7px;
+  border-radius: 50%;
+
+  &.btn-toggle {
+    position: relative;
+    cursor: pointer;
+    width: 22px;
+    height: 18px;
+    z-index: 12;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &.last-block::after,
+  &.no-folder::after {
+    position: absolute;
+    content: '';
+    height: 1px;
+    background: var(--tree-connecting-lines-color);
+    top: 50%;
+    margin-top: -1px;
+  }
+
+  &.last-block::after {
+    width: 12px;
+    left: -10px;
+  }
+
+  &.no-folder {
+    width: 8px;
+
+    &::after {
+      width: 18px;
+      left: -10px;
+    }
+  }
+
+  &:not(.last-block, .no-lines, .last-node)::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 40px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: 99;
+  }
+
+  &.last-node::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 12px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: -1;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  display: table-row;
+  visibility: visible;
+}
+
+.btn-toggle {
+  cursor: pointer;
+
+  &.is-close {
+    background: #f1f1f1;
+    border: 1px solid transparent;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+.tree-table-wrap {
+  width: 100%;
+}
+
+.ff-table-tree-body {
+  overflow: scroll;
+}
+
+.tree-table {
+  border: 1px solid #f1f1f1;
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  overflow: scroll;
+
+  tr {
+    .table-tree-row-action {
+      display: none;
+    }
+
+    &:hover {
+      background-color: var(--hover-color);
+      td {
+        &:first-child {
+          background-color: var(--hover-color);
+        }
+      }
+
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+  }
+
+  th,
+  td {
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  th {
+    color: var(--brand-color);
+    background: var(--slider-table-color);
+    font-size: 13px;
+    width: 400px;
+
+    &:first-child {
+      position: sticky;
+      left: 0;
+    }
+  }
+
+  td {
+    font-size: 14px;
+    color: var(--brand-color);
+    height: 18px;
+
+    &:first-child {
+      overflow: initial;
+      position: sticky;
+      left: 0;
+      background-color: white;
+
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+  }
+}
+
+.tree-table-td-content {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 8px;
+  font-size: 12px;
+  font-family: 'Poppins', sans-serif;
+}
+
+.tree-row-expanded,
+.tree-row-collapsed {
+  svg {
+    height: 12px;
+    width: 12px;
+
+    path {
+      fill: var(--brand-color);
+    }
+  }
+}
+
+.tree-row-collapsed svg {
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease;
+}
+
+.tree-table-space-container {
+  display: inline-flex;
+  // flex-direction: row-reverse;
+}
+
+.tree-title-container {
+  display: inline-flex;
+  align-items: center;
+}