qms-angular 1.0.89 → 1.0.92

package/src/lib/components/select-process-document/select-process-document.component.scss

@@ -1,7 +1,7 @@
-@import "../../../themes/color.scss";
 @import "../../../themes/core/scrollbar.scss";
 @import "../../../themes/core/button.scss";
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .qmslib__related__popup__container {
   .input__field {
@@ -13,7 +13,7 @@
       padding: 10px;
       outline: none;
       border: none;
-      background: $background-input-text;
+      background: theme-apply($background-input-text);
     }
 
     .mat-icon {
@@ -99,14 +99,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 
@@ -127,13 +127,13 @@
     height: 450px;
     overflow-y: auto;
     margin-top: 12px;
-    
+
     &.panel__content {
       height: 450px;
       overflow: auto;
       margin-top: 12px;
     }
-  
+
     &.panel__content_item {
       height: 350px;
       overflow: auto;
@@ -141,11 +141,10 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -167,12 +166,12 @@
       display: flex;
       align-items: center;
       min-height: 40px;
-      
+
       .mat-icon {
         color: black(0.6);
         margin-right: 17px;
         min-width: fit-content;
-  
+
         svg {
           display: block;
           min-width: fit-content;
@@ -187,7 +186,7 @@
         width: 100%;
 
         .select-one-checked {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
     }
@@ -310,4 +309,4 @@ cdk-virtual-scroll-viewport {
   .related-viewport {
     min-height: 300px;
   }
-}
+}

package/src/lib/components/substance-conflict/substance-conflict.component.scss

@@ -1,4 +1,5 @@
-@import '../../../themes/color';
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .substance-conflict-container {
   .content {
@@ -8,12 +9,12 @@
   }
 
   .conflict {
-    background-color: $background-conflict-info;
+    background-color: theme-apply($background-conflict-info);
     padding: 15px;
     display: flex;
     font-size: 14px;
     max-width: 570px;
-    
+
     .icon {
       margin-right: 15px;
     }

package/src/lib/components/table/table.scss

@@ -1,4 +1,5 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 $heightAction: 46px;
@@ -84,7 +85,7 @@ button.btn-more {
   display: none;
 
   mat-icon {
-    color: $primary;
+    color: theme-apply($primary);
     vertical-align: middle;
   }
 }
@@ -148,4 +149,4 @@ button.btn-more {
   .block4 {
     display: none;
   }
-}
+}

package/src/lib/components/tooltip/tooltip.scss

@@ -1,6 +1,8 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 @import "../list/list-base";
+
 .qms-tooltip-container{
     background: #FAFAFA;
     border-radius: 0.25rem;

package/src/lib/components/tree/tree.component.scss

@@ -1,5 +1,5 @@
-@import "../../../themes/color";
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 .tree__container {
@@ -11,10 +11,10 @@
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 19px;
-  color: $default-color;
+  color: theme-apply($default-color);
 
   .mat-tree-node {
-    color: $tree-node-color;
+    color: theme-apply($tree-node-color);
     min-height: 0px;
 
     .mat-checkbox.qms-group-options {
@@ -30,12 +30,12 @@
     margin-left: 6px;
   }
   .button:hover {
-    background-color: $tree-node-background-color;
+    background-color: theme-apply($tree-node-background-color);
     border-radius: 2px;
     width: auto;
   }
   .button:focus {
-    background-color: $tree-node-background-color;
+    background-color: theme-apply($tree-node-background-color);
     border-radius: 2px;
     width: auto;
     outline: 0;
@@ -47,13 +47,13 @@
 
   .button-folder-boder:focus {
     outline: 0;
-    background-color: $tree-node-boder-color;
+    background-color: theme-apply($tree-node-boder-color);
     border-radius: 2px;
     width: auto;
   }
 
   .button-folder-boder:hover {
-    background-color: $tree-node-boder-color;
+    background-color: theme-apply($tree-node-boder-color);
     border-radius: 2px;
     width: auto;
   }
@@ -85,7 +85,7 @@
     &.bgSelected {
 
       .select-one-checked {
-        color: $primary;
+        color: theme-apply($primary);
       }
     }
   }
@@ -108,7 +108,7 @@
     cursor: pointer;
 
     .select-one-checked {
-      color: $primary;
+      color: theme-apply($primary);
     }
   }
 
@@ -121,7 +121,7 @@
 
   .tree-branch {
     &:hover {
-      background-color: $primary-light-3-opacity;
+      background-color: theme-apply($primary-light-12-opacity);
     }
   }
 
@@ -169,7 +169,7 @@ svg {
   }
 }
 
-.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{  
+.mat-checkbox.mat-checkbox-disabled.qms-group-options.mat-checkbox-checked .mat-checkbox-background{
   background-color: #e0e0e0 !important;
 }
 

package/src/lib/components/treeNew/tree.component.scss

@@ -1,20 +1,17 @@
-@import "../../../themes/color";
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 .tree__container {
-  // .mat-tree{
-  //   background: #00283A;
-  // }
   font-family: "Open Sans";
   font-style: normal;
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 19px;
-  color: $default-color;
+  color: theme-apply($default-color);
 
   .mat-tree-node {
-    color: $tree-node-color;
+    color: theme-apply($tree-node-color);
     min-height: 0px;
 
     .mat-checkbox.qms-group-options {
@@ -30,12 +27,12 @@
     margin-left: 6px;
   }
   .button:hover {
-    background-color: $tree-node-background-color;
+    background-color: theme-apply($tree-node-background-color);
     border-radius: 2px;
     width: auto;
   }
   .button:focus {
-    background-color: $tree-node-background-color;
+    background-color: theme-apply($tree-node-background-color);
     border-radius: 2px;
     width: auto;
     outline: 0;
@@ -47,13 +44,13 @@
 
   .button-folder-boder:focus {
     outline: 0;
-    background-color: $tree-node-boder-color;
+    background-color: theme-apply($tree-node-boder-color);
     border-radius: 2px;
     width: auto;
   }
 
   .button-folder-boder:hover {
-    background-color: $tree-node-boder-color;
+    background-color: theme-apply($tree-node-boder-color);
     border-radius: 2px;
     width: auto;
   }
@@ -85,15 +82,11 @@
     &.bgSelected {
 
       .select-one-checked {
-        color: $primary;
+        color: theme-apply($primary);
       }
     }
   }
 
-  // span.text-node {
-  //   // margin-left: 17px;
-  // }
-
   .text-node-parent {
     width: 100%;
     display: flex;
@@ -108,7 +101,7 @@
     cursor: pointer;
 
     .select-one-checked {
-      color: $primary;
+      color: theme-apply($primary);
     }
   }
 
@@ -121,7 +114,7 @@
 
   .tree-branch {
     &:hover {
-      background-color: $primary-light-3-opacity;
+      background-color: theme-apply($primary-light-12-opacity);
     }
   }
 

package/src/lib/qms-ckeditor-components/qms-ckeditor.component.scss

@@ -1,5 +1,6 @@
 @import "./styles/style.scss";
-@import "../../themes/core/colors";
+@import "../../themes/theme/variable";
+@import "../../themes/theme/mixins";
 @import "../../themes/core/typography";
 
 .qmsckeditor_container {
@@ -81,7 +82,7 @@
   .ck.ck-editor__editable {
     &:not(.ck-editor__nested-editable).ck-focused {
       border: 1px solid #c4c4c4;
-      border-bottom: 2px solid $primary;
+      border-bottom: 2px solid theme-apply($primary);
       border-radius: 4px;
       box-shadow: none;
       background-color: black(0.08);

package/src/themes/_non-bg-scrollbar.scss

@@ -1,10 +1,11 @@
-@import './core/colors';
+@import './theme/variable';
+
 ::-webkit-scrollbar {
     width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-    background: transparent; 
+    background: transparent;
     background-clip: content-box;
 }
 
@@ -30,4 +31,4 @@
 ::-webkit-scrollbar-track:hover {
     background: black(0.12);
     background-clip: content-box;
-}
+}

package/src/themes/core/_app-bar.scss

@@ -1,14 +1,15 @@
 @import "../../lib/components/list/list.scss";
-@import "../../themes/core/colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 
 .qms-app-bar-dark {
-    background: #00324E !important;
+    background: theme-apply($-qms-app-bar-dark-background-color);
     width     : 100% !important;
     height    : 56px !important;
 }
 
 .qms-app-bar-light {
-    background: #E4E4E4 !important;
+    background: theme-apply($-qms-app-bar-light-background-color);
     width     : 100% !important;
     height    : 56px !important;
-}
+}

package/src/themes/core/_button.scss

@@ -1,4 +1,6 @@
-@import '../color.scss';
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .qms__popup {
   .button__close {
     float: right;
@@ -11,7 +13,7 @@
 .qms__danger {
   button {
     border: none;
-    color: $text-white;
+    color: theme-apply($text-white);
     padding: 0;
     text-align: center;
     text-decoration: none;
@@ -27,18 +29,18 @@
   }
 
   .red {
-    background-color: $button-red-background;
+    background-color: theme-apply($button-red-background);
     margin-left: 10px;
   }
 
   .yellow {
-    background-color: $button-yellow-background;
+    background-color: theme-apply($button-yellow-background);
     margin-left: 10px;
-    color: $popup-title-color;
+    color: theme-apply($popup-title-color);
   }
 
   .green {
-    background-color: $button-green-background;
+    background-color: theme-apply($button-green-background);
     margin-left: 10px;
   }
 }
@@ -61,20 +63,20 @@
   }
 
   .confirm {
-      background: $button-background;
+      background: theme-apply($button-background);
   }
   .confirm:hover {
-      background: $primary-button-background-color;
-      color: $primary-button-text-color;
+      background: theme-apply($primary-button-background-color);
+      color: theme-apply($primary-button-text-color);
   }
   .confirm:disabled {
     cursor: not-allowed;
   }
   .cancel {
-      background: $button-background;
+      background: theme-apply($button-background);
   }
   .cancel:hover {
-    background: $primary-button-background-color;
-    color: $primary-button-text-color;
+    background: theme-apply($primary-button-background-color);
+    color: theme-apply($primary-button-text-color);
   }
 }

package/src/themes/core/_checkbox.scss

@@ -1,5 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 // CHECKBOX STYLES
 .mat-checkbox {
@@ -34,7 +35,7 @@
     .text-label {
       font-size: 1rem;
       line-height: 28px;
-      color: $default-color;
+      color: theme-apply($default-color);
       white-space: break-spaces;
     }
 
@@ -46,7 +47,7 @@
     }
 
     .mat-error {
-      color: $error;
+      color: theme-apply($error);
     }
 
     &.cdk-keyboard-focused {
@@ -54,25 +55,20 @@
         .mat-checkbox-persistent-ripple {
           opacity: 1;
           background-color: black(0.08);
-          // border: 2px solid $primary;
-          // background: $secondary-light-6-opacity;
         }
       }
     }
 
-    &.cdk-keyboard-focused.ng-invalid {         
+    &.cdk-keyboard-focused.ng-invalid {
       .mat-checkbox-persistent-ripple {
         opacity: 1;
         background-color: black(0.08);
-        // border: 2px solid $secondary;
       }
     }
 
     &.mat-checkbox-checked.cdk-keyboard-focused
       .mat-checkbox-persistent-ripple {
-      // opacity: 1;
-      // border: 2px solid $secondary;
-      background: $secondary-light-6-opacity;
+      background: theme-apply($secondary-light-6-opacity);
     }
 
     &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
@@ -83,12 +79,6 @@
       }
     }
 
-    &.error-form {
-      .mat-checkbox-frame {
-        // border: 2px solid $error;
-      }
-    }
-
     &.mat-checkbox-checked {
       background: rgba(207, 71, 20, 0.12);
     }
@@ -96,21 +86,16 @@
     &.mat-checkbox-checked {
       &:not(.mat-checkbox-disabled) {
         .mat-ripple-element {
-          background: $secondary-light-6-opacity;
+          background: theme-apply($secondary-light-6-opacity);
         }
       }
     }
 
-    &:active:not(.mat-checkbox-disabled) {
-      .mat-ripple-element {
-        // background: black(0.12) !important;
-      }
-    }
-
+    
     &.mat-checkbox-indeterminate,
     &.mat-checkbox-checked {
       .mat-checkbox-background {
-        background: $secondary;
+        background: theme-apply($secondary);
       }
     }
   }

package/src/themes/core/_chip-input.scss

@@ -1,22 +1,24 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "form";
+
 .mat-form-field{
     &.qms-chip-input, &.qms-chip-input-select{
         font-family: Open Sans;
         &.mat-form-field-disabled {
             .mat-form-field-flex {
-              background-color: $disabled;
-      
+              background-color: theme-apply($disabled);
+
               &:hover {
-                background-color: $disabled;
+                background-color: theme-apply($disabled);
               }
             }
-      
+
             mat-icon,
             .mat-input-element {
               color: black(0.38);
             }
-      
+
             button {
               pointer-events: none;
             }
@@ -24,11 +26,11 @@
 
         &.mat-focused {
             .mat-form-field-label {
-              color: $primary;
+              color: theme-apply($primary);
             }
             .mat-form-field-flex {
                 background-color: black(0.04);
-                border-bottom: 2px solid $primary;
+                border-bottom: 2px solid theme-apply($primary);
                 padding: $padding-field-flex;
                 .mat-form-field-flex{
                     &:hover {
@@ -37,32 +39,32 @@
                 }
             }
         }
-    
+
         &.mat-form-field-invalid {
         .mat-form-field-label {
-            color: $error;
+            color: theme-apply($error);
         }
-    
+
         mat-icon,
         .material-icons {
             color: black(0.54);
         }
-    
+
         .mat-form-field-ripple {
             height: 2px;
-            background-color: $error;
+            background-color: theme-apply($error);
             transform: scaleX(1);
         }
-    
+
         .mat-form-field-flex {
-            border-bottom: 2px solid $error;
+            border-bottom: 2px solid theme-apply($error);
         }
         }
-       
+
         .mat-form-field-wrapper {
             border-radius: 0.25em;
         }
-        
+
         .mat-form-field-flex{
             font-weight: 600;
             padding: $padding-field-flex;
@@ -121,7 +123,7 @@
                     button{
                         width: 1.5rem;
                         height: 1.5rem;
-                    }    
+                    }
                 }
             }
         }
@@ -143,25 +145,25 @@
 
         &.mat-form-field-invalid {
             .mat-form-field-underline:before {
-                background-color: $error;
+                background-color: theme-apply($error);
             }
         }
-    
+
         .mat-hint {
             font-size: 0.75rem;
             line-height: 16px;
             font-style: normal;
         }
-    
+
         .mat-form-field-subscript-wrapper {
             margin-top: 2px;
         }
-      
+
 
         .mat-form-field-prefix {
             margin-right: 0.75rem;
             color: black(0.6);
-      
+
             mat-icon > svg {
               margin-bottom: 0.5em;
             }
@@ -190,7 +192,7 @@
                         .mat-chip.qms-chip.mat-standard-chip{
                             margin: 2px 4px 2px 4px;
                         }
-                        input{ 
+                        input{
                             padding: 6px 0px 6px 0px;
                         }
                     }
@@ -218,7 +220,7 @@
                         .mat-chip.qms-chip.mat-standard-chip{
                             margin: 4px;
                         }
-                        input{ 
+                        input{
                             padding: 0px;
                         }
                     }
@@ -242,10 +244,10 @@
         }
     }
     .qms-dropdown-menu-item-selected{
-        color: $active;
+        color: theme-apply($active);
 
         .mat-icon{
-            color: $active;
+            color: theme-apply($active);
         }
     }
 }