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

package/src/assets/scss/components/PsTagScope.scss

@@ -1,6 +1,6 @@
 @layer components {
   .psui-el-tag-scope {
-    @apply psui-flex psui-items-center psui-rounded psui-py-1 psui-pr-2 psui-h-6 psui-bg-gray-10 psui-text-gray-50;
+    @apply psui-flex psui-items-center psui-rounded psui-py-1 psui-pr-2 psui-h-6 psui-bg-gray-10 psui-text-gray-60;
     width: 150px;
 
     &-icon {

package/src/assets/scss/components/PsTestimonialCard.scss

@@ -10,7 +10,7 @@
     }
 
     &-description {
-      @apply psui-text-16 psui-text-blue-80 psui-italic;
+      @apply psui-text-16 psui-text-blue-80 psui-italic psui-leading-6;
       margin-bottom: 33px;
     }
 
@@ -23,7 +23,7 @@
 
       &-position,
       &-jurisdiction {
-        @apply psui-text-gray-50 psui-text-14;    
+        @apply psui-text-gray-60 psui-text-14 psui-leading-[130%];    
       }
     }
   }

package/src/assets/scss/components/PsToast.scss

@@ -1,62 +1,64 @@
 @layer components {
-    .psui-el-toast {
-        @apply psui-flex psui-items-center psui-text-16 psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
-
-        &:focus {
-        outline: none;
-      }
-
-        &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
-
-        .psui-el-toast-icon {
-            @apply psui-flex psui-mr-4;
-            font-size: 24px; 
-        }
-        
-        .psui-el-toast-message {
-            @apply psui-mr-auto
-        }
-
-        .psui-el-toast-actions {
-            @apply psui-flex psui-gap-4 psui-text-accentSmall;            
-        }
-
-        &.fill-intense.layout{
-                &-info {
-                    @apply psui-bg-blue-60
-                }
-                
-                &-success {
-                    @apply psui-bg-green-20
-                }
-
-                &-warning {
-                    @apply psui-bg-yellow-20
-                }
-
-                &-error {
-                    @apply psui-bg-red-20
-                }
-            }    
-        
-        &.fill-soft.layout {
-            &-info {
-                @apply psui-text-blue-60 psui-bg-blue-20;
-            }
-            
-            &-success {
-                @apply psui-text-green-20 psui-bg-green-10
-            }
-            &-warning {
-                @apply psui-text-yellow-20 psui-bg-yellow-10
-            }
-            &-error {
-                @apply psui-text-red-20 psui-bg-red-10
-            }
-        }
+  .psui-el-toast {
+    @apply psui-flex psui-items-center psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-shadow-elevation-20;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+      border-radius: 6px;
+    }
+
+    .psui-el-toast-icon {
+      @apply psui-flex psui-mr-4;
+      font-size: 24px;
+    }
+
+    .psui-el-toast-message {
+      @apply psui-mr-auto psui-text-16 psui-font-semibold;
+    }
+
+    .psui-el-toast-actions {
+      @apply psui-flex psui-gap-4 psui-text-16 psui-font-bold;
+    }
+
+    &.fill-intense.layout {
+      &-info {
+        @apply psui-bg-blue-60;
+      }
+
+      &-success {
+        @apply psui-bg-green-80;
+      }
+
+      &-warning {
+        @apply psui-bg-yellow-80;
+      }
+
+      &-error {
+        @apply psui-bg-red-80;
+      }
+    }
+
+    &.fill-soft.layout {
+      &-info {
+        @apply psui-text-blue-60 psui-bg-blue-20;
+      }
+
+      &-success {
+        @apply psui-text-green-80 psui-bg-green-10;
+      }
+
+      &-warning {
+        @apply psui-text-gray-80 psui-bg-yellow-10;
+      }
+
+      &-error {
+        @apply psui-text-red-80 psui-bg-red-10;
+      }
     }
-}
+  }
+}

package/src/assets/scss/components/PsToggle.scss

@@ -1,5 +1,4 @@
-@layer components{
-
+@layer components {
   .psui-el-toggle {
     @apply psui-flex psui-bg-gray-10 psui-items-center;
     padding: 2px;
@@ -9,7 +8,7 @@
     button {
       @apply transition-default psui-inline-flex psui-text-14 psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
       border-radius: 4px;
-      padding:1px 8px;
+      padding: 1px 8px;
 
       &.status-active {
         @apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;
@@ -21,7 +20,5 @@
         }
       }
     }
-    
   }
-
-}
+}

package/src/assets/scss/components/PsTooltip.scss

@@ -114,7 +114,7 @@
             }
 
             .psui-el-tooltip-content-wrapper {
-              @apply psui-text-gray-50;
+              @apply psui-text-gray-60;
 
               button {
                 @apply psui-bg-blue-20 psui-text-blue-60;

package/src/assets/scss/components/_PsTableResults.scss

@@ -19,7 +19,7 @@
       }
 
       .description {
-        @apply .psui-flex .psui-flex-col .psui-text-gray-50 .psui-pl-10 .psui-text-right;
+        @apply .psui-flex .psui-flex-col psui-text-gray-60 .psui-pl-10 .psui-text-right;
         padding-top: 0.813rem;
         padding-bottom: 0.813rem;
         min-height: 3.5rem;

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

@@ -0,0 +1,200 @@
+@mixin renderComparison {
+  &.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-60 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-60 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-60 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;
+        }
+      }
+    }
+  }
+}