qms-angular 1.0.89 → 1.0.90

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

@@ -33,32 +33,58 @@
     }
 
     .mat-expansion-panel-header[aria-disabled="true"] {
-      color: black(0.38);
       pointer-events: none;
-      @include color-inherit;
+      user-select: none;
+
+      .qms-list-header {
+        * {
+          color: rgba(25, 84, 169, 0.38);
+        }
+      }
     }
 
     .mat-expansion-panel-header {
       &:hover {
         &:not([aria-disabled="true"]) {
-          background: black(0.08);
+          background: #F2F7FD;          
+        }
+
+        .subtitle, .default-subtitle, .caption,
+        .mat-expansion-indicator::after,  
+        .material-icons,
+        .material-icons-outlined {
+          color: $primary;
         }
       }
 
       &:active {
         &:not([aria-disabled="true"]) {
-          background: black(0.12);
+          background: #C8D6EA;
         }
-      }   
 
+        .subtitle, .default-subtitle, .caption, 
+        .mat-expansion-indicator::after,  
+        .material-icons,
+        .material-icons-outlined {
+          color: $primary;
+        }
+      }     
+   
       
       &.cdk-keyboard-focused {
-        border: 2px solid $primary;
+        background-color: theme-apply($primary-light-3-opacity);;
         border-radius: $border-radius-default;
+
+        .subtitle, .default-subtitle, .caption, 
+        .mat-expansion-indicator::after,  
+        .material-icons,
+        .material-icons-outlined {
+          color: $primary;
+        }
       }
 
       &.active-item {
-        color: $primary;
+        color: theme-apply($primary);
 
         @include color-inherit;
       }

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

@@ -1,4 +1,5 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 @import "list-base";
 @import "list-expansion.scss";
@@ -57,12 +58,28 @@
     .subtitle,
     button,
     span,
+    .material-icons,
+    .material-icons-outlined
     p {
       color: black(0.38);
       pointer-events: none;
       cursor: default;
+      user-select: none;
+      background-color: none;
     }
   }
+
+  &:not([disabled]):hover, &:not([disabled]):focus {
+    cursor: pointer;
+    background-color: black(0.08);
+    outline: none;
+  }
+
+  &:not([disabled]):active {
+    cursor: pointer;
+    background-color: black(0.12);
+  }
+
 }
 
 .qms-list-item-content {
@@ -76,7 +93,7 @@
   margin: 0 1rem;
 }
 
-mat-icon.leading-icon,
+.material-icons.leading-icon,
 .material-icons-outlined.leading-icon {
   flex-shrink: 0;
   width: $leading-icon;
@@ -150,7 +167,7 @@ img.leading-icon {
     display: flex;
     justify-content: space-between;
 
-    .mat-icon,
+    .material-icons,
     .material-icons-outlined {
       font-size: 20px;
     }
@@ -173,7 +190,7 @@ img.leading-icon {
     color: black(0.6);
     font-size: $size-caption;
 
-    mat-icon,
+    .material-icons,
     .material-icons-outlined {
       font-size: 20px;
     }

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

@@ -1,9 +1,11 @@
-@import '../../../../themes/color.scss';
+@import "../../../../themes/theme/variable";
+@import "../../../../themes/theme/mixins";
+
 .related__content_container {
   .card {
     min-height: 60px;
     box-shadow: none;
-    border-color: $mat-card-border-color;
+    border-color: theme-apply($mat-card-border-color);
     border-top: none;
     border-right: none;
     border-left: none;

package/src/lib/components/related/list-other-related/list-related.component.scss

@@ -1,11 +1,12 @@
-@import "../../../../themes/core/colors";
+@import "../../../../themes/theme/variable";
+@import "../../../../themes/theme/mixins";
 @import "../../../../themes/core/typography";
 
 .list-related {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: normal;
-  color: $default-color;
+  color: theme-apply($default-color);
 
   .list-related__title {
     font-weight: 600;
@@ -125,7 +126,7 @@
       background-color: #fafafa;
 
       border-bottom: 1px solid #ddd;
-      color: $primary;
+      color: theme-apply($primary);
       min-height: 48px;
       border-bottom: 1px solid #ddd;
 
@@ -153,17 +154,17 @@
 }
 
 .label-red {
-  background-color: $secondary;
+  background-color: theme-apply($secondary);
   color: white;
 }
 
 .label-yellow {
-  background-color: $risk-yellow;
+  background-color: theme-apply($risk-yellow);
   color: black(0.87);
 }
 
 .label-green {
-  background-color: $risk-green;
+  background-color: theme-apply($risk-green);
   color: white;
 }
 

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

@@ -1,4 +1,5 @@
-@import "../../../../themes/color.scss";
+@import "../../../../themes/theme/variable";
+@import "../../../../themes/theme/mixins";
 @import "../../../../themes/core/scrollbar.scss";
 @import "../../../../themes/core/button.scss";
 
@@ -12,7 +13,7 @@
       padding: 10px;
       outline: none;
       border: none;
-      background: $background-input-text;
+      background: theme-apply($background-input-text);
     }
 
     .mat-icon {
@@ -98,14 +99,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 
@@ -126,13 +127,13 @@
     height: 450px;
     overflow-y: auto;
     margin-top: 12px;
-    
+
     &.panel__content {
       height: 450px;
       overflow: auto;
       margin-top: 12px;
     }
-  
+
     &.panel__content_item {
       height: 350px;
       overflow: auto;
@@ -144,7 +145,7 @@
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -166,12 +167,12 @@
       display: flex;
       align-items: center;
       min-height: 40px;
-  
+
       .mat-icon {
         color: black(0.6);
         margin-right: 17px;
         min-width: fit-content;
-  
+
         svg {
           display: block;
           min-width: fit-content;

package/src/lib/components/related/risk/analysis/analysis.component.scss

@@ -1,4 +1,5 @@
-@import '../../../../../themes/color.scss';
+@import "../../../../../themes/theme/variable";
+@import "../../../../../themes/theme/mixins";
 @import '../../../../../themes/core/scrollbar.scss';
 @import '../../../../../themes/core/button.scss';
 
@@ -9,7 +10,7 @@
     font-style: normal;
     font-size: 16px;
     line-height: 22px;
-    color: $popup-title-color;
+    color: theme-apply($popup-title-color);
   }
 
   .line__divider {
@@ -61,7 +62,7 @@
 
   .panel__error {
     height: 40px;
-    color: $popup-error-color;
+    color: theme-apply($popup-error-color);
     display: flex;
     flex-wrap: wrap;
     align-content: center;

package/src/lib/components/related/risk/list/list.component.scss

@@ -1,11 +1,12 @@
-@import "../../../../../themes/core/colors";
+@import "../../../../../themes/theme/variable";
+@import "../../../../../themes/theme/mixins";
 @import "../../../../../themes/core/typography";
 
 .list-risk {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: normal;
-  color: $default-color;
+  color: theme-apply($default-color);
 
   .list-risk__title {
     font-weight: 600;
@@ -96,7 +97,7 @@
       background-color: #fafafa;
 
       border-bottom: 1px solid #ddd;
-      color: $primary;
+      color: theme-apply($primary);
       min-height: 48px;
       border-bottom: 1px solid #ddd;
 
@@ -124,17 +125,17 @@
 }
 
 .label-red {
-  background-color: $secondary;
+  background-color: theme-apply($secondary);
   color: white;
 }
 
 .label-yellow {
-  background-color: $risk-yellow;
+  background-color: theme-apply($risk-yellow);
   color: black(0.87);
 }
 
 .label-green {
-  background-color: $risk-green;
+  background-color: theme-apply($risk-green);
   color: white;
 }
 

package/src/lib/components/related/risk/result/result.component.scss

@@ -1,4 +1,5 @@
-@import '../../../../../themes/core/colors';
+@import "../../../../../themes/theme/variable";
+@import "../../../../../themes/theme/mixins";
 @import '../../../../../themes/core/typography';
 
 .dialog-title {
@@ -56,7 +57,7 @@
     font-style: normal;
     text-align: left;
     padding: 10px 25px;
-    color: $default-color;
+    color: theme-apply($default-color);
   }
 
   .first {
@@ -86,13 +87,13 @@
       }
     }
     &.text-red {
-      color: $error;
+      color: theme-apply($error);
     }
     &.text-yellow {
-      color: $risk-yellow-dark;
+      color: theme-apply($risk-yellow-dark);
     }
     &.text-green {
-      color: $risk-green-dark;
+      color: theme-apply($risk-green-dark);
     }
   }
 }
@@ -113,16 +114,16 @@
 }
 
 .label-red {
-  background-color: $secondary;
+  background-color: theme-apply($secondary);
   color: white;
 }
 
 .label-yellow {
-  background-color: $risk-yellow;
+  background-color: theme-apply($risk-yellow);
   color: black(0.87);
 }
 
 .label-green {
-  background-color: $risk-green;
+  background-color: theme-apply($risk-green);
   color: white;
 }

package/src/lib/components/rich-text/rich-text.scss

@@ -1,4 +1,5 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 .qms-rich-text {
@@ -40,7 +41,7 @@
   .ck.ck-editor__editable {
     &:not(.ck-editor__nested-editable).ck-focused {
       border: 1px solid #c4c4c4;
-      border-bottom: 2px solid $primary;
+      border-bottom: 2px solid theme-apply($primary);
       border-radius: 4px;
       box-shadow: none;
       background-color: black(0.08);

package/src/lib/components/select-dialog/select-dialog.scss

@@ -1,5 +1,5 @@
-@import "./../../../themes/core/colors";
-@import "./../../../themes/color";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .mr10 {
   margin-right: 10px;
@@ -65,7 +65,7 @@
     font-weight: 600;
     font-size: 12px;
     line-height: 16px;
-    color: $default-color;
+    color: theme-apply($default-color);
   }
 
   .mat-checkbox.qms-group-options.mat-checkbox-checked {
@@ -105,14 +105,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 

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

@@ -1,4 +1,5 @@
-@import "../../../themes/color.scss";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/scrollbar.scss";
 @import "../../../themes/core/button.scss";
 
@@ -12,7 +13,7 @@
       padding: 10px;
       outline: none;
       border: none;
-      background: $background-input-text;
+      background: theme-apply($background-input-text);
     }
 
     .mat-icon {
@@ -102,14 +103,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 
@@ -135,13 +136,13 @@
     height: 450px;
     overflow-y: auto;
     margin-top: 12px;
-    
+
     &.panel__content {
       height: 450px;
       overflow: auto;
       margin-top: 12px;
     }
-  
+
     &.panel__content_item {
       height: 350px;
       overflow: auto;
@@ -153,7 +154,7 @@
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -175,12 +176,12 @@
       display: flex;
       align-items: center;
       min-height: 40px;
-  
+
       .mat-icon {
         color: black(0.6);
         margin-right: 17px;
         min-width: fit-content;
-  
+
         svg {
           display: block;
           min-width: fit-content;

package/src/lib/components/select-one/select-one.component.scss

@@ -1,4 +1,5 @@
-@import "../../../themes/color.scss";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/scrollbar.scss";
 @import "../../../themes/core/button.scss";
 
@@ -12,7 +13,7 @@
       padding: 10px;
       outline: none;
       border: none;
-      background: $background-input-text;
+      background: theme-apply($background-input-text);
     }
 
     .mat-icon {
@@ -98,14 +99,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 

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

@@ -1,7 +1,7 @@
-@import "../../../themes/color.scss";
 @import "../../../themes/core/scrollbar.scss";
 @import "../../../themes/core/button.scss";
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .qmslib__related__popup__container {
   .input__field {
@@ -13,7 +13,7 @@
       padding: 10px;
       outline: none;
       border: none;
-      background: $background-input-text;
+      background: theme-apply($background-input-text);
     }
 
     .mat-icon {
@@ -99,14 +99,14 @@
     .related__item__content {
       height: 32px;
       line-height: 32px;
-      background-color: $related-item-background;
+      background-color: theme-apply($related-item-background);
       max-width: 100%;
       margin-bottom: 5px;
       margin-left: 2.5px;
       margin-right: 2.5px;
 
       .mat-icon {
-        color: $related-mat-icon-color;
+        color: theme-apply($related-mat-icon-color);
         font-size: 24px;
       }
 
@@ -127,13 +127,13 @@
     height: 450px;
     overflow-y: auto;
     margin-top: 12px;
-    
+
     &.panel__content {
       height: 450px;
       overflow: auto;
       margin-top: 12px;
     }
-  
+
     &.panel__content_item {
       height: 350px;
       overflow: auto;
@@ -145,7 +145,7 @@
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -167,12 +167,12 @@
       display: flex;
       align-items: center;
       min-height: 40px;
-      
+
       .mat-icon {
         color: black(0.6);
         margin-right: 17px;
         min-width: fit-content;
-  
+
         svg {
           display: block;
           min-width: fit-content;
@@ -187,7 +187,7 @@
         width: 100%;
 
         .select-one-checked {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
     }
@@ -310,4 +310,4 @@ cdk-virtual-scroll-viewport {
   .related-viewport {
     min-height: 300px;
   }
-}
+}

package/src/lib/components/substance-conflict/substance-conflict.component.scss

@@ -1,4 +1,5 @@
-@import '../../../themes/color';
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .substance-conflict-container {
   .content {
@@ -8,12 +9,12 @@
   }
 
   .conflict {
-    background-color: $background-conflict-info;
+    background-color: theme-apply($background-conflict-info);
     padding: 15px;
     display: flex;
     font-size: 14px;
     max-width: 570px;
-    
+
     .icon {
       margin-right: 15px;
     }

package/src/lib/components/table/table.scss

@@ -1,4 +1,5 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 $heightAction: 46px;
@@ -84,7 +85,7 @@ button.btn-more {
   display: none;
 
   mat-icon {
-    color: $primary;
+    color: theme-apply($primary);
     vertical-align: middle;
   }
 }
@@ -148,4 +149,4 @@ button.btn-more {
   .block4 {
     display: none;
   }
-}
+}

package/src/lib/components/tooltip/tooltip.scss

@@ -1,6 +1,8 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 @import "../list/list-base";
+
 .qms-tooltip-container{
     background: #FAFAFA;
     border-radius: 0.25rem;