1 | The cf-notifications component provides notification boxes
|
2 | for Capital Framework.
|
3 |
|
4 | [`cf-core`](../cf-core) and
|
5 | [`cf-icons`](../cf-icons) components are dependencies of this component.
|
6 |
|
7 | > NOTE: If you use `cf-notifications.less` directly,
|
8 | be sure to run the file through
|
9 | [Autoprefixer](https://github.com/postcss/autoprefixer),
|
10 | or your compiled Capital Framework CSS will
|
11 | not work perfectly in older browsers.
|
12 |
|
13 |
|
14 | ## Table of contents
|
15 |
|
16 | - [Variables](#variables)
|
17 | - [Color variables](#color-variables)
|
18 | - [Sizing variables](#sizing-variables)
|
19 | - [Recommended notification patterns](#recommended-notification-pattern)
|
20 | - [Action notification](#action-notification)
|
21 | - [Error notification](#error-notification)
|
22 | - [Warning notification](#warning-notification)
|
23 | - [Success notification](#success-notification)
|
24 | - [Modifiers](#recommended-notification-pattern)
|
25 | - [Visibility](#visibility)
|
26 | - [Explanation](#explanation)
|
27 | - [Custom icons](#custom-icons)
|
28 |
|
29 |
|
30 | ## Variables
|
31 |
|
32 | Theme variables for setting the color and sizes throughout the project.
|
33 | Overwrite them in your own project by duplicating the variable `@key: value`.
|
34 |
|
35 | ### Color variables
|
36 |
|
37 | ```
|
38 | @notification-bg: #d2d3d5;
|
39 | @notification-bg-success: #e2efd8;
|
40 | @notification-bg-warning: #fff0dd;
|
41 | @notification-bg-error: #f7e0d9;
|
42 |
|
43 | @notification-border: #5a5d61;
|
44 | @notification-border-success: #20aa3f;
|
45 | @notification-border-warning: #ff9e1b;
|
46 | @notification-border-error: #d14124;
|
47 |
|
48 | @notification-icon: #5a5d61;
|
49 | @notification-icon-success: #20aa3f;
|
50 | @notification-icon-warning: #ff9e1b;
|
51 | @notification-icon-error: #d14124;
|
52 | ```
|
53 |
|
54 | ### Sizing variables
|
55 |
|
56 | ```
|
57 | @notification-padding__px: 15px;
|
58 | ```
|
59 |
|
60 | ## Recommended notification patterns
|
61 |
|
62 | ### Action notification
|
63 |
|
64 | The action notification is for displaying when something
|
65 | is happening on the page,
|
66 | such as a page loading notification.
|
67 | This is the default notification appearance without additional CSS modifiers.
|
68 |
|
69 | <div class="m-notification
|
70 | m-notification__visible">
|
71 | <div class="m-notification_content">
|
72 | <div class="h4 m-notification_message">The page is loading…</div>
|
73 | </div>
|
74 | </div>
|
75 |
|
76 | ```
|
77 | <div class="m-notification
|
78 | m-notification__visible">
|
79 | <div class="m-notification_content">
|
80 | <div class="h4 m-notification_message">The page is loading…</div>
|
81 | </div>
|
82 | </div>
|
83 | ```
|
84 |
|
85 | ### Success notification
|
86 |
|
87 | The success notification is for displaying when an operation has run as
|
88 | expected, such as returning the number of results in a search.
|
89 |
|
90 | <div class="m-notification
|
91 | m-notification__visible
|
92 | m-notification__success">
|
93 | <span class="m-notification_icon cf-icon"></span>
|
94 | <div class="m-notification_content">
|
95 | <div class="h4 m-notification_message">11 results</div>
|
96 | </div>
|
97 | </div>
|
98 |
|
99 | ```
|
100 | <div class="m-notification
|
101 | m-notification__visible
|
102 | m-notification__success">
|
103 | <span class="m-notification_icon cf-icon"></span>
|
104 | <div class="m-notification_content">
|
105 | <div class="h4 m-notification_message">11 results</div>
|
106 | </div>
|
107 | </div>
|
108 | ```
|
109 |
|
110 | ### Warning notification
|
111 |
|
112 | The warning notification is for displaying when an operation has run as
|
113 | expected, but doesn't have the expected results,
|
114 | such as a search that returned no results.
|
115 |
|
116 | <div class="m-notification
|
117 | m-notification__visible
|
118 | m-notification__warning">
|
119 | <span class="m-notification_icon cf-icon"></span>
|
120 | <div class="m-notification_content">
|
121 | <div class="h4 m-notification_message">No results found.</div>
|
122 | </div>
|
123 | </div>
|
124 |
|
125 | ```
|
126 | <div class="m-notification
|
127 | m-notification__visible
|
128 | m-notification__warning">
|
129 | <span class="m-notification_icon cf-icon"></span>
|
130 | <div class="m-notification_content">
|
131 | <div class="h4 m-notification_message">No results found.</div>
|
132 | </div>
|
133 | </div>
|
134 | ```
|
135 |
|
136 | ### Error notification
|
137 |
|
138 | The error notification is for displaying when an operation has not run as
|
139 | expected and encountered an error.
|
140 |
|
141 | <div class="m-notification
|
142 | m-notification__visible
|
143 | m-notification__error">
|
144 | <span class="m-notification_icon cf-icon"></span>
|
145 | <div class="m-notification_content">
|
146 | <div class="h4 m-notification_message">Page not found.</div>
|
147 | </div>
|
148 | </div>
|
149 |
|
150 | ```
|
151 | <div class="m-notification
|
152 | m-notification__visible
|
153 | m-notification__error">
|
154 | <span class="m-notification_icon cf-icon"></span>
|
155 | <div class="m-notification_content">
|
156 | <div class="h4 m-notification_message">Page not found.</div>
|
157 | </div>
|
158 | </div>
|
159 | ```
|
160 |
|
161 | ## Modifiers
|
162 |
|
163 | ### Visibility
|
164 |
|
165 | You can show and hide a notification
|
166 | by adding or removing the `m-notification__visible` class to the base element.
|
167 |
|
168 | ### Explanation
|
169 |
|
170 | <div class="m-notification
|
171 | m-notification__visible
|
172 | m-notification__error">
|
173 | <span class="m-notification_icon cf-icon"></span>
|
174 | <div class="m-notification_content">
|
175 | <div class="h4 m-notification_message">Page not found.</div>
|
176 | <p class="h4 m-notification_explanation">
|
177 | Please check the URL and try again.
|
178 | </p>
|
179 | </div>
|
180 | </div>
|
181 |
|
182 | ```
|
183 | <div class="m-notification
|
184 | m-notification__visible
|
185 | m-notification__error">
|
186 | <span class="m-notification_icon cf-icon"></span>
|
187 | <div class="m-notification_content">
|
188 | <div class="h4 m-notification_message">message</div>
|
189 | <p class="h4 m-notification_explanation">
|
190 | Please check the URL and try again.
|
191 | </p>
|
192 | </div>
|
193 | </div>
|
194 | ```
|
195 |
|
196 | ### Custom icons
|
197 |
|
198 | Custom icons can be added to the action notification by supplying any icons
|
199 | from the cf-icons package.
|
200 |
|
201 | <div class="m-notification
|
202 | m-notification__visible">
|
203 | <span class="m-notification_icon
|
204 | cf-icon
|
205 | cf-icon-update
|
206 | cf-icon__spin"></span>
|
207 | <div class="m-notification_content">
|
208 | <div class="h4 m-notification_message">The page is loading…</div>
|
209 | </div>
|
210 | </div>
|
211 |
|
212 | ```
|
213 | <div class="m-notification
|
214 | m-notification__visible">
|
215 | <span class="m-notification_icon
|
216 | cf-icon
|
217 | cf-icon-update
|
218 | cf-icon__spin"></span>
|
219 | <div class="m-notification_content">
|
220 | <div class="h4 m-notification_message">The page is loading…</div>
|
221 | </div>
|
222 | </div>
|
223 | ```
|