@policystudio/policy-studio-ui-vue 1.1.62 → 1.1.63

package/dist/css/psui_styles.css

@@ -1931,9 +1931,7 @@ video {
 }
 
 .psui-el-table-results-wrapper.table-flexible {
-    padding-left: 1rem;
     padding-right: 1rem;
-    padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     border-width: 1px;
     --border-opacity: 1;
@@ -2376,6 +2374,9 @@ video {
 .psui-el-table-results.layout-flexible thead {
       background-color: #ffffff ;
       align-items: flex-start;
+      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
+      position: sticky;
+      top: 0;
       z-index: 15;
     }
 
@@ -2395,9 +2396,6 @@ video {
           line-height: 130%;
           font-weight: 700;
           line-height: 1rem;
-          --text-opacity: 1;
-          color: #28323B;
-          color: rgba(40, 50, 59, var(--text-opacity));
         }
 
 .psui-el-table-results.layout-flexible thead tr th {
@@ -2420,7 +2418,13 @@ video {
           }
 
 .psui-el-table-results.layout-flexible thead tr th:first-child {
-            padding-left: 0;
+            padding-left: 1rem;
+            padding-right: 2rem;
+            text-align: left;
+            background-color: #ffffff ;
+            position: sticky;
+            z-index: 10;
+            left: 0;
           }
 
 .psui-el-table-results.layout-flexible thead tr th:first-child > div {
@@ -2451,6 +2455,18 @@ video {
             line-height: 18px;
           }
 
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th .title {
+              --text-opacity: 1;
+              color: #28323B;
+              color: rgba(40, 50, 59, var(--text-opacity));
+            }
+
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th p:not(:first-of-type) {
+              --text-opacity: 1;
+              color: #798490;
+              color: rgba(121, 132, 144, var(--text-opacity));
+            }
+
 .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
               text-align: left;
               min-width: 388px;
@@ -2505,10 +2521,13 @@ video {
             }
 
 .psui-el-table-results.layout-flexible tbody tr td:first-child {
-            padding-left: 0;
+            padding-left: 0.5rem;
             padding-right: 2rem;
             text-align: left;
             display: block;
+            position: sticky;
+            z-index: 10;
+            left: 0;
             padding-top: 8px;
             padding-bottom: 8px;
           }
@@ -2547,7 +2566,7 @@ video {
           }
 
 .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child {
-              position: relative;
+              position: sticky;
             }
 
 .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before,
@@ -2560,7 +2579,7 @@ video {
 .psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before {
                 background-color: #ffffff ;
                 left: 0;
-                width: 22px;
+                width: 20px;
                 height: calc(100% + 1px);
               }
 
@@ -2570,7 +2589,7 @@ video {
                 background-color: rgba(230, 236, 242, var(--bg-opacity));
                 width: 1px;
                 height: 0;
-                left: 11px;
+                left: 19.5px;
               }
 
 .psui-el-table-results.layout-flexible tbody tr:not(.is-first):hover td {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.62",
+  "version": "1.1.63",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsTableResults.scss

@@ -3,7 +3,7 @@
     @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
 
     &.table-flexible {
-      @apply psui-px-4 psui-py-2 psui-border psui-border-gray-20 psui-rounded-lg;
+      @apply psui-pr-4 psui-pb-2 psui-border psui-border-gray-20 psui-rounded-lg;
     }
   }
 
@@ -348,7 +348,7 @@
       }
   
       thead {
-        @apply psui-bg-white psui-items-start psui-z-15;
+        @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
   
         &:after {
           content: '';
@@ -358,7 +358,7 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
+            @apply psui-text-small psui-font-bold psui-leading-4;
           }
   
           th {
@@ -372,7 +372,7 @@
             }
 
             &:first-child {
-              padding-left: 0;
+              @apply psui-pl-4 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
 
               > div {
                 @apply psui-items-start;
@@ -404,6 +404,14 @@
 
           &:not(:first-of-type) {
             th {
+              .title {
+                @apply psui-text-gray-80;
+              }
+
+              p:not(:first-of-type) {
+                @apply psui-text-gray-50;
+              }
+
               &:first-child {
                 @apply psui-text-left;
                 min-width: 388px;
@@ -445,7 +453,7 @@
             }
   
             &:first-child {
-              @apply psui-pl-0 psui-pr-8 psui-text-left psui-block;
+              @apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
               padding-top: 8px;
               padding-bottom: 8px;
             }
@@ -480,7 +488,7 @@
           &:not(.is-first) {
             td {
               &:first-child {
-                @apply psui-relative;
+                @apply psui-sticky;
   
                 &:before,
                 &:after {
@@ -490,13 +498,13 @@
   
                 &:before {
                   @apply psui-bg-white psui-left-0;
-                  width: 22px;
+                  width: 20px;
                   height: calc(100% + 1px);
                 }
   
                 &:after {
                   @apply psui-bg-gray-20 psui-w-px psui-h-0;
-                  left: 11px;
+                  left: 19.5px;
                 }
               }
             }