qms-angular 1.0.89 → 1.0.90

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-3-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-3-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);
         }
     }
 }

package/src/themes/core/_chip.scss

@@ -1,10 +1,12 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .mat-chip{
     &.qms-chip{
         font-size: 0.875rem;
         font-weight: 400;
         font-family: Open Sans, Arial, Sans-Serif;
-        
+
         &.mat-standard-chip{
             background-color: black(0.04);
             border-radius: 4px;
@@ -34,10 +36,10 @@
                 opacity: .08;
             }
             .mat-chip-ripple{
-                border: 2px solid $active;
+                border: 2px solid theme-apply($active);
             }
         }
-        
+
         .mat-icon.leading-icon{
             padding: 4px;
         }
@@ -60,23 +62,23 @@
             width: 1.5rem;
             height: 1.5rem;
         }
-        
+
         &.qms-chip-selected, &.mat-chip-selected.qms-chip-selected{
             &.mat-standard-chip{
                 background-color: #E5EEFB;
-                color: $active;
+                color: theme-apply($active);
                 .mat-icon.leading-icon{
-                    color: $active;
+                    color: theme-apply($active);
                 }
             }
-            
+
 
             &.mat-standard-chip:hover, &.mat-standard-chip:focus{
                 &::after{
                     background-color: black(0.12);
                 }
             }
-    
+
             &.mat-standard-chip:focus{
                 .mat-chip-ripple{
                     border: 1px solid black(0.12);
@@ -93,4 +95,4 @@
         padding: 4px 10px;
         font-size: 0.75em;
     }
-}
+}

package/src/themes/core/_date-picker.scss

@@ -1,16 +1,17 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
 
 .qms-date {
   font-family: Open Sans;
 
   .mat-calendar-body-selected {
-    background-color: $primary;
+    background-color: theme-apply($primary);
   }
 
   .mat-calendar-body-in-range {
     &:before {
-      background-color: $primary-light-32-opacity;
+      background-color: theme-apply($primary-light-32-opacity);
     }
 
     .mat-calendar-body-cell-content,
@@ -30,7 +31,7 @@
   .mat-calendar-period-button {
     font-weight: 700;
     font-size: 1rem;
-    color: $default-color;
+    color: theme-apply($default-color);
   }
 
   .mat-calendar-period-button {
@@ -62,8 +63,8 @@
         > .mat-calendar-body-cell-content {
           &:not(.mat-calendar-body-selected) {
             &:not(.mat-calendar-body-comparison-identical) {
-              background-color: $primary-light-3-opacity;
-              color: $primary;
+              background-color: theme-apply($primary-light-3-opacity);
+              color: theme-apply($primary);
             }
           }
         }
@@ -75,8 +76,8 @@
       > .mat-calendar-body-cell-content {
         &:not(.mat-calendar-body-selected) {
           &:not(.mat-calendar-body-comparison-identical) {
-            background-color: $primary-light-3-opacity;
-            color: $primary;
+            background-color: theme-apply($primary-light-3-opacity);
+            color: theme-apply($primary);
           }
         }
       }