qms-angular 1.0.89 → 1.0.92

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

@@ -3,7 +3,7 @@ $qms-list-top: 6px;
 $item-height: 40px;
 $leading-icon: 24px;
 $leading-icon-padding: 4px;
-$subtitle-color: $default-color;
+$subtitle-color: theme-apply($default-color);
 $subtitle-weight: 600;
 $border-bottom-item: #e0e0e0;
 $size-caption: 0.75rem;
@@ -15,7 +15,7 @@ $two-line-height: 63px;
 // $three-line-height: 88px;
 $three-line-height: 81px;
 $border-radius-default: 2px;
-$image-circle-size: 40px; 
+$image-circle-size: 40px;
 $image-square-size: 56px;
 $image-rect-width: 100px;
 $image-rect-unset: unset;

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 {
@@ -33,32 +36,59 @@
     }
 
     .mat-expansion-panel-header[aria-disabled="true"] {
-      color: black(0.38);
       pointer-events: none;
-      @include color-inherit;
+      user-select: none;
+
+      .qms-list-header {
+        * {
+          color: theme-apply($primary);
+          opacity: 0.38;
+        }
+      }
     }
 
     .mat-expansion-panel-header {
       &:hover {
         &:not([aria-disabled="true"]) {
-          background: black(0.08);
+          background: theme-apply($primary-light-6-opacity);          
+        }
+
+        .subtitle, .default-subtitle, .caption,
+        .mat-expansion-indicator::after,  
+        .material-icons,
+        .material-icons-outlined {
+          color: theme-apply($primary);
         }
       }
 
       &:active {
         &:not([aria-disabled="true"]) {
-          background: black(0.12);
+          background: theme-apply($primary-light-24-opacity); 
         }
-      }   
 
+        .subtitle, .default-subtitle, .caption, 
+        .mat-expansion-indicator::after,  
+        .material-icons,
+        .material-icons-outlined {
+          color: theme-apply($primary);
+        }
+      }     
+   
       
       &.cdk-keyboard-focused {
-        border: 2px solid $primary;
+        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: theme-apply($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";
@@ -16,6 +17,7 @@
   width: 100%;
   padding: 0;
   min-height: $item-height;
+  height: $item-height;
 
   &.mat-2-line {
     height: $two-line-height;
@@ -46,7 +48,7 @@
 
     .trailing-box {
       height: 100%;
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid $border-bottom-item;
       padding-top: 10px;
     }
   }
@@ -57,12 +59,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 +94,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 +168,7 @@ img.leading-icon {
     display: flex;
     justify-content: space-between;
 
-    .mat-icon,
+    .material-icons,
     .material-icons-outlined {
       font-size: 20px;
     }
@@ -173,7 +191,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;
@@ -140,11 +141,10 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -166,12 +166,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/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/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;
@@ -149,11 +150,10 @@
     }
 
     .splitview-header{
-      height: 30px;
       font-size: 12px;
       letter-spacing: 1px;
       font-family: "RALEWAY";
-      font-weight: 600;    
+      font-weight: 600;
       display: flex;
       align-items: center;
     }
@@ -175,12 +175,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;
       }