qms-angular 1.0.87 → 1.0.90

package/src/themes/core/_table.scss

@@ -1,8 +1,10 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 .qms-table {
     .mat-checkbox.qms-group-options {
+
         .mat-checkbox-inner-container {
             width: 18px;
             height: 18px;
@@ -10,7 +12,7 @@
         }
 
         &.mat-checkbox-indeterminate .mat-checkbox-background, &.mat-checkbox-checked .mat-checkbox-background {
-            background-color: $primary !important;
+            background-color: theme-apply($primary) !important;
         }
 
         &.mat-checkbox-checked {
@@ -22,6 +24,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 +62,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;
+            outline: 2px auto theme-apply($primary);
         }
 
-        &:active, &:hover {
+        &:hover {
             background: rgba(0, 0, 0, 0.08);
         }
 
+        &:active {
+            background: #C8D6EA;;
+        }
+
         &-selected {
-            background: $tab-focus-background;
+            background: theme-apply($tab-focus-background);
+            transition: background 0.2s;
 
             &:hover {
                 background: rgba(40, 115, 223, 0.06);
             }
+
+            &:active {
+                background: rgba(40, 115, 223, 0.16);
+            }
         }
 
         &-disabled {
@@ -67,7 +116,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
@@ -76,7 +134,7 @@
             align-items: stretch!important;
             flex: unset;
             padding-left: 4px;
-    
+
             .qms-row-checkbox {
                 padding: 0 19px;
                 display: flex;
@@ -90,7 +148,7 @@
             .qms-row-checkbox-container:first-child {
                 align-items: stretch!important;
                 flex: unset;
-    
+
                 .qms-row-checkbox {
                     padding: 0 19px;
                     display: flex;
@@ -103,16 +161,17 @@
     &.qms-expand-table {
         .mat-header-cell {
             padding-left: 0;
-            
+
             .expand-icon-header {
                 margin-left: 15px;
             }
         }
 
         .qms-table-row {
-            padding-left: 4px;
+            padding-left: 3px;
 
             .expand-icon {
+                user-select: none;
                 transition: transform 0.2s;
                 margin: 0 10px;
             }
@@ -121,18 +180,24 @@
                 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);
                 }
 
                 mat-icon {
-                    color: $primary;
+                    color: theme-apply($primary);
                 }
             }
         }
@@ -147,29 +212,33 @@
         .qms-table-row {
             &.expandable-group {
                 padding-left: 0!important;
-                border-left: 4px solid $primary-light-32-opacity;
+                border-left: 4px solid theme-apply($primary-light-32-opacity);
                 border-radius: 4px 4px 0 0;
             }
         }
 
         .qms-collapse-group {
             border: 1px solid #E0E0E0;
-            border-left: 4px solid $primary-light-32-opacity;
+            border-left: 4px solid theme-apply($primary-light-32-opacity);
             border-bottom-left-radius: 4px;
             border-bottom-right-radius: 4px;
             border-top: none;
             padding-left: 12px;
             padding-top: 6px;
-            background: $background-area;
+            background: theme-apply($background-area);
 
             cursor: pointer;
-            
+
+            &[tabindex]:focus-visible {
+                outline: 2px auto theme-apply($primary);
+            }
+
             .mat-icon {
-                color: $primary;
+                color: theme-apply($primary);
             }
             .qms-text-collapse {
                 vertical-align: super;
-                color: $primary;
+                color: theme-apply($primary);
                 font-weight: 600;
                 font-size: 12px;
                 line-height: 16px;
@@ -181,7 +250,7 @@
             margin-top: unset;
             border-radius: unset;
             padding-left: 0!important;
-            border-left: 4px solid $primary-light-32-opacity;
+            border-left: 4px solid theme-apply($primary-light-32-opacity);
         }
     }
 
@@ -191,4 +260,4 @@
             border-radius: 0;
         }
     }
-}
+}

package/src/themes/core/_text-block.scss

@@ -1,5 +1,7 @@
 @import  "../../lib/components/list/list.scss";
-@import "../../themes/core/colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .qms-text-block{
     font-family: Open Sans;
 

package/src/themes/core/_typography.scss

@@ -1,108 +1,108 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+// /* cyrillic-ext */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFWJ0bbck.woff2') format('woff2');
+//   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+// }
+// /* cyrillic */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFUZ0bbck.woff2') format('woff2');
+//   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+// }
+// /* greek-ext */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFWZ0bbck.woff2') format('woff2');
+//   unicode-range: U+1F00-1FFF;
+// }
+// /* greek */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFVp0bbck.woff2') format('woff2');
+//   unicode-range: U+0370-03FF;
+// }
+// /* vietnamese */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFWp0bbck.woff2') format('woff2');
+//   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+// }
+// /* latin-ext */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFW50bbck.woff2') format('woff2');
+//   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+// }
+// /* latin */
+// @font-face {
+//   font-family: 'Open Sans';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/OpenSans/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
+//   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+// }
+// /* cyrillic-ext */
+// @font-face {
+//   font-family: 'Raleway';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/Raleway/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2') format('woff2');
+//   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+// }
+// /* cyrillic */
+// @font-face {
+//   font-family: 'Raleway';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/Raleway/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2') format('woff2');
+//   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+// }
+// /* vietnamese */
+// @font-face {
+//   font-family: 'Raleway';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/Raleway/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2') format('woff2');
+//   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+// }
+// /* latin-ext */
+// @font-face {
+//   font-family: 'Raleway';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/Raleway/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2') format('woff2');
+//   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+// }
+// /* latin */
+// @font-face {
+//   font-family: 'Raleway';
+//   font-style: normal;
+//   font-weight: 400;
+//   font-display: swap;
+//   src: url('../../../src/assets/fonts/Raleway/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2') format('woff2');
+//   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+// }

package/src/themes/theme/_mixins.scss

@@ -0,0 +1,18 @@
+@import 'variable';
+
+@mixin theme-map($map: ()) {
+  @each $key, $value in $map {
+      #{$key}: $value;
+  }
+}
+
+@function theme-apply($key, $fallback: null, $map:  $qms-theme-default) {
+  @if not map-has-key($map, $key) {
+      @error "key: '#{$key}', is not a key in map: #{$map}";
+  }
+  @if ($fallback) {
+      @return var($key, $fallback);
+  } @else {
+      @return var($key);
+  }
+}

package/src/themes/theme/_theme.scss

@@ -0,0 +1,17 @@
+@import 'variable';
+@import 'mixins';
+
+:root {
+    body{
+        @include theme-map($qms-theme-default);
+    }
+}
+
+:root{
+    body.qms-theme-pink {
+        @include theme-map($qms-theme-pink);
+    }
+}
+
+
+