qms-angular 1.0.89 → 1.0.92

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 @@
                 }
             }
         }
-        
+
     }
 }
 

package/src/themes/core/_scrollbar.scss

@@ -1,36 +1,27 @@
-@import "colors";
-.qms-scrollbar {
-    /* width */
-  &::-webkit-scrollbar {
-      width: 12px;
-  }
-  
-  /* Track */
-  &::-webkit-scrollbar-track {
-    background: black(0.12); 
-    background-clip: content-box;
-  }
-   
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: black(0.38);
-    border-radius: 20px;
-    width: 4px;
-    border: 4px solid transparent;
-    background-clip: content-box;
-  }
-  
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background: black(0.5); 
-    background-clip: content-box;
-    border: 4px solid transparent;
-  }
+@import '../theme/variable';
 
-  &.none-scroll-bg {
-    &::-webkit-scrollbar-track {
-      background: transparent; 
-      background-clip: content-box;
-    }
-  }
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+background: black(0.12);
+background-clip: content-box;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+background: black(0.38);
+border-radius: 20px;
+width: 4px;
+border: 4px solid transparent;
+background-clip: content-box;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+background: black(0.5);
+background-clip: content-box;
+border: 4px solid transparent;
 }

package/src/themes/core/_search-field.scss

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

package/src/themes/core/_select.scss

@@ -1,3 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .mat-form-field {
   &.qms-select-input {
     .qms-select {
@@ -33,11 +36,11 @@
   margin-top: 32px;
 
   .mat-option.mat-selected:not(.mat-option-disabled) {
-      color: $primary !important;
+      color: theme-apply($primary) !important;
   }
 
   .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
-      background-color: $primary !important;
+      background-color: theme-apply($primary) !important;
   }
 
   .opt-check-icon {

package/src/themes/core/_slide-toggle.scss

@@ -1,5 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 // SLIDE TOGGLE STYLES
 
@@ -22,7 +23,7 @@
           opacity: 0.08;
           background-color: black;
         }
-      }      
+      }
     }
 
     .mat-slide-toggle-thumb {
@@ -37,7 +38,7 @@
     .text-label {
       font-size: 1rem;
       line-height: 28px;
-      color: $default-color;
+      color: theme-apply($default-color);
       white-space: break-spaces;
     }
 
@@ -49,21 +50,19 @@
     }
 
     .mat-error {
-      color: $error;
+      color: theme-apply($error);
     }
 
     &:not(.mat-disabled).mat-checked.cdk-keyboard-focused {
       .mat-slide-toggle-persistent-ripple {
         opacity: 1;
-        // border: 2px solid $secondary;
-        background: $secondary-light-6-opacity;
+        background: theme-apply($secondary-light-6-opacity);
       }
     }
 
     &:not(.mat-disabled).cdk-keyboard-focused {
       .mat-slide-toggle-persistent-ripple {
         opacity: 1;
-        // border: 2px solid $primary;
         background: black(0.12);
       }
     }
@@ -87,24 +86,24 @@
         &:hover {
           .mat-ripple-element.mat-slide-toggle-persistent-ripple {
             opacity: 1;
-            background-color: $secondary-light-6-opacity;
+            background-color: theme-apply($secondary-light-6-opacity);
           }
         }
 
         &:active {
           .mat-ripple-element.mat-slide-toggle-persistent-ripple {
             opacity: 1;
-            background-color: $secondary-light-12-opacity;
+            background-color: theme-apply($secondary-light-12-opacity);
           }
         }
       }
 
       .mat-ripple-element {
-        background-color: $secondary;
+        background-color: theme-apply($secondary);
       }
 
       .mat-slide-toggle-thumb {
-        background-color: $secondary;
+        background-color: theme-apply($secondary);
       }
     }
   }

package/src/themes/core/_styles.scss

@@ -1,39 +1,41 @@
-@import '../color';
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .toast-error {
-  background-color: $error-color;
-  color: $text-white;
+  background-color: theme-apply($error-color);
+  color: theme-apply($text-white);
 
   .mat-simple-snackbar-action.ng-star-inserted {
-    color: $text-white;
+    color: theme-apply($text-white);
   }
 }
 
 ::ng-deep .toast-success {
-  background-color: $success-color;
-  color: $text-white;
+  background-color: theme-apply($success-color);
+  color: theme-apply($text-white);
   .mat-simple-snackbar-action.ng-star-inserted {
-    color: $text-white;
+    color: theme-apply($text-white);
   }
   .mat-snack-bar-container{
-    background-color: $success-color;
+    background-color: theme-apply($success-color);
   }
 }
 
 .toast-infor {
-  background-color: $infor-color;
-  color: $text-white;
+  background-color: theme-apply($infor-color);
+  color: theme-apply($text-white);
 
   .mat-simple-snackbar-action.ng-star-inserted {
-    color: $text-white;
+    color: theme-apply($text-white);
   }
 }
 
 .toast-warning {
-  background-color: $warning-color;
-  color: $text-dark;
+  background-color: theme-apply($warning-color);
+  color: theme-apply($text-dark);
 
   .mat-simple-snackbar-action.ng-star-inserted {
-    color: $text-dark;
+    color: theme-apply($text-dark);
   }
 }
 
@@ -43,7 +45,7 @@
   .mat-simple-snackbar {
     button {
       &:hover {
-          background-color: $primary-light-6-opacity;
+          background-color: theme-apply($primary-light-6-opacity);
       }
     }
     span {
@@ -52,7 +54,7 @@
       font-weight: normal;
       font-size: 14px;
       line-height: 22px;
-      color: $primary-button-text-color;
+      color: theme-apply($primary-button-text-color);
     }
     .mat-button-wrapper {
     color:#94BAEF;
@@ -63,4 +65,4 @@
     line-height: 16px;
     }
   }
-}
+}