1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @import '../../globals/scss/vars';
|
13 | @import '../../globals/scss/helper-mixins';
|
14 | @import '../../globals/scss/layout';
|
15 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
16 | @import '../../globals/scss/css--reset';
|
17 | @import 'mixins';
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | @mixin inline-notifications {
|
23 | .#{$prefix}--inline-notification {
|
24 | @include reset;
|
25 |
|
26 | position: relative;
|
27 | display: flex;
|
28 | flex-wrap: wrap;
|
29 | width: 100%;
|
30 | min-width: rem(288px);
|
31 | max-width: rem(288px);
|
32 | height: auto;
|
33 | min-height: rem(48px);
|
34 | margin-top: $carbon--spacing-05;
|
35 | margin-bottom: $carbon--spacing-05;
|
36 | color: $inverse-01;
|
37 |
|
38 | @include carbon--breakpoint(md) {
|
39 | flex-wrap: nowrap;
|
40 | max-width: rem(608px);
|
41 | }
|
42 |
|
43 | @include carbon--breakpoint(lg) {
|
44 | max-width: rem(736px);
|
45 | }
|
46 |
|
47 | @include carbon--breakpoint(max) {
|
48 | max-width: rem(832px);
|
49 | }
|
50 | }
|
51 |
|
52 | .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
|
53 | a {
|
54 | color: $inverse-link;
|
55 | }
|
56 |
|
57 | .#{$prefix}--inline-notification a {
|
58 | text-decoration: none;
|
59 | }
|
60 |
|
61 | .#{$prefix}--inline-notification a:hover {
|
62 | text-decoration: underline;
|
63 | }
|
64 |
|
65 | .#{$prefix}--inline-notification a:focus {
|
66 | outline: 1px solid $inverse-link;
|
67 | }
|
68 |
|
69 | .#{$prefix}--inline-notification.#{$prefix}--inline-notification--low-contrast
|
70 | a:focus {
|
71 | @include focus-outline;
|
72 | }
|
73 |
|
74 | .#{$prefix}--inline-notification--low-contrast {
|
75 |
|
76 | color: map-get($carbon--theme--white, 'text-01');
|
77 |
|
78 | &::before {
|
79 | position: absolute;
|
80 | top: 0;
|
81 | left: 0;
|
82 | box-sizing: border-box;
|
83 | width: 100%;
|
84 | height: 100%;
|
85 | border-style: solid;
|
86 | border-width: 1px 1px 1px 0;
|
87 | filter: opacity(0.4);
|
88 | content: '';
|
89 | pointer-events: none;
|
90 | }
|
91 | }
|
92 |
|
93 | .#{$prefix}--inline-notification--error {
|
94 | @include notification--experimental($inverse-support-01, $inverse-02);
|
95 | }
|
96 |
|
97 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
|
98 | @include notification--experimental(
|
99 | $support-01,
|
100 | $notification-error-background-color
|
101 | );
|
102 |
|
103 | &::before {
|
104 | border-color: $support-01;
|
105 | }
|
106 | }
|
107 |
|
108 | .#{$prefix}--inline-notification--success {
|
109 | @include notification--experimental($inverse-support-02, $inverse-02);
|
110 | }
|
111 |
|
112 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
|
113 | @include notification--experimental(
|
114 | $support-02,
|
115 | $notification-success-background-color
|
116 | );
|
117 |
|
118 | &::before {
|
119 | border-color: $support-02;
|
120 | }
|
121 | }
|
122 |
|
123 | .#{$prefix}--inline-notification--info,
|
124 | .#{$prefix}--inline-notification--info-square {
|
125 | @include notification--experimental($inverse-support-04, $inverse-02);
|
126 | }
|
127 |
|
128 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info,
|
129 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
|
130 | @include notification--experimental(
|
131 | $support-04,
|
132 | $notification-info-background-color
|
133 | );
|
134 |
|
135 | &::before {
|
136 | border-color: $support-04;
|
137 | }
|
138 | }
|
139 |
|
140 | .#{$prefix}--inline-notification--warning,
|
141 | .#{$prefix}--inline-notification--warning-alt {
|
142 | @include notification--experimental($inverse-support-03, $inverse-02);
|
143 | }
|
144 |
|
145 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning,
|
146 | .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
|
147 | @include notification--experimental(
|
148 | $support-03,
|
149 | $notification-warning-background-color
|
150 | );
|
151 |
|
152 | &::before {
|
153 | border-color: $support-03;
|
154 | }
|
155 | }
|
156 |
|
157 | .#{$prefix}--inline-notification--warning
|
158 | .#{$prefix}--inline-notification__icon
|
159 | path[opacity='0'] {
|
160 | opacity: 1;
|
161 | fill: $carbon__black-100;
|
162 | }
|
163 |
|
164 | .#{$prefix}--inline-notification__details {
|
165 | display: flex;
|
166 | flex-grow: 1;
|
167 | margin: 0 $carbon--spacing-09 0 $carbon--spacing-05;
|
168 |
|
169 | @include carbon--breakpoint(md) {
|
170 | margin: 0 $carbon--spacing-05;
|
171 | }
|
172 | }
|
173 |
|
174 | .#{$prefix}--inline-notification__icon {
|
175 | flex-shrink: 0;
|
176 | margin-top: rem(14px);
|
177 | margin-right: $carbon--spacing-05;
|
178 | }
|
179 |
|
180 | .#{$prefix}--inline-notification__text-wrapper {
|
181 | display: flex;
|
182 | flex-wrap: wrap;
|
183 | padding: rem(15px) 0;
|
184 | }
|
185 |
|
186 | .#{$prefix}--inline-notification__title {
|
187 | @include type-style('productive-heading-01');
|
188 |
|
189 | margin: 0 $carbon--spacing-02 0 0;
|
190 | }
|
191 |
|
192 | .#{$prefix}--inline-notification__subtitle {
|
193 | @include type-style('body-short-01');
|
194 |
|
195 | word-break: break-word;
|
196 | }
|
197 |
|
198 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
|
199 | height: rem(32px);
|
200 | margin-bottom: $carbon--spacing-03;
|
201 | margin-left: $carbon--spacing-08;
|
202 | color: $inverse-link;
|
203 |
|
204 | @include carbon--breakpoint(md) {
|
205 | margin: $carbon--spacing-03 0;
|
206 | }
|
207 | }
|
208 |
|
209 | .#{$prefix}--inline-notification--low-contrast
|
210 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
|
211 | color: $link-01;
|
212 | }
|
213 |
|
214 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
|
215 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
|
216 | background-color: $inverse-hover-ui;
|
217 | }
|
218 |
|
219 | .#{$prefix}--inline-notification--low-contrast
|
220 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
|
221 | .#{$prefix}--inline-notification--low-contrast
|
222 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
|
223 | background-color: $carbon--white-0;
|
224 | }
|
225 |
|
226 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
|
227 | border-color: transparent;
|
228 | outline: 2px solid $inverse-focus-ui;
|
229 | outline-offset: -2px;
|
230 | box-shadow: none;
|
231 | }
|
232 |
|
233 | .#{$prefix}--inline-notification--low-contrast
|
234 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
|
235 | outline-color: $focus;
|
236 | }
|
237 |
|
238 | .#{$prefix}--inline-notification--hide-close-button
|
239 | .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
|
240 | margin-right: $carbon--spacing-03;
|
241 | }
|
242 |
|
243 | .#{$prefix}--inline-notification__close-button {
|
244 | @include focus-outline('reset');
|
245 |
|
246 | position: absolute;
|
247 | top: 0;
|
248 | right: 0;
|
249 | display: flex;
|
250 | flex-direction: column;
|
251 | align-items: center;
|
252 | justify-content: center;
|
253 | width: rem(48px);
|
254 | min-width: rem(48px);
|
255 | max-width: rem(48px);
|
256 | height: rem(48px);
|
257 | padding: 0;
|
258 | background: transparent;
|
259 | border: none;
|
260 | cursor: pointer;
|
261 | transition: outline $duration--fast-02 motion(standard, productive),
|
262 | background-color $duration--fast-02 motion(standard, productive);
|
263 |
|
264 | &:focus {
|
265 | outline: 2px solid $inverse-focus-ui;
|
266 | outline-offset: -2px;
|
267 | }
|
268 |
|
269 | .#{$prefix}--inline-notification__close-icon {
|
270 | fill: $inverse-01;
|
271 | }
|
272 |
|
273 | @include carbon--breakpoint(md) {
|
274 | position: static;
|
275 | }
|
276 | }
|
277 |
|
278 | .#{$prefix}--inline-notification--low-contrast
|
279 | .#{$prefix}--inline-notification__close-button:focus {
|
280 | @include focus-outline('outline');
|
281 | }
|
282 |
|
283 | .#{$prefix}--inline-notification--low-contrast
|
284 | .#{$prefix}--inline-notification__close-button
|
285 | .#{$prefix}--inline-notification__close-icon {
|
286 | fill: map-get($carbon--theme--white, 'text-01');
|
287 | }
|
288 |
|
289 | .#{$prefix}--inline-notification--low-contrast
|
290 | .#{$prefix}--inline-notification__action-button {
|
291 | color: $interactive-01;
|
292 |
|
293 | &:active {
|
294 | color: $interactive-01;
|
295 | }
|
296 |
|
297 | &:active,
|
298 | &:hover {
|
299 | background-color: $carbon--white-0;
|
300 | }
|
301 | }
|
302 | }
|
303 |
|
304 | @include exports('inline-notifications') {
|
305 | @include inline-notifications;
|
306 | }
|