@policystudio/policy-studio-ui-vue 1.2.0-access.6 → 1.2.0-access.61

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

@@ -1,4 +1,8 @@
-@layer components{
+@import './table-layouts/LayoutResults.scss';
+@import './table-layouts/LayoutFlexible.scss';
+@import './table-layouts/LayoutComparison.scss';
+
+@layer components {
   .psui-el-table-results-wrapper {
     @apply psui-w-full psui-whitespace-nowrap psui-flex psui-overflow-auto;
 
@@ -26,740 +30,29 @@
     }
 
     &.layout-results {
-      tr {
-        th, 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;
-        }
-  
-        tr {
-          .title {
-            @apply psui-text-14 psui-font-bold psui-leading-4 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;
-  
-            .description {
-              @apply psui-text-xsmall 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;
-  
-              > 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;
-              }
-            }
-  
-            p {
-              @apply psui-text-16;
-              line-height: 18px;
-            }
-          }
-        }
-      }
-  
-      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;
-            line-height: 24px;
-          }
-  
-          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;
-  
-            > div {
-              @apply psui-flex psui-items-center;
-            }
-  
-            .actions {
-              @apply psui-flex psui-items-center psui-h-full psui-relative;
-  
-              &-button {
-                @apply psui-cursor-pointer psui-ml-1;
-              }
-  
-              .is-last-deep {
-                @apply psui-pl-10;
-              }
-            }
-  
-            &:not(:first-child) {
-              > div {
-                @apply psui-justify-end;
-              }
-            }
-  
-            &: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-active {
-            @apply psui-bg-gray-10;
-
-            td:first-child {
-              @apply psui-bg-gray-10;
-            }
-          }
-        }
-      }
+      @include renderResults;
     }
 
     &.layout-comparison {
-
-      &.is-sticky {
-        tr:first-of-type th:first-child,
-        td:first-child {
-          box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.15);
-          border-right-color: transparent;
-        }
-      }
-
-      tr {
-        th, td {
-          @apply psui-relative;
-        }
-      }
-
-      thead {
-        @apply psui-bg-gray-20 psui-items-start;
-
-        div {
-          @apply psui-relative;
-        }
-  
-        tr {
-          .title {
-            @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
-          }
-  
-          th {
-            @apply psui-px-6 psui-py-4 psui-text-gray-50 psui-text-center psui-align-top;
-            padding-top: 0.688rem;
-            padding-bottom: 0.188rem;
-            min-width: 200px;
-  
-            .description {
-              @apply psui-text-xsmall psui-font-normal;
-              line-height: 110%;
-            }
-          }
-
-          &:not(:first-of-type) {
-            th {
-              &:after {
-                @apply psui-absolute psui-top-0 psui-inline-block psui-w-px;
-                content: '';
-                right: -1px;
-                height: calc(100% + 0.5rem);
-                background-color: #C3CAD1;
-              }
-
-              &:last-child:after { 
-                display: none; 
-              }
-            }
-          }
-  
-          &:first-of-type {
-            th {
-              @apply psui-text-left psui-text-gray-50 psui-text-16 psui-px-6;
-              padding-top: 7px;
-              padding-bottom: 7px;
-
-              &:after {
-                @apply psui-absolute psui-top-0 psui-right-0 psui-inline-block;
-                content: '';
-                width: 1px;
-                height: calc(100% + 0.5rem);
-                background-color: #C3CAD1;
-              }
-
-              &:first-child {
-                @apply psui-align-middle psui-sticky psui-z-10 psui-left-0 psui-bg-gray-20;
-                padding-left: 22px;
-                min-width: 240px;
-
-                .title {
-                  @apply psui-text-h6 psui-text-gray-80 psui-font-bold;
-                }
-
-                &:after {
-                  width: 2px;
-                }
-              }
-
-              &:last-child:after { 
-                display: none; 
-              }
-            }
-  
-            p {
-              @apply psui-text-14;
-              line-height: 18px;
-
-              &.title {
-                @apply psui-text-gray-50 psui-font-normal;
-              }
-            }
-          }
-        }
-      }
-
-      tbody {
-        tr {
-          border-bottom: 8px solid transparent;
-
-          td {
-            @apply psui-relative;
-            border-right: 1px solid #C8D0D9;
-
-            > div {
-              position: relative;
-              z-index: 3;
-            }
-
-            .title {
-              @apply psui-text-14 psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
-              width: 144px;
-            }
-
-            .badge {
-              @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-h-6;
-              width: 28px;
-              background-color: #D3EFDE;
-            }
-
-            &:before,
-            &:after {
-              content: '';
-              position: absolute;
-              left: 0;
-              width: 100%;
-              background-color: #fff;
-            }
-
-            &:before {
-              top: 0; 
-              height: 100%;
-              box-shadow: 0px 0px 4px rgb(0 0 0 / 3%), 0px 1px 2px rgb(0 0 0 / 10%);
-              z-index: 1;
-            }
-
-            &:after {
-              background-color: #fff;
-              bottom: 0;
-              height: 8px;
-              z-index: 11;
-              width: calc(100% - 1px);
-            }
-
-            &:first-child {
-              @apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md psui-bg-white psui-sticky psui-z-10 psui-left-0;
-              border-right-width: 2px;
-            }
-
-            &:last-child {
-              @apply psui-px-3 psui-rounded-tr-md psui-rounded-br-md psui-border-r-0;
-            }
-          }
-
-          &.opened {
-            td {
-              &:before {
-                @apply psui-shadow-elevation-20;
-              }
-            }
-          }
-
-          &.is-first {
-            &.opened {
-
-              td {
-                &:first-child {
-                  @apply psui-rounded-bl-none;
-                }
-
-                &:last-child {
-                  @apply psui-rounded-br-none;
-                }
-              }
-            }
-          }
-
-          &:not(.is-first) {
-            td {
-              &:first-child {
-                @apply psui-rounded-tl-none;
-              }
-              &:last-child {
-                @apply psui-rounded-tr-none;
-              }
-            }
-
-            &.opened {
-              border-bottom-width: 14px;
-            }
-          }
-        }
-      }
+      @include renderComparison;
     }
 
     &.layout-flexible {
-
-      tr {
-        th, td {
-          &:last-child {
-            @apply psui-pr-2;
-          }
-        }
-      }
-  
-      thead {
-        @apply psui-bg-white psui-items-start 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;
-        }
-  
-        tr {
-          .title {
-            @apply psui-text-14 psui-leading-4;
-          }
-
-          th {
-            @apply psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
-
-            .description {
-              @apply psui-text-xsmall psui-font-normal;
-              line-height: 110%;
-            }
-
-            &:first-child {
-              @apply psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
-              padding-left: 0;
-
-              > div {
-                @apply psui-items-start;
-              }
-
-              &.pseudo-line {
-                &::after {
-                  content: '';
-                  position: absolute;
-                  top: 10px;
-                  right: 0;
-                  width: 1px;
-                  height: calc(100%);
-                  background-color: #D6DDE5;
-                }
-              }
-            }
-
-          }
-
-          &:first-of-type {
-            th {
-              @apply psui-text-left;
-              padding-top: 0;
-              padding-bottom: 0;
-              padding-left: 10px;
-              position: sticky;
-
-              &:first-child {
-                padding-left: 0;
-                width: 598px;
-              }
-  
-              > div {
-                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-2;
-
-                 > .title {
-                  @apply psui-text-accentSmall psui-text-blue-80 psui-font-bold psui-uppercase;
-
-                 }
-              }
-            }
-  
-            p {
-              @apply psui-text-16;
-              line-height: 18px;
-            }
-          }
-
-          &:not(:first-of-type) {
-            th {
-              &:not(:first-of-type) {
-                 > div {
-                  > div {
-                    @apply psui-mx-auto;
-                  }
-                 }
-              }
-
-               > div {
-                @apply psui-border-b psui-border-gray-20 psui-pr-[20px];
-
-                }
-
-              .title {
-                @apply psui-text-blue-80;
-              }
-
-              p:not(:first-of-type) {
-                @apply psui-text-gray-50;
-              }
-
-              &:first-child {
-                @apply psui-text-left;
-                width: 352px;
-                padding-left: 0;
-              }
-
-              &:nth-child(2) {
-                @apply psui-sticky psui-z-10 psui-bg-white;
-                left: 352px;
-                min-width: 140px;
-              }
-  
-              &:nth-child(3) {
-                @apply psui-sticky psui-z-10 psui-bg-white;
-                left: 492px;
-              }
-            }
-          }
-        }
-      }
-  
-      tbody {
-        tr {
-          @apply psui-border-gray-20;
-          transition: background-color 0.5s ease;
-  
-          .title {
-            @apply psui-flex psui-items-center;
-            line-height: 24px;
-          }
-
-          &.removed-class {
-            td {
-              @apply psui-bg-gray-10 psui-text-gray-40 !important;
-              transition: background-color 0.5s ease;
-
-              &:first-child {
-                > div {
-                  margin-left: 4px;
-                }
-               }
-            }
-          }
-
-
-          &.is-disabled {
-            td {
-              &.hover-color {
-                background-color: #E6ECF2 !important;
-                opacity: 0.99;
-                transition: background-color 0.5s ease;
-              }
-            }
-          }
-
-  
-          td {
-            @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-14;            
-
-            &.hover-color {
-              background-color: #ECF7FB !important;
-              opacity: 0.99;
-              transition: background-color 0.5s ease;
-            }
-
-            > div {
-              @apply psui-flex psui-items-center;
-            }
-  
-            .actions {
-              @apply psui-flex psui-items-center psui-h-full psui-relative;
-  
-              &-button {
-                @apply psui-cursor-pointer;
-              }
-            }
-  
-            &:first-child {
-              @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
-              width: 352px;
-            }
-
-            &:nth-child(2) {
-              @apply psui-sticky psui-z-10;
-              width: 140px;
-              left: 352px;
-              > div {
-                @apply psui-justify-center;
-              }
-            }
-
-            &:nth-child(3) {
-              @apply psui-sticky psui-z-10;
-              min-width: 140px;
-              left: 492px;
-              > div {
-                @apply psui-justify-center;
-              }
-            }
-
-            &:nth-child(n+3) {
-              padding-right: 20px;
-            }
-
-            .psui-el-tooltip-dialog {
-              text-align: left;
-              max-width: 180px;
-
-              .psui-el-tooltip-content-wrapper {
-                white-space: normal;
-              }
-            }
-          }
-
-          &.is-first {
-            @apply psui-border-transparent;
-
-            .actions-button span {
-              font-size: 16px !important;
-            }
-
-            .title {
-              @apply psui-text-xsmall psui-font-bold psui-text-gray-60;
-            }
-
-            td {
-              @apply psui-h-auto psui-py-1;
-              min-height: 1rem;
-            }
-
-            &.removed-class {
-              td {
-                @apply psui-bg-gray-10 psui-text-gray-40;
-                transition: background-color 0.5s ease;
-
-                .title {
-                  margin-left: 6px;
-                }
-                
-                .actions-button {
-                  margin-left: 2px;
-                }
-  
-                &:first-child {
-                  @apply psui-sticky;
-                  min-width: 330px;
-    
-                  &:after {
-                    content: '';
-                    @apply psui-absolute psui-top-0;
-                  }
-    
-                  &:after {
-                    @apply psui-bg-gray-10 psui-rounded-tl-full ;
-                    box-shadow: -3px -3px 0px 0px #ffffff;
-                    z-index: 30;
-                    top: 0;
-                    left: 0;
-                    width: 10px;
-                    height: 10px;
-                  }
-                }
-              }
-              
-              &.closed {
-                 td {
-                  &:first-child {
-                    @apply psui-sticky;
-      
-                    &:before,
-                    &:after {
-                      content: '';
-                      @apply psui-absolute psui-top-0;
-                    }
-      
-                    &:after {
-                      @apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
-                      box-shadow: -8px 0px 0px 4px #ffffff;
-                      top: 0;
-                      left: 0px;
-                      height: calc(100%);
-                    }
-
-                    .actions-button {
-                      margin-left: 2px;
-                    }
-                  }
-                 }
-              }
-            }
-
-          }
-
-          &:not(.is-first):not(.removed-class) {
-            td {
-              &:first-child {
-                @apply psui-sticky;
-  
-                &:before,
-                &:after {
-                  content: '';
-                  @apply psui-absolute psui-top-0;
-                }
-  
-                &:before {
-                  @apply psui-bg-white psui-left-0;
-                  width: 14px;
-                  height: calc(100% + 1px);
-                }
-  
-                &:after {
-                  @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
-                  left: 8px;
-                }
-              }
-            }
-
-            &:hover {
-              td {
-                @apply psui-bg-blue-10;
-              }
-            }
-
-            &.opened {
-              td:first-child {
-                &:after {
-                  height: calc(100% + 1px);
-                }
-              }
-            }
-          }
-
-          &:not(.is-first) {
-            td {
-              &:first-child {
-                > div {
-                  margin-left: 10px;
-                }
-              }
-            }
-          }
-
-          &.is-last {
-            @apply psui-border-b-0;
-
-            &.removed-class {
-              td {
-                @apply psui-bg-gray-10 psui-text-gray-40 !important;
-                transition: background-color 0.5s ease;
-                
-                &:first-child {
-                  @apply psui-sticky;
-
-    
-                  &:after {
-                    @apply psui-bg-gray-10 psui-rounded-bl-full psui-absolute psui-bottom-0 psui-overflow-hidden;
-                    box-shadow: -3px 3px 0px 0px #fff;
-                    content: '';
-                    z-index: 30;
-                    bottom: 0;
-                    left: 0;
-                    width: 10px;
-                    height: 10px;
-                  }
-                }
-  
-              }         
-            }
-          }
-
-          &.is-active {
-            
-            td {
-              padding-top: 9px;
-              padding-bottom: 9px;
-              
-              .title {
-                @apply psui-text-14 psui-text-gray-50;
-              }
-            }
-
-            td:first-child {
-              @apply psui-bg-gray-10;
-              transition: background-color 0.5s ease;
-            }
-          }
-        }
-      }
+      @include renderFlexible;
     }
+
     .psui-show-childrens-on-hover:hover * {
-      opacity: 1!important
+      opacity: 1 !important;
     }
-  
+
     .psui-show-childrens-on-hover.absolute-childrens {
-      position: relative
+      position: relative;
     }
-  
+
     .psui-show-childrens-on-hover.absolute-childrens .helper {
       position: absolute;
-      top: 0;
-      right: -18px
+      top: 1px;
+      right: -18px;
     }
   }
-}
+}