qms-angular 1.0.87 → 1.0.90

package/src/themes/core/_tab.scss

@@ -1,12 +1,13 @@
-@import "colors";
-@import "./colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .mat-tab-group{
     &.qms-tab-group{
         .qms-tab-label{
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
         }
 
@@ -16,7 +17,7 @@
 
         .mat-tab-label-active{
             .qms-tab-label{
-                color: $active;
+                color: theme-apply($active);
                 font-weight: 600;
             }
         }
@@ -35,12 +36,12 @@
             opacity: 1;
             height: auto;
             min-height: 48px;
-            &:hover, 
+            &:hover,
             &:focus-visible,
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled),
             .mat-ripple-element{
-                background: $tab-disable-background;
+                background: theme-apply($tab-disable-background);
             }
         }
 
@@ -48,12 +49,12 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
@@ -63,7 +64,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $popup-title-color;
+            color: theme-apply($popup-title-color);
             font-family: Open Sans, Arial, Sans-Serif;
             font-weight: 400;
             .mat-icon{
@@ -73,10 +74,10 @@
 
         .mat-tab-label-active{
             .qms-tab-label{
-                color: $active;
+                color: theme-apply($active);
                 font-weight: 600;
                 .mat-icon{
-                    color: $active;
+                    color: theme-apply($active);
                 }
             }
         }
@@ -102,37 +103,37 @@
 
         .mat-ripple.mat-tab-label{
             &:hover{
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
                 .qms-tab-label{
                     font-weight: 600;
                 }
             }
 
             &:focus-visible{
-                background-color: $tab-hover-background;
+                background-color: theme-apply($tab-hover-background);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
             }
 
             .mat-ripple-element{
-                background-color: $tab-hover-background
+                background-color: theme-apply($tab-hover-background)
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-hover-background;
+                    background: theme-apply($tab-hover-background);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible, .mat-ripple-element,
-                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+                &.cdk-keyboard-focused:not(.mat-tab-disabled),
                 &.cdk-program-focused:not(.mat-tab-disabled){
-                    background: $tab-disable-background;
+                    background: theme-apply($tab-disable-background);
                 }
             }
         }
@@ -140,21 +141,21 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
 
     &.qms-tab-group-advanced.primary{
-        background: $tab-dark-background;
+        background: theme-apply($tab-dark-background);
 
         .mat-tab-labels{
-            border-bottom: 1px solid $tab-primary-label;
+            border-bottom: 1px solid theme-apply($tab-primary-label);
         }
         .qms-tab-label{
             display: flex;
@@ -163,16 +164,16 @@
             color: white;
             font-weight: 400;
             .mat-icon{
-                color: $tab-primary-icon;
+                color: theme-apply($tab-primary-icon);
             }
         }
 
 
         .mat-tab-disabled{
             .qms-tab-label{
-                color: $tab-primary-label;
+                color: theme-apply($tab-primary-label);
                 .mat-icon{
-                    color: $tab-primary-label;
+                    color: theme-apply($tab-primary-label);
                 }
             }
         }
@@ -180,7 +181,7 @@
         .mat-tab-label-active{
             .qms-tab-label{
                 color: white;
-                font-weight: 600;  
+                font-weight: 600;
                 .mat-icon{
                     color: white;
                 }
@@ -189,44 +190,44 @@
 
         .mat-ripple.mat-tab-label{
             &:hover{
-                background: $tab-primary-background-hover;
+                background: theme-apply($tab-primary-background-hover);
                 .qms-tab-label{
                     font-weight: 600;
                 }
             }
 
             &:focus-visible{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
             .mat-ripple-element{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-primary-background-hover;
+                    background: theme-apply($tab-primary-background-hover);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible{
-                    background-color: $tab-primary-label;
+                    background-color: theme-apply($tab-primary-label);
                 }
 
                 .mat-ripple-element{
-                    background-color:$tab-primary-label;;
+                    background-color:theme-apply($tab-primary-label);;
                 }
             }
-            
+
             &.mat-tab-disabled:hover{
-                background: $tab-dark-background;
+                background: theme-apply($tab-dark-background);
             }
         }
 
@@ -238,9 +239,9 @@
 
         .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-primary-border;
+                border-color: theme-apply($tab-primary-border);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
@@ -269,7 +270,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
         }
 
@@ -278,7 +279,7 @@
         }
 
         .mat-tab-label-active{
-            color: $active;
+            color: theme-apply($active);
             font-weight: 600;
         }
 
@@ -296,12 +297,12 @@
             opacity: 1;
             height: auto;
             min-height: 48px;
-            &:hover, 
+            &:hover,
             &:focus-visible,
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled),
             .mat-ripple-element{
-                background: $tab-disable-background;
+                background: theme-apply($tab-disable-background);
             }
         }
 
@@ -313,12 +314,12 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
@@ -328,7 +329,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
             font-weight: 400;
             .mat-icon{
@@ -339,9 +340,9 @@
         .mat-tab-label-active{
             &.qms-tab-label{
                 font-weight: 600;
-                color: $active;
+                color: theme-apply($active);
                 .mat-icon{
-                    color: $active;
+                    color: theme-apply($active);
                 }
             }
         }
@@ -367,35 +368,35 @@
 
         .mat-tab-link{
             &:hover{
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
                 font-weight: 600;
             }
 
             &:focus-visible{
-                background-color: $tab-hover-background;
+                background-color: theme-apply($tab-hover-background);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
             }
 
             .mat-ripple-element{
-                background-color: $tab-hover-background
+                background-color: theme-apply($tab-hover-background)
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-hover-background;
+                    background: theme-apply($tab-hover-background);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible, .mat-ripple-element,
-                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+                &.cdk-keyboard-focused:not(.mat-tab-disabled),
                 &.cdk-program-focused:not(.mat-tab-disabled){
-                    background: $tab-disable-background;
+                    background: theme-apply($tab-disable-background);
                 }
             }
         }
@@ -403,19 +404,19 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
 
     &.qms-tab-group-advanced.primary{
-        background: $tab-dark-background;
-        
+        background: theme-apply($tab-dark-background);
+
         .qms-tab-label{
             display: flex;
             flex-direction: column;
@@ -423,15 +424,15 @@
             color: white;
             font-weight: 400;
             .mat-icon{
-                color: $tab-primary-icon;
+                color: theme-apply($tab-primary-icon);
             }
         }
-        
+
         .mat-tab-disabled{
             &.qms-tab-label{
-                color: $tab-primary-label;
+                color: theme-apply($tab-primary-label);
                 .mat-icon{
-                    color: $tab-primary-label;
+                    color: theme-apply($tab-primary-label);
                 }
             }
         }
@@ -443,46 +444,46 @@
                 color: white;
             }
         }
-        
+
 
         .mat-tab-link{
             &:hover{
-                background: $tab-primary-background-hover;
+                background: theme-apply($tab-primary-background-hover);
                 font-weight: 600;
             }
 
             &:focus-visible{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
             .mat-ripple-element{
-                background-color: $tab-dark-background;
+                background-color: theme-apply($tab-dark-background);
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-primary-background-hover;
+                    background: theme-apply($tab-primary-background-hover);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible{
-                    background-color: $tab-primary-label;
+                    background-color: theme-apply($tab-primary-label);
                 }
 
                 .mat-ripple-element{
-                    background-color:$tab-primary-label;;
+                    background-color:theme-apply($tab-primary-label);;
                 }
             }
-            
+
             &.mat-tab-disabled:hover{
-                background: $tab-dark-background;
+                background: theme-apply($tab-dark-background);
             }
         }
 
@@ -494,9 +495,9 @@
 
         .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-primary-border;
+                border-color: theme-apply($tab-primary-border);
             }
-            
+
         }
 
         .mat-tab-header-pagination{