qms-angular 1.0.86 → 1.0.89

package/src/lib/qms-ckeditor-components/common/flowchart/assets/image-icon4.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#CCE134;}
+	.st1{fill:#F3922B;}
+	.st2{fill:#DC3348;}
+	.st3{fill:#01B49E;}
+	.st4{fill:#A0A01C;}
+	.st5{fill:#3C7D90;}
+</style><g id="XMLID_703_"><polygon class="st0" id="XMLID_662_" points="63.5,256 15.4,172.6 63.5,89.3 159.7,89.3 207.9,172.6 159.7,256  "/><polygon class="st1" id="XMLID_704_" points="207.9,172.7 159.8,89.3 207.9,6 304.1,6 352.2,89.3 304.1,172.7  "/><polygon class="st2" id="XMLID_705_" points="352.3,256 304.1,172.7 352.3,89.3 448.5,89.3 496.6,172.7 448.5,256  "/><polygon class="st3" id="XMLID_869_" points="65.1,422.7 17,339.3 65.1,256 161.4,256 209.5,339.3 161.4,422.7  "/><polygon class="st4" id="XMLID_868_" points="209.5,506 161.4,422.7 209.5,339.3 305.7,339.3 353.8,422.7 305.7,506  "/><polygon class="st5" id="XMLID_867_" points="352.2,422.7 304.1,339.3 352.2,256 448.4,256 496.5,339.3 448.4,422.7  "/></g></svg>

package/src/lib/qms-ckeditor-components/common/flowchart/assets/no-color-icon.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f6f6f6;
+      }
+
+      .cls-2 {
+        fill: #8f8f8f;
+      }
+    </style>
+  </defs>
+  <g id="Group_70" data-name="Group 70" transform="translate(-11033 766)">
+    <rect id="Rectangle_7" data-name="Rectangle 7" class="cls-1" width="92" height="92" rx="3" transform="translate(11033 -766)"/>
+    <g id="Group_69" data-name="Group 69" transform="translate(-0.326 -0.326)">
+      <rect id="Rectangle_44" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11048.072 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-2" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11064.973 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-3" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.873 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-4" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11098.773 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-5" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11056.522 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-6" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11073.423 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-7" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11090.323 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-8" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11107.223 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-9" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -722.751) rotate(90)"/>
+      <rect id="Rectangle_44-10" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11048.072 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-11" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11064.973 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-12" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.873 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-13" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11098.773 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-14" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11056.522 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-15" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11073.423 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-16" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11090.323 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-17" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11107.223 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-18" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -756.674) rotate(90)"/>
+      <rect id="Rectangle_44-19" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11048.072 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-20" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11064.973 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-21" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.873 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-22" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11098.773 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-23" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11056.522 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-24" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11073.423 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-25" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11090.323 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-26" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11107.223 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-27" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -688.827) rotate(90)"/>
+      <rect id="Rectangle_44-28" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -751.04) rotate(180)"/>
+      <rect id="Rectangle_44-29" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -734.14) rotate(180)"/>
+      <rect id="Rectangle_44-30" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -717.24) rotate(180)"/>
+      <rect id="Rectangle_44-31" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -700.34) rotate(180)"/>
+      <rect id="Rectangle_44-32" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -742.59) rotate(180)"/>
+      <rect id="Rectangle_44-33" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -725.69) rotate(180)"/>
+      <rect id="Rectangle_44-34" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -708.789) rotate(180)"/>
+      <rect id="Rectangle_44-35" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -691.889) rotate(180)"/>
+      <rect id="Rectangle_44-36" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11081.751 -683.439) rotate(180)"/>
+      <rect id="Rectangle_44-37" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -751.04) rotate(180)"/>
+      <rect id="Rectangle_44-38" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -734.14) rotate(180)"/>
+      <rect id="Rectangle_44-39" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -717.24) rotate(180)"/>
+      <rect id="Rectangle_44-40" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -700.34) rotate(180)"/>
+      <rect id="Rectangle_44-41" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -742.59) rotate(180)"/>
+      <rect id="Rectangle_44-42" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -725.69) rotate(180)"/>
+      <rect id="Rectangle_44-43" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -708.789) rotate(180)"/>
+      <rect id="Rectangle_44-44" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -691.889) rotate(180)"/>
+      <rect id="Rectangle_44-45" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11047.827 -683.439) rotate(180)"/>
+      <rect id="Rectangle_44-46" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -751.04) rotate(180)"/>
+      <rect id="Rectangle_44-47" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -734.14) rotate(180)"/>
+      <rect id="Rectangle_44-48" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -717.24) rotate(180)"/>
+      <rect id="Rectangle_44-49" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -700.34) rotate(180)"/>
+      <rect id="Rectangle_44-50" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -742.59) rotate(180)"/>
+      <rect id="Rectangle_44-51" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -725.69) rotate(180)"/>
+      <rect id="Rectangle_44-52" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -708.789) rotate(180)"/>
+      <rect id="Rectangle_44-53" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -691.889) rotate(180)"/>
+      <rect id="Rectangle_44-54" data-name="Rectangle 44" class="cls-2" width="5.501" height="5.633" transform="translate(11115.674 -683.439) rotate(180)"/>
+    </g>
+  </g>
+</svg>

package/src/lib/qms-ckeditor-components/common/flowchart/assets/transparent-icon.svg

@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f6f6f6;
+      }
+
+      .cls-2 {
+        fill: #8f8f8f;
+      }
+    </style>
+  </defs>
+  <g id="Group_71" data-name="Group 71" transform="translate(-11134 766)">
+    <rect id="Rectangle_7" data-name="Rectangle 7" class="cls-1" width="92" height="92" rx="3" transform="translate(11134 -766)"/>
+    <g id="Group_68" data-name="Group 68" transform="translate(6)">
+      <rect id="Rectangle_8" data-name="Rectangle 8" class="cls-2" width="10" height="10" transform="translate(11134 -760)"/>
+      <rect id="Rectangle_24" data-name="Rectangle 24" class="cls-2" width="10" height="10" transform="translate(11134 -740)"/>
+      <rect id="Rectangle_32" data-name="Rectangle 32" class="cls-2" width="10" height="10" transform="translate(11134 -720)"/>
+      <rect id="Rectangle_40" data-name="Rectangle 40" class="cls-2" width="10" height="10" transform="translate(11134 -700)"/>
+      <rect id="Rectangle_11" data-name="Rectangle 11" class="cls-2" width="10" height="10" transform="translate(11154 -760)"/>
+      <rect id="Rectangle_23" data-name="Rectangle 23" class="cls-2" width="10" height="10" transform="translate(11154 -740)"/>
+      <rect id="Rectangle_31" data-name="Rectangle 31" class="cls-2" width="10" height="10" transform="translate(11154 -720)"/>
+      <rect id="Rectangle_39" data-name="Rectangle 39" class="cls-2" width="10" height="10" transform="translate(11154 -700)"/>
+      <rect id="Rectangle_13" data-name="Rectangle 13" class="cls-2" width="10" height="10" transform="translate(11174 -760)"/>
+      <rect id="Rectangle_22" data-name="Rectangle 22" class="cls-2" width="10" height="10" transform="translate(11174 -740)"/>
+      <rect id="Rectangle_30" data-name="Rectangle 30" class="cls-2" width="10" height="10" transform="translate(11174 -720)"/>
+      <rect id="Rectangle_38" data-name="Rectangle 38" class="cls-2" width="10" height="10" transform="translate(11174 -700)"/>
+      <rect id="Rectangle_15" data-name="Rectangle 15" class="cls-2" width="10" height="10" transform="translate(11194 -760)"/>
+      <rect id="Rectangle_21" data-name="Rectangle 21" class="cls-2" width="10" height="10" transform="translate(11194 -740)"/>
+      <rect id="Rectangle_29" data-name="Rectangle 29" class="cls-2" width="10" height="10" transform="translate(11194 -720)"/>
+      <rect id="Rectangle_37" data-name="Rectangle 37" class="cls-2" width="10" height="10" transform="translate(11194 -700)"/>
+      <rect id="Rectangle_9" data-name="Rectangle 9" class="cls-2" width="10" height="10" transform="translate(11144 -750)"/>
+      <rect id="Rectangle_17" data-name="Rectangle 17" class="cls-2" width="10" height="10" transform="translate(11144 -730)"/>
+      <rect id="Rectangle_25" data-name="Rectangle 25" class="cls-2" width="10" height="10" transform="translate(11144 -710)"/>
+      <rect id="Rectangle_33" data-name="Rectangle 33" class="cls-2" width="10" height="10" transform="translate(11144 -690)"/>
+      <rect id="Rectangle_10" data-name="Rectangle 10" class="cls-2" width="10" height="10" transform="translate(11164 -750)"/>
+      <rect id="Rectangle_18" data-name="Rectangle 18" class="cls-2" width="10" height="10" transform="translate(11164 -730)"/>
+      <rect id="Rectangle_26" data-name="Rectangle 26" class="cls-2" width="10" height="10" transform="translate(11164 -710)"/>
+      <rect id="Rectangle_34" data-name="Rectangle 34" class="cls-2" width="10" height="10" transform="translate(11164 -690)"/>
+      <rect id="Rectangle_12" data-name="Rectangle 12" class="cls-2" width="10" height="10" transform="translate(11184 -750)"/>
+      <rect id="Rectangle_19" data-name="Rectangle 19" class="cls-2" width="10" height="10" transform="translate(11184 -730)"/>
+      <rect id="Rectangle_27" data-name="Rectangle 27" class="cls-2" width="10" height="10" transform="translate(11184 -710)"/>
+      <rect id="Rectangle_35" data-name="Rectangle 35" class="cls-2" width="10" height="10" transform="translate(11184 -690)"/>
+      <rect id="Rectangle_14" data-name="Rectangle 14" class="cls-2" width="10" height="10" transform="translate(11204 -750)"/>
+      <rect id="Rectangle_20" data-name="Rectangle 20" class="cls-2" width="10" height="10" transform="translate(11204 -730)"/>
+      <rect id="Rectangle_28" data-name="Rectangle 28" class="cls-2" width="10" height="10" transform="translate(11204 -710)"/>
+      <rect id="Rectangle_36" data-name="Rectangle 36" class="cls-2" width="10" height="10" transform="translate(11204 -690)"/>
+    </g>
+  </g>
+</svg>

package/src/lib/qms-ckeditor-components/components/qms-ckeditor-flowchart/qms-ckeditor-flowchart.component.scss

@@ -0,0 +1,68 @@
+.qmsckeditor__flowchart__container {
+  ::ng-deep .mat-dialog-content {
+    padding: 0 0;
+  }
+  
+  .flowchart__editor {
+    width:100%;
+    height: 600px;
+  }
+  #contentpanel {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #paperpanel {
+    position:relative;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    height:540px;
+    width:60%;
+    overflow-y: auto;
+    .paper-container{
+      overflow-y: auto;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  #stencilpanel {
+    position:relative;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    height:540px;
+    width:20%;
+  }
+
+  #rightpanel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:20%;
+    height: 540px;
+    #inspectorpanel{
+      overflow-y: auto;
+      width: 100%;
+      height: 80%;
+    }
+    #navigatorpanel{
+      width: 100%;
+      height: 20%;
+    }
+  }
+
+  #themepicker{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+
+

package/src/lib/qms-ckeditor-components/styles/_modules.scss

@@ -182,3 +182,12 @@
 .ck-content hr {
     background: #ccc;
 }
+
+.ck-font-size-dropdown .ck-dropdown__panel ul{
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{
+    line-height: 50px;
+}

package/src/themes/core/_mat-icon.scss

@@ -1,67 +1,67 @@
-@font-face {
-    font-family: "Material Icons";
-    font-display: block;
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v85/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
-  }
+// @font-face {
+//     font-family: "Material Icons";
+//     font-display: block;
+//     font-style: normal;
+//     font-weight: 400;
+//     src: url('../../assets/fonts/Material/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format("woff2");
+//   }
   
-  @font-face {
-    font-family: "Material Icons Outlined";
-    font-display: block;
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v56/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2");
-  }
+//   @font-face {
+//     font-family: "Material Icons Outlined";
+//     font-display: block;
+//     font-style: normal;
+//     font-weight: 400;
+//     src: url('../../assets/fonts/Material/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2') format("woff2");
+//   }
   
-  .material-icons {
-    font-family: "Material Icons";
-    font-display: block;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: "liga";
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
+//   .material-icons {
+//     font-family: "Material Icons";
+//     font-display: block;
+//     font-weight: normal;
+//     font-style: normal;
+//     font-size: 24px;
+//     line-height: 1;
+//     letter-spacing: normal;
+//     text-transform: none;
+//     display: inline-block;
+//     white-space: nowrap;
+//     word-wrap: normal;
+//     direction: ltr;
+//     -webkit-font-feature-settings: "liga";
+//     /* Support for all WebKit browsers. */
+//     -webkit-font-smoothing: antialiased;
+//     /* Support for Safari and Chrome. */
+//     text-rendering: optimizeLegibility;
   
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
+//     /* Support for Firefox. */
+//     -moz-osx-font-smoothing: grayscale;
   
-    /* Support for IE. */
-    font-feature-settings: "liga";
-  }
+//     /* Support for IE. */
+//     font-feature-settings: "liga";
+//   }
   
-  .material-icons-outlined {
-    font-family: "Material Icons Outlined";
-    font-display: block;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: "liga";
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
+//   .material-icons-outlined {
+//     font-family: "Material Icons Outlined";
+//     font-display: block;
+//     font-weight: normal;
+//     font-style: normal;
+//     font-size: 24px;
+//     line-height: 1;
+//     letter-spacing: normal;
+//     text-transform: none;
+//     display: inline-block;
+//     white-space: nowrap;
+//     word-wrap: normal;
+//     direction: ltr;
+//     -webkit-font-feature-settings: "liga";
+//     /* Support for all WebKit browsers. */
+//     -webkit-font-smoothing: antialiased;
+//     /* Support for Safari and Chrome. */
+//     text-rendering: optimizeLegibility;
   
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
+//     /* Support for Firefox. */
+//     -moz-osx-font-smoothing: grayscale;
   
-    /* Support for IE. */
-    font-feature-settings: "liga";
-  }
+//     /* Support for IE. */
+//     font-feature-settings: "liga";
+//   }

package/src/themes/core/_table.scss

@@ -3,6 +3,7 @@
 
 .qms-table {
     .mat-checkbox.qms-group-options {
+
         .mat-checkbox-inner-container {
             width: 18px;
             height: 18px;
@@ -22,6 +23,36 @@
         padding-left: 20px;
     }
 
+    a {
+        text-decoration: none;
+        color: #323232;
+        word-break: break-word;
+        margin: -9px -2px;
+        padding: 9px 2px;
+
+        &:hover, &:focus-visible {
+            outline: unset;
+            color: #1954A9;
+            text-decoration: underline;
+        }
+    }
+
+    .clickable-container {
+        margin: -9px 0;
+        padding: 9px 0!important;
+    }
+
+    .clickable-content {
+        padding: 8px 6px;
+        border-radius: 5px;
+        cursor: pointer;
+
+        &:hover {
+            outline: unset;
+            background: rgba(0, 0, 0, 0.12);
+        }
+    }
+
     .qms-table-row {
         padding: 8px 0 8px 20px;
         background: #FFFFFF;
@@ -30,28 +61,45 @@
         margin-top: 8px;
         min-height: 40px;
         font-size: 14px;
+        line-height: 20px;
         font-family: 'Open Sans';
         font-weight: normal;
         color: #323232;
+        align-items: stretch;
+        cursor: pointer;
+        transition: background 0.2s;
 
         mat-cell:first-of-type {
             padding: 0;
         }
 
+        mat-cell:last-of-type {
+            padding-right: 16px;
+        }
+
         &[tabindex]:focus-visible {
             outline: 2px auto $primary;
         }
 
-        &:active, &:hover {
+        &:hover {
             background: rgba(0, 0, 0, 0.08);
         }
 
+        &:active {
+            background: #C8D6EA;;
+        }
+
         &-selected {
+            transition: background 0.2s;
             background: $tab-focus-background;
 
             &:hover {
                 background: rgba(40, 115, 223, 0.06);
             }
+
+            &:active {
+                background: rgba(40, 115, 223, 0.16);
+            }
         }
 
         &-disabled {
@@ -67,7 +115,16 @@
         &-draft {
             border: 2px dashed rgba(0, 0, 0, 0.12);
         }
-        cursor: pointer;
+
+        .qms-btn-icon {
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+
+            .qms-btn-icon-wrapper .mat-icon {
+                line-height: 20px;
+            }
+        }
     }
 
     //padding for table types
@@ -110,9 +167,10 @@
         }
 
         .qms-table-row {
-            padding-left: 4px;
+            padding-left: 3px;
 
             .expand-icon {
+                user-select: none;
                 transition: transform 0.2s;
                 margin: 0 10px;
             }
@@ -121,12 +179,18 @@
                 background: #F2F7FD;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
+                transition: background 0.2s;
 
                 &:hover {
-                    background: rgba(40, 115, 223, 0.06);
+                    background: #E6EFFB;
+                }
+
+                &:active {
+                    background: rgba(40, 115, 223, 0.16);
                 }
 
                 .expand-icon {
+                    user-select: none;
                     transition: transform 0.2s;
                     transform: rotate(180deg);
                 }
@@ -163,6 +227,10 @@
             background: $background-area;
 
             cursor: pointer;
+
+            &[tabindex]:focus-visible {
+                outline: 2px auto $primary;
+            }
             
             .mat-icon {
                 color: $primary;