qms-angular 1.0.92 → 1.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bundles/qms-angular.umd.js +1 -1
  2. package/esm2015/lib/components/button/button-toggle.js +1 -1
  3. package/fesm2015/qms-angular.js +1 -1
  4. package/package.json +1 -1
  5. package/qms-angular.metadata.json +1 -1
  6. package/src/lib/components/button/button-toggle.scss +0 -1
  7. package/src/themes/core/_checkbox.scss +39 -38
  8. package/src/themes/core/_radio.scss +27 -79
  9. package/src/themes/core/_slide-toggle.scss +43 -36
  10. package/src/themes/theme/_variable.scss +9 -0
package/src/lib/components/button/button-toggle.scss CHANGED
@@ -21,7 +21,6 @@
21
21
  line-height: 16px;
22
22
 
23
23
  &.qms-button-toggle-appearance-standard {
24
- background-color: white;
25
24
  color: theme-apply($default-color);
26
25
  position: relative;
27
26
 
package/src/themes/core/_checkbox.scss CHANGED
@@ -14,19 +14,16 @@
14
14
 
15
15
  .mat-checkbox-inner-container {
16
16
  margin-right: 19px;
17
-
18
- &:hover {
19
- .mat-ripple-element {
20
- opacity: 1;
21
- background: black(0.08);
22
- }
23
- }
24
17
  }
25
18
 
26
- .mat-ripple-element {
27
- background: black(0.12);
19
+ &:hover:not(.mat-checkbox-disabled) {
20
+ background-color: black(0.08);
28
21
  }
29
22
 
23
+ &:active:not(.mat-checkbox-disabled) {
24
+ background-color: black(0.12);
25
+ }
26
+
30
27
  .mat-checkbox-label {
31
28
  display: flex;
32
29
  flex-direction: column;
@@ -50,28 +47,20 @@
50
47
  color: theme-apply($error);
51
48
  }
52
49
 
53
- &.cdk-keyboard-focused {
54
- &:not(.ng-invalid) {
55
- .mat-checkbox-persistent-ripple {
56
- opacity: 1;
57
- background-color: black(0.08);
58
- }
59
- }
50
+ &.error-form {
51
+ border-bottom: 2px solid theme-apply($error);
60
52
  }
61
53
 
62
- &.cdk-keyboard-focused.ng-invalid {
63
- .mat-checkbox-persistent-ripple {
64
- opacity: 1;
65
- background-color: black(0.08);
66
- }
67
- }
68
-
69
- &.mat-checkbox-checked.cdk-keyboard-focused
70
- .mat-checkbox-persistent-ripple {
71
- background: theme-apply($secondary-light-6-opacity);
54
+ &.cdk-keyboard-focused {
55
+ background-color: black(0.08);
72
56
  }
73
57
 
74
58
  &.mat-checkbox-disabled:not(.mat-checkbox-checked) {
59
+ .mat-checkbox-background {
60
+ background: black(0.24);
61
+ opacity: 0.68;
62
+ }
63
+
75
64
  .mat-checkbox-frame {
76
65
  border-color: black(0.38);
77
66
  background: white;
@@ -80,22 +69,34 @@
80
69
  }
81
70
 
82
71
  &.mat-checkbox-checked {
83
- background: rgba(207, 71, 20, 0.12);
84
- }
72
+ background: theme-apply($primary-light-12-opacity);
85
73
 
86
- &.mat-checkbox-checked {
87
- &:not(.mat-checkbox-disabled) {
88
- .mat-ripple-element {
89
- background: theme-apply($secondary-light-6-opacity);
74
+ &.cdk-keyboard-focused {
75
+ &:not(.ng-invalid) {
76
+ background-color: theme-apply($primary-dark-24-opacity);
90
77
  }
91
78
  }
92
- }
93
79
 
94
-
95
- &.mat-checkbox-indeterminate,
96
- &.mat-checkbox-checked {
97
- .mat-checkbox-background {
98
- background: theme-apply($secondary);
80
+ &:hover:not(.mat-checkbox-disabled) {
81
+ background-color: theme-apply($primary-dark-24-opacity);
82
+ }
83
+
84
+ &:active:not(.mat-checkbox-disabled) {
85
+ background-color: theme-apply($primary-light-32-opacity);
86
+ }
87
+
88
+ &.mat-checkbox-disabled {
89
+ .mat-checkbox-inner-container {
90
+ background-color: theme-apply($disabled-select-input-checked);
91
+ }
92
+ }
93
+
94
+ .mat-checkbox-inner-container {
95
+ background-color: theme-apply($primary);
96
+ }
97
+
98
+ .mat-checkbox-frame {
99
+ border-color: theme-apply($primary);
99
100
  }
100
101
  }
101
102
  }
package/src/themes/core/_radio.scss CHANGED
@@ -3,20 +3,6 @@
3
3
  @import "typography";
4
4
 
5
5
  // RADIO STYLES
6
- .mat-radio-group.ng-invalid {
7
- .mat-radio-button {
8
- &.qms-group-options {
9
- &:not(.mat-radio-disabled).cdk-keyboard-focused,
10
- &:not(.mat-radio-disabled).cdk-program-focused {
11
- .mat-radio-persistent-ripple {
12
- opacity: 1;
13
- background: black(0.08);
14
- }
15
- }
16
- }
17
- }
18
- }
19
-
20
6
  .mat-radio-button {
21
7
  &.qms-group-options {
22
8
  font-family: Open Sans;
@@ -27,30 +13,20 @@
27
13
  border-radius: 4px;
28
14
 
29
15
  .mat-radio-container {
30
- margin-right: 19px;
31
-
32
- &:hover {
33
- .mat-ripple-element {
34
- opacity: 0.08;
35
- background-color: black;
36
- }
37
- }
16
+ margin-right: 19px;
38
17
  }
39
18
 
40
- &.mat-radio-disabled .mat-radio-container {
41
- &:hover {
42
- .mat-radio-persistent-ripple {
43
- opacity: 0;
44
- }
45
- }
19
+ &:hover:not(.mat-radio-disabled) {
20
+ background-color: black(0.08);
46
21
  }
47
22
 
48
- .mat-ripple-element {
49
- background: black(0.12);
23
+
24
+ &:active:not(.mat-radio-disabled) {
25
+ background-color: black(0.12);
50
26
  }
51
-
52
- div.mat-ripple-element {
53
- opacity: 0 !important;
27
+
28
+ &:not(.mat-radio-disabled).cdk-keyboard-focused {
29
+ background-color: black(0.08);
54
30
  }
55
31
 
56
32
  .mat-radio-label-content {
@@ -74,21 +50,7 @@
74
50
 
75
51
  .mat-error {
76
52
  color: theme-apply($error);
77
- }
78
-
79
- &:not(.mat-radio-disabled).cdk-keyboard-focused {
80
- .mat-radio-persistent-ripple {
81
- opacity: 1;
82
- background: black(0.08);
83
- }
84
- }
85
-
86
- &:not(.mat-radio-disabled).mat-radio-checked.cdk-keyboard-focused {
87
- .mat-radio-persistent-ripple {
88
- opacity: 1;
89
- background: theme-apply($secondary-light-6-opacity);
90
- }
91
- }
53
+ }
92
54
 
93
55
  &.mat-radio-disabled:not(.mat-radio-checked) {
94
56
  .mat-radio-outer-circle {
@@ -105,49 +67,35 @@
105
67
  }
106
68
 
107
69
  &.mat-radio-checked {
108
- background: rgba(207, 71, 20, 0.12);
70
+ background: theme-apply($primary-light-12-opacity);
71
+
72
+ &.cdk-keyboard-focused {
73
+ &:not(.ng-invalid) {
74
+ background-color: theme-apply($primary-dark-24-opacity);
75
+ }
76
+ }
77
+
78
+ &:hover:not(.mat-checkbox-disabled) {
79
+ background-color: theme-apply($primary-dark-24-opacity);
80
+ }
81
+
82
+ &:active:not(.mat-checkbox-disabled) {
83
+ background-color: theme-apply($primary-light-32-opacity);
84
+ }
109
85
 
110
86
  .mat-radio-container {
111
87
  margin-right: 19px;
112
-
113
- &:active {
114
- span.mat-radio-persistent-ripple {
115
- opacity: 1;
116
- background-color: theme-apply($secondary-light-12-opacity);
117
- transition-duration: 150ms;
118
- }
119
- }
120
- &:hover {
121
- .mat-ripple-element {
122
- opacity: 1;
123
- background-color: theme-apply($secondary-light-6-opacity);
124
- }
125
- }
126
88
  }
127
89
  }
128
90
 
129
91
  &.mat-radio-checked {
130
92
  .mat-radio-outer-circle {
131
- border-color: theme-apply($secondary);
93
+ border-color: theme-apply($primary);
132
94
  }
133
95
  }
134
96
 
135
97
  .mat-radio-inner-circle {
136
- background-color: theme-apply($secondary);
137
- }
138
-
139
- &.mat-radio-checked .mat-radio-persistent-ripple {
140
- background-color: theme-apply($secondary-light-6-opacity);
141
- }
142
-
143
- .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple) {
144
- background-color: black;
145
- }
146
-
147
- &.mat-radio-checked
148
- .mat-radio-ripple
149
- .mat-ripple-element:not(.mat-radio-persistent-ripple) {
150
- background-color: theme-apply($secondary);
98
+ background-color: theme-apply($primary);
151
99
  }
152
100
  }
153
101
  }
package/src/themes/core/_slide-toggle.scss CHANGED
@@ -16,14 +16,18 @@
16
16
 
17
17
  .mat-slide-toggle-bar {
18
18
  margin-right: 19px;
19
- background-color: #c5c5c5;
19
+ }
20
20
 
21
- &:hover {
22
- .mat-slide-toggle-persistent-ripple {
23
- opacity: 0.08;
24
- background-color: black;
25
- }
26
- }
21
+ &:hover:not(.mat-disabled) {
22
+ background-color: black(0.08);
23
+ }
24
+
25
+ &:active:not(.mat-disabled) {
26
+ background-color: black(0.12);
27
+ }
28
+
29
+ &.cdk-keyboard-focused {
30
+ background-color: black(0.08);
27
31
  }
28
32
 
29
33
  .mat-slide-toggle-thumb {
@@ -31,6 +35,7 @@
31
35
  }
32
36
 
33
37
  .mat-slide-toggle-content {
38
+ font-family: Open Sans;
34
39
  display: flex;
35
40
  flex-direction: column;
36
41
  }
@@ -53,57 +58,59 @@
53
58
  color: theme-apply($error);
54
59
  }
55
60
 
56
- &:not(.mat-disabled).mat-checked.cdk-keyboard-focused {
57
- .mat-slide-toggle-persistent-ripple {
58
- opacity: 1;
59
- background: theme-apply($secondary-light-6-opacity);
60
- }
61
- }
62
-
63
- &:not(.mat-disabled).cdk-keyboard-focused {
64
- .mat-slide-toggle-persistent-ripple {
65
- opacity: 1;
66
- background: black(0.12);
67
- }
61
+ &.error-form {
62
+ border-bottom: 2px solid theme-apply($error);
68
63
  }
69
64
 
70
65
  &.mat-disabled {
71
66
  opacity: 1;
72
67
 
73
68
  .mat-slide-toggle-thumb {
74
- background-color: #bfbfbf;
69
+ background-color: black(0.6);
75
70
  }
76
71
 
77
72
  .mat-slide-toggle-bar {
78
- background-color: #e9e9e9;
73
+ background-color: black(0.6);
74
+ opacity: 0.38;
75
+ }
76
+
77
+ &.mat-checked {
78
+ .mat-slide-toggle-thumb {
79
+ background-color: theme-apply($primary-light-32-opacity);
80
+ }
81
+
82
+ .mat-slide-toggle-bar {
83
+ background-color: theme-apply($primary);
84
+ opacity: 0.38;
85
+ }
79
86
  }
80
87
  }
81
88
 
82
89
  &.mat-checked {
83
90
  .mat-slide-toggle-bar {
84
- background-color: #dab3a4;
91
+ background-color: theme-apply($primary-light-38-opacity);
92
+ }
85
93
 
86
- &:hover {
87
- .mat-ripple-element.mat-slide-toggle-persistent-ripple {
88
- opacity: 1;
89
- background-color: theme-apply($secondary-light-6-opacity);
90
- }
94
+ .mat-ripple-element {
95
+ background-color: theme-apply($primary-light-12-opacity);
96
+ }
97
+
98
+ &.cdk-keyboard-focused {
99
+ &:not(.ng-invalid) {
100
+ background-color: theme-apply($primary-dark-24-opacity);
91
101
  }
102
+ }
92
103
 
93
- &:active {
94
- .mat-ripple-element.mat-slide-toggle-persistent-ripple {
95
- opacity: 1;
96
- background-color: theme-apply($secondary-light-12-opacity);
97
- }
98
- }
104
+ &:hover:not(.mat-disabled) {
105
+ background-color: theme-apply($primary-dark-24-opacity);
99
106
  }
100
107
 
101
- .mat-ripple-element {
102
- background-color: theme-apply($secondary);
108
+ &:active:not(.mat-disabled) {
109
+ background-color: theme-apply($primary-light-32-opacity);
103
110
  }
104
111
 
105
112
  .mat-slide-toggle-thumb {
106
- background-color: theme-apply($secondary);
113
+ background-color: theme-apply($primary);
107
114
  }
108
115
  }
109
116
  }
package/src/themes/theme/_variable.scss CHANGED
@@ -6,7 +6,9 @@ $primary-light-6-opacity: --primary-light-6-opacity;
6
6
  $primary-light-12-opacity: --primary-light-12-opacity;
7
7
  $primary-light-24-opacity: --primary-light-24-opacity;
8
8
  $primary-light-32-opacity: --primary-light-32-opacity;
9
+ $primary-light-38-opacity: --primary-light-38-opacity;
9
10
  $primary-dark: --primary-dark;
11
+ $primary-dark-24-opacity: --primary-dark-24-opacity;
10
12
 
11
13
  $secondary: --secondary;
12
14
  $secondary-light: --secondary-light;
@@ -27,6 +29,7 @@ $slider-tick-color: --slider-tick-color;
27
29
  $slider-hover-border: --slider-hover-border;
28
30
  $slider-focus-border: --slider-focus-border;
29
31
  $slider-pressed: --slider-pressed;
32
+ $disabled-select-input-checked: --disabled-select-input-checked;
30
33
 
31
34
  $error-color: --error-color;
32
35
  $success-color: --success-color;
@@ -119,7 +122,9 @@ $qms-theme-default: (
119
122
  $primary-light-12-opacity: #E5EEFB,
120
123
  $primary-light-24-opacity: rgba(40, 115, 223, 0.24),
121
124
  $primary-light-32-opacity: #94baef,
125
+ $primary-light-38-opacity: #86A5D1,
122
126
  $primary-dark: #144285,
127
+ $primary-dark-24-opacity: #C8D6EA,
123
128
  $secondary: #9e360f,
124
129
  $secondary-light: #b63e11,
125
130
  $secondary-dark: #872e0d,
@@ -132,6 +137,7 @@ $qms-theme-default: (
132
137
  $disabled: #e4e4e4,
133
138
  $active: #1954a9,
134
139
  $default-color: #323232,
140
+ $disabled-select-input-checked: #DADADA,
135
141
  $slider-background: rgba(#1954a9, 0.38),
136
142
  $slider-tick-color: rgba(255, 255, 255, 0.38),
137
143
  $slider-hover-border: rgba(25, 84, 169, 8%),
@@ -215,7 +221,9 @@ $qms-theme-pink: (
215
221
  $primary-light-12-opacity: #E5EEFB,
216
222
  $primary-light-24-opacity: rgba(40, 115, 223, 0.24),
217
223
  $primary-light-32-opacity: #94baef,
224
+ $primary-light-38-opacity: #86A5D1,
218
225
  $primary-dark: #144285,
226
+ $primary-dark-24-opacity: #C8D6EA,
219
227
  $secondary: #9e360f,
220
228
  $secondary-light: #b63e11,
221
229
  $secondary-dark: #872e0d,
@@ -228,6 +236,7 @@ $qms-theme-pink: (
228
236
  $disabled: #e4e4e4,
229
237
  $active: #1954a9,
230
238
  $default-color: #323232,
239
+ $disabled-select-input-checked: #DADADA,
231
240
  $slider-background: rgba(#1954a9, 0.38),
232
241
  $slider-tick-color: rgba(255, 255, 255, 0.38),
233
242
  $slider-hover-border: rgba(25, 84, 169, 8%),