qms-angular 1.0.90 → 1.0.93

package/src/lib/components/banner/qms-banner-confirm/qms-banner-confirm.component.scss

@@ -35,6 +35,20 @@
         button {
             margin-left: 16px;
         }
+
+        &.banner-confirm-buttons {
+            ::ng-deep {
+                button{
+                    &.qms-btn-icon.qms-btn-disabled {
+                        background: transparent;
+                    }
+
+                    &.qms-btn-text.qms-btn-disabled {
+                        background: transparent;
+                    }
+                }
+            }
+        }
     }
 }
 

package/src/lib/components/button/button-icon.scss

@@ -91,7 +91,7 @@ $size: 48px;
 
       &:not([disabled]):hover,
       &:not([disabled]):focus {
-        background-color: theme-apply($primary-light-3-opacity);
+        background-color: theme-apply($primary-light-12-opacity);
         color: theme-apply($primary);
       }
 

package/src/lib/components/button/button-toggle.scss

@@ -21,7 +21,6 @@
     line-height: 16px;
 
     &.qms-button-toggle-appearance-standard {
-      background-color: white;
       color: theme-apply($default-color);
       position: relative;
 
@@ -30,11 +29,12 @@
       }
 
       &:hover {
-        background-color: theme-apply($primary-light-3-opacity);
+        background-color: theme-apply($primary-light-24-opacity) !important;
+        color: theme-apply($primary);
       }
 
       &.qms-button-toggle-checked {
-        background-color: theme-apply($primary-light-3-opacity);
+        background-color: theme-apply($primary-light-12-opacity);
         color: theme-apply($primary);
       }
 
@@ -45,37 +45,18 @@
       }
 
       &.cdk-keyboard-focused {
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 3px;
-          height: 100%;
-          background: theme-apply($primary-light);
-        }
-
-        &:before {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          border: 3px solid theme-apply($primary-light);
-        }
+        background-color: theme-apply($primary-light-24-opacity) !important;
+        color: theme-apply($primary);
       }
     }
 
     &.qms-button-toggle-appearance-active {
-      background-color: theme-apply($primary-light-3-opacity);
+      background-color: theme-apply($primary-light-12-opacity);
       color: theme-apply($primary);
 
       &:hover {
-        background-color: theme-apply($primary);
-        color: white;
+        background-color: theme-apply($primary) !important;;
+        color: white !important;;
       }
 
       &.qms-button-toggle-checked {
@@ -90,41 +71,26 @@
       }
 
       &.cdk-keyboard-focused {
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 3px;
-          height: 100%;
-          background: theme-apply($primary-light);
-        }
-
-        &:before {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          border: 3px solid theme-apply($primary-light);
-        }
+        background-color: theme-apply($primary-light) !important;
+        color: white !important;;
       }
     }
 
     &.qms-button-toggle-appearance-dark {
       background-color: theme-apply($default-color);
-      color: rgba(255, 255, 255, 0.6);
+      color: white(0.6);
 
       .mat-icon {
         color: theme-apply($primary-light-32-opacity);
       }
 
       &:hover {
-        background-color: theme-apply($primary-lighter);
-        color: theme-apply($primary);
+        background-color: theme-apply($primary-lighter) !important;;
+        color: theme-apply($primary) !important;;
+
+        mat-icon, .mat-icon {
+          color: theme-apply($primary) !important;;
+        }
       }
 
       &.qms-button-toggle-checked {
@@ -143,26 +109,11 @@
       }
 
       &.cdk-keyboard-focused {
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 3px;
-          height: 100%;
-          background: theme-apply($primary-light);
-        }
+        background-color: theme-apply($primary-lighter) !important;
+        color: theme-apply($primary) !important;
 
-        &:before {
-          content: "";
-          display: block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          border: 3px solid theme-apply($primary-light);
+        mat-icon, .mat-icon {
+          color: theme-apply($primary) !important;;
         }
       }
     }
@@ -171,6 +122,12 @@
       cursor: default !important;
       background: #e4e4e4 !important;
       color: rgba(0, 0, 0, 0.38) !important;
+      user-select: none;
+
+      button {
+        cursor: default !important;
+        user-select: none;
+      }
 
       .mat-icon {
         color: rgba(0, 0, 0, 0.38) !important;

package/src/lib/components/list/_list-expansion.scss

@@ -1,4 +1,7 @@
+@import "../../../themes/core/variables";
 @import "../../../themes/core/typography";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .mat-expansion-panel {
   &.qms-expansion {
@@ -38,7 +41,8 @@
 
       .qms-list-header {
         * {
-          color: rgba(25, 84, 169, 0.38);
+          color: theme-apply($primary);
+          opacity: 0.38;
         }
       }
     }
@@ -46,40 +50,40 @@
     .mat-expansion-panel-header {
       &:hover {
         &:not([aria-disabled="true"]) {
-          background: #F2F7FD;          
+          background: theme-apply($primary-light-6-opacity);          
         }
 
         .subtitle, .default-subtitle, .caption,
         .mat-expansion-indicator::after,  
         .material-icons,
         .material-icons-outlined {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
 
       &:active {
         &:not([aria-disabled="true"]) {
-          background: #C8D6EA;
+          background: theme-apply($primary-light-24-opacity); 
         }
 
         .subtitle, .default-subtitle, .caption, 
         .mat-expansion-indicator::after,  
         .material-icons,
         .material-icons-outlined {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }     
    
       
       &.cdk-keyboard-focused {
-        background-color: theme-apply($primary-light-3-opacity);;
+        background-color: theme-apply($primary-light-12-opacity);
         border-radius: $border-radius-default;
 
         .subtitle, .default-subtitle, .caption, 
         .mat-expansion-indicator::after,  
         .material-icons,
         .material-icons-outlined {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
 

package/src/lib/components/list/list.scss

@@ -17,6 +17,7 @@
   width: 100%;
   padding: 0;
   min-height: $item-height;
+  height: $item-height;
 
   &.mat-2-line {
     height: $two-line-height;
@@ -47,7 +48,7 @@
 
     .trailing-box {
       height: 100%;
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid $border-bottom-item;
       padding-top: 10px;
     }
   }

package/src/lib/components/related/popup/related-popup.component.scss

@@ -141,7 +141,6 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";

package/src/lib/components/reports/qms-report-cover-portrait/qms-report-cover-portrait.component.scss

@@ -18,7 +18,6 @@
     padding: 0 50px;
 
     .report-module-name {
-      margin-bottom: 10px;
       .module-name {
         max-width: 100%;
         font-family: 'Open Sans';
@@ -31,7 +30,7 @@
 
     .report-title {
       height: 137px;
-      margin-bottom: 10px;
+      margin-bottom: 15px;
       .title {
         max-width: 100%;
         font-weight: 600;

package/src/lib/components/select-include-children/select-include-children.component.scss

@@ -150,7 +150,6 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";

package/src/lib/components/select-process-document/select-process-document.component.scss

@@ -141,7 +141,6 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";

package/src/lib/components/tree/tree.component.scss

@@ -121,7 +121,7 @@
 
   .tree-branch {
     &:hover {
-      background-color: theme-apply($primary-light-3-opacity);
+      background-color: theme-apply($primary-light-12-opacity);
     }
   }
 

package/src/lib/components/treeNew/tree.component.scss

@@ -114,7 +114,7 @@
 
   .tree-branch {
     &:hover {
-      background-color: theme-apply($primary-light-3-opacity);
+      background-color: theme-apply($primary-light-12-opacity);
     }
   }
 

package/src/themes/core/_checkbox.scss

@@ -14,19 +14,16 @@
 
     .mat-checkbox-inner-container {
       margin-right: 19px;
-
-      &:hover {
-        .mat-ripple-element {
-          opacity: 1;
-          background: black(0.08);
-        }
-      }
     }
 
-    .mat-ripple-element {
-      background: black(0.12);
+    &:hover:not(.mat-checkbox-disabled) {
+      background-color: black(0.08);
     }
 
+    &:active:not(.mat-checkbox-disabled) {
+      background-color: black(0.12);
+    } 
+
     .mat-checkbox-label {
       display: flex;
       flex-direction: column;
@@ -50,28 +47,20 @@
       color: theme-apply($error);
     }
 
-    &.cdk-keyboard-focused {
-      &:not(.ng-invalid) {
-        .mat-checkbox-persistent-ripple {
-          opacity: 1;
-          background-color: black(0.08);
-        }
-      }
+    &.error-form {
+      border-bottom: 2px solid theme-apply($error);
     }
 
-    &.cdk-keyboard-focused.ng-invalid {
-      .mat-checkbox-persistent-ripple {
-        opacity: 1;
-        background-color: black(0.08);
-      }
-    }
-
-    &.mat-checkbox-checked.cdk-keyboard-focused
-      .mat-checkbox-persistent-ripple {
-      background: theme-apply($secondary-light-6-opacity);
+    &.cdk-keyboard-focused {
+      background-color: black(0.08);
     }
 
     &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
+      .mat-checkbox-background {
+        background: black(0.24);
+        opacity: 0.68;
+      }
+
       .mat-checkbox-frame {
         border-color: black(0.38);
         background: white;
@@ -80,22 +69,34 @@
     }
 
     &.mat-checkbox-checked {
-      background: rgba(207, 71, 20, 0.12);
-    }
+      background: theme-apply($primary-light-12-opacity);
 
-    &.mat-checkbox-checked {
-      &:not(.mat-checkbox-disabled) {
-        .mat-ripple-element {
-          background: theme-apply($secondary-light-6-opacity);
+      &.cdk-keyboard-focused {
+        &:not(.ng-invalid) {
+          background-color: theme-apply($primary-dark-24-opacity);
         }
       }
-    }
 
-    
-    &.mat-checkbox-indeterminate,
-    &.mat-checkbox-checked {
-      .mat-checkbox-background {
-        background: theme-apply($secondary);
+      &:hover:not(.mat-checkbox-disabled) {
+        background-color: theme-apply($primary-dark-24-opacity);
+      }
+
+      &:active:not(.mat-checkbox-disabled) {
+        background-color: theme-apply($primary-light-32-opacity);
+      }
+
+      &.mat-checkbox-disabled {
+        .mat-checkbox-inner-container {
+          background-color: theme-apply($disabled-select-input-checked);
+        }
+      }
+
+      .mat-checkbox-inner-container {
+        background-color: theme-apply($primary);
+      }
+
+      .mat-checkbox-frame {
+        border-color: theme-apply($primary);
       }
     }
   }

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

@@ -63,7 +63,7 @@
         > .mat-calendar-body-cell-content {
           &:not(.mat-calendar-body-selected) {
             &:not(.mat-calendar-body-comparison-identical) {
-              background-color: theme-apply($primary-light-3-opacity);
+              background-color: theme-apply($primary-light-12-opacity);
               color: theme-apply($primary);
             }
           }
@@ -76,7 +76,7 @@
       > .mat-calendar-body-cell-content {
         &:not(.mat-calendar-body-selected) {
           &:not(.mat-calendar-body-comparison-identical) {
-            background-color: theme-apply($primary-light-3-opacity);
+            background-color: theme-apply($primary-light-12-opacity);
             color: theme-apply($primary);
           }
         }

package/src/themes/core/_radio.scss

@@ -3,20 +3,6 @@
 @import "typography";
 
 // RADIO STYLES
-.mat-radio-group.ng-invalid {
-  .mat-radio-button {
-    &.qms-group-options {
-      &:not(.mat-radio-disabled).cdk-keyboard-focused,
-      &:not(.mat-radio-disabled).cdk-program-focused {
-        .mat-radio-persistent-ripple {
-          opacity: 1;
-          background: black(0.08);
-        }
-      }
-    }
-  }
-}
-
 .mat-radio-button {
   &.qms-group-options {
     font-family: Open Sans;
@@ -27,30 +13,20 @@
     border-radius: 4px;
 
     .mat-radio-container {
-      margin-right: 19px;
-
-      &:hover {
-        .mat-ripple-element {
-          opacity: 0.08;
-          background-color: black;
-        }
-      }
+      margin-right: 19px;    
     }
 
-    &.mat-radio-disabled .mat-radio-container {
-      &:hover {
-        .mat-radio-persistent-ripple {
-          opacity: 0;
-        }
-      }
+    &:hover:not(.mat-radio-disabled) {
+      background-color: black(0.08);
     }
 
-    .mat-ripple-element {
-      background: black(0.12);
+    
+    &:active:not(.mat-radio-disabled) {
+      background-color: black(0.12);
     }
-
-    div.mat-ripple-element {
-      opacity: 0 !important;
+ 
+    &:not(.mat-radio-disabled).cdk-keyboard-focused {
+      background-color: black(0.08);
     }
 
     .mat-radio-label-content {
@@ -74,21 +50,7 @@
 
     .mat-error {
       color: theme-apply($error);
-    }
-
-    &:not(.mat-radio-disabled).cdk-keyboard-focused {
-      .mat-radio-persistent-ripple {
-        opacity: 1;
-        background: black(0.08);
-      }
-    }
-
-    &:not(.mat-radio-disabled).mat-radio-checked.cdk-keyboard-focused {
-      .mat-radio-persistent-ripple {
-        opacity: 1;
-        background: theme-apply($secondary-light-6-opacity);
-      }
-    }
+    } 
 
     &.mat-radio-disabled:not(.mat-radio-checked) {
       .mat-radio-outer-circle {
@@ -105,49 +67,35 @@
     }
 
     &.mat-radio-checked {
-      background: rgba(207, 71, 20, 0.12);
+      background: theme-apply($primary-light-12-opacity);
+
+      &.cdk-keyboard-focused {
+        &:not(.ng-invalid) {
+          background-color: theme-apply($primary-dark-24-opacity);
+        }
+      }
+
+      &:hover:not(.mat-checkbox-disabled) {
+        background-color: theme-apply($primary-dark-24-opacity);
+      }
+
+      &:active:not(.mat-checkbox-disabled) {
+        background-color: theme-apply($primary-light-32-opacity);
+      }
 
       .mat-radio-container {
         margin-right: 19px;
-
-        &:active {
-          span.mat-radio-persistent-ripple {
-            opacity: 1;
-            background-color: theme-apply($secondary-light-12-opacity);
-            transition-duration: 150ms;
-          }
-        }
-        &:hover {
-          .mat-ripple-element {
-            opacity: 1;
-            background-color: theme-apply($secondary-light-6-opacity);
-          }
-        }
       }
     }
 
     &.mat-radio-checked {
       .mat-radio-outer-circle {
-        border-color: theme-apply($secondary);
+        border-color: theme-apply($primary);
       }
     }
 
     .mat-radio-inner-circle {
-      background-color: theme-apply($secondary);
-    }
-
-    &.mat-radio-checked .mat-radio-persistent-ripple {
-      background-color: theme-apply($secondary-light-6-opacity);
-    }
-
-    .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple) {
-      background-color: black;
-    }
-
-    &.mat-radio-checked
-      .mat-radio-ripple
-      .mat-ripple-element:not(.mat-radio-persistent-ripple) {
-      background-color: theme-apply($secondary);
+      background-color: theme-apply($primary);
     }
   }
 }