style table

Author: aminerhanemi

.idea/workspace.xml

@@ -7,32 +7,10 @@ body {
     margin: 0 !important;
 }
 
-
 .table--container {
-    margin: 0 16px;
-}
-
-.table {
-}
-
-.table--side {
-    flex: 1 0 2%;
-}
-
-img {
-    height: 40px;
+    margin: 0 20px;
 }
 
-body {
-    background-color: #FFFFFF;
-}
-
-.loader__container {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    color: white;
-}
 
 .container {
     display: flex;
@@ -52,17 +30,19 @@ body {
     box-shadow: 0 0 2px 0 rgba(128, 131, 132, 0.17), 0 2px 6px 0 rgba(61, 61, 61, 0.36);
 }
 
-.description {
-    text-align: center;
-    width: 100%;
-    font-size: 12px;
-    white-space: nowrap;
-    flex: 0 0 100%;
-    margin-bottom: 20px;
+.hide {
+    display: none !important;
+}
 
+/*---------------------------------------- Loader --------------------------------*/
+.loader__container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    color: white;
 }
 
-.title {
+.loader__title {
     color: #FFFFFF;
     text-align: center;
     width: 100%;
@@ -75,14 +55,6 @@ body {
     flex: 0 0 100%;
 }
 
-.stop-link {
-    width: 100%;
-    text-align: center;
-    text-decoration: underline;
-    cursor: pointer;
-    padding: 6px;
-}
-
 .loader__curtain {
     position: fixed;
     z-index: 9999;
@@ -107,10 +79,6 @@ body {
     justify-content: center;
 }
 
-.hide {
-    display: none !important;
-}
-
 .progress_spinner {
     width: 60px;
     height: 60px;
@@ -149,12 +117,6 @@ body {
     }
 }
 
-.csv-button--container {
-    display: inline-flex;
-    width: 100%;
-    flex-direction: row-reverse
-}
-
 /*---------------------------------------- table HEADER --------------------------------*/
 .table--title {
     color: #303030;
@@ -237,37 +199,6 @@ body {
     padding: 8px 16px;
 }
 
-/*---------------------------------------- table filter --------------------------------*/
-
-.table--filter {
-    display: inline-flex;
-    width: 100%;
-    margin: 0 0 16px 16px;
-}
-
-.filter--search {
-    display: inline-flex;
-    width: 100%;
-    flex-direction: row-reverse;
-    margin-right: 32px;
-}
-
-.margin--right_8 {
-    margin-right: 8px;
-}
-
-.margin--right_16 {
-    margin-right: 16px;
-}
-
-.margin--left_8 {
-    margin-left: 8px;
-}
-
-.margin--left_16 {
-    margin-left: 16px;
-}
-
 /*---------------------------------------- Modal --------------------------------*/
 
 /* The Modal (background) */
@@ -385,140 +316,23 @@ svg.stroke {
 
 .tabulator {
     border-radius: 4px !important;
-    background-color: #D7D9D9 !important;
+    background-color: #FAFAFA !important;
 }
 
 .tabulator-footer {
-    height: 38px !important;
+    padding: 8px 16px !important;
     background-color: #fff !important;
     display: flex !important;
     flex-wrap: nowrap !important;
     align-items: center !important;
     justify-content: flex-end !important;
 }
 
-
-/*---------------------------------------- SELECT --------------------------------*/
-
-.npt__select {
-    -webkit-appearance: none;
-    background-color: #FFFFFF;
-    background-image: url('./../img/angle_down.svg');
-    background-repeat: no-repeat;
-    background-position: 97% 53%;
-    background-size: 10px;
-    font-size: 14px;
-    padding: 1px 30px 1px 10px;
-    color: #676767;
-    height: 28px;
-    border: 1px solid #CBCBCB;
-    outline: 0 !important;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    transition: all ease-in-out .3s;
-}
-
-.npt__select:hover {
-    border-color: #878787;
-}
-
-.npt__select:focus {
-    outline: none !important;
-    border-color: #878787;
-    color: #363636;
-}
-
-/*---------------------------------------- input --------------------------------*/
-
-.npt {
-    font-size: 14px;
-    font-family: 'roboto', sans-serif;
-    color: #676767;
-    border: 1px solid #CBCBCB;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    transition: all ease-in-out .3s;
-    outline: none;
-    margin: 0;
-    flex: 1 1 auto;
-    padding: 5px 10px;
-    align-items: center;
-    text-overflow: ellipsis;
-}
-
-
-.npt:hover {
-    border-color: #878787;
-}
-
-.npt:focus {
-    border-color: #878787;
-    color: #363636;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-/*---------------------------------------- multi select --------------------------------*/
-
-.selectBox {
-    position: relative;
-}
-
-.overSelect {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.overSelect {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-#checkboxes {
-    display: none;
-    position: absolute;
-    background-color: #f5f5f5;
-    border: 1px solid #CBCBCB;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    transition: all ease-in-out .3s;
-    outline: none;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    max-height: 260px;
-    width: 200px;
-    overflow: auto;
-    z-index: 1;
-}
-
-#checkboxes label {
-    display: block;
-    color: #363636;
-    margin-left: 8px;
-    margin-bottom: 4px;
-}
-
-#checkboxes label input {
-    margin-right: 8px;
-}
-
-#checkboxes label:hover {
-    background-color: #0081E3;
-    border-color: #878787;
-
+.tabulator-page {
+    padding: 8px 16px !important;
+    color: #303030 !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 20px !important;
+    text-align: center !important;
 }

data-table/public/css/main.css

@@ -23,13 +23,12 @@
 <div class="loader__curtain" id="loader">
     <div class="loader__container" id="loading">
         <div class="progress_spinner spinner" id="spinner"></div>
-        <div class="title">Processing your request…</div>
+        <div class="loader__title">Processing your request…</div>
     </div>
     <!-- Error -->
     <div class="loader__container hide" id="error">
-        <div class="title" id="error_description"></div>
+        <div class="loader__title" id="error_description"></div>
         <button class="btn__close-tab" id="button-close">CLOSE TAB</button>
-        <!--<div class="description" id="error_description"></div>-->
     </div>
 </div>
 
@@ -60,7 +59,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <div class="modal__title">Table columns</div>
-            <span>
+            <span id="modal_close">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" class="stroke">
           <path d="M61.21 60.5l-52-52m52 0l-52 52"></path>
         </svg>