qms-angular 1.0.30 → 1.0.31

package/src/themes/core/_tab.scss

@@ -56,20 +56,30 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: black(0.6);
+            color: #323232;
             font-family: Open Sans, Arial, Sans-Serif;
-            font-weight: 600;
+            font-weight: 400;
+            .mat-icon{
+                color: black(0.6);
+            }
         }
 
         .mat-tab-label-active{
             .qms-tab-label{
                 color: $active;
+                font-weight: 600;
+                .mat-icon{
+                    color: $active;
+                }
             }
         }
 
         .mat-tab-disabled{
             .qms-tab-label{
-                color: black(0.6);
+                color: black(0.38);
+                .mat-icon{
+                    color: black(0.38);
+                }
             }
         }
 
@@ -127,16 +137,38 @@
 
     &.qms-tab-group-advanced.primary{
         background: #00324E;
+
+        .mat-tab-labels{
+            border-bottom: 1px solid rgba(255, 255, 255, 0.24);
+        }
         .qms-tab-label{
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: rgba(255, 255, 255, 0.6);
+            color: white;
+            font-weight: 400;
+            .mat-icon{
+                color: rgba(255, 255, 255, 0.6);
+            }
+        }
+
+
+        .mat-tab-disabled{
+            .qms-tab-label{
+                color: rgba(255, 255, 255, 0.24);
+                .mat-icon{
+                    color: rgba(255, 255, 255, 0.24);
+                }
+            }
         }
 
         .mat-tab-label-active{
             .qms-tab-label{
                 color: white;
+                font-weight: 600;  
+                .mat-icon{
+                    color: white;
+                }
             }
         }
 
@@ -155,7 +187,7 @@
             }
 
             .mat-ripple-element{
-                background-color: #00324E;
+                background-color: rgba(255, 255, 255, 0.24);
             }
             
             &.mat-tab-label-active{
@@ -207,5 +239,239 @@
             }
         }
     }
-    
+}
+
+
+.mat-tab-nav-bar{
+    &.qms-tab-group{
+        .qms-tab-label{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #323232;
+            font-family: Open Sans, Arial, Sans-Serif;
+        }
+
+        .mat-tab-label-active{
+            color: $active;
+            font-weight: 600;
+        }
+
+        .mat-tab-disabled{
+            &.qms-tab-label, .qms-tab-label{
+                color: black(0.24);
+            }
+        }
+
+        .mat-tab-link.mat-tab-disabled:hover{
+            background: white;
+        }
+
+        .mat-tab-link{
+            opacity: 1;
+            &:hover, 
+            &:focus-visible,
+            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-program-focused:not(.mat-tab-disabled),
+            .mat-ripple-element{
+                background: rgba(25, 84, 169, 0.12); ;
+            }
+        }
+
+        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
+            .mat-tab-header-pagination-chevron{
+                border-color: black(0.38);
+            }
+            
+        }
+
+        .mat-tab-header-pagination{
+            .mat-tab-header-pagination-chevron{
+                border-color: #666666;
+            }
+        }
+    }
+
+    &.qms-tab-group-advanced{
+        .qms-tab-label{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #323232;
+            font-family: Open Sans, Arial, Sans-Serif;
+            font-weight: 600;
+            .mat-icon{
+                color: black(0.6);
+            }
+        }
+
+        .mat-tab-label-active{
+            &.qms-tab-label{
+                color: $active;
+                .mat-icon{
+                    color: $active;
+                }
+            }
+        }
+
+        .mat-tab-disabled{
+            &.qms-tab-label, .qms-tab-label{
+                color: black(0.38);
+                .mat-icon{
+                    color: black(0.38);
+                }
+            }
+        }
+
+        .mat-tab-link.mat-tab-disabled:hover{
+            background: white;
+        }
+
+        .mat-tab-link{
+            opacity: 1;
+        }
+
+        .mat-tab-link{
+            &:hover{
+                background: black(0.04);
+            }
+
+            &:focus-visible{
+                background-color: black(0.12);
+            }
+
+            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-program-focused:not(.mat-tab-disabled){
+                background: black(0.12);
+            }
+
+            .mat-ripple-element{
+                background-color:rgba(0, 0, 0, 0.12)
+            }
+            
+            &.mat-tab-label-active{
+                &:hover{
+                    background: #F2F7FD;
+                }
+                
+                &:focus-visible, .mat-ripple-element,
+                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+                &.cdk-program-focused:not(.mat-tab-disabled){
+                    background: rgba(25, 84, 169, 0.12);
+                }
+            }
+        }
+        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
+            .mat-tab-header-pagination-chevron{
+                border-color: black(0.38);
+            }
+            
+        }
+
+        .mat-tab-header-pagination{
+            .mat-tab-header-pagination-chevron{
+                border-color: #666666;
+            }
+        }
+    }
+
+    &.qms-tab-group-advanced.primary{
+        background: #00324E;
+        
+        .qms-tab-label{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: white;
+            font-weight: 400;
+            .mat-icon{
+                color: rbga(255,255,255, 0.6);
+            }
+        }
+        
+        .mat-tab-disabled{
+            &.qms-tab-label{
+                color: rgba(255, 255, 255, 0.24);
+                .mat-icon{
+                    color: rgba(255, 255, 255, 0.24);
+                }
+            }
+        }
+
+        .mat-tab-label-active{
+            color: white;
+            font-weight: 600;
+            .mat-icon{
+                color: white;
+            }
+        }
+        
+
+        .mat-tab-link{
+            &:hover{
+                background: rgba(255, 255, 255, 0.08);
+            }
+
+            &:focus-visible{
+                background-color: rgba(255, 255, 255, 0.24);
+            }
+
+            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-program-focused:not(.mat-tab-disabled){
+                background-color: rgba(255, 255, 255, 0.24);
+            }
+
+            .mat-ripple-element{
+                background-color: #00324E;
+            }
+            
+            &.mat-tab-label-active{
+                &:hover{
+                    background: rgba(255, 255, 255, 0.08);
+                }
+                
+                &:focus-visible{
+                    background-color: rgba(255, 255, 255, 0.24);
+                }
+
+                .mat-ripple-element{
+                    background-color:rgba(255, 255, 255, 0.24);;
+                }
+            }
+            
+            &.mat-tab-disabled:hover{
+                background: #00324E;
+            }
+        }
+
+
+        .mat-ink-bar{
+            background-color: white;
+        }
+
+
+        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
+            .mat-tab-header-pagination-chevron{
+                border-color: rgba(255, 255, 255, 0.38);
+            }
+            
+        }
+
+        .mat-tab-header-pagination{
+            .mat-tab-header-pagination-chevron{
+                border-color: white;
+            }
+        }
+    }
+
+    &.qms-tab-group-advanced-fixed{
+        .mat-tab-list{
+            max-width: 100%;
+            position: relative;
+
+            .mat-tab-link{
+                flex: 1 1 auto;
+            }
+        }
+    }
 }