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

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

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