@transferwise/neptune-css 0.0.0-experimental-d2bbcaf → 0.0.0-experimental-6d4c9c1

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 +23 -40
  2. package/dist/css/button-groups.css +29 -2
  3. package/dist/css/buttons.css +26 -0
  4. package/dist/css/decision.css +23 -40
  5. package/dist/css/dropdowns.css +37 -44
  6. package/dist/css/droppable.css +28 -2
  7. package/dist/css/footer.css +41 -2
  8. package/dist/css/input-groups.css +170 -123
  9. package/dist/css/list-group.css +0 -39
  10. package/dist/css/navbar.css +37 -44
  11. package/dist/css/neptune-addons.css +15 -0
  12. package/dist/css/neptune-core.css +246 -11
  13. package/dist/css/neptune.css +921 -337
  14. package/dist/css/popovers.css +35 -42
  15. package/dist/css/sequences.css +6 -1
  16. package/dist/css/tooltip.css +27 -1
  17. package/package.json +1 -1
package/dist/css/accordion.css CHANGED
@@ -36,64 +36,47 @@
36
36
  .np-theme-personal .chevron-color {
37
37
  color: var(--color-interactive-primary);
38
38
  }
39
- .decision {
40
- cursor: pointer;
41
- margin-block-end: 0 !important;
42
- border: 0;
43
- align-items: center;
44
- transition: background-color ease 350ms;
45
- background-color: transparent;
46
- display: block;
47
- }
48
- .decision:not(.np-option):focus-visible,
49
- .decision:not(.np-option):has(:focus-visible) {
50
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
51
- outline-offset: 0;
52
- outline-offset: var(--ring-outline-offset);
53
- --ring-outline-offset: 0;
54
- }
55
- .decision__title {
56
- margin: 0;
57
- color: #37517e;
58
- color: var(--color-content-primary);
59
- line-height: 1.2;
60
- line-height: var(--line-height-title);
61
- letter-spacing: 0;
39
+ .decision__content {
62
40
  word-wrap: break-word;
63
41
  }
64
42
  @supports (hyphenate-limit-chars: 1) {
65
- .decision__title {
66
- hyphens: auto;
67
- hyphenate-limit-chars: 7 3;
43
+ .decision__content {
44
+ hyphens: auto;hyphenate-limit-chars: 7 3;
68
45
  }
69
46
  @media (min-width: 840px) {
70
- .decision__title {
47
+ .decision__content {
71
48
  hyphenate-limit-chars: 8 3;
72
49
  }
73
50
  }
74
51
  @media (min-width: 1160px) {
75
- .decision__title {
52
+ .decision__content {
76
53
  hyphenate-limit-chars: 10 4 3;
77
54
  }
78
55
  }
79
- }
80
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
81
- .decision__title {
82
- hyphens: auto;
83
- -webkit-hyphenate-limit-before: 3;
84
- -webkit-hyphenate-limit-after: 3;
56
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
57
+ .decision__content {
58
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
85
59
  }
86
60
  @media (min-width: 1160px) {
87
- .decision__title {
61
+ .decision__content {
88
62
  -webkit-hyphenate-limit-before: 4;
89
63
  }
90
64
  }
65
+ }.decision {
66
+ cursor: pointer;
67
+ margin-block-end: 0 !important;
68
+ border: 0;
69
+ align-items: center;
70
+ transition: background-color ease 350ms;
71
+ background-color: transparent;
72
+ display: block;
91
73
  }
92
- .decision__title + p,
93
- .decision__title + ul:not(.list-unstyled),
94
- .decision__title + ol:not(.list-unstyled) {
95
- margin-block-start: 8px;
96
- margin-block-start: var(--size-8);
74
+ .decision:not(.np-option):focus-visible,
75
+ .decision:not(.np-option):has(:focus-visible) {
76
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
77
+ outline-offset: 0;
78
+ outline-offset: var(--ring-outline-offset);
79
+ --ring-outline-offset: 0;
97
80
  }
98
81
  .decision__content {
99
82
  word-wrap: break-word;
package/dist/css/button-groups.css CHANGED
@@ -1,4 +1,30 @@
1
- .btn-group,
1
+ .btn-group .secondary {
2
+ word-wrap: break-word;
3
+ }
4
+ @supports (hyphenate-limit-chars: 1) {
5
+ .btn-group .secondary {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
7
+ }
8
+ @media (min-width: 840px) {
9
+ .btn-group .secondary {
10
+ hyphenate-limit-chars: 8 3;
11
+ }
12
+ }
13
+ @media (min-width: 1160px) {
14
+ .btn-group .secondary {
15
+ hyphenate-limit-chars: 10 4 3;
16
+ }
17
+ }
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .btn-group .secondary {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
+ }
22
+ @media (min-width: 1160px) {
23
+ .btn-group .secondary {
24
+ -webkit-hyphenate-limit-before: 4;
25
+ }
26
+ }
27
+ }.btn-group,
2
28
  .btn-group-vertical {
3
29
  position: relative;
4
30
  display: inline-block;
@@ -334,8 +360,9 @@
334
360
  .btn-group .btn-input + .dropdown-menu > li > a {
335
361
  white-space: normal;
336
362
  }
337
- .btn-group .np-text-body-default,
338
363
  .btn-group .body-2,
364
+ .btn-group .np-text-body-default,
365
+ .btn-group .wds-text-body-default,
339
366
  .btn-group .small {
340
367
  color: #5d7079;
341
368
  color: var(--color-content-secondary);
package/dist/css/buttons.css CHANGED
@@ -3,6 +3,32 @@
3
3
  }
4
4
  .btn {
5
5
  word-wrap: break-word;
6
+ }
7
+ @supports (hyphenate-limit-chars: 1) {
8
+ .btn {
9
+ hyphens: auto;hyphenate-limit-chars: 7 3;
10
+ }
11
+ @media (min-width: 840px) {
12
+ .btn {
13
+ hyphenate-limit-chars: 8 3;
14
+ }
15
+ }
16
+ @media (min-width: 1160px) {
17
+ .btn {
18
+ hyphenate-limit-chars: 10 4 3;
19
+ }
20
+ }
21
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
22
+ .btn {
23
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
24
+ }
25
+ @media (min-width: 1160px) {
26
+ .btn {
27
+ -webkit-hyphenate-limit-before: 4;
28
+ }
29
+ }
30
+ }.btn {
31
+ word-wrap: break-word;
6
32
  display: inline-block;
7
33
  margin-block-end: 0;
8
34
  text-align: center;
package/dist/css/decision.css CHANGED
@@ -1,61 +1,44 @@
1
- .decision {
2
- cursor: pointer;
3
- margin-block-end: 0 !important;
4
- border: 0;
5
- align-items: center;
6
- transition: background-color ease 350ms;
7
- background-color: transparent;
8
- display: block;
9
- }
10
- .decision:not(.np-option):focus-visible,
11
- .decision:not(.np-option):has(:focus-visible) {
12
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
13
- outline-offset: 0;
14
- outline-offset: var(--ring-outline-offset);
15
- --ring-outline-offset: 0;
16
- }
17
- .decision__title {
18
- margin: 0;
19
- color: #37517e;
20
- color: var(--color-content-primary);
21
- line-height: 1.2;
22
- line-height: var(--line-height-title);
23
- letter-spacing: 0;
1
+ .decision__content {
24
2
  word-wrap: break-word;
25
3
  }
26
4
  @supports (hyphenate-limit-chars: 1) {
27
- .decision__title {
28
- hyphens: auto;
29
- hyphenate-limit-chars: 7 3;
5
+ .decision__content {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
30
7
  }
31
8
  @media (min-width: 840px) {
32
- .decision__title {
9
+ .decision__content {
33
10
  hyphenate-limit-chars: 8 3;
34
11
  }
35
12
  }
36
13
  @media (min-width: 1160px) {
37
- .decision__title {
14
+ .decision__content {
38
15
  hyphenate-limit-chars: 10 4 3;
39
16
  }
40
17
  }
41
- }
42
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
43
- .decision__title {
44
- hyphens: auto;
45
- -webkit-hyphenate-limit-before: 3;
46
- -webkit-hyphenate-limit-after: 3;
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .decision__content {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
47
21
  }
48
22
  @media (min-width: 1160px) {
49
- .decision__title {
23
+ .decision__content {
50
24
  -webkit-hyphenate-limit-before: 4;
51
25
  }
52
26
  }
27
+ }.decision {
28
+ cursor: pointer;
29
+ margin-block-end: 0 !important;
30
+ border: 0;
31
+ align-items: center;
32
+ transition: background-color ease 350ms;
33
+ background-color: transparent;
34
+ display: block;
53
35
  }
54
- .decision__title + p,
55
- .decision__title + ul:not(.list-unstyled),
56
- .decision__title + ol:not(.list-unstyled) {
57
- margin-block-start: 8px;
58
- margin-block-start: var(--size-8);
36
+ .decision:not(.np-option):focus-visible,
37
+ .decision:not(.np-option):has(:focus-visible) {
38
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
39
+ outline-offset: 0;
40
+ outline-offset: var(--ring-outline-offset);
41
+ --ring-outline-offset: 0;
59
42
  }
60
43
  .decision__content {
61
44
  word-wrap: break-word;
package/dist/css/dropdowns.css CHANGED
@@ -1,4 +1,36 @@
1
- .dropup,
1
+ .dropdown-menu,
2
+ .dropdown-menu > li > a {
3
+ word-wrap: break-word;
4
+ }
5
+ @supports (hyphenate-limit-chars: 1) {
6
+ .dropdown-menu,
7
+ .dropdown-menu > li > a {
8
+ hyphens: auto;hyphenate-limit-chars: 7 3;
9
+ }
10
+ @media (min-width: 840px) {
11
+ .dropdown-menu,
12
+ .dropdown-menu > li > a {
13
+ hyphenate-limit-chars: 8 3;
14
+ }
15
+ }
16
+ @media (min-width: 1160px) {
17
+ .dropdown-menu,
18
+ .dropdown-menu > li > a {
19
+ hyphenate-limit-chars: 10 4 3;
20
+ }
21
+ }
22
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
23
+ .dropdown-menu,
24
+ .dropdown-menu > li > a {
25
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
26
+ }
27
+ @media (min-width: 1160px) {
28
+ .dropdown-menu,
29
+ .dropdown-menu > li > a {
30
+ -webkit-hyphenate-limit-before: 4;
31
+ }
32
+ }
33
+ }.dropup,
2
34
  .dropdown {
3
35
  position: relative;
4
36
  }
@@ -187,10 +219,12 @@
187
219
  .dropdown-menu > .selected > a strong {
188
220
  color: inherit;
189
221
  }
190
- .dropdown-menu > .active > a .np-text-body-default,
191
- .dropdown-menu > .selected > a .np-text-body-default,
192
222
  .dropdown-menu > .active > a .small,
193
223
  .dropdown-menu > .selected > a .small,
224
+ .dropdown-menu > .active > a .np-text-body-default,
225
+ .dropdown-menu > .selected > a .np-text-body-default,
226
+ .dropdown-menu > .active > a .wds-text-body-default,
227
+ .dropdown-menu > .selected > a .wds-text-body-default,
194
228
  .dropdown-menu > .active > a .secondary,
195
229
  .dropdown-menu > .selected > a .secondary {
196
230
  color: #c9cbce;
@@ -292,47 +326,6 @@
292
326
  color: #5d7079;
293
327
  color: var(--color-content-secondary);
294
328
  white-space: nowrap;
295
- margin: 0;
296
- color: #37517e;
297
- color: var(--color-content-primary);
298
- line-height: 1.2;
299
- line-height: var(--line-height-title);
300
- letter-spacing: 0;
301
- word-wrap: break-word;
302
- }
303
- @supports (hyphenate-limit-chars: 1) {
304
- .dropdown-header {
305
- hyphens: auto;
306
- hyphenate-limit-chars: 7 3;
307
- }
308
- @media (min-width: 840px) {
309
- .dropdown-header {
310
- hyphenate-limit-chars: 8 3;
311
- }
312
- }
313
- @media (min-width: 1160px) {
314
- .dropdown-header {
315
- hyphenate-limit-chars: 10 4 3;
316
- }
317
- }
318
- }
319
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
320
- .dropdown-header {
321
- hyphens: auto;
322
- -webkit-hyphenate-limit-before: 3;
323
- -webkit-hyphenate-limit-after: 3;
324
- }
325
- @media (min-width: 1160px) {
326
- .dropdown-header {
327
- -webkit-hyphenate-limit-before: 4;
328
- }
329
- }
330
- }
331
- .dropdown-header + p,
332
- .dropdown-header + ul:not(.list-unstyled),
333
- .dropdown-header + ol:not(.list-unstyled) {
334
- margin-block-start: 8px;
335
- margin-block-start: var(--size-8);
336
329
  }
337
330
  .dropdown-backdrop {
338
331
  position: fixed;
package/dist/css/droppable.css CHANGED
@@ -1,4 +1,30 @@
1
1
  .droppable {
2
+ word-wrap: break-word;
3
+ }
4
+ @supports (hyphenate-limit-chars: 1) {
5
+ .droppable {
6
+ hyphens: auto;hyphenate-limit-chars: 7 3;
7
+ }
8
+ @media (min-width: 840px) {
9
+ .droppable {
10
+ hyphenate-limit-chars: 8 3;
11
+ }
12
+ }
13
+ @media (min-width: 1160px) {
14
+ .droppable {
15
+ hyphenate-limit-chars: 10 4 3;
16
+ }
17
+ }
18
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
19
+ .droppable {
20
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
21
+ }
22
+ @media (min-width: 1160px) {
23
+ .droppable {
24
+ -webkit-hyphenate-limit-before: 4;
25
+ }
26
+ }
27
+ }.droppable {
2
28
  position: relative;
3
29
  word-wrap: break-word;
4
30
  text-align: center;
@@ -161,7 +187,7 @@
161
187
  z-index: 1;
162
188
  }
163
189
  .np-theme-personal .droppable-dropping-card {
164
- background-color: #E1E4DF;
190
+ background-color: #e1e4df;
165
191
  color: #37517e;
166
192
  color: var(--color-content-primary);
167
193
  }
@@ -169,7 +195,7 @@
169
195
  background-color: #404440;
170
196
  }
171
197
  .np-theme-personal--forest-green .droppable-dropping-card {
172
- background-color: #455C35;
198
+ background-color: #455c35;
173
199
  }
174
200
  .droppable-dropping .droppable-dropping-card {
175
201
  display: flex;
package/dist/css/footer.css CHANGED
@@ -1,4 +1,42 @@
1
- .footer {
1
+ .footer,
2
+ .footer .footer-link,
3
+ .footer .link-icon {
4
+ word-wrap: break-word;
5
+ }
6
+ @supports (hyphenate-limit-chars: 1) {
7
+ .footer,
8
+ .footer .footer-link,
9
+ .footer .link-icon {
10
+ hyphens: auto;hyphenate-limit-chars: 7 3;
11
+ }
12
+ @media (min-width: 840px) {
13
+ .footer,
14
+ .footer .footer-link,
15
+ .footer .link-icon {
16
+ hyphenate-limit-chars: 8 3;
17
+ }
18
+ }
19
+ @media (min-width: 1160px) {
20
+ .footer,
21
+ .footer .footer-link,
22
+ .footer .link-icon {
23
+ hyphenate-limit-chars: 10 4 3;
24
+ }
25
+ }
26
+ }@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
27
+ .footer,
28
+ .footer .footer-link,
29
+ .footer .link-icon {
30
+ hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
31
+ }
32
+ @media (min-width: 1160px) {
33
+ .footer,
34
+ .footer .footer-link,
35
+ .footer .link-icon {
36
+ -webkit-hyphenate-limit-before: 4;
37
+ }
38
+ }
39
+ }.footer {
2
40
  background-color: rgba(134,167,189,0.10196);
3
41
  background-color: var(--color-background-neutral);
4
42
  word-wrap: break-word;
@@ -171,7 +209,8 @@
171
209
  }
172
210
  .footer.footer-inverse .tiny,
173
211
  .footer.footer-inverse .body-3,
174
- .footer.footer-inverse .np-text-body-default {
212
+ .footer.footer-inverse .np-text-body-default,
213
+ .footer.footer-inverse .wds-text-body-default {
175
214
  color: #ffffff;
176
215
  }
177
216
  @media (max-width: 599.98px) {