@qhealth-design-system/core 1.10.0 → 1.10.2
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.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<section class="qld__card--wrapper qld__body {{metadata.body_background.value}} {{metadata.body_background_type.value}}" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}cards-multi-{{assetid}}{{/if}}"
|
|
3
3
|
{{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-image'}} style="background-image:url(./?a={{metadata.body_background_image.value}})" {{#if ../component.background_image_alt}} role="img" aria-label="{{../component.background_image_alt}}"{{/if}}{{/ifCond}}
|
|
4
4
|
{{#ifCond metadata.body_background_type.value '==' 'qld__card--wrapper-bg-pattern'}} style="background-image:url(./?a={{metadata.body_background_pattern.value}})" {{#if ../component.background_pattern_alt}} role="img" aria-label="{{../component.background_pattern_alt}}"{{/if}}{{/ifCond}} >
|
|
5
|
+
<div class="container-fluid">
|
|
5
6
|
{{/with}}
|
|
6
7
|
{{#with component.data}}
|
|
7
8
|
{{#if metadata.intro_heading.value}}
|
|
@@ -187,6 +188,5 @@
|
|
|
187
188
|
|
|
188
189
|
|
|
189
190
|
</div>
|
|
190
|
-
|
|
191
191
|
|
|
192
192
|
</section>
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
|
|
2
2
|
// Page alerts
|
|
3
3
|
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
|
|
4
|
-
|
|
5
|
-
|
|
6
4
|
.qld__page-alerts {
|
|
7
5
|
@include QLD-space( padding, 1unit );
|
|
8
6
|
@include QLD-fontgrid( sm );
|
|
@@ -13,24 +11,58 @@
|
|
|
13
11
|
word-wrap: break-word;
|
|
14
12
|
background-color: $QLD-color-neutral--white;
|
|
15
13
|
max-width: 48rem;
|
|
16
|
-
|
|
17
|
-
&::before{
|
|
18
|
-
content: ' ';
|
|
19
|
-
@include QLD-space( width, 1.25unit );
|
|
20
|
-
@include QLD-space( height, 1.25unit );
|
|
21
|
-
display: inline-block;
|
|
22
|
-
vertical-align: text-top;
|
|
23
|
-
mask-image: QLD-svguri($QLD-icon-info);
|
|
24
|
-
mask-repeat: no-repeat;
|
|
25
|
-
mask-position: center;
|
|
26
|
-
background-color: $QLD-color-neutral--white;
|
|
27
|
-
position: absolute;
|
|
28
|
-
@include QLD-space( left, -1.5unit );
|
|
29
|
-
top: 50%;
|
|
30
|
-
transform: translate(-50%, -50%);
|
|
31
|
-
}
|
|
32
14
|
|
|
33
|
-
|
|
15
|
+
&.qld__page-alerts--svg {
|
|
16
|
+
.qld__page-alerts--heading {
|
|
17
|
+
@include QLD-space( margin-top, 0unit );
|
|
18
|
+
}
|
|
19
|
+
.qld__page-alerts__icon {
|
|
20
|
+
position: absolute;
|
|
21
|
+
@include QLD-space( left, -1.5unit );
|
|
22
|
+
top: 50%;
|
|
23
|
+
transform: translate(-50%, -50%);
|
|
24
|
+
vertical-align: text-top;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.qld__icon {
|
|
28
|
+
color: $QLD-color-neutral--white;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Page alert success
|
|
33
|
+
*/
|
|
34
|
+
&.qld__page-alerts--success {
|
|
35
|
+
border-color: $QLD-color-status__success;
|
|
36
|
+
|
|
37
|
+
.qld__icon {
|
|
38
|
+
color: $QLD-color-neutral--white;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Page alert warning.
|
|
44
|
+
*/
|
|
45
|
+
&.qld__page-alerts--warning {
|
|
46
|
+
border-color: $QLD-color-status__caution;
|
|
47
|
+
|
|
48
|
+
.qld__icon {
|
|
49
|
+
color: $QLD-color-neutral--black;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Page alert error.
|
|
55
|
+
*/
|
|
56
|
+
&.qld__page-alerts--error {
|
|
57
|
+
border-color: $QLD-color-status__error;
|
|
58
|
+
|
|
59
|
+
.qld__icon {
|
|
60
|
+
color: $QLD-color-neutral--white;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
& .qld__page-alerts--heading.qld__display-lg {
|
|
34
66
|
color: var(--QLD-color-light__heading);
|
|
35
67
|
@include QLD-space(margin-bottom, 1unit);
|
|
36
68
|
line-height: 2.25rem;
|
|
@@ -41,17 +73,7 @@
|
|
|
41
73
|
@include QLD-underline('light');
|
|
42
74
|
}
|
|
43
75
|
|
|
44
|
-
/**
|
|
45
|
-
* Page alert success
|
|
46
|
-
*/
|
|
47
|
-
&.qld__page-alerts--success {
|
|
48
|
-
border-color: $QLD-color-status__success;
|
|
49
76
|
|
|
50
|
-
&::before{
|
|
51
|
-
background-color: $QLD-color-neutral--white;
|
|
52
|
-
mask-image: QLD-svguri($QLD-icon-success);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
77
|
|
|
56
78
|
/**
|
|
57
79
|
* Page alert warning.
|
|
@@ -96,6 +118,67 @@
|
|
|
96
118
|
}
|
|
97
119
|
}
|
|
98
120
|
|
|
121
|
+
/**
|
|
122
|
+
* This section can be removed in the future once all WYSIWYG codes are updated to use SVG instead of pseudo.
|
|
123
|
+
*/
|
|
124
|
+
.qld__page-alerts:not(.qld__page-alerts--svg) {
|
|
125
|
+
&::before{
|
|
126
|
+
content: ' ';
|
|
127
|
+
@include QLD-space( width, 1.25unit );
|
|
128
|
+
@include QLD-space( height, 1.25unit );
|
|
129
|
+
display: inline-block;
|
|
130
|
+
vertical-align: text-top;
|
|
131
|
+
mask-image: QLD-svguri($QLD-icon-info);
|
|
132
|
+
mask-repeat: no-repeat;
|
|
133
|
+
mask-position: center;
|
|
134
|
+
background-color: $QLD-color-neutral--white;
|
|
135
|
+
position: absolute;
|
|
136
|
+
@include QLD-space( left, -1.5unit );
|
|
137
|
+
top: 50%;
|
|
138
|
+
transform: translate(-50%, -50%);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Page alert success
|
|
143
|
+
*/
|
|
144
|
+
&.qld__page-alerts--success {
|
|
145
|
+
border-color: $QLD-color-status__success;
|
|
146
|
+
|
|
147
|
+
&::before{
|
|
148
|
+
background-color: $QLD-color-neutral--white;
|
|
149
|
+
mask-image: QLD-svguri($QLD-icon-success);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Page alert warning.
|
|
155
|
+
*/
|
|
156
|
+
&.qld__page-alerts--warning {
|
|
157
|
+
border-color: $QLD-color-status__caution;
|
|
158
|
+
|
|
159
|
+
&::before{
|
|
160
|
+
background-color: $QLD-color-neutral--black;
|
|
161
|
+
mask-image: QLD-svguri($QLD-icon-warning);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Page alert error.
|
|
167
|
+
*/
|
|
168
|
+
&.qld__page-alerts--error {
|
|
169
|
+
border-color: $QLD-color-status__error;
|
|
170
|
+
|
|
171
|
+
&::before{
|
|
172
|
+
background-color: $QLD-color-neutral--white;
|
|
173
|
+
mask-image: QLD-svguri($QLD-icon-error);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Remove up to here
|
|
180
|
+
*/
|
|
181
|
+
|
|
99
182
|
|
|
100
183
|
.qld__body #content > * + .qld__page-alerts {
|
|
101
184
|
@include QLD-space( margin-top, 2unit );
|
|
@@ -142,4 +225,7 @@
|
|
|
142
225
|
.qld__page-alerts--error:after {
|
|
143
226
|
content: 'error' !important;
|
|
144
227
|
}
|
|
228
|
+
.qld__page-alerts__icon {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
145
231
|
}
|
|
@@ -1,25 +1,35 @@
|
|
|
1
1
|
{{#with component.data}}
|
|
2
2
|
<section class="qld__body qld__page-alerts--wrapper" id="{{#if metadata.id_field.value}}{{metadata.id_field.value}}{{else}}page-alert-{{assetid}}{{/if}}">
|
|
3
3
|
<div class="container-fluid">
|
|
4
|
-
<div
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
<div role="region"
|
|
5
|
+
aria-label="{{#ifCond metadata.type.value '==' 'info'}}Information{{/ifCond}}{{#ifCond metadata.type.value '==' 'success'}}Success{{/ifCond}}{{#ifCond metadata.type.value '==' 'warning'}}Warning{{/ifCond}}{{#ifCond metadata.type.value '==' 'error'}}Error{{/ifCond}}" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--{{metadata.type.value}}">
|
|
6
|
+
{{#ifCond metadata.type.value '==' 'info'}}
|
|
7
|
+
<div class="qld__page-alerts__icon">
|
|
8
|
+
<svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
|
|
9
|
+
</div>
|
|
7
10
|
{{/ifCond}}
|
|
8
11
|
{{#ifCond metadata.type.value '==' 'success'}}
|
|
9
|
-
|
|
12
|
+
<div class="qld__page-alerts__icon">
|
|
13
|
+
<svg aria-label="Success" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__success"></use></svg>
|
|
14
|
+
</div>
|
|
10
15
|
{{/ifCond}}
|
|
11
16
|
{{#ifCond metadata.type.value '==' 'warning'}}
|
|
12
|
-
|
|
17
|
+
<div class="qld__page-alerts__icon">
|
|
18
|
+
<svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
|
|
19
|
+
</div>
|
|
13
20
|
{{/ifCond}}
|
|
14
21
|
{{#ifCond metadata.type.value '==' 'error'}}
|
|
15
|
-
|
|
16
|
-
|
|
22
|
+
<div class="qld__page-alerts__icon">
|
|
23
|
+
<svg aria-label="Error" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__error"></use></svg>
|
|
24
|
+
</div>
|
|
25
|
+
{{/ifCond}}
|
|
17
26
|
{{#if metadata.heading.value}}
|
|
18
27
|
<{{metadata.heading_level.value}} class="qld__page-alerts--heading qld__display-lg">{{metadata.heading.value}}</{{metadata.heading_level.value}}>
|
|
19
28
|
{{/if}}
|
|
29
|
+
|
|
20
30
|
{{#if metadata.body.value}}
|
|
21
31
|
<div>{{{metadata.body.value}}}</div>
|
|
22
|
-
{{/if}}
|
|
32
|
+
{{/if}}
|
|
23
33
|
</div>
|
|
24
34
|
</div>
|
|
25
35
|
</section>
|