Satus updated

Author: adokseo

satus.css

@@ -1189,48 +1189,154 @@
     transform: translate(16px, 2px);
 }
 
+/*--------------------------------------------------------------
+>>> TABLE
+--------------------------------------------------------------*/
+
 .satus-table
 {
-    display: flex;
+    font-size: .875rem;
+
+    position: relative;
+
     overflow: hidden;
-    flex-direction: column;
 
     box-sizing: border-box;
-    height: 100%;
 
-    border: 1px solid #e4e4e4;
-    border-radius: 4px;
-    background: var(--background-2);
+    border: 1px solid #ececec;
+    border-radius: 6px;
 }
 
 .satus-table__head
 {
-    font-weight: 700;
-
+    position: absolute;
     z-index: 1;
+    top: 0;
+    left: 0;
 
     display: flex;
 
     box-sizing: border-box;
+    width: 100%;
     height: 48px;
+    padding: 0 8px;
 
+    background: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+}
+
+.satus-table__head > div
+{
+    font-weight: 600;
+
+    display: inline-flex;
 
+    opacity: .7;
+
+    flex-shrink: 0;
     align-items: center;
 }
 
+.satus-table__head > div:hover
+{
+    cursor: pointer;
+
+    opacity: 1;
+}
+
+.satus-table__head > div > span
+{
+    position: relative;
+}
+
+.satus-table__head > div[data-sorting=asc] > span::after
+{
+    position: absolute;
+    top: calc(50% - 2px);
+    right: -14px;
+
+    width: 0;
+    height: 0;
+
+    content: '';
+
+    border-right: 4px solid transparent;
+    border-bottom: 5px solid currentColor;
+    border-left: 4px solid transparent;
+}
+
+.satus-table__head > div[data-sorting=desc] > span::after
+{
+    position: absolute;
+    top: calc(50% - 2px);
+    right: -13px;
+
+    width: 0;
+    height: 0;
+
+    content: '';
+
+    border-top: 5px solid currentColor;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
 .satus-table__body
 {
     overflow: hidden;
 
-    flex: 1;
+    width: 100%;
+    height: 100%;
+
+    background: #fff;
 }
 
-.satus-table__body .satus-scrollbar__content > div
+.satus-table table
 {
-    display: flex;
+    width: 100%;
 
-    align-items: center;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.satus-table thead
+{
+    font-weight: 700;
+
+    visibility: hidden;
+}
+
+.satus-table thead th
+{
+    height: 48px;
+}
+
+.satus-table th
+{
+    padding: 0 0 0 8px;
+}
+
+.satus-table th:last-child
+{
+    padding: 0 8px;
+}
+
+.satus-table td
+{
+    padding: 4px 0 4px 8px;
+}
+
+.satus-table td:last-child
+{
+    padding: 4px 8px;
+}
+
+.satus-table td > span
+{
+    display: block;
+    overflow: hidden;
+
+    max-width: 100px;
 }
 
 /*--------------------------------------------------------------