Skip to content

Commit 40a5dd3

Browse files
allisonchefecallisonchefec
authored
Merge pull request #412 from buzzfeed/SOLID-337-warning-messaging-2
Solid 337 warning messaging
2 parents 094df3a + ce652fc commit 40a5dd3

4 files changed

Lines changed: 201 additions & 63 deletions

File tree

‎_lib/solid-components/_messaging.deprecated.scss‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
//
2+
// @TODO Remove in 3.0
3+
// Deprecated Messaging
4+
// --------------------------------------------------
5+
6+
.page-message {
7+
position: relative;
8+
margin-top: .125rem;
9+
padding: .75rem;
10+
font-size: $text-4;
11+
font-weight: $bold;
12+
}
13+
14+
.page-message__text {
15+
16+
&:before {
17+
content: "";
18+
height: 1rem;
19+
width: 1rem;
20+
display: inline-block;
21+
position: relative;
22+
bottom: -2px;
23+
margin-right: $space-1;
24+
background-repeat: no-repeat;
25+
background-position: center;
26+
}
27+
}
28+
29+
.page-message__action {
30+
text-decoration: underline;
31+
}
32+
33+
.page-message__close {
34+
position: absolute;
35+
right: .25rem;
36+
top: .375rem;
37+
padding: .5rem;
38+
cursor: pointer;
39+
}
40+
41+
.page-message__close-icon {
42+
width: .75rem;
43+
}
44+
45+
.page-message--error {
46+
background-color: $fill-red-lighter;
47+
color: $text-red;
48+
49+
.page-message__text,
50+
.page-message__action {
51+
color: $text-red;
52+
53+
&:before {
54+
background-image: svg-background($exclamation-circle);
55+
background-size: 1rem;
56+
}
57+
}
58+
59+
.page-message__close-icon {
60+
fill: darken($fill-red-lighter, 20%);
61+
}
62+
63+
& .page-message__close:hover .page-message__close-icon {
64+
fill: $fill-red;
65+
}
66+
}
67+
68+
.page-message--success {
69+
background-color: $fill-green-lighter;
70+
color: $text-green;
71+
72+
.page-message__text,
73+
.page-message__action {
74+
color: $text-green;
75+
76+
&:before {
77+
background-image: svg-background($checkmark);
78+
background-size: .625rem;
79+
background-color: $fill-green;
80+
border-radius: 50%;
81+
}
82+
}
83+
84+
.page-message__close-icon {
85+
fill: darken($fill-green-lighter, 20%);
86+
}
87+
88+
& .page-message__close:hover .page-message__close-icon {
89+
fill: $fill-green;
90+
}
91+
}
92+
93+
.page-message__action:hover {
94+
color: $text-blue;
95+
}

‎_lib/solid-components/_messaging.scss‎

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,34 @@
44

55
.page-message {
66
position: relative;
7-
margin-top: .125rem;
8-
padding: .75rem;
7+
margin-top: $space-05;
8+
padding: $space-2;
99
font-size: $text-4;
1010
font-weight: $bold;
1111
}
1212

13-
.page-message__text {
14-
15-
&:before {
16-
content: "";
17-
height: 1rem;
18-
width: 1rem;
19-
display: inline-block;
20-
position: relative;
21-
bottom: -2px;
22-
margin-right: $space-1;
23-
background-repeat: no-repeat;
24-
background-position: center;
25-
}
26-
}
27-
2813
.page-message__action {
2914
text-decoration: underline;
3015
}
3116

3217
.page-message__close {
3318
position: absolute;
34-
right: .25rem;
35-
top: .375rem;
36-
padding: .5rem;
19+
right: $space-05;
20+
top: $space-1;
21+
padding: $space-1;
3722
cursor: pointer;
3823
}
3924

40-
.page-message__close-icon {
41-
width: .75rem;
25+
.page-message__icon{
26+
vertical-align: middle;
27+
height: $space-2;
28+
border-radius: 50%;
29+
margin-bottom: .15rem;
30+
margin-right: $space-1;
31+
}
32+
33+
.page-message__icon-close {
34+
width: $space-3;
4235
}
4336

4437
.page-message--error {
@@ -48,20 +41,21 @@
4841
.page-message__text,
4942
.page-message__action {
5043
color: $text-red;
51-
52-
&:before {
53-
background-image: svg-background($exclamation-circle);
54-
background-size: 1rem;
55-
}
5644
}
5745

58-
.page-message__close-icon {
46+
.page-message__icon-close {
5947
fill: darken($fill-red-lighter, 20%);
6048
}
6149

62-
& .page-message__close:hover .page-message__close-icon {
50+
& .page-message__close:hover .page-message__icon-close {
6351
fill: $fill-red;
6452
}
53+
54+
.page-message__icon {
55+
fill: $fill-red-lighter;
56+
background-color: $fill-red;
57+
}
58+
6559
}
6660

6761
.page-message--success {
@@ -71,24 +65,47 @@
7165
.page-message__text,
7266
.page-message__action {
7367
color: $text-green;
74-
75-
&:before {
76-
background-image: svg-background($checkmark);
77-
background-size: .625rem;
78-
background-color: $fill-green;
79-
border-radius: 50%;
80-
}
8168
}
8269

83-
.page-message__close-icon {
70+
.page-message__icon-close {
8471
fill: darken($fill-green-lighter, 20%);
8572
}
8673

87-
& .page-message__close:hover .page-message__close-icon {
74+
& .page-message__close:hover .page-message__icon-close {
8875
fill: $fill-green;
8976
}
77+
78+
.page-message__icon {
79+
fill: $fill-green-lighter;
80+
background-color: $fill-green;
81+
}
82+
83+
}
84+
85+
.page-message--warning {
86+
background-color: lighten($fill-orange, 40%);
87+
color: $text-orange;
88+
89+
.page-message__text,
90+
.page-message__action {
91+
color: $text-orange;
92+
}
93+
94+
.page-message__icon-close {
95+
fill: lighten($fill-orange, 20%)
96+
}
97+
98+
& .page-message__close:hover .page-message__icon-close {
99+
fill: $fill-orange;
100+
}
101+
.page-message__icon {
102+
fill: lighten($fill-orange, 40%);
103+
background-color: $fill-orange;
104+
105+
}
106+
90107
}
91108

92109
.page-message__action:hover {
93110
color: $text-blue;
94-
}
111+
}

‎_lib/solid-helpers/_variables.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,10 @@ $line-height-form-small: 1.25rem;
137137

138138
$down-caret: "%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%20488%20285%27%3E%3Cpath%20d%3D%27M483.11%2029.381l-24.449-24.485c-2.934-2.938-7.335-4.897-11.246-4.897-3.912%200-8.313%201.959-11.246%204.897l-192.168%20192.448-192.168-192.448c-2.934-2.938-7.335-4.897-11.246-4.897-4.401%200-8.313%201.959-11.246%204.897l-24.449%2024.485c-2.934%202.938-4.89%207.345-4.89%2011.263s1.956%208.325%204.89%2011.263l227.864%20228.196c2.934%202.938%207.335%204.897%2011.246%204.897%203.912%200%208.313-1.959%2011.246-4.897l227.864-228.196c2.934-2.938%204.89-7.345%204.89-11.263s-1.956-8.325-4.89-11.263z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E";
139139
$checkmark: "%3Csvg%20width%3D%2710%27%20height%3D%2710%27%20viewBox%3D%270%200%20512%20512%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M491.185%20120.619l-42.818-42.818c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-206.534%20206.849-92.563-92.877c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-42.818%2042.818c-5.667%205.667-8.815%2013.538-8.815%2021.409%200%207.871%203.148%2015.742%208.815%2021.409l113.972%20113.972%2042.818%2042.818c5.667%205.667%2013.538%208.815%2021.409%208.815%207.871%200%2015.742-3.148%2021.409-8.815l42.818-42.818%20227.943-227.943c5.667-5.667%208.815-13.538%208.815-21.409%200-7.871-3.148-15.742-8.815-21.409z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E";
140-
$exclamation-circle: "%3Csvg%20width%3D%22488%22%20height%3D%22488%22%20viewBox%3D%220%200%20488%20488%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Cpath%20d%3D%22M244%200c-134.708%200-244%20109.292-244%20244s109.292%20244%20244%20244%20244-109.292%20244-244-109.292-244-244-244zm40.667%20396.182c0%205.719-4.448%2010.484-9.849%2010.484h-61c-5.719%200-10.484-4.766-10.484-10.484v-60.365c0-5.719%204.766-10.484%2010.484-10.484h61c5.401%200%209.849%204.766%209.849%2010.484v60.365zm-.635-109.292c-.318%204.448-5.083%207.943-10.802%207.943h-58.776c-6.036%200-10.802-3.495-10.802-7.943l-5.401-197.297c0-2.224.953-4.448%203.177-5.719%201.906-1.589%204.766-2.542%207.625-2.542h69.896c2.859%200%205.719.953%207.625%202.542%202.224%201.271%203.177%203.495%203.177%205.719l-5.719%20197.297z%22%20fill%3D%22%23e32%22/%3E%3C/svg%3E";
141140
$solid-logo: "%3Csvg%20width%3D%22100%22%20height%3D%2234%22%20viewBox%3D%220%200%20100%2034%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%3Ctitle%3EArtboard%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cg%20sketch%3Atype%3D%22MSPage%22%20fill%3D%22none%22%3E%3Cg%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3Cpath%20d%3D%22M12.241%208.043c-.355%200-.709.142-.97.424l-10.7%2011.533c-.497.535-.467%201.372.07%201.869l11.533%2010.701c.255.237.578.354.9.354.355%200%20.709-.142.969-.423l10.702-11.533c.497-.536.465-1.373-.07-1.87l-11.533-10.7c-.255-.237-.578-.353-.9-.353%22%20opacity%3D%22.9%22%20fill%3D%22%2307e%22/%3E%3Cpath%20d%3D%22M23.218%200l-.283.031-15.37%203.352c-.715.156-1.168.86-1.012%201.575l3.353%2015.372c.134.619.681%201.041%201.29%201.041l.285-.031%2015.37-3.352c.715-.156%201.167-.86%201.01-1.575l-3.35-15.372c-.137-.618-.684-1.041-1.293-1.041%22%20id%3D%22Shape%22%20opacity%3D%22.9%22%20fill%3D%22%23fe0%22/%3E%3Cpath%20d%3D%22M23.224%206.522c-.387%200-.764.177-1.001.511l-8.521%2011.948c-.395.556-.255%201.334.313%201.739l12.24%208.729c.227.162.487.24.744.24.387%200%20.764-.177%201.001-.512l8.522-11.947c.395-.557.255-1.334-.313-1.739l-12.24-8.728c-.227-.162-.488-.241-.746-.241%22%20id%3D%22Shape%22%20opacity%3D%22.9%22%20fill%3D%22%23e32%22/%3E%3Cpath%20d%3D%22M50.388%2025.715c5.05%200%207.238-2.665%207.238-5.78%200-6.986-10.886-4.826-10.886-8.305%200-1.403%201.235-2.329%203.17-2.329%201.964%200%203.956.673%205.415%202.132l1.88-2.441c-1.74-1.683-4.096-2.609-7.014-2.609-4.096%200-6.818%202.385-6.818%205.471%200%206.902%2010.914%204.461%2010.914%208.389%200%201.235-1.066%202.553-3.76%202.553-2.609%200-4.629-1.207-5.92-2.581l-1.824%202.525c1.655%201.768%204.152%202.974%207.603%202.974zm15.648%200c4.349%200%206.986-3.227%206.986-7.126%200-3.872-2.637-7.098-6.986-7.098-4.293%200-6.958%203.227-6.958%207.098%200%203.9%202.665%207.126%206.958%207.126zm0-2.609c-2.497%200-3.9-2.104-3.9-4.517%200-2.385%201.403-4.489%203.9-4.489%202.525%200%203.928%202.104%203.928%204.489%200%202.413-1.403%204.517-3.928%204.517zm12.254%202.273v-18.713h-2.946v18.713h2.946zm4.405-15.207c1.01%200%201.824-.814%201.824-1.824%200-1.01-.814-1.824-1.824-1.824-.982%200-1.824.814-1.824%201.824%200%201.01.842%201.824%201.824%201.824zm1.487%2015.207v-13.551h-2.946v13.551h2.946zm15.648%200v-18.713h-2.946v7.042c-1.094-1.431-2.665-2.217-4.349-2.217-3.507%200-6.032%202.75-6.032%207.126%200%204.461%202.553%207.098%206.032%207.098%201.74%200%203.311-.842%204.349-2.188v1.852h2.946zm-6.453-2.273c-2.329%200-3.816-1.88-3.816-4.489%200-2.637%201.487-4.517%203.816-4.517%201.403%200%202.834.814%203.507%201.824v5.387c-.673%201.01-2.104%201.796-3.507%201.796z%22%20fill%3D%22%23333%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
142141
$close-icon: "%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%3Ctitle%3EArtboard%201%3C/title%3E%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%3Cpath%20d%3D%22M256%20302.855l-187.452%20187.452c-12.952%2012.952-33.885%2012.907-46.823-.032-12.912-12.912-12.952-33.902-.032-46.823l187.452-187.452-187.452-187.452c-12.952-12.952-12.907-33.885.032-46.823%2012.912-12.912%2033.902-12.952%2046.823-.032l187.452%20187.452%20187.452-187.452c12.952-12.952%2033.885-12.907%2046.823.032%2012.912%2012.912%2012.952%2033.902.032%2046.823l-187.452%20187.452%20187.452%20187.452c12.952%2012.952%2012.907%2033.885-.032%2046.823-12.912%2012.912-33.902%2012.952-46.823.032l-187.452-187.452z%22/%3E%3C/svg%3E";
143142
$close-icon--thick: "%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Eclose-thick%3C/title%3E%3Cpath%20d%3D%22M164.874%20258.048L50.198%20139.276c-25.597-25.597-25.597-63.48%200-89.078%2025.597-25.597%2063.48-25.597%2089.078%200l114.676%20114.676L368.628%2050.198c25.597-25.597%2068.09-25.597%2093.174%200%2025.597%2025.597%2025.597%2068.09%200%2093.174L347.126%20258.048l114.676%20114.676c25.597%2025.597%2025.597%2063.48%200%2089.078-25.597%2025.597-63.48%2025.597-89.078%200L258.048%20347.126%20143.372%20461.802c-25.597%2025.597-68.09%2025.597-93.174%200-25.597-25.597-25.597-68.09%200-93.174l114.676-110.58z%22%20fill%3D%22%234A4A4A%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E";
144143
$close-icon--light: "%3Csvg%20width%3D%22450%22%20height%3D%22450%22%20viewBox%3D%220%200%20450%20450%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Eclose-thick%3C/title%3E%3Cpath%20d%3D%22M133.874%20227.048L19.198%20108.276C-6.4%2082.68-6.4%2044.796%2019.198%2019.198c25.597-25.597%2063.48-25.597%2089.078%200l114.676%20114.676L337.628%2019.198c25.597-25.597%2068.09-25.597%2093.174%200%2025.597%2025.597%2025.597%2068.09%200%2093.174L316.126%20227.048l114.676%20114.676c25.597%2025.597%2025.597%2063.48%200%2089.078-25.597%2025.597-63.48%2025.597-89.078%200L227.048%20316.126%20112.372%20430.802c-25.597%2025.597-68.09%2025.597-93.174%200-25.597-25.597-25.597-68.09%200-93.174l114.676-110.58z%22%20fill%3D%22%23B3B3B3%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E";
144+
145+
// @TODO Remove in 3.0
146+
$exclamation-circle: "%3Csvg%20width%3D%22488%22%20height%3D%22488%22%20viewBox%3D%220%200%20488%20488%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Cpath%20d%3D%22M244%200c-134.708%200-244%20109.292-244%20244s109.292%20244%20244%20244%20244-109.292%20244-244-109.292-244-244-244zm40.667%20396.182c0%205.719-4.448%2010.484-9.849%2010.484h-61c-5.719%200-10.484-4.766-10.484-10.484v-60.365c0-5.719%204.766-10.484%2010.484-10.484h61c5.401%200%209.849%204.766%209.849%2010.484v60.365zm-.635-109.292c-.318%204.448-5.083%207.943-10.802%207.943h-58.776c-6.036%200-10.802-3.495-10.802-7.943l-5.401-197.297c0-2.224.953-4.448%203.177-5.719%201.906-1.589%204.766-2.542%207.625-2.542h69.896c2.859%200%205.719.953%207.625%202.542%202.224%201.271%203.177%203.495%203.177%205.719l-5.719%20197.297z%22%20fill%3D%22%23e32%22/%3E%3C/svg%3E";

‎messaging.html‎

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,81 @@
66
<section class="xs-mb6">
77

88
<a name="success-and-error-messages"></a>
9-
<h2 class="bold xs-mb2">Success and Error Messages</h2>
9+
<h2 class="bold xs-mb2">Success, Error, and Warning Messages</h2>
1010

11-
<p class="xs-mb4">Use the following code snippets to add Success and Error messaging to your page. The <span class="nowrap">.<code class="js-highlight">page-message__action</code></span> link is optional. To allow users to dismiss the message, include the optional <span class="nowrap">.<code class="js-highlight">page-message__close</code></span> markup, with inline <span class="nowrap"><code class="js-highlight">svg</code></span>.</p>
11+
<p class="xs-mb4">Use the following code snippets to add Success, Error, and Warning messaging to your page. The <span class="nowrap">.<code class="js-highlight">page-message__action</code></span> link is optional. To allow users to dismiss the message, include the optional <span class="nowrap">.<code class="js-highlight">page-message__close</code></span> markup, with inline <span class="nowrap"><code class="js-highlight">svg</code></span>.</p>
1212

1313
<div class="page-message page-message--success xs-mb2">
14-
<div class="page-message__text">Your settings have been saved.
14+
<div class="page-message__text">
15+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
16+
<path d="M16.1 26.1c-.4 0-.8-.2-1.1-.5l-6.5-6.7 2.2-2.1 5.4 5.6 11.3-11 2.1 2.1-12.3 12.2c-.3.3-.7.4-1.1.4z"/>
17+
</svg>
18+
Your settings have been saved.
1519
<a class="page-message__action" href="#">View your settings.</a>
1620
</div>
1721
</div>
1822

1923
<div class="page-message page-message--error xs-mb2">
20-
<div class="page-message__text">Oh no, something went wrong.
24+
<div class="page-message__text">
25+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
26+
<path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
27+
</svg>
28+
Oh no, something went wrong.
2129
<a class="page-message__action" href="#">Fix this error.</a>
2230
</div>
2331
</div>
2432

25-
<div class="page-message page-message--success xs-mb4">
26-
<div class="page-message__text">This message is dismissible.</div>
33+
<div class="page-message page-message--warning xs-mb4">
34+
<div class="page-message__text">
35+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
36+
<path d="M17.5 8.7h3v12.6h-3V8.7zM19 29.5c1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5 1.12 2.5 2.5 2.5z"/>
37+
</svg>
38+
This warning message is dismissible.
39+
</div>
2740
<span class="page-message__close">
28-
<svg viewBox="0 0 512 512" class="page-message__close-icon" xmlns="http://www.w3.org/2000/svg">
29-
<path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/>
41+
<svg class="page-message__icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
42+
<path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
3043
</svg>
3144
</span>
3245
</div>
3346

3447
<div class="xs-mb2">
35-
{% highlight html %}<div class="page-message page-message--success">
36-
<div class="page-message__text">Your settings have been saved.
37-
<a class="page-message__action" href="#">View your settings.</a>
38-
</div>
39-
</div>{% endhighlight %}
48+
{% highlight html %} <div class="page-message page-message--success">
49+
<div class="page-message__text">
50+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
51+
<path d="M16.1 26.1c-.4 0-.8-.2-1.1-.5l-6.5-6.7 2.2-2.1 5.4 5.6 11.3-11 2.1 2.1-12.3 12.2c-.3.3-.7.4-1.1.4z"/>
52+
</svg>
53+
Your settings have been saved.
54+
<a class="page-message__action" href="#">View your settings.</a>
55+
</div>
56+
</div>{% endhighlight %}
4057
</div>
4158

4259
<div class="xs-mb2">
4360
{% highlight html %}<div class="page-message page-message--error">
44-
<div class="page-message__text">Oh no, something went wrong.
45-
<a class="page-message__action" href="#">Fix this error.</a>
46-
</div>
47-
</div>{% endhighlight %}
61+
<div class="page-message__text">
62+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
63+
<path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
64+
</svg>
65+
Oh no, something went wrong.
66+
<a class="page-message__action" href="#">Fix this error.</a>
67+
</div>
68+
</div>{% endhighlight %}
4869
</div>
4970

5071
<div class="xs-mb2">
51-
{% highlight html %}<div class="page-message page-message--success">
52-
<div class="page-message__text">This message is dismissible.</div>
72+
{% highlight html %}<div class="page-message page-message--warning">
73+
<div class="page-message__text">
74+
<svg class="page-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
75+
<path d="M17.5 8.7h3v12.6h-3V8.7zM19 29.5c1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5 1.12 2.5 2.5 2.5z"/>
76+
</svg>
77+
This warning message is dismissible.</div>
5378
<span class="page-message__close">
54-
<svg viewBox="0 0 512 512" class="page-message__close-icon" xmlns="http://www.w3.org/2000/svg">
55-
<path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/>
79+
<svg class="page-message__icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38">
80+
<path d="M19 16.878l-6.364-6.363-2.12 2.12L16.878 19l-6.365 6.364 2.12 2.12L19 21.122l6.364 6.365 2.12-2.12L21.122 19l6.365-6.364-2.12-2.12L19 16.877z"/>
5681
</svg>
5782
</span>
58-
</div>
59-
</div>{% endhighlight %}
83+
</div>{% endhighlight %}
6084
</div>
6185

6286
</section>

0 commit comments

Comments
 (0)