@transferwise/neptune-css 14.24.4 → 14.24.6

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.
Files changed (17) hide show
  1. package/dist/css/accordion.css +0 -4
  2. package/dist/css/button-groups.css +179 -92
  3. package/dist/css/buttons.css +0 -4
  4. package/dist/css/decision.css +43 -24
  5. package/dist/css/dropdowns.css +97 -51
  6. package/dist/css/droppable.css +91 -47
  7. package/dist/css/footer.css +43 -24
  8. package/dist/css/input-groups.css +2 -6
  9. package/dist/css/list-group.css +119 -62
  10. package/dist/css/navbar.css +0 -4
  11. package/dist/css/neptune-core.css +6 -60
  12. package/dist/css/neptune.css +24 -91
  13. package/dist/css/popovers.css +215 -110
  14. package/dist/css/tooltip.css +49 -27
  15. package/dist/less/neptune-tokens.less +2 -2
  16. package/dist/props/neptune-tokens.css +1 -1
  17. package/package.json +5 -5
package/dist/css/dropdowns.css CHANGED
@@ -1,9 +1,8 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.dropup,
1
+ .dropup,
4
2
  .dropdown {
5
3
  position: relative;
6
- }.dropdown-menu {
4
+ }
5
+ .dropdown-menu {
7
6
  position: absolute;
8
7
  top: 0;
9
8
  left: 0;
@@ -31,17 +30,22 @@
31
30
  opacity: 0;
32
31
  transform: translateY(-10px) scale(0.95, 0.95);
33
32
  visibility: hidden;
34
- }[dir="rtl"] .dropdown-menu {
33
+ }
34
+ [dir="rtl"] .dropdown-menu {
35
35
  right: 0;
36
36
  left: auto;
37
37
  left: initial;
38
- }[dir="rtl"] .dropdown-menu {
38
+ }
39
+ [dir="rtl"] .dropdown-menu {
39
40
  float: right;
40
- }[dir="rtl"] .dropdown-menu {
41
+ }
42
+ [dir="rtl"] .dropdown-menu {
41
43
  padding: 8px ;
42
- }[dir="rtl"] .dropdown-menu {
44
+ }
45
+ [dir="rtl"] .dropdown-menu {
43
46
  text-align: right;
44
- }.np-theme-personal .dropdown-menu,
47
+ }
48
+ .np-theme-personal .dropdown-menu,
45
49
  .np-theme-personal--forest-green .dropdown-menu,
46
50
  .np-theme-personal--dark .dropdown-menu {
47
51
  background-color: #ffffff;
@@ -49,24 +53,29 @@
49
53
  border-radius: 16px;
50
54
  border-radius: var(--radius-medium);
51
55
  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
52
- }@media (min-width: 576px) {
56
+ }
57
+ @media (min-width: 576px) {
53
58
  .dropdown-menu {
54
59
  min-width: 160px;
55
60
  }
56
- }.np-theme-personal--forest-green .dropdown-menu,
61
+ }
62
+ .np-theme-personal--forest-green .dropdown-menu,
57
63
  .np-theme-personal--bright-green .dropdown-menu,
58
64
  .np-theme-personal--dark .dropdown-menu {
59
65
  box-shadow: none;
60
- }.dropdown-menu .divider {
66
+ }
67
+ .dropdown-menu .divider {
61
68
  height: 1px;
62
69
  margin: 0;
63
70
  overflow: hidden;
64
71
  background-color: rgba(0,0,0,0.10196);
65
72
  background-color: var(--color-border-neutral);
66
- }.dropdown-menu .text-primary {
73
+ }
74
+ .dropdown-menu .text-primary {
67
75
  color: #37517e !important;
68
76
  color: var(--color-content-primary) !important;
69
- }.dropdown-menu > li > a {
77
+ }
78
+ .dropdown-menu > li > a {
70
79
  display: block;
71
80
  padding: var(--dropdown-link-padding);
72
81
  clear: both;
@@ -80,36 +89,46 @@
80
89
  color: #37517e;
81
90
  color: var(--color-content-primary);
82
91
  white-space: nowrap;
83
- }.dropdown-menu > li > a .secondary {
92
+ }
93
+ .dropdown-menu > li > a .secondary {
84
94
  display: block;
85
95
  white-space: normal;
86
- }.np-theme-personal .dropdown-menu > li > a,
96
+ }
97
+ .np-theme-personal .dropdown-menu > li > a,
87
98
  .np-theme-personal--forest-green .dropdown-menu > li > a,
88
99
  .np-theme-personal--dark .dropdown-menu > li > a {
89
100
  border-radius: 10px;
90
101
  border-radius: var(--radius-small);
91
- }.np-theme-light .dropdown-menu > li:first-child > a {
102
+ }
103
+ .np-theme-light .dropdown-menu > li:first-child > a {
92
104
  border-top-right-radius: 2px;
93
105
  border-top-left-radius: 2px;
94
- }.np-theme-light .dropdown-menu > li:last-child > a {
106
+ }
107
+ .np-theme-light .dropdown-menu > li:last-child > a {
95
108
  border-bottom-right-radius: 2px;
96
109
  border-bottom-left-radius: 2px;
97
- }.dropdown-menu > .overlay-back-button,
110
+ }
111
+ .dropdown-menu > .overlay-back-button,
98
112
  .dropdown-menu > .overlay-title {
99
113
  display: none;
100
- }.dropdown-menu,
114
+ }
115
+ .dropdown-menu,
101
116
  .btn-group .dropdown-menu {
102
117
  max-width: calc(100vw - 32px);
103
- }.dropdown-menu.dropdown-menu-sm,
118
+ }
119
+ .dropdown-menu.dropdown-menu-sm,
104
120
  .btn-group .dropdown-menu.dropdown-menu-sm {
105
121
  width: 220px;
106
- }.dropdown-menu.dropdown-menu-md,
122
+ }
123
+ .dropdown-menu.dropdown-menu-md,
107
124
  .btn-group .dropdown-menu.dropdown-menu-md {
108
125
  width: 300px;
109
- }.dropdown-menu.dropdown-menu-lg,
126
+ }
127
+ .dropdown-menu.dropdown-menu-lg,
110
128
  .btn-group .dropdown-menu.dropdown-menu-lg {
111
129
  width: 420px;
112
- }.dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
130
+ }
131
+ .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
113
132
  .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus,
114
133
  .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):active {
115
134
  -webkit-text-decoration: none;
@@ -119,7 +138,8 @@
119
138
  outline: 0;
120
139
  box-shadow: inset 0 0 0 1px #c9cbce;
121
140
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
122
- }.dropdown-menu > .active > a,
141
+ }
142
+ .dropdown-menu > .active > a,
123
143
  .dropdown-menu > .selected > a,
124
144
  .dropdown-menu > .active > a:hover,
125
145
  .dropdown-menu > .selected > a:hover,
@@ -130,28 +150,33 @@
130
150
  text-decoration: none;
131
151
  outline: 0;
132
152
  background-color: #37517e;
133
- }.dropdown-menu > .active > a strong,
153
+ }
154
+ .dropdown-menu > .active > a strong,
134
155
  .dropdown-menu > .selected > a strong {
135
156
  color: inherit;
136
- }.dropdown-menu > .active > a .np-text-body-default,
157
+ }
158
+ .dropdown-menu > .active > a .np-text-body-default,
137
159
  .dropdown-menu > .selected > a .np-text-body-default,
138
160
  .dropdown-menu > .active > a .small,
139
161
  .dropdown-menu > .selected > a .small,
140
162
  .dropdown-menu > .active > a .secondary,
141
163
  .dropdown-menu > .selected > a .secondary {
142
164
  color: #c9cbce;
143
- }.dropdown-menu > .disabled > a:hover,
165
+ }
166
+ .dropdown-menu > .disabled > a:hover,
144
167
  .dropdown-menu > .disabled > a:focus {
145
168
  -webkit-text-decoration: none;
146
169
  text-decoration: none;
147
170
  background-color: transparent;
148
171
  background-image: none;
149
- }.open > .dropdown-menu {
172
+ }
173
+ .open > .dropdown-menu {
150
174
  transition: opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), visibility 0s linear 0s;
151
175
  visibility: visible;
152
176
  opacity: 1;
153
177
  transform: none;
154
- }@media (max-width: 575px) {
178
+ }
179
+ @media (max-width: 575px) {
155
180
  .open > .dropdown-menu-overlay {
156
181
  position: fixed;
157
182
  top: 0;
@@ -175,37 +200,45 @@
175
200
  .open > .dropdown-menu-overlay > .overlay-title {
176
201
  display: block;
177
202
  }
178
- }.open > a {
203
+ }
204
+ .open > a {
179
205
  outline: 0;
180
- }.dropdown-menu-right,
206
+ }
207
+ .dropdown-menu-right,
181
208
  .dropdown-menu-xs-right {
182
209
  left: auto;
183
210
  right: 0;
184
- }[dir="rtl"] .dropdown-menu-right,
211
+ }
212
+ [dir="rtl"] .dropdown-menu-right,
185
213
  [dir="rtl"] .dropdown-menu-xs-right {
186
214
  right: auto;
187
215
  left: auto;
188
216
  left: initial;
189
- }[dir="rtl"] .dropdown-menu-right,
217
+ }
218
+ [dir="rtl"] .dropdown-menu-right,
190
219
  [dir="rtl"] .dropdown-menu-xs-right {
191
220
  left: 0;
192
221
  right: auto;
193
222
  right: initial;
194
- }.dropdown-menu-left,
223
+ }
224
+ .dropdown-menu-left,
195
225
  .dropdown-menu-xs-left {
196
226
  left: 0;
197
227
  right: auto;
198
- }[dir="rtl"] .dropdown-menu-left,
228
+ }
229
+ [dir="rtl"] .dropdown-menu-left,
199
230
  [dir="rtl"] .dropdown-menu-xs-left {
200
231
  right: 0;
201
232
  left: auto;
202
233
  left: initial;
203
- }[dir="rtl"] .dropdown-menu-left,
234
+ }
235
+ [dir="rtl"] .dropdown-menu-left,
204
236
  [dir="rtl"] .dropdown-menu-xs-left {
205
237
  left: auto;
206
238
  right: auto;
207
239
  right: initial;
208
- }@media (min-width: 576px) {
240
+ }
241
+ @media (min-width: 576px) {
209
242
  .dropdown-menu-sm-right {
210
243
  left: auto;
211
244
  right: 0;
@@ -234,7 +267,8 @@
234
267
  right: auto;
235
268
  right: initial;
236
269
  }
237
- }@media (min-width: 768px) {
270
+ }
271
+ @media (min-width: 768px) {
238
272
  .dropdown-menu-md-right {
239
273
  left: auto;
240
274
  right: 0;
@@ -263,7 +297,8 @@
263
297
  right: auto;
264
298
  right: initial;
265
299
  }
266
- }@media (min-width: 992px) {
300
+ }
301
+ @media (min-width: 992px) {
267
302
  .dropdown-menu-lg-right {
268
303
  left: auto;
269
304
  right: 0;
@@ -292,7 +327,8 @@
292
327
  right: auto;
293
328
  right: initial;
294
329
  }
295
- }@media (min-width: 1200px) {
330
+ }
331
+ @media (min-width: 1200px) {
296
332
  .dropdown-menu-xl-right {
297
333
  left: auto;
298
334
  right: 0;
@@ -321,7 +357,8 @@
321
357
  right: auto;
322
358
  right: initial;
323
359
  }
324
- }.dropdown-header {
360
+ }
361
+ .dropdown-header {
325
362
  display: block;
326
363
  padding: 8px 16px;
327
364
  line-height: 1.5;
@@ -341,7 +378,8 @@
341
378
  font-size: var(--font-size-14);
342
379
  letter-spacing: -0.006em;
343
380
  line-height: 140%;
344
- }@supports (hyphenate-limit-chars: 1) {
381
+ }
382
+ @supports (hyphenate-limit-chars: 1) {
345
383
  .dropdown-header {
346
384
  -webkit-hyphens: auto;
347
385
  hyphens: auto;
@@ -357,7 +395,8 @@
357
395
  hyphenate-limit-chars: 10 4 3;
358
396
  }
359
397
  }
360
- }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
398
+ }
399
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
361
400
  .dropdown-header {
362
401
  -webkit-hyphens: auto;
363
402
  hyphens: auto;
@@ -369,32 +408,38 @@
369
408
  -webkit-hyphenate-limit-before: 4;
370
409
  }
371
410
  }
372
- }.dropdown-header + p,
411
+ }
412
+ .dropdown-header + p,
373
413
  .dropdown-header + ul:not(.list-unstyled),
374
414
  .dropdown-header + ol:not(.list-unstyled) {
375
415
  margin-top: 8px;
376
416
  margin-top: var(--size-8);
377
- }.dropdown-backdrop {
417
+ }
418
+ .dropdown-backdrop {
378
419
  position: fixed;
379
420
  left: 0;
380
421
  right: 0;
381
422
  bottom: 0;
382
423
  top: 0;
383
424
  z-index: 990;
384
- }[dir="rtl"] .dropdown-backdrop {
425
+ }
426
+ [dir="rtl"] .dropdown-backdrop {
385
427
  right: 0;
386
428
  left: auto;
387
429
  left: initial;
388
- }[dir="rtl"] .dropdown-backdrop {
430
+ }
431
+ [dir="rtl"] .dropdown-backdrop {
389
432
  left: 0;
390
433
  right: auto;
391
434
  right: initial;
392
- }.dropup .dropdown-menu,
435
+ }
436
+ .dropup .dropdown-menu,
393
437
  .navbar-fixed-bottom .dropdown .dropdown-menu {
394
438
  top: auto;
395
439
  bottom: -2px;
396
440
  margin-bottom: 2px;
397
- }@media (min-width: 768px) {
441
+ }
442
+ @media (min-width: 768px) {
398
443
  .navbar-right .dropdown-menu {
399
444
  left: auto;
400
445
  right: 0;
@@ -423,6 +468,7 @@
423
468
  right: auto;
424
469
  right: initial;
425
470
  }
426
- }.bootstrap-select .dropdown-menu {
471
+ }
472
+ .bootstrap-select .dropdown-menu {
427
473
  margin: -8px 0 -6px;
428
474
  }
package/dist/css/droppable.css CHANGED
@@ -1,6 +1,4 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.droppable {
1
+ .droppable {
4
2
  position: relative;
5
3
  font-weight: 400;
6
4
  font-weight: var(--font-weight-regular);
@@ -14,61 +12,78 @@
14
12
  border-radius: 3px;
15
13
  overflow: auto;
16
14
  transition: border-color 0.15s linear;
17
- }.droppable:hover {
15
+ }
16
+ .droppable:hover {
18
17
  border-color: #b5b7ba;
19
18
  border-color: var(--color-interactive-secondary-hover);
20
- }.droppable:active {
19
+ }
20
+ .droppable:active {
21
21
  border-color: #a7a9ab;
22
22
  border-color: var(--color-interactive-secondary-active);
23
- }.np-theme-personal .droppable {
23
+ }
24
+ .np-theme-personal .droppable {
24
25
  border-radius: 0;
25
26
  border-radius: initial;
26
- }@media (min-width: 768px) {
27
+ }
28
+ @media (min-width: 768px) {
27
29
  .droppable {
28
30
  border-style: dashed;
29
31
  }
30
- }.np-theme-personal .droppable-area {
32
+ }
33
+ .np-theme-personal .droppable-area {
31
34
  border-radius: 16px;
32
35
  border-radius: var(--radius-medium);
33
36
  background-color: rgba(134,167,189,0.10196);
34
37
  background-color: var(--color-background-neutral);
35
38
  padding: 24px;
36
39
  padding: var(--padding-medium);
37
- }.np-theme-personal .droppable-area,
40
+ }
41
+ .np-theme-personal .droppable-area,
38
42
  .np-theme-personal .droppable-area.droppable-dropping .droppable-dropping-card {
39
43
  border-color: transparent !important;
40
- }.np-theme-personal .droppable-area.tw-droppable-md {
44
+ }
45
+ .np-theme-personal .droppable-area.tw-droppable-md {
41
46
  min-height: 242px;
42
- }.np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
47
+ }
48
+ .np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
43
49
  opacity: 0;
44
- }.np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
50
+ }
51
+ .np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
45
52
  width: 24px;
46
53
  width: var(--size-24);
47
54
  height: 24px;
48
55
  height: var(--size-24);
49
- }.np-theme-personal .droppable-area.droppable-dropping h4 {
56
+ }
57
+ .np-theme-personal .droppable-area.droppable-dropping h4 {
50
58
  margin-top: 16px !important;
51
59
  margin-top: var(--padding-small) !important;
52
- }.np-theme-personal .droppable-area.droppable-negative {
60
+ }
61
+ .np-theme-personal .droppable-area.droppable-negative {
53
62
  border: 2px solid var(--color-sentiment-negative) !important;
54
63
  background-color: #ffffff;
55
64
  background-color: var(--color-background-screen);
56
65
  min-height: 315px;
57
- }.np-theme-personal .droppable-area.droppable-complete .thumbnail {
66
+ }
67
+ .np-theme-personal .droppable-area.droppable-complete .thumbnail {
58
68
  margin-bottom: 8px !important;
59
69
  margin-bottom: var(--padding-x-small) !important;
60
- }.np-theme-personal .droppable-area .droppable-default-card .m-b-3 {
70
+ }
71
+ .np-theme-personal .droppable-area .droppable-default-card .m-b-3 {
61
72
  margin-bottom: 16px !important;
62
73
  margin-bottom: var(--padding-small) !important;
63
- }.np-theme-personal .droppable-area .droppable-dropping-card {
74
+ }
75
+ .np-theme-personal .droppable-area .droppable-dropping-card {
64
76
  background-color: var(--color-background-neutral-hover);
65
- }.np-theme-personal .droppable-area .droppable-card-content .circle {
77
+ }
78
+ .np-theme-personal .droppable-area .droppable-card-content .circle {
66
79
  padding-top: 0 !important;
67
- }.np-theme-personal .droppable-area .circle {
80
+ }
81
+ .np-theme-personal .droppable-area .circle {
68
82
  background-color: var(--color-contrast);
69
83
  color: #37517e !important;
70
84
  color: var(--color-content-primary) !important;
71
- }.droppable-card {
85
+ }
86
+ .droppable-card {
72
87
  background-color: #ffffff;
73
88
  background-color: var(--color-background-screen);
74
89
  position: absolute;
@@ -81,33 +96,42 @@
81
96
  justify-content: center;
82
97
  padding: inherit;
83
98
  transition: transform 0.3s ease;
84
- }[dir="rtl"] .droppable-card {
99
+ }
100
+ [dir="rtl"] .droppable-card {
85
101
  right: 0;
86
102
  left: auto;
87
103
  left: initial;
88
- }.droppable-card-content {
104
+ }
105
+ .droppable-card-content {
89
106
  max-width: 100%;
90
107
  opacity: 1;
91
- }.droppable-dropping {
108
+ }
109
+ .droppable-dropping {
92
110
  border-color: #a7a9ab !important;
93
111
  border-color: var(--color-interactive-secondary-active) !important;
94
- }.np-theme-personal .droppable-dropping {
112
+ }
113
+ .np-theme-personal .droppable-dropping {
95
114
  border-color: var(--color-background-neutral-hover) !important;
96
115
  border-style: solid;
97
- }.droppable-processing,
116
+ }
117
+ .droppable-processing,
98
118
  .droppable-complete {
99
119
  border-style: solid;
100
- }.droppable .thumbnail {
120
+ }
121
+ .droppable .thumbnail {
101
122
  width: auto;
102
123
  max-height: 96px;
103
124
  max-width: 96px;
104
125
  margin: 0 auto;
105
- }@media (min-width: 768px) {
126
+ }
127
+ @media (min-width: 768px) {
106
128
  .droppable .thumbnail {
107
129
  max-height: 128px;
108
130
  max-width: 128px;
109
131
  }
110
- }/***** Card variants *****/.droppable-dropping-card {
132
+ }
133
+ /***** Card variants *****/
134
+ .droppable-dropping-card {
111
135
  display: none;
112
136
  animation: droppable-fade-in 0.15s 0s linear forwards;
113
137
  color: #0097c7;
@@ -116,58 +140,78 @@
116
140
  border-color: #00a2dd;
117
141
  border-color: var(--color-interactive-accent);
118
142
  z-index: 1;
119
- }.np-theme-personal .droppable-dropping-card {
143
+ }
144
+ .np-theme-personal .droppable-dropping-card {
120
145
  background-color: #E1E4DF;
121
146
  color: #37517e;
122
147
  color: var(--color-content-primary);
123
- }.np-theme-personal--dark .droppable-dropping-card {
148
+ }
149
+ .np-theme-personal--dark .droppable-dropping-card {
124
150
  background-color: #404440;
125
- }.np-theme-personal--forest-green .droppable-dropping-card {
151
+ }
152
+ .np-theme-personal--forest-green .droppable-dropping-card {
126
153
  background-color: #455C35;
127
- }.droppable-dropping .droppable-dropping-card {
154
+ }
155
+ .droppable-dropping .droppable-dropping-card {
128
156
  display: flex;
129
- }.droppable-processing .droppable-processing-card {
157
+ }
158
+ .droppable-processing .droppable-processing-card {
130
159
  display: flex;
131
160
  align-items: baseline;
132
- }.droppable-complete .droppable-processing-card {
161
+ }
162
+ .droppable-complete .droppable-processing-card {
133
163
  display: flex;
134
- }.droppable-complete-card {
164
+ }
165
+ .droppable-complete-card {
135
166
  display: flex;
136
- }/***** End card variants *****/.droppable-active {
167
+ }
168
+ /***** End card variants *****/
169
+ .droppable-active {
137
170
  border-style: solid;
138
- }.droppable-active.droppable-dropping {
171
+ }
172
+ .droppable-active.droppable-dropping {
139
173
  border-style: dashed;
140
- }.droppable-sm {
174
+ }
175
+ .droppable-sm {
141
176
  padding: 16px 16px;
142
- }@media (min-width: 576px) {
177
+ }
178
+ @media (min-width: 576px) {
143
179
  .droppable-sm {
144
180
  padding: 24px 16px;
145
181
  }
146
- }@media (min-width: 992px) {
182
+ }
183
+ @media (min-width: 992px) {
147
184
  .droppable-sm {
148
185
  padding: 32px 24px;
149
186
  }
150
- }.droppable-md {
187
+ }
188
+ .droppable-md {
151
189
  padding: 32px 32px;
152
- }@media (min-width: 576px) {
190
+ }
191
+ @media (min-width: 576px) {
153
192
  .droppable-md {
154
193
  padding: 48px 32px;
155
194
  }
156
- }@media (min-width: 992px) {
195
+ }
196
+ @media (min-width: 992px) {
157
197
  .droppable-md {
158
198
  padding: 64px 48px;
159
199
  }
160
- }.droppable-lg {
200
+ }
201
+ .droppable-lg {
161
202
  padding: 48px 48px;
162
- }@media (min-width: 576px) {
203
+ }
204
+ @media (min-width: 576px) {
163
205
  .droppable-lg {
164
206
  padding: 72px 48px;
165
207
  }
166
- }@media (min-width: 992px) {
208
+ }
209
+ @media (min-width: 992px) {
167
210
  .droppable-lg {
168
211
  padding: 96px 72px;
169
212
  }
170
- }@keyframes droppable-fade-in {
213
+ }
214
+ @keyframes droppable-fade-in {
171
215
  from {
172
216
  opacity: 0;
173
217
  }