¨4.0.1¨

Modules/Admin/Resources/assets/sass/datatables.scss

@@ -1,14 +1,4 @@
-.index-table {
-    .label {
-        padding: 6px 10px;
-    }
-
-    > .loading-spinner {
-        display: table;
-        margin: 0 auto;
-        margin-bottom: 10px;
-    }
-}
+@import "datatables.net-bs/css/dataTables.bootstrap";
 
 .dataTable.table {
     border-bottom: 1px solid #e9e9e9;
@@ -16,24 +6,20 @@
     > {
         thead > tr > th,
         tfoot > tr > th {
-            font-family: 'Open Sans', sans-serif;
+            font-family: "Inter", sans-serif;
             color: #4a4a4a;
             padding: 10px 15px;
             border-color: #e9e9e9;
-
-            &:after {
-                padding: 5px;
-            }
         }
 
         tbody > tr {
-            transition: 200ms ease-in-out;
+            transition: 150ms ease-in-out;
 
             &:first-child > td {
                 border: none;
             }
 
-            &:nth-of-type(2n+1) {
+            &:nth-of-type(2n + 1) {
                 background: #ffffff;
 
                 &:hover {
@@ -41,6 +27,12 @@
                 }
             }
 
+            &.clickable-row {
+                > td:not(:first-child) {
+                    cursor: pointer;
+                }
+            }
+
             > td {
                 padding: 15px;
                 vertical-align: middle;
@@ -87,6 +79,32 @@
 table.dataTable {
     margin: 5px 0 !important;
 
+    &.table-hover {
+        > tbody {
+            > tr:hover {
+                > * {
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+
+    &.table-striped {
+        > tbody {
+            > tr {
+                &.odd > * {
+                    box-shadow: none;
+                }
+
+                &:hover {
+                    > * {
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+
     thead {
         .sorting,
         .sorting_asc,
@@ -121,23 +139,24 @@ div.dataTables_wrapper {
     }
 
     div.dataTables_processing {
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin: 0;
         width: 100%;
         height: 100%;
-        border: 0;
-        text-align: center;
+        margin: 0 !important;
         background: rgba(255, 255, 255, 0.7);
+        border: 0;
         z-index: 999;
+        transform: translate(-50%, -50%);
 
-        .fa-spin {
+        > div {
             position: absolute;
-            top: 50%;
             left: 50%;
-            color: #000;
-            font-size: 30px;
+            top: 50%;
+            margin: 0;
+            transform: translate(-50%, -50%);
+
+            > div {
+                background: #0068e1;
+            }
         }
     }
 
@@ -150,8 +169,10 @@ div.dataTables_wrapper {
     }
 }
 
-.btn-delete {
-    margin-left: 10px;
+div.dataTables_processing {
+    &.panel {
+        box-shadow: none;
+    }
 }
 
 .dataTables_empty {
@@ -191,30 +212,9 @@ div.dataTables_wrapper {
     }
 
     div.dataTables_wrapper {
-        > .row > .col-sm-6 {
-            width: 100%;
-        }
-
         div.dataTables_filter {
             text-align: left;
             margin-top: 15px;
         }
     }
 }
-
-@media screen and (max-width: 340px) {
-    div.dataTables_length {
-        display: block;
-
-        .btn-delete {
-            display: table;
-            margin: 15px 0 0 0;
-        }
-    }
-
-    div.dataTables_wrapper {
-        div.dataTables_length {
-            text-align: left;
-        }
-    }
-}