qms-angular 1.0.91 → 1.0.94

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.
@@ -35,6 +35,20 @@
35
35
  button {
36
36
  margin-left: 16px;
37
37
  }
38
+
39
+ &.banner-confirm-buttons {
40
+ ::ng-deep {
41
+ button{
42
+ &.qms-btn-icon.qms-btn-disabled {
43
+ background: transparent;
44
+ }
45
+
46
+ &.qms-btn-text.qms-btn-disabled {
47
+ background: transparent;
48
+ }
49
+ }
50
+ }
51
+ }
38
52
  }
39
53
  }
40
54
 
@@ -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
 
@@ -30,7 +29,8 @@
30
29
  }
31
30
 
32
31
  &:hover {
33
- background-color: theme-apply($primary-light-12-opacity);
32
+ background-color: theme-apply($primary-light-24-opacity) !important;
33
+ color: theme-apply($primary);
34
34
  }
35
35
 
36
36
  &.qms-button-toggle-checked {
@@ -45,27 +45,8 @@
45
45
  }
46
46
 
47
47
  &.cdk-keyboard-focused {
48
- &::after {
49
- content: "";
50
- display: block;
51
- position: absolute;
52
- top: 0;
53
- right: 0;
54
- width: 3px;
55
- height: 100%;
56
- background: theme-apply($primary-light);
57
- }
58
-
59
- &:before {
60
- content: "";
61
- display: block;
62
- position: absolute;
63
- top: 0;
64
- right: 0;
65
- bottom: 0;
66
- left: 0;
67
- border: 3px solid theme-apply($primary-light);
68
- }
48
+ background-color: theme-apply($primary-light-24-opacity) !important;
49
+ color: theme-apply($primary);
69
50
  }
70
51
  }
71
52
 
@@ -74,8 +55,8 @@
74
55
  color: theme-apply($primary);
75
56
 
76
57
  &:hover {
77
- background-color: theme-apply($primary);
78
- color: white;
58
+ background-color: theme-apply($primary) !important;;
59
+ color: white !important;;
79
60
  }
80
61
 
81
62
  &.qms-button-toggle-checked {
@@ -90,41 +71,26 @@
90
71
  }
91
72
 
92
73
  &.cdk-keyboard-focused {
93
- &::after {
94
- content: "";
95
- display: block;
96
- position: absolute;
97
- top: 0;
98
- right: 0;
99
- width: 3px;
100
- height: 100%;
101
- background: theme-apply($primary-light);
102
- }
103
-
104
- &:before {
105
- content: "";
106
- display: block;
107
- position: absolute;
108
- top: 0;
109
- right: 0;
110
- bottom: 0;
111
- left: 0;
112
- border: 3px solid theme-apply($primary-light);
113
- }
74
+ background-color: theme-apply($primary-light) !important;
75
+ color: white !important;;
114
76
  }
115
77
  }
116
78
 
117
79
  &.qms-button-toggle-appearance-dark {
118
80
  background-color: theme-apply($default-color);
119
- color: rgba(255, 255, 255, 0.6);
81
+ color: white(0.6);
120
82
 
121
83
  .mat-icon {
122
84
  color: theme-apply($primary-light-32-opacity);
123
85
  }
124
86
 
125
87
  &:hover {
126
- background-color: theme-apply($primary-lighter);
127
- color: theme-apply($primary);
88
+ background-color: theme-apply($primary-lighter) !important;;
89
+ color: theme-apply($primary) !important;;
90
+
91
+ mat-icon, .mat-icon {
92
+ color: theme-apply($primary) !important;;
93
+ }
128
94
  }
129
95
 
130
96
  &.qms-button-toggle-checked {
@@ -143,26 +109,11 @@
143
109
  }
144
110
 
145
111
  &.cdk-keyboard-focused {
146
- &::after {
147
- content: "";
148
- display: block;
149
- position: absolute;
150
- top: 0;
151
- right: 0;
152
- width: 3px;
153
- height: 100%;
154
- background: theme-apply($primary-light);
155
- }
112
+ background-color: theme-apply($primary-lighter) !important;
113
+ color: theme-apply($primary) !important;
156
114
 
157
- &:before {
158
- content: "";
159
- display: block;
160
- position: absolute;
161
- top: 0;
162
- right: 0;
163
- bottom: 0;
164
- left: 0;
165
- border: 3px solid theme-apply($primary-light);
115
+ mat-icon, .mat-icon {
116
+ color: theme-apply($primary) !important;;
166
117
  }
167
118
  }
168
119
  }
@@ -171,6 +122,12 @@
171
122
  cursor: default !important;
172
123
  background: #e4e4e4 !important;
173
124
  color: rgba(0, 0, 0, 0.38) !important;
125
+ user-select: none;
126
+
127
+ button {
128
+ cursor: default !important;
129
+ user-select: none;
130
+ }
174
131
 
175
132
  .mat-icon {
176
133
  color: rgba(0, 0, 0, 0.38) !important;
@@ -17,6 +17,7 @@
17
17
  width: 100%;
18
18
  padding: 0;
19
19
  min-height: $item-height;
20
+ height: $item-height;
20
21
 
21
22
  &.mat-2-line {
22
23
  height: $two-line-height;
@@ -47,7 +48,7 @@
47
48
 
48
49
  .trailing-box {
49
50
  height: 100%;
50
- border-bottom: 1px solid #e0e0e0;
51
+ border-bottom: 1px solid $border-bottom-item;
51
52
  padding-top: 10px;
52
53
  }
53
54
  }
@@ -1,6 +1,5 @@
1
1
  .qms-report-cover-portrait-container {
2
2
  background-color: rgba(255, 255, 255, 1);
3
- border: 1px solid rgba(0, 0, 0, 0.24);
4
3
 
5
4
  .cover-header {
6
5
  height: 75px;
@@ -18,7 +17,6 @@
18
17
  padding: 0 50px;
19
18
 
20
19
  .report-module-name {
21
- margin-bottom: 10px;
22
20
  .module-name {
23
21
  max-width: 100%;
24
22
  font-family: 'Open Sans';
@@ -31,7 +29,7 @@
31
29
 
32
30
  .report-title {
33
31
  height: 137px;
34
- margin-bottom: 10px;
32
+ margin-bottom: 15px;
35
33
  .title {
36
34
  max-width: 100%;
37
35
  font-weight: 600;
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -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;
@@ -117,9 +120,11 @@ $qms-theme-default: (
117
120
  $primary-light-3-opacity: #f5faff,
118
121
  $primary-light-6-opacity: #F2F7FD,
119
122
  $primary-light-12-opacity: #E5EEFB,
120
- $primary-light-24-opacity: #C8D6EA,
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%),
@@ -213,9 +219,11 @@ $qms-theme-pink: (
213
219
  $primary-light-3-opacity: #f5faff,
214
220
  $primary-light-6-opacity: #F2F7FD,
215
221
  $primary-light-12-opacity: #E5EEFB,
216
- $primary-light-24-opacity: #C8D6EA,
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%),