@policystudio/policy-studio-ui-vue 1.2.0-access.35 → 1.2.0-access.36

package/dist/css/psui_styles_output.css

@@ -1,4 +1,16 @@
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round");
+.psui-el-table-results.layout-results tbody tr td:first-child, .psui-el-table-results.layout-results thead tr th:first-child {
+  position: sticky;
+  left: 0px;
+  z-index: 10;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+  padding-left: 0px;
+  padding-right: 2rem;
+  text-align: left;
+  box-shadow: inset -1px 0px 0px #ebeef0;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -568,31 +580,31 @@ video {
   --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 2px 5px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   content: "";
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   position: absolute;
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   top: 0px;
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
+  right: -8px;
+}
+.psui-el-table-results.layout-results thead::after {
   display: inline-block;
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   height: 100%;
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   width: 0.5rem;
 }
-.psui-el-table-results.layout-results thead:after {
+.psui-el-table-results.layout-results thead::after {
   --tw-bg-opacity: 1;
   background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
 }
-.psui-el-table-results.layout-results thead:after {
-  right: -8px;
-}
 .psui-el-table-results.layout-results thead tr .title {
   font-size: 14px;
   line-height: 20px;
@@ -600,9 +612,6 @@ video {
 .psui-el-table-results.layout-results thead tr .title {
   font-weight: 600;
 }
-.psui-el-table-results.layout-results thead tr .title {
-  line-height: 1rem;
-}
 .psui-el-table-results.layout-results thead tr .title {
   --tw-text-opacity: 1;
   color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
@@ -610,6 +619,10 @@ video {
 .psui-el-table-results.layout-results thead tr th {
   width: auto;
 }
+.psui-el-table-results.layout-results thead tr th {
+  padding-top: 13px;
+  padding-bottom: 13px;
+}
 .psui-el-table-results.layout-results thead tr th {
   padding-left: 1.5rem;
 }
@@ -623,10 +636,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
 }
-.psui-el-table-results.layout-results thead tr th {
-  padding-top: 13px;
-  padding-bottom: 13px;
-}
 .psui-el-table-results.layout-results thead tr th .description {
   font-size: 14px;
   line-height: 20px;
@@ -638,44 +647,18 @@ video {
   --tw-text-opacity: 1;
   color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
-.psui-el-table-results.layout-results thead tr th .description {
-  line-height: 110%;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  position: sticky;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  left: 0px;
-}
 .psui-el-table-results.layout-results thead tr th:first-child {
-  z-index: 10;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  padding-left: 0px;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  padding-right: 2rem;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  text-align: left;
-}
-.psui-el-table-results.layout-results thead tr th:first-child {
-  box-shadow: inset -1px 0px 0px #ebeef0;
   min-width: 300px;
 }
 .psui-el-table-results.layout-results thead tr th:first-child > div {
   padding-left: 0px;
 }
 .psui-el-table-results.layout-results thead tr:first-of-type th {
-  text-align: left;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 .psui-el-table-results.layout-results thead tr:first-of-type th {
-  padding-top: 0;
-  padding-bottom: 0;
+  text-align: left;
 }
 .psui-el-table-results.layout-results thead tr:first-of-type th > div {
   display: flex;
@@ -694,39 +677,45 @@ video {
   padding-top: 0.688rem;
   padding-bottom: 0.688rem;
 }
-.psui-el-table-results.layout-results thead tr:first-of-type p {
-  font-size: 16px;
-  line-height: 24px;
-}
-.psui-el-table-results.layout-results thead tr:first-of-type p {
-  line-height: 18px;
+.psui-el-table-results.layout-results thead tr:first-of-type th > div {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .psui-el-table-results.layout-results tbody tr {
   border-bottom-width: 1px;
-}
-.psui-el-table-results.layout-results tbody tr {
   --tw-border-opacity: 1;
   border-color: rgb(230, 236, 242, var(--tw-border-opacity, 1));
 }
-.psui-el-table-results.layout-results tbody tr.is-first .title {
-  font-weight: 700;
-}
-.psui-el-table-results.layout-results tbody tr.is-first .title {
-  --tw-text-opacity: 1;
-  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
-}
 .psui-el-table-results.layout-results tbody tr .title {
   display: flex;
 }
 .psui-el-table-results.layout-results tbody tr .title {
   align-items: center;
 }
+.psui-el-table-results.layout-results tbody tr .title {
+  font-size: 14px;
+  line-height: 20px;
+}
 .psui-el-table-results.layout-results tbody tr .title {
   line-height: 24px;
 }
+.psui-el-table-results.layout-results tbody tr.is-first .title {
+  font-weight: 700;
+}
+.psui-el-table-results.layout-results tbody tr.is-first .title {
+  --tw-text-opacity: 1;
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
+}
 .psui-el-table-results.layout-results tbody tr td {
   height: 2.5rem;
 }
+.psui-el-table-results.layout-results tbody tr td {
+  min-height: 41.5px;
+}
+.psui-el-table-results.layout-results tbody tr td {
+  padding-top: 0.688rem;
+  padding-bottom: 0.688rem;
+}
 .psui-el-table-results.layout-results tbody tr td {
   padding-left: 2rem;
 }
@@ -741,17 +730,22 @@ video {
   --tw-text-opacity: 1;
   color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
-.psui-el-table-results.layout-results tbody tr td {
-  padding-top: 0.688rem;
-  padding-bottom: 0.688rem;
-  min-height: 41.5px;
-}
 .psui-el-table-results.layout-results tbody tr td > div {
   display: flex;
 }
 .psui-el-table-results.layout-results tbody tr td > div {
   align-items: center;
 }
+.psui-el-table-results.layout-results tbody tr td:not(:first-child) > div {
+  justify-content: flex-end;
+}
+.psui-el-table-results.layout-results tbody tr td:first-child {
+  display: block;
+}
+.psui-el-table-results.layout-results tbody tr td:first-child {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .psui-el-table-results.layout-results tbody tr td .actions {
   position: relative;
 }
@@ -773,39 +767,6 @@ video {
 .psui-el-table-results.layout-results tbody tr td .actions .is-last-deep {
   padding-left: 2.5rem;
 }
-.psui-el-table-results.layout-results tbody tr td:not(:first-child) > div {
-  justify-content: flex-end;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  position: sticky;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  left: 0px;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  z-index: 10;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  display: block;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  padding-left: 0px;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  padding-right: 2rem;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  text-align: left;
-}
-.psui-el-table-results.layout-results tbody tr td:first-child {
-  box-shadow: inset -1px 0px 0px #ebeef0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
 .psui-el-table-results.layout-results tbody tr.is-active {
   --tw-bg-opacity: 1;
   background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.35",
+  "version": "1.2.0-access.36",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/table-layouts/LayoutResults.scss

@@ -1,126 +1,101 @@
+%sticky-first-column {
+  @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+  box-shadow: inset -1px 0px 0px #ebeef0;
+}
+
 @mixin renderResults {
-  tr {
-    th,
-    td {
-      &:last-child {
-        @apply psui-pr-2;
-      }
-    }
+  tr th:last-child,
+  tr td:last-child {
+    @apply psui-pr-2;
   }
 
   thead {
     @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
 
-    &:after {
-      content: "";
-      @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
-      right: -8px;
+    &::after {
+      content: '';
+      @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white psui-right-[-8px];
     }
 
     tr {
       .title {
-        @apply psui-text-14 psui-font-semibold psui-leading-4 psui-text-gray-80;
+        @apply psui-text-14 psui-font-semibold psui-text-gray-80;
       }
 
       th {
-        @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
-        padding-top: 13px;
-        padding-bottom: 13px;
+        @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top psui-py-[13px];
 
         .description {
           @apply psui-text-14 psui-text-gray-60 psui-font-normal;
-          line-height: 110%;
         }
 
         &:first-child {
-          @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
-          box-shadow: inset -1px 0px 0px #ebeef0;
-          min-width: 300px;
+          @extend %sticky-first-column;
+          @apply psui-min-w-[300px];
 
           > div {
             @apply psui-pl-0;
           }
         }
       }
+    }
 
-      &:first-of-type {
-        th {
-          @apply psui-text-left;
-          padding-top: 0;
-          padding-bottom: 0;
-
-          > div {
-            @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
-            padding-top: 0.688rem;
-            padding-bottom: 0.688rem;
-          }
-        }
+    tr:first-of-type {
+      th {
+        @apply psui-text-left psui-py-0;
 
-        p {
-          @apply psui-text-16;
-          line-height: 18px;
+        > div {
+          @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-[0.688rem] psui-px-0;
         }
       }
     }
   }
 
-  tbody {
-    tr {
-      @apply psui-border-b psui-border-gray-20;
+  tbody tr {
+    @apply psui-border-b psui-border-gray-20;
 
-      &.is-first {
-        .title {
-          @apply psui-font-bold psui-text-gray-80;
-        }
-      }
+    .title {
+      @apply psui-flex psui-items-center psui-text-14 psui-leading-[24px];
+    }
 
-      .title {
-        @apply psui-flex psui-items-center;
-        line-height: 24px;
-      }
+    &.is-first .title {
+      @apply psui-text-gray-80 psui-font-bold;
+    }
 
-      td {
-        @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14;
-        padding-top: 0.688rem;
-        padding-bottom: 0.688rem;
-        min-height: 41.5px;
+    td {
+      @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14 psui-py-[0.688rem] psui-min-h-[41.5px];
 
-        > div {
-          @apply psui-flex psui-items-center;
-        }
+      > div {
+        @apply psui-flex psui-items-center;
+      }
 
-        .actions {
-          @apply psui-flex psui-items-center psui-h-full psui-relative;
+      &:not(:first-child) > div {
+        @apply psui-justify-end;
+      }
 
-          &-button {
-            @apply psui-cursor-pointer psui-ml-1;
-          }
+      &:first-child {
+        @extend %sticky-first-column;
+        @apply psui-block psui-py-2;
+      }
+    }
 
-          .is-last-deep {
-            @apply psui-pl-10;
-          }
-        }
+    td .actions {
+      @apply psui-flex psui-items-center psui-h-full psui-relative;
 
-        &:not(:first-child) {
-          > div {
-            @apply psui-justify-end;
-          }
-        }
+      &-button {
+        @apply psui-cursor-pointer psui-ml-1;
+      }
 
-        &:first-child {
-          @apply psui-pl-0 psui-pr-8 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
-          box-shadow: inset -1px 0px 0px #ebeef0;
-          padding-top: 8px;
-          padding-bottom: 8px;
-        }
+      .is-last-deep {
+        @apply psui-pl-10;
       }
+    }
 
-      &.is-active {
-        @apply psui-bg-gray-10;
+    &.is-active {
+      @apply psui-bg-gray-10;
 
-        td:first-child {
-          @apply psui-bg-gray-10;
-        }
+      td:first-child {
+        @apply psui-bg-gray-10;
       }
     }
   }