qms-angular 1.0.92 → 1.0.95

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 (19) hide show
  1. package/bundles/qms-angular.umd.js +11 -12
  2. package/bundles/qms-angular.umd.js.map +1 -1
  3. package/esm2015/lib/components/breadcrumb/breadcrumb-item.directive.js +4 -6
  4. package/esm2015/lib/components/breadcrumb/breadcrumb.js +5 -4
  5. package/esm2015/lib/components/button/button-toggle.js +1 -1
  6. package/esm2015/lib/components/related/list-other-related/list-related.component.js +3 -3
  7. package/esm2015/lib/components/reports/qms-report-cover-portrait/qms-report-cover-portrait.component.js +1 -1
  8. package/fesm2015/qms-angular.js +11 -12
  9. package/fesm2015/qms-angular.js.map +1 -1
  10. package/package.json +1 -1
  11. package/qms-angular.metadata.json +1 -1
  12. package/src/lib/components/breadcrumb/breadcrumb.scss +7 -5
  13. package/src/lib/components/button/button-toggle.scss +0 -1
  14. package/src/lib/components/related/list-other-related/list-related.component.scss +32 -11
  15. package/src/lib/components/reports/qms-report-cover-portrait/qms-report-cover-portrait.component.scss +0 -1
  16. package/src/themes/core/_checkbox.scss +39 -38
  17. package/src/themes/core/_radio.scss +27 -79
  18. package/src/themes/core/_slide-toggle.scss +43 -36
  19. package/src/themes/theme/_variable.scss +9 -0
package/src/lib/components/breadcrumb/breadcrumb.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  height: 1.5rem;
34
34
  line-height: 2rem;
35
35
  }
36
- .qms-breadcrumb-item-text{
36
+ .qms-breadcrumb-item-overflow {
37
37
  max-width: 240px;
38
38
  text-overflow: ellipsis;
39
39
  overflow: hidden;
@@ -74,14 +74,16 @@
74
74
  }
75
75
 
76
76
  .qms-breadcrumb-item{
77
- .qms-breadcrumb-item-text{
77
+ .qms-breadcrumb-item-text {
78
+ font-size: 12px;
79
+ font-weight: 400;
80
+ color: black(0.6);
81
+ }
82
+ .qms-breadcrumb-item-overflow {
78
83
  max-width: 200px;
79
84
  text-overflow: ellipsis;
80
85
  overflow: hidden;
81
86
  white-space: nowrap;
82
- font-size: 12px;
83
- font-weight: 400;
84
- color: black(0.6);
85
87
  }
86
88
  }
87
89
  }
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/lib/components/related/list-other-related/list-related.component.scss CHANGED
@@ -15,8 +15,13 @@
15
15
  margin-bottom: 1rem;
16
16
  }
17
17
 
18
- .list-related__body {
18
+ .list-related__body {
19
19
  .list-related__body-parent {
20
+
21
+ .qms-list-item {
22
+ height: unset !important;
23
+ }
24
+
20
25
  .qms-list-item.mat-2-line.image-item {
21
26
  height: auto;
22
27
  }
@@ -45,15 +50,6 @@
45
50
  }
46
51
  }
47
52
 
48
- .breadcrumb-containe {
49
- .qms-breadcrumb-item {
50
- .mat-icon {
51
- font-size: 16px!important;
52
- padding-bottom: 1px;
53
- }
54
- }
55
- }
56
-
57
53
  min-height: 48px;
58
54
  display: flex;
59
55
  align-items: center;
@@ -74,7 +70,7 @@
74
70
 
75
71
  .caption {
76
72
  color: black(0.6);
77
- font-size:0.75rem;
73
+ font-size: 0.75rem;
78
74
  line-height: 22px;
79
75
  }
80
76
  }
@@ -134,6 +130,31 @@
134
130
  margin-left: 3rem;
135
131
  }
136
132
  }
133
+
134
+ .qms-line {
135
+ display: flex;
136
+ align-items: center;
137
+ }
138
+
139
+ .breadcrumb-container .qms-breadcrumb-item {
140
+ cursor: inherit;
141
+ line-height: 16px;
142
+ font-size: 0.75rem;
143
+ color: black(0.6);
144
+ font-weight: 400;
145
+ line-height: 22px;
146
+ }
147
+
148
+ .trailing-box {
149
+ display: flex;
150
+ align-items: center;
151
+
152
+ button {
153
+ height: 24px;
154
+ width: 24px;
155
+ line-height: 24px;
156
+ }
157
+ }
137
158
  }
138
159
  }
139
160
 
package/src/lib/components/reports/qms-report-cover-portrait/qms-report-cover-portrait.component.scss CHANGED
@@ -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;
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%),