qms-angular 1.0.90 → 1.0.93

package/src/themes/core/_slide-toggle.scss

@@ -16,14 +16,18 @@
 
     .mat-slide-toggle-bar {
       margin-right: 19px;
-      background-color: #c5c5c5;
+    }
 
-      &:hover {
-        .mat-slide-toggle-persistent-ripple {
-          opacity: 0.08;
-          background-color: black;
-        }
-      }
+    &:hover:not(.mat-disabled) {
+      background-color: black(0.08);
+    }
+
+    &:active:not(.mat-disabled) {
+      background-color: black(0.12);
+    }
+
+    &.cdk-keyboard-focused {
+      background-color: black(0.08);
     }
 
     .mat-slide-toggle-thumb {
@@ -31,6 +35,7 @@
     }
 
     .mat-slide-toggle-content {
+      font-family: Open Sans;
       display: flex;
       flex-direction: column;
     }
@@ -53,57 +58,59 @@
       color: theme-apply($error);
     }
 
-    &:not(.mat-disabled).mat-checked.cdk-keyboard-focused {
-      .mat-slide-toggle-persistent-ripple {
-        opacity: 1;
-        background: theme-apply($secondary-light-6-opacity);
-      }
-    }
-
-    &:not(.mat-disabled).cdk-keyboard-focused {
-      .mat-slide-toggle-persistent-ripple {
-        opacity: 1;
-        background: black(0.12);
-      }
+    &.error-form {
+      border-bottom: 2px solid theme-apply($error);
     }
 
     &.mat-disabled {
       opacity: 1;
 
       .mat-slide-toggle-thumb {
-        background-color: #bfbfbf;
+        background-color: black(0.6);
       }
 
       .mat-slide-toggle-bar {
-        background-color: #e9e9e9;
+        background-color: black(0.6);
+        opacity: 0.38;
+      }
+
+      &.mat-checked {
+        .mat-slide-toggle-thumb {
+          background-color: theme-apply($primary-light-32-opacity);
+        }
+  
+        .mat-slide-toggle-bar {
+          background-color: theme-apply($primary);
+          opacity: 0.38;
+        }
       }
     }
 
     &.mat-checked {
       .mat-slide-toggle-bar {
-        background-color: #dab3a4;
+        background-color: theme-apply($primary-light-38-opacity);
+      }
 
-        &:hover {
-          .mat-ripple-element.mat-slide-toggle-persistent-ripple {
-            opacity: 1;
-            background-color: theme-apply($secondary-light-6-opacity);
-          }
+      .mat-ripple-element {
+        background-color: theme-apply($primary-light-12-opacity);
+      }
+      
+      &.cdk-keyboard-focused {
+        &:not(.ng-invalid) {
+          background-color: theme-apply($primary-dark-24-opacity);
         }
+      }
 
-        &:active {
-          .mat-ripple-element.mat-slide-toggle-persistent-ripple {
-            opacity: 1;
-            background-color: theme-apply($secondary-light-12-opacity);
-          }
-        }
+      &:hover:not(.mat-disabled) {
+        background-color: theme-apply($primary-dark-24-opacity);
       }
 
-      .mat-ripple-element {
-        background-color: theme-apply($secondary);
+      &:active:not(.mat-disabled) {
+        background-color: theme-apply($primary-light-32-opacity);
       }
 
       .mat-slide-toggle-thumb {
-        background-color: theme-apply($secondary);
+        background-color: theme-apply($primary);
       }
     }
   }

package/src/themes/core/_table.scss

@@ -87,7 +87,7 @@
         }
 
         &:active {
-            background: #C8D6EA;;
+            background: theme-apply($primary-light-24-opacity);
         }
 
         &-selected {

package/src/themes/theme/_variable.scss

@@ -6,7 +6,9 @@ $primary-light-6-opacity: --primary-light-6-opacity;
 $primary-light-12-opacity: --primary-light-12-opacity;
 $primary-light-24-opacity: --primary-light-24-opacity;
 $primary-light-32-opacity: --primary-light-32-opacity;
+$primary-light-38-opacity: --primary-light-38-opacity;
 $primary-dark: --primary-dark;
+$primary-dark-24-opacity: --primary-dark-24-opacity;
 
 $secondary: --secondary;
 $secondary-light: --secondary-light;
@@ -27,6 +29,7 @@ $slider-tick-color: --slider-tick-color;
 $slider-hover-border: --slider-hover-border;
 $slider-focus-border: --slider-focus-border;
 $slider-pressed: --slider-pressed;
+$disabled-select-input-checked: --disabled-select-input-checked;
 
 $error-color: --error-color;
 $success-color: --success-color;
@@ -114,12 +117,14 @@ $qms-theme-default: (
   $primary: #1954a9,
   $primary-light: #2873df,
   $primary-lighter: #b7daf8,
-  $primary-light-3-opacity: #e5eefb,
-  $primary-light-6-opacity: rgba(40, 115, 223, 0.06),
-  $primary-light-12-opacity: rgba(40, 115, 223, 0.12),
+  $primary-light-3-opacity: #f5faff,
+  $primary-light-6-opacity: #F2F7FD,
+  $primary-light-12-opacity: #E5EEFB,
   $primary-light-24-opacity: rgba(40, 115, 223, 0.24),
   $primary-light-32-opacity: #94baef,
+  $primary-light-38-opacity: #86A5D1,
   $primary-dark: #144285,
+  $primary-dark-24-opacity: #C8D6EA,
   $secondary: #9e360f,
   $secondary-light: #b63e11,
   $secondary-dark: #872e0d,
@@ -132,6 +137,7 @@ $qms-theme-default: (
   $disabled: #e4e4e4,
   $active: #1954a9,
   $default-color: #323232,
+  $disabled-select-input-checked: #DADADA,
   $slider-background: rgba(#1954a9, 0.38),
   $slider-tick-color: rgba(255, 255, 255, 0.38),
   $slider-hover-border: rgba(25, 84, 169, 8%),
@@ -210,12 +216,14 @@ $qms-theme-pink: (
   $primary: #1954a9,
   $primary-light: #2873df,
   $primary-lighter: #b7daf8,
-  $primary-light-3-opacity: #e5eefb,
-  $primary-light-6-opacity: rgba(40, 115, 223, 0.06),
-  $primary-light-12-opacity: rgba(40, 115, 223, 0.12),
+  $primary-light-3-opacity: #f5faff,
+  $primary-light-6-opacity: #F2F7FD,
+  $primary-light-12-opacity: #E5EEFB,
   $primary-light-24-opacity: rgba(40, 115, 223, 0.24),
   $primary-light-32-opacity: #94baef,
+  $primary-light-38-opacity: #86A5D1,
   $primary-dark: #144285,
+  $primary-dark-24-opacity: #C8D6EA,
   $secondary: #9e360f,
   $secondary-light: #b63e11,
   $secondary-dark: #872e0d,
@@ -228,6 +236,7 @@ $qms-theme-pink: (
   $disabled: #e4e4e4,
   $active: #1954a9,
   $default-color: #323232,
+  $disabled-select-input-checked: #DADADA,
   $slider-background: rgba(#1954a9, 0.38),
   $slider-tick-color: rgba(255, 255, 255, 0.38),
   $slider-hover-border: rgba(25, 84, 169, 8%),