@policystudio/policy-studio-ui-vue 1.0.26 → 1.0.30

package/src/assets/scss/components/PsDataTable.scss

@@ -0,0 +1,50 @@
+@layer components{
+
+  .psui-el-table {
+    @apply psui-w-full psui-table-fixed psui-border psui-border-gray-20 psui-text-small psui-text-gray-60 psui-border-separate psui-overflow-hidden psui-rounded;
+    border-spacing: 0;
+
+    &.psui-text-right {
+      th,
+      td {
+        &:first-child {
+          text-align: left;
+        }
+      }
+    }
+
+    thead,
+    tfoot {
+      th {
+        @apply psui-bg-gray-10;
+      }
+    }
+
+    th, td {
+      border-bottom: 1px solid #e6ecf2;
+    }
+    
+    th,
+    td,
+    tr {
+      padding: 11px 16px;
+
+      &:not(:last-child) {
+        border-right: 1px solid #e6ecf2;
+      }
+    }
+
+    thead {
+      th {
+        @apply psui-bg-gray-10 psui-text-gray-80 psui-capitalize psui-font-bold;
+      }
+    }
+
+    tfoot {
+      th { 
+        border-bottom: 0; 
+      }
+    }
+  }
+
+}

package/src/assets/scss/components/PsDialog.scss

@@ -57,15 +57,24 @@
         
 
     &.theme-informative {
-      @apply psui-bg-blue-20 psui-text-blue-60;    
+      @apply psui-bg-blue-20 psui-text-blue-60;
+      .psui-el-dialog-message {
+        @apply psui-text-blue-60;
+      }
     }
 
     &.theme-success {
       @apply psui-bg-green-10 psui-text-green-70;
+      .psui-el-dialog-message {
+        @apply psui-text-green-70;
+      }
     }
 
     &.theme-alert {
       @apply psui-bg-yellow-10 psui-text-yellow-70;
+      .psui-el-dialog-message {
+        @apply psui-text-yellow-70;
+      }
     }
   }
 }

package/src/assets/scss/components/PsDotLoader.scss

@@ -0,0 +1,45 @@
+@layer components {
+
+    .psui-el-dotloader {
+        @apply psui-flex psui-items-center psui-justify-center psui-h-full;
+        padding: 0;
+
+        .psui-el-dotloader-wrapper {
+            @apply psui-relative psui-p-4 psui-flex;
+            height: 15px;
+            span {
+                @apply psui-rounded-full psui-relative psui-float-left psui-left-0 psui-top-0 psui-mr-1;
+                background: #b7b7b7;
+                height: 15px;
+                width: 15px;
+                opacity: 0.15;
+                transform: scale(1);
+                animation: dots-animation 1s 0.2s ease-in-out infinite;
+
+                &:nth-of-type(1) {
+                    animation-delay: 0.2s;
+                }
+
+                &:nth-of-type(2) {
+                    animation-delay: 0.4s;
+                }
+
+                &:nth-of-type(3) {
+                    animation-delay: 0.6s;
+                }      
+            }
+
+            @keyframes dots-animation {
+                0%, 70%, 100% {
+                    opacity: 0.15;
+                    transform: scale(1);
+                }
+
+                35% {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsDropdown.scss

@@ -0,0 +1,44 @@
+@layer components {
+    .psui-el-dropdown-menu {
+        @apply psui-relative psui-inline-block psui-text-left psui-bg-white;
+        padding: 0px 20px;
+        width: 230px;
+
+        &:hover {
+            @apply psui-cursor-pointer psui-bg-blue-10 psui-text-blue-60;
+            
+        }
+
+        &:first-child {
+
+        }
+
+        &-button {
+            @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
+            background-color: transparent;
+            padding-top: 2.5px;
+            padding-bottom: 2.5px;
+            min-height: 27px;
+            font-size: 0.875rem;
+
+            &:focus {
+                outline: none;
+                box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+            }
+        }
+
+        &-dialog {
+            @apply psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-z-50 psui-opacity-0;
+            transition: opacity 150ms ease-in-out;
+
+            &-category-divider {
+                @apply w-full;
+
+                h2 {
+                    @apply psui-text-gray-20 psui-font-bold psui-whitespace-no-wrap psui-mb-4;
+                }
+            }
+
+        }
+    }
+}

package/src/assets/scss/components/PsHighlightRippleDot.scss

@@ -0,0 +1,48 @@
+@layer components {
+    .psui-el-highlight-ripple-icon {
+        @apply psui-static psui-box-border;
+
+        .psui-el-icon {
+            @apply psui-rounded-full psui-w-2 psui-h-2 psui-relative;
+            background-color: #5db883;
+            margin: 100px auto;
+
+            &::before, &::after {
+                @apply psui-rounded-full psui-absolute psui-origin-center;
+                background-color: rgba(93, 184, 131, 0.3);
+                border: solid 0px;
+                content: '';
+                width: 36px;
+                height: 36px; 
+                left: -8px;
+                top: -8px;
+                transform: scale(1) translate(-1px, -1px);
+                z-index: -1;
+            }
+
+            &::before {
+                animation: ripple 1s infinite;
+            } 
+
+            &::after {
+                animation: ripple 1s infinite;
+
+            }
+        }
+    }
+
+    @keyframes ripple {
+        0% {
+            @apply psui-opacity-100 psui-w-0 psui-h-0;
+            left: 5px;
+            top: 5px; 
+        }
+        100% {
+            @apply psui-opacity-0;
+            left: -13px;
+            top: -13px;
+            width: 36px; 
+            height: 36px; 
+        }
+    }
+}

package/src/assets/scss/components/PsInlineSelector.scss

@@ -0,0 +1,96 @@
+@layer components {
+    .psui-el-inline-selector {
+        @apply psui-w-auto psui-max-w-full psui-text-h4 psui-relative psui-flex-shrink-0 psui-text-blue-60 psui-box-border;
+
+        ::-webkit-scrollbar {
+            @apply psui-bg-gray-30;
+            display: block;
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            @apply psui-bg-blue-70 psui-rounded;
+        }
+
+        input {
+            @apply psui-border-b psui-border-dashed psui-border-blue-50;
+            transition: 300ms ease-in all;
+            padding-bottom: 3px;
+
+            &::placeholder {
+                @apply psui-text-h4 psui-text-gray-40
+            }
+        }
+
+        .psui-el-inline-selector-input-wrapper {
+            @apply psui-relative;
+
+            span {
+                @apply psui-block psui-opacity-0;
+                min-width: 100px;
+            }
+
+            input {
+                @apply psui-appearance-none psui-bg-transparent psui-block psui-absolute psui-w-full psui-left-0 psui-top-0;
+
+                &:hover {
+                    @apply psui-text-blue-50;
+                }
+            }
+        }
+
+        .psui-el-inline-selector-dropdown-wrapper {
+            @apply psui-absolute psui-left-0 psui-bg-white psui-rounded psui-shadow-elevation-20 psui-z-50 psui-overflow-y-auto;
+            max-height: 30vh;
+            min-width: 300px;    
+
+            .psui-el-inline-selector-dropdown {
+                @apply psui-flex psui-bg-white;
+    
+                
+                .psui-el-inline-selector-error {
+                    @apply psui-w-full psui-p-3 psui-flex psui-flex-col;
+
+                    h3 {
+                        @apply psui-text-red-20
+                    }
+
+                    p {
+                        @apply psui-text-gray-50
+                    }
+                }
+
+                ul {
+                    @apply psui-w-full psui-bg-white;
+
+                    li {
+                        @apply psui-flex psui-cursor-pointer;
+                        padding: 7.5px 16px;
+
+                        &:hover {
+                                @apply psui-bg-blue-20;
+                                
+                            span p {
+                                    @apply psui-text-blue-60;
+                                }
+                        }
+
+                        span {
+                            @apply psui-flex psui-items-center psui-w-full;
+
+                            > p {
+                                @apply psui-inline-block psui-text-big psui-text-gray-60 psui-flex-shrink-0;
+                            }
+
+                            p + p {
+                                @apply psui-text-gray-40 psui-ml-auto psui-inline-block;
+                                font-size: 12px;
+                                line-height: 120%;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsInputSelect.scss

@@ -0,0 +1,104 @@
+@layer components {
+    .psui-el-input-select {
+        @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
+
+        &.disabled {
+            @apply psui-pointer-events-none;
+
+            label {
+                @apply psui-text-gray-40 
+            }
+
+            select {
+                @apply  psui-text-gray-40 psui-border-gray-20 psui-bg-gray-20 !important
+            }
+
+            &::after {
+                @apply psui-z-20 psui-text-gray-50 !important;
+            }
+        }
+
+        &.layout-default {
+
+            &.selected {
+                select {
+                    @apply psui-border-blue-50 psui-text-gray-60
+                }
+            }
+    
+            &::after {
+                @apply psui-absolute psui-inline-block psui-text-gray-50;
+                content: 'arrow_drop_down';
+                font-family: 'Material Icons Round';
+                font-size: 24px;
+                top: 26px;
+                right: 15px;
+                z-index: -20;
+            }
+    
+            select {
+                @apply psui-appearance-none psui-bg-transparent psui-text-big psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
+                padding: 11.5px 16px;
+    
+                &:hover,
+                &:active {
+                    @apply psui-border-blue-50 psui-text-gray-60
+                }
+    
+                &:focus {
+                    @apply psui-border-blue-60 psui-text-gray-60
+                }
+            }
+
+        }
+
+
+        label {
+            @apply psui-flex psui-text-gray-80 psui-text-big psui-items-center psui-w-full psui-font-bold psui-pointer-events-none
+        }
+
+        .psui-el-input-helper {
+            @apply psui-text-gray-50;
+            font-size: 12px;
+            line-height: 120%;
+        }
+
+        &.layout-mini {
+
+
+            select {
+                @apply psui-text-small psui-appearance-none psui-bg-transparent psui-w-full psui-border psui-border-gray-30;
+                border-radius: 4px;
+                padding: 7px 8px;
+
+                &:hover,
+                &:active {
+                    @apply psui-border-green-20 psui-text-gray-50
+                }
+    
+                &:focus {
+                    @apply psui-border-green-70 psui-text-gray-50
+                }
+    
+
+            }
+
+            &::after {
+                @apply psui-absolute psui-inline-block psui-text-gray-50 ;
+                content: 'unfold_more';
+                font-family: 'Material Icons Round';
+                font-size: 18px;
+                top: 4px;
+                right: 4px;
+                z-index: -20;
+            }
+            
+            &.selected {
+                select {
+                    @apply psui-border-green-20 psui-text-green-70
+                }
+            }
+    
+        }
+    }
+}

package/src/assets/scss/components/PsInputTextArea.scss

@@ -0,0 +1,49 @@
+@layer components {
+    .psui-el-input-textarea {
+        @apply psui-block psui-w-full;
+        font-family: inherit; 
+
+        &.disabled {
+            @apply psui-text-gray-40 psui-block psui-w-full !important; 
+
+            .psui-el-input-textarea-wrapper {
+                label {
+                    @apply psui-bg-gray-10 !important;
+                }
+
+                textarea {
+                    @apply psui-appearance-none psui-w-full psui-bg-gray-20 psui-border-gray-20 psui-cursor-default !important;
+                }
+            }
+        }
+
+        .psui-el-input-textarea-wrapper {
+            @apply psui-flex psui-flex-col;
+
+            label {
+                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1
+            }
+
+            textarea {
+                @apply psui-appearance-none psui-w-full psui-h-full psui-text-big psui-border psui-border-gray-30 psui-bg-white psui-text-gray-60 psui-resize-none psui-rounded-md psui-p-4;
+            
+                &:hover,
+                &:focus,
+                &:active {
+                    @apply psui-border-blue-60
+                }
+
+                ::placeholder {
+                    @apply psui-text-big
+                }
+            }
+        }
+
+        .psui-el-input-textarea-message {
+            @apply psui-text-gray-50 psui-flex psui-font-normal;
+            font-size: 12px;
+            line-height: 120%;
+            padding: 5px 0px;    
+        }
+    }
+}

package/src/assets/scss/components/PsMiniTag.scss

@@ -0,0 +1,36 @@
+@layer components {
+    .psui-el-mini-tag {
+        @apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
+        width: fit-content;
+
+
+        div {
+            @apply psui-w-full psui-font-bold;
+            padding: 1px 8px 0px 8px;
+            font-size: 10px;
+            letter-spacing: 0.5px;
+        }
+
+        &-layout{
+            &-info {
+                @apply psui-bg-blue-20 psui-text-blue-60
+            }
+            
+            &-success {
+                @apply psui-bg-green-10 psui-text-green-70
+            }
+
+            &-warning {
+                @apply psui-bg-yellow-10 psui-text-yellow-70
+            }
+
+            &-error {
+                @apply psui-bg-red-10 psui-text-red-20
+            }
+
+            &-default {
+                @apply psui-bg-gray-20 psui-text-gray-50
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsProgressBar.scss

@@ -0,0 +1,24 @@
+@layer components {
+    .psui-el-simple-progress-bar {
+        @apply psui-relative psui-h-2;
+        width: 100px;
+        border-radius: 15px;
+
+        &-percentage {
+            @apply psui-absolute psui-block psui-h-full psui-overflow-visible;
+            max-width: 100px;
+            border-radius: 15px;
+            background-size: 30px 30px;
+            animation: animate-stripes 3s linear infinite;
+        }
+
+        @keyframes animate-stripes {
+            0% {
+                background-position: 0 0;
+            }
+            100% {
+                background-position: 60px 0;
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsRadioButton.scss

@@ -0,0 +1,78 @@
+@layer components {
+
+        .psui-el-radio {
+            @apply psui-relative psui-text-gray-50;
+
+            &.disabled {
+                .psui-el-checkmark {
+                    @apply psui-cursor-default psui-text-gray-40 !important
+                }
+
+                .psui-el-checkmark::before {
+                    @apply psui-text-gray-30 !important
+                } 
+            }
+
+            &.size-small {
+                @apply psui-text-small;
+
+                input {
+                    @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+                    &:checked ~.psui-el-checkmark::before {
+                        @apply psui-text-blue-50;
+                        font-size: 18px;
+                        content: 'radio_button_checked';
+                        font-family: 'Material Icons Round';                            
+                    }
+                }
+
+                .psui-el-checkmark {
+                    @apply psui-block psui-cursor-pointer;
+                    height: 18px;
+
+                    span {
+                        margin-left: 8px;
+                    }
+
+                    &::before {
+                        content: 'radio_button_unchecked';
+                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        font-family: 'Material Icons Round';
+                        font-size: 18px;
+                    }
+                }
+            }
+
+            &.size-big {
+                @apply psui-text-small;
+
+                input {
+                    @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+
+                    &:checked ~.psui-el-checkmark::before {
+                        @apply psui-text-blue-50;
+                        font-size: 24px;
+                        content: 'radio_button_checked';
+                        font-family: 'Material Icons Round';                            
+                    }
+                }
+
+                .psui-el-checkmark {
+                    @apply psui-block psui-cursor-pointer;
+                    height: 24px;
+
+                    span {
+                        margin-left: 8px;
+                    }
+
+                    &::before {
+                        content: 'radio_button_unchecked';
+                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        font-family: 'Material Icons Round';
+                        font-size: 24px;
+                    }
+                }
+            }
+        }
+}

package/src/assets/scss/components/PsSlider.scss

@@ -0,0 +1,11 @@
+@layer components {
+    .psui-el-slider {
+        .psui-el-slider-label {
+            @apply psui-mb-2;
+
+            span {
+                @apply psui-text-gray-50 psui-text-small
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsSwitch.scss

@@ -0,0 +1,66 @@
+@layer components {
+    .psui-el-switch {
+        @apply psui-relative psui-inline-block psui-rounded-3xl;
+            &.size-big{
+                width: 46px;
+                height: 24px;  
+            }
+            &.size-small {
+                width: 30px;
+                height: 16px;
+
+                .psui-el-switch-button {
+                     &.toggle-false{   
+                        &::before {
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
+                            left: 2px;
+                            top: 2px;
+                            content: ''; 
+                        }
+                    }
+                    
+                    &.toggle-true {
+                        @apply psui-bg-green-20;
+    
+                        &::before {
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
+                            left: 16px;
+                            top: 2px;
+                            content: '';
+                        }
+                    }
+                }   
+            }
+            :focus {
+                @apply psui-outline-none;
+            }
+            input {
+                @apply psui-opacity-0 psui-w-0 psui-h-0;
+            }
+            .psui-el-switch-button {
+                @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
+                
+                 &.toggle-false{   
+                    &::before {
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        left: 2px;
+                        top: 2px;
+                        content: '';
+                    }
+                }
+                
+                &.toggle-true {
+                    @apply psui-bg-green-20;
+
+                    &::before {
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        left: 24px;
+                        top:2px;
+                        content: '';
+                    }
+                }
+            }
+    }
+}