@eturnity/eturnity_reusable_components 8.40.8--EPDM-16195.0 → 8.40.8--EPDM-16185.0

package/src/components/tables/mainTable/index.vue

@@ -54,8 +54,9 @@
 
   const TableTitle = styled.div`
     margin-bottom: 16px;
-    font-weight: 500;
+    font-weight: bold;
     font-size: 14px;
+    text-transform: uppercase;
   `
 
   const tableScrollProps = {
@@ -65,6 +66,12 @@
   const TableScroll = styled('div', tableScrollProps)`
     max-width: 100%;
     height: auto;
+    ${(props) =>
+      props.isPositionAbsolute &&
+      `
+    position: absolute;
+    left: -20px;
+  `}
   `
 
   const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
@@ -104,24 +111,15 @@
 
   const TableContainer = styled('table', containerAttrs)`
     width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-right: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-left: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-top: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-radius: 4px;
-    font-size: 12px;
+    border-collapse: collapse;
+    border: none;
+    font-size: 13px;
 
     thead {
-      font-weight: 500;
-      line-height: 140%;
+      font-weight: bold;
 
       tr {
         border-bottom: none !important;
-        background-color: ${(props) => props.theme.semanticColors.grey[100]};
       }
     }
 
@@ -130,8 +128,6 @@
     }
 
     tbody {
-      font-weight: 400;
-      line-height: 150%;
       tr {
         &:hover,
         td.hovered-column {
@@ -152,25 +148,18 @@
         }
 
         td {
-          height: 48px;
-        }
-
-        .drag-placeholder {
-          min-height: 48px;
-          min-width: 20px;
-          border-bottom: 1px solid
-            ${(props) => props.theme.semanticColors.grey[200]};
+          height: 40px;
         }
       }
     }
 
     th {
-      padding: 8px 16px;
+      padding: 11px 15px;
       background-color: ${(props) => props.theme.semanticColors.grey[100]};
       border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.grey[200]};
+        ${(props) => props.theme.semanticColors.teal[100]};
       cursor: auto;
-      height: 36px;
+      height: 40px;
       font-weight: 500;
 
       .ordering {
@@ -262,10 +251,6 @@
         visibility: hidden;
       }
 
-      &.footer {
-        background-color: ${(props) => props.theme.colors.grey5};
-      }
-
       &.footer,
       &.total-row {
         td {
@@ -298,8 +283,6 @@
         flex-wrap: nowrap;
         background-color: ${(props) => props.theme.colors.white};
         vertical-align: middle;
-        border-bottom: 1px solid
-          ${(props) => props.theme.semanticColors.grey[200]};
       }
 
       .arrow-container {
@@ -318,11 +301,6 @@
         .arrow-container {
           border-bottom: none;
         }
-
-        .drag-container,
-        .icons-container {
-          border-bottom: none !important;
-        }
       }
 
       &:hover {
@@ -348,14 +326,12 @@
         display: table-cell;
         width: 20px;
         min-width: 20px;
-        height: 48px;
-        border-bottom: ${(props) =>
-          '1px solid ' + props.theme.semanticColors.grey[200]};
+        height: 40px;
       }
 
       .drag-wrapper {
         width: 16px;
-        height: 46px;
+        height: 36px;
         display: grid;
         align-items: center;
         justify-items: center;
@@ -401,9 +377,9 @@
     }
 
     input {
-      font-size: 12px;
+      font-size: 13px;
       padding: 5px 10px;
-      background: ${(props) => props.theme.colors.white};
+      background: #fff;
       height: unset;
 
       &:focus {