@uqds/alert 7.0.5-alpha.0 → 7.0.6-alpha.0
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/dist/css/main.css +1 -1
- package/package.json +3 -3
- package/src/scss/_component.scss +48 -54
package/dist/css/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.uq-alert{background-color:#e7f0fa;color:#3b383e;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.6;position:relative}.uq-alert .uq-alert__message>*:first-child{margin-top:0}.uq-alert .uq-alert__message>h1:first-child,.uq-alert .uq-alert__message>h2:first-child,.uq-alert .uq-alert__message>h3:first-child,.uq-alert .uq-alert__message>h4:first-child,.uq-alert .uq-alert__message>h5:first-child,.uq-alert .uq-alert__message>h6:first-child{line-height:24px}.uq-
|
|
1
|
+
.uq-alert{background-color:#e7f0fa;color:#3b383e;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.6;position:relative}.uq-alert .uq-alert__message>*:first-child{margin-top:0}.uq-alert .uq-alert__message>h1:first-child,.uq-alert .uq-alert__message>h2:first-child,.uq-alert .uq-alert__message>h3:first-child,.uq-alert .uq-alert__message>h4:first-child,.uq-alert .uq-alert__message>h5:first-child,.uq-alert .uq-alert__message>h6:first-child{line-height:24px}.uq-alert__title{font-size:1.125rem;font-weight:500;line-height:1.2;color:#3b383e;margin:0 0 .5rem}.uq-alert__message{position:relative;padding:1.5rem 3.5rem 1.5rem 4rem;width:100%;max-width:1204px;margin-left:auto;margin-right:auto;overflow-x:clip}.uq-alert__message::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' transform='rotate(-180 12 12)' stroke='%233b383e' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M12 16.2v-4' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='12' cy='8.4' r='1.1' transform='rotate(-180 12 8.4)' fill='%233b383e'%3e%3c/circle%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.5rem;width:1.5rem;height:1.5rem;position:absolute;top:25px;left:1.5rem}.uq-alert__message p{margin-bottom:1rem;margin-top:0}.uq-alert__message p:last-of-type{margin-bottom:0}.uq-alert__close{margin:0;padding:0;position:absolute;top:0;right:1rem;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1rem;background-position:center;background-color:rgba(0,0,0,0);border:none;width:2.5rem;height:4.5rem;text-indent:999px;overflow:hidden;cursor:pointer}.uq-alert__close:hover,.uq-alert__close:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-color:rgba(0,0,0,0);border:none}.uq-alert--info{background-color:#e7f0fa}.uq-alert--info .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' transform='rotate(-180 12 12)' stroke='%233b383e' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M12 16.2v-4' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='12' cy='8.4' r='1.1' transform='rotate(-180 12 8.4)' fill='%233b383e'%3e%3c/circle%3e%3c/svg%3e")}.uq-alert--success{background-color:#edf6ed}.uq-alert--success .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%233b383e' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--warning{background-color:#fef8e8}.uq-alert--warning .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.127 18.545a1.18 1.18 0 0 1-1.055 1.706H4.929a1.18 1.18 0 0 1-1.055-1.706l7.072-14.143a1.179 1.179 0 0 1 2.109 0l7.072 14.143Z' stroke='%233b383e' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M12 9v4' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='11.9' cy='16.601' r='1.1' fill='%233b383e'%3e%3c/circle%3e%3c/svg%3e")}.uq-alert--error{background-color:#fbeaea}.uq-alert--error .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%233b383e' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--global{background-color:#0d6dcd;color:#fff}.uq-alert--global .uq-alert__message{padding-left:4.5rem}.uq-alert--global .uq-alert__message::before{left:2rem}.uq-alert--global a{color:inherit;text-decoration:underline}.uq-alert--global a:hover,.uq-alert--global a:focus{background-color:#fff;color:#51247a}.uq-alert--global a.uq-button{background-color:#fff;color:#51247a;text-decoration:none}.uq-alert--global a.uq-button:hover,.uq-alert--global a.uq-button:focus{background-color:#51247a;color:#fff;text-decoration:underline}.uq-alert--global .uq-alert__title{color:#fff}.uq-alert--global .uq-alert__close{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--global .uq-alert__close:hover,.uq-alert--global .uq-alert__close:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-color:rgba(0,0,0,0)}.uq-alert--global.uq-alert--info .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' transform='rotate(-180 12 12)' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M12 16.2v-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='12' cy='8.4' r='1.1' transform='rotate(-180 12 8.4)' fill='%23fff'%3e%3c/circle%3e%3c/svg%3e")}.uq-alert--global.uq-alert--success{background-color:#4aa74e}.uq-alert--global.uq-alert--success .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--global.uq-alert--warning{background-color:#f7ba1e;color:#3b383e}.uq-alert--global.uq-alert--warning .uq-alert__title{color:#3b383e}.uq-alert--global.uq-alert--warning .uq-alert__close{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--global.uq-alert--warning .uq-alert__close:hover,.uq-alert--global.uq-alert--warning .uq-alert__close:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%233b383e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-alert--global.uq-alert--error{background-color:#d62929}.uq-alert--global.uq-alert--error .uq-alert__message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uqds/alert",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.6-alpha.0",
|
|
4
4
|
"description": "Alert component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"uqds",
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@uqds/core": "^5.0.0",
|
|
56
56
|
"@uqds/grid": "^4.0.0",
|
|
57
|
-
"@uqds/icon": "^4.0.3
|
|
57
|
+
"@uqds/icon": "^4.0.3"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@testing-library/dom": "^10.4.0",
|
|
61
61
|
"gulp": "^5.0.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "fb6c36a21b4bf3d87905ad0283a1a40915a3c307"
|
|
64
64
|
}
|
package/src/scss/_component.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use "@uqds/core/src/scss/global" as core;
|
|
2
2
|
@use "@uqds/grid/src/scss/global" as grid;
|
|
3
3
|
@use "@uqds/icon/src/scss/global" as icon;
|
|
4
|
+
@use "@uqds/layout/src/scss/global" as layout;
|
|
4
5
|
@use "global" as *;
|
|
5
6
|
|
|
6
7
|
.uq-alert {
|
|
@@ -25,16 +26,6 @@
|
|
|
25
26
|
line-height: 24px;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
&__container {
|
|
29
|
-
margin: 0 auto;
|
|
30
|
-
|
|
31
|
-
.uq-alert__message {
|
|
32
|
-
&:not(:last-child) {
|
|
33
|
-
padding-right: core.$space-xxxl;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
29
|
&__title {
|
|
39
30
|
font-size: core.$font-size-l;
|
|
40
31
|
font-weight: core.$font-weight-medium;
|
|
@@ -45,8 +36,12 @@
|
|
|
45
36
|
|
|
46
37
|
&__message {
|
|
47
38
|
position: relative;
|
|
48
|
-
padding: core.$space-l;
|
|
49
|
-
|
|
39
|
+
padding: core.$space-l core.$space-xxxxl core.$space-l core.$space-ul;
|
|
40
|
+
width: 100%;
|
|
41
|
+
max-width: 1204px;
|
|
42
|
+
margin-left: auto;
|
|
43
|
+
margin-right: auto;
|
|
44
|
+
overflow-x: clip;
|
|
50
45
|
|
|
51
46
|
&::before {
|
|
52
47
|
content: "";
|
|
@@ -60,31 +55,33 @@
|
|
|
60
55
|
height: core.$space-l;
|
|
61
56
|
position: absolute;
|
|
62
57
|
top: 25px;
|
|
63
|
-
left:
|
|
58
|
+
left: core.$space-l;
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
p {
|
|
67
62
|
margin-bottom: core.$space-m;
|
|
68
63
|
margin-top: core.$space-none;
|
|
69
64
|
|
|
70
|
-
&:last-
|
|
65
|
+
&:last-of-type {
|
|
71
66
|
margin-bottom: core.$space-none;
|
|
72
67
|
}
|
|
73
68
|
}
|
|
74
69
|
}
|
|
75
70
|
|
|
76
71
|
&__close {
|
|
72
|
+
margin: 0;
|
|
73
|
+
padding: 0;
|
|
77
74
|
position: absolute;
|
|
78
75
|
top: core.$space-none;
|
|
79
|
-
right: core.$space-
|
|
76
|
+
right: core.$space-m;
|
|
80
77
|
background-image: url(icon.get-icon("standard--x", core.$grey-900));
|
|
81
78
|
background-repeat: no-repeat;
|
|
82
79
|
background-size: 1rem;
|
|
83
80
|
background-position: center;
|
|
84
81
|
background-color: transparent;
|
|
85
82
|
border: none;
|
|
86
|
-
width: core.$space-
|
|
87
|
-
height: core.$space-
|
|
83
|
+
width: core.$space-xxl;
|
|
84
|
+
height: core.$space-uul;
|
|
88
85
|
text-indent: 999px;
|
|
89
86
|
overflow: hidden;
|
|
90
87
|
cursor: pointer;
|
|
@@ -127,7 +124,7 @@
|
|
|
127
124
|
.uq-alert__message {
|
|
128
125
|
&::before {
|
|
129
126
|
background-image: url(icon.get-icon(
|
|
130
|
-
"standard--exclamation-
|
|
127
|
+
"standard--exclamation-triangle",
|
|
131
128
|
core.$grey-900
|
|
132
129
|
));
|
|
133
130
|
}
|
|
@@ -139,55 +136,28 @@
|
|
|
139
136
|
.uq-alert__message {
|
|
140
137
|
&::before {
|
|
141
138
|
background-image: url(icon.get-icon(
|
|
142
|
-
"standard--
|
|
139
|
+
"standard--x-circle",
|
|
143
140
|
core.$grey-900
|
|
144
141
|
));
|
|
145
142
|
}
|
|
146
143
|
}
|
|
147
144
|
}
|
|
148
145
|
|
|
149
|
-
// Global
|
|
146
|
+
// Global variant
|
|
150
147
|
&--global {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
max-width: 73.25rem;
|
|
154
|
-
margin-left: auto;
|
|
155
|
-
margin-right: auto;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
148
|
+
background-color: core.$utility-500;
|
|
149
|
+
color: core.$white;
|
|
158
150
|
|
|
151
|
+
// container overrides to match content width
|
|
159
152
|
.uq-alert__message {
|
|
160
|
-
|
|
161
|
-
font-weight: core.$font-weight-normal;
|
|
162
|
-
margin-left: core.$space-compressed-uuul;
|
|
163
|
-
padding: core.$space-stretched-s core.$space-l core.$space-stretched-s
|
|
164
|
-
core.$space-s;
|
|
165
|
-
|
|
166
|
-
@media #{core.$screen-md-up} {
|
|
167
|
-
font-size: core.$font-size-m;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@media #{core.$screen-lg-up} {
|
|
171
|
-
margin-left: core.$space-compressed-uul;
|
|
172
|
-
}
|
|
153
|
+
padding-left: core.$space-uul;
|
|
173
154
|
|
|
174
155
|
&::before {
|
|
175
|
-
|
|
176
|
-
background-size: 1.5rem;
|
|
177
|
-
width: core.$space-l;
|
|
178
|
-
height: core.$space-l;
|
|
179
|
-
position: absolute;
|
|
180
|
-
top: core.$space-stretched-s;
|
|
181
|
-
left: -(core.$space-l);
|
|
156
|
+
left: core.$space-xl;
|
|
182
157
|
}
|
|
183
158
|
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
// Dark variant
|
|
187
|
-
&--dark {
|
|
188
|
-
background-color: core.$utility-500;
|
|
189
|
-
color: core.$white;
|
|
190
159
|
|
|
160
|
+
// link overrides for dark variant
|
|
191
161
|
a {
|
|
192
162
|
color: inherit;
|
|
193
163
|
text-decoration: underline;
|
|
@@ -199,6 +169,20 @@
|
|
|
199
169
|
}
|
|
200
170
|
}
|
|
201
171
|
|
|
172
|
+
// button overrides for dark variant
|
|
173
|
+
a.uq-button {
|
|
174
|
+
background-color: core.$white;
|
|
175
|
+
color: core.$purple-500;
|
|
176
|
+
text-decoration: none;
|
|
177
|
+
|
|
178
|
+
&:hover,
|
|
179
|
+
&:focus {
|
|
180
|
+
background-color: core.$purple-500;
|
|
181
|
+
color: core.$white;
|
|
182
|
+
text-decoration: underline;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
202
186
|
.uq-alert__title {
|
|
203
187
|
color: core.$white;
|
|
204
188
|
}
|
|
@@ -209,6 +193,7 @@
|
|
|
209
193
|
&:hover,
|
|
210
194
|
&:focus {
|
|
211
195
|
background-image: url(icon.get-icon("standard--x", core.$white));
|
|
196
|
+
background-color: transparent;
|
|
212
197
|
}
|
|
213
198
|
}
|
|
214
199
|
|
|
@@ -243,6 +228,15 @@
|
|
|
243
228
|
.uq-alert__title {
|
|
244
229
|
color: core.$grey-900;
|
|
245
230
|
}
|
|
231
|
+
|
|
232
|
+
.uq-alert__close {
|
|
233
|
+
background-image: url(icon.get-icon("standard--x", core.$grey-900));
|
|
234
|
+
|
|
235
|
+
&:hover,
|
|
236
|
+
&:focus {
|
|
237
|
+
background-image: url(icon.get-icon("standard--x", core.$grey-900));
|
|
238
|
+
}
|
|
239
|
+
}
|
|
246
240
|
}
|
|
247
241
|
|
|
248
242
|
&.uq-alert--error {
|
|
@@ -251,7 +245,7 @@
|
|
|
251
245
|
.uq-alert__message {
|
|
252
246
|
&::before {
|
|
253
247
|
background-image: url(icon.get-icon(
|
|
254
|
-
"standard--
|
|
248
|
+
"standard--x-circle",
|
|
255
249
|
core.$white
|
|
256
250
|
));
|
|
257
251
|
}
|