qms-angular 1.0.88 → 1.0.91

package/src/themes/core/_dropdown-menu.scss

@@ -1,5 +1,6 @@
 @import  "../../lib/components/list/list.scss";
-@import "../../themes/core/colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 
 .mat-menu-item{
     &.qms-dropdown-menu-item{
@@ -32,25 +33,25 @@
                 background: black(0.08);
                 }
             }
-        
+
             &:active {
                 &:not([aria-disabled="true"]) {
                 background: black(0.12);
                 }
-            }   
-        
-            
+            }
+
+
             &.cdk-keyboard-focused {
-                border: 2px solid $primary;
+                border: 2px solid theme-apply($primary);
                 border-radius: $border-radius-default;
             }
-        
+
             &.active-item {
-                color: $primary;
+                color: theme-apply($primary);
                 .mat-icon{
                     color: #1954A9;
                 }
-                
+
                 @include color-inherit;
             }
         }
@@ -72,11 +73,11 @@
                     @include size($size-md);
                   }
             }
-            
+
             .caption{
                 font-size: 14px;
                 font-family: Open Sans, Arial, Sans-Serif;
             }
         }
     }
-}
+}

package/src/themes/core/_file-upload.scss

@@ -1,14 +1,15 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 
 
 .mat-form-field:not(.mat-form-field-disabled){
     &.qms-file-upload{
         &.mat-focused{
             mat-icon{
-                color: $active;
-                
+                color: theme-apply($active);
+
                 svg{
-                    fill: $active;
+                    fill: theme-apply($active);
                 }
             }
 
@@ -24,10 +25,10 @@
                 border-bottom: 2px solid #1954A9;
 
                 mat-icon{
-                    color: $active;
-                    
+                    color: theme-apply($active);
+
                     svg{
-                        fill: $active;
+                        fill: theme-apply($active);
                     }
                 }
 
@@ -64,7 +65,7 @@ qms-list{
                 button{
                     font-weight: 600;
                     font-family: "Open Sans";
-                    color: $active;
+                    color: theme-apply($active);
                     cursor: pointer;
                     font-size: 0.875em;
                     padding: 0;
@@ -75,9 +76,9 @@ qms-list{
                 span{
                     cursor: pointer;
                 }
-                
+
             }
         }
-        
+
     }
-}
+}

package/src/themes/core/_form-prefix.scss

@@ -1,5 +1,7 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
+
 .mat-form-field {
   &.qms-form {
     .mat-form-field-flex {
@@ -11,7 +13,7 @@
           .mat-form-field-prefix {
             margin-right: 0.75rem;
             mat-icon > svg {
-              fill: $active;
+              fill: theme-apply($active);
           }
         }
       }
@@ -21,7 +23,7 @@
         .mat-form-field-prefix {
           margin-right: 0.75rem;
           mat-icon > svg {
-            fill: $error;
+            fill: theme-apply($error);
         }
       }
     }
@@ -35,4 +37,4 @@
       }
     }
   }
-}
+}

package/src/themes/core/_form.scss

@@ -1,5 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 $height-input: 51px;
 $padding-field-flex: 0.25rem 1rem 0.25rem 1rem;
@@ -110,32 +111,32 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
       &.mat-focused {
         .mat-form-field-label {
-          color: $primary;
+          color: theme-apply($primary);
         }
 
         mat-icon,
         .material-icons {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
 
       &.mat-form-field-invalid {
         .mat-form-field-label {
-          color: $error;
+          color: theme-apply($error);
         }
       }
 
       &:not(.mat-form-field-disabled):focus {
-        border-bottom: 2px solid $primary;
+        border-bottom: 2px solid theme-apply($primary);
         padding: 2px;
 
         .mat-form-field-label {
-          color: $primary;
+          color: theme-apply($primary);
         }
 
         mat-icon,
         .material-icons {
-          color: $primary;
+          color: theme-apply($primary);
         }
 
         .mat-form-field-flex {
@@ -149,17 +150,17 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
     &:not(.mat-form-field-disabled):focus {
       .mat-form-field-label {
-        color: $primary;
+        color: theme-apply($primary);
       }
 
       mat-icon,
       .material-icons {
-        color: $primary;
+        color: theme-apply($primary);
       }
 
       .mat-form-field-flex {
         background-color: black(0.08);
-        border-bottom: 2px solid $primary;
+        border-bottom: 2px solid theme-apply($primary);
         padding: $padding-field-flex;
       }
     }
@@ -172,21 +173,21 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
     &.mat-focused {
       .mat-form-field-label {
-        color: $primary;
+        color: theme-apply($primary);
       }
 
 
       .mat-form-field-flex {
         background-color: black(0.08);
 
-        border-bottom: 2px solid $primary;
+        border-bottom: 2px solid theme-apply($primary);
         padding: $padding-field-flex;
       }
     }
 
     &.mat-form-field-invalid {
       .mat-form-field-label {
-        color: $error;
+        color: theme-apply($error);
       }
 
       mat-icon,
@@ -196,21 +197,21 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
       .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-disabled {
       .mat-form-field-flex {
-        background-color: $disabled;
+        background-color: theme-apply($disabled);
 
         &:hover {
-          background-color: $disabled;
+          background-color: theme-apply($disabled);
         }
       }
 
@@ -233,7 +234,7 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
       padding: $padding-field-flex;
       height: $height-input;
       border-bottom: 1px solid black(0.38);
-     
+
 
       &:hover {
         background-color: black(0.08);
@@ -270,11 +271,11 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
     .mat-input-element {
       font-weight: 600;
-      color: $default-color;
+      color: theme-apply($default-color);
       font-size: 16px;
       line-height: 22px;
       font-family: 'Open sans';
-      
+
 
       &::placeholder {
         color: black(0.6);
@@ -289,7 +290,7 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
     }
 
     .mat-error {
-      color: $error;
+      color: theme-apply($error);
       display: flex;
       justify-content: space-between;
       font-size: 0.75rem;
@@ -316,7 +317,7 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
 
     .mat-select-min-line, mat-select-trigger {
       font-weight: 600;
-      color:$default-color;
+      color:theme-apply($default-color);
       font-size: 16px;
       line-height: 22px;
       font-family: 'Open Sans', sans-serif;
@@ -327,11 +328,11 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
     }
 
     .mat-select.mat-select-invalid .mat-select-arrow {
-      color: $error;
-    } 
+      color: theme-apply($error);
+    }
   }
 
-  &.qms-form.qms-search-field, &.qms-form.qms-file-upload, 
+  &.qms-form.qms-search-field, &.qms-form.qms-file-upload,
   &.qms-form:not(.mat-form-field-disabled):focus.qms-file-upload,
   &.qms-form:not(.mat-form-field-disabled):focus.qms-search-field{
     .mat-form-field-flex{
@@ -364,7 +365,7 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
     font-weight: 600;
     font-family: "Open Sans";
     font-size: 1em;
-    
+
     .mat-form-field-wrapper {
       border-radius: 0.25em;
     }
@@ -424,7 +425,7 @@ $padding-field-flex-datepicker: 0.9rem 1rem 1rem 1rem;
         margin-bottom: 0.25em;
       }
     }
-    
+
     .mat-error{
       font-weight: 400;
     }

package/src/themes/core/_progress.scss

@@ -1,9 +1,11 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .mat-form-field {
     &.qms-search-field-loading, &.qms-file-upload-loading {
         .mat-form-field-underline::before {
             height: 2px;
-            background-color: $active;
+            background-color: theme-apply($active);
         }
     }
-}
+}

package/src/themes/core/_radio.scss

@@ -1,5 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 // RADIO STYLES
 .mat-radio-group.ng-invalid {
@@ -9,7 +10,6 @@
       &:not(.mat-radio-disabled).cdk-program-focused {
         .mat-radio-persistent-ripple {
           opacity: 1;
-          // border: 2px solid $secondary;
           background: black(0.08);
         }
       }
@@ -61,7 +61,7 @@
     .text-label {
       font-size: 1rem;
       line-height: 28px;
-      color: $default-color;
+      color: theme-apply($default-color);
       white-space: break-spaces;
     }
 
@@ -73,13 +73,12 @@
     }
 
     .mat-error {
-      color: $error;
+      color: theme-apply($error);
     }
 
     &:not(.mat-radio-disabled).cdk-keyboard-focused {
       .mat-radio-persistent-ripple {
         opacity: 1;
-        // border: 2px solid $primary;
         background: black(0.08);
       }
     }
@@ -87,8 +86,7 @@
     &:not(.mat-radio-disabled).mat-radio-checked.cdk-keyboard-focused {
       .mat-radio-persistent-ripple {
         opacity: 1;
-        // border: 2px solid $secondary;
-        background: $secondary-light-6-opacity;
+        background: theme-apply($secondary-light-6-opacity);
       }
     }
 
@@ -102,7 +100,7 @@
 
     &.error-form {
       .mat-radio-outer-circle {
-        border: 2px solid $error;
+        border: 2px solid theme-apply($error);
       }
     }
 
@@ -115,14 +113,14 @@
         &:active {
           span.mat-radio-persistent-ripple {
             opacity: 1;
-            background-color: $secondary-light-12-opacity;
+            background-color: theme-apply($secondary-light-12-opacity);
             transition-duration: 150ms;
-          }       
+          }
         }
         &:hover {
           .mat-ripple-element {
             opacity: 1;
-            background-color: $secondary-light-6-opacity;
+            background-color: theme-apply($secondary-light-6-opacity);
           }
         }
       }
@@ -130,16 +128,16 @@
 
     &.mat-radio-checked {
       .mat-radio-outer-circle {
-        border-color: $secondary;
+        border-color: theme-apply($secondary);
       }
     }
 
     .mat-radio-inner-circle {
-      background-color: $secondary;
+      background-color: theme-apply($secondary);
     }
 
     &.mat-radio-checked .mat-radio-persistent-ripple {
-      background-color: $secondary-light-6-opacity;
+      background-color: theme-apply($secondary-light-6-opacity);
     }
 
     .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple) {
@@ -149,7 +147,7 @@
     &.mat-radio-checked
       .mat-radio-ripple
       .mat-ripple-element:not(.mat-radio-persistent-ripple) {
-      background-color: $secondary;
+      background-color: theme-apply($secondary);
     }
   }
 }

package/src/themes/core/_range-slider.scss

@@ -1,14 +1,15 @@
-@import "colors";
+@import "../theme/variable";
+@import "../theme/mixins";
 
 .mat-slider{
     &.qms-range-slider{
         &:not(.mat-slider-disabled){
             .mat-slider-track-background{
-                background-color: $slider-background;
+                background-color: theme-apply($slider-background);
             }
 
             .mat-slider-track-fill{
-                background: $active;
+                background: theme-apply($active);
             }
 
             .mat-slider-thumb{
@@ -16,8 +17,8 @@
                 bottom: -6px;
                 width: 12px;
                 height: 12px;
-                background-color: $active;
-                border-color: $active;
+                background-color: theme-apply($active);
+                border-color: theme-apply($active);
                 box-sizing: border-box;
                 border: 3px solid transparent;
                 border-radius: 50%;
@@ -25,7 +26,7 @@
 
             .mat-slider-thumb:after {
                 content: "";
-                background-color: $slider-hover-border;
+                background-color: theme-apply($slider-hover-border);
                 background-size: 0%;
                 background-position: center;
                 display: block;
@@ -44,27 +45,27 @@
 
             &.mat-slider-min-value:not(.mat-slider-thumb-label-showing){
                 .mat-slider-thumb {
-                    background-color: $active;
-                    border-color: $slider-focus-border;
+                    background-color: theme-apply($active);
+                    border-color: theme-apply($slider-focus-border);
                 }
             }
-            
+
             &.mat-slider-has-ticks .mat-slider-wrapper::after{
-                border-color: $slider-tick-color;
+                border-color: theme-apply($slider-tick-color);
             }
 
             &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
-                border-color: $slider-hover-border;
+                border-color: theme-apply($slider-hover-border);
             }
 
             &:focus-visible{
-                border-color: $slider-focus-border;
+                border-color: theme-apply($slider-focus-border);
             }
 
             &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
                 .mat-slider-thumb {
                     border-width: 18px;
-                    border-color: $slider-focus-border;
+                    border-color: theme-apply($slider-focus-border);
                     transform: scale(0.7);
                 }
             }
@@ -79,7 +80,7 @@
                 }
             }
         }
-        
+
         &.mat-slider-disabled{
             .mat-slider-thumb{
                 background-color: black(0.26);
@@ -88,11 +89,11 @@
         }
 
         .mat-slider-ticks{
-            background-image: repeating-linear-gradient(to right, $slider-tick-color, $slider-tick-color 2px, transparent 0, transparent);
+            background-image: repeating-linear-gradient(to right, theme-apply($slider-tick-color), theme-apply($slider-tick-color) 2px, transparent 0, transparent);
             opacity: 1;
         }
         .mat-slider-focus-ring{
-           background-color: transparent; 
+           background-color: transparent;
         }
     }
 }
@@ -104,7 +105,7 @@
             &:focus-visible{
                 .mat-slider-thumb {
                     border-width: 18px;
-                    border-color: $slider-focus-border;
+                    border-color: theme-apply($slider-focus-border);
                     transform: scale(0.7);
                 }
             }
@@ -113,15 +114,15 @@
                 .mat-slider-thumb-label {
                     border-radius: 10%;
                     transform: rotate(0deg);
-                    background: $default-color;
+                    background: theme-apply($default-color);
                 }
 
                 .mat-slider-thumb {
                     border-width: 18px;
-                    border-color: $slider-pressed;
+                    border-color: theme-apply($slider-pressed);
                     transform: scale(0.7);
                 }
-              
+
                 .mat-slider-thumb-label-text {
                     transform: rotate(0deg);
                 }
@@ -130,14 +131,14 @@
                     position: absolute;
                     left: calc(50% - 8px);
                     top: 28px;
-                    width: 0; 
-                    height: 0; 
+                    width: 0;
+                    height: 0;
                     content: '';
                     margin: 0 auto;
                     transform: rotate(0deg);
                     border-left: 8px solid transparent;
                     border-right: 8px solid transparent;
-                    border-top: 6px solid $default-color;
+                    border-top: 6px solid theme-apply($default-color);
                 }
             }
         }
@@ -149,18 +150,18 @@
         &:not(.mat-slider-disabled){
             &.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover{
                 .mat-slider-thumb{
-                    border-color: $slider-hover-border;
+                    border-color: theme-apply($slider-hover-border);
                 }
-                
+
             }
             .mat-slider-thumb {
                 height: 48px;
                 width: 48px;
-                border-color: $slider-hover-border;
-                border: solid 18px $slider-hover-border;
+                border-color: theme-apply($slider-hover-border);
+                border: solid 18px theme-apply($slider-hover-border);
                 bottom: -24px;
                 right: -24px;
-                background-clip: padding-box;   
+                background-clip: padding-box;
             }
         }
 
@@ -173,18 +174,18 @@
 }
 
 .mat-slider{
-    &.qms-range-slider{ 
+    &.qms-range-slider{
         &.cdk-focused, &.cdk-keyboard-focused, &.cdk-mouse-focused, &.cdk-touch-focused, &.cdk-program-focused{
             &:not(.mat-slider-disabled){
                 .mat-slider-thumb {
                     transform: scale(0.7);
                     height: 48px;
                     width: 48px;
-                    border-color: $slider-focus-border;
-                    border: solid 18px $slider-focus-border;
+                    border-color: theme-apply($slider-focus-border);
+                    border: solid 18px theme-apply($slider-focus-border);
                     bottom: -24px;
                     right: -24px;
-                    background-clip: padding-box;   
+                    background-clip: padding-box;
                 }
             }
 
@@ -194,7 +195,7 @@
                 }
             }
         }
-        
+
     }
 }