@transferwise/neptune-css 0.0.0-experimental-4c688cd → 0.0.0-experimental-5405b30

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 (48) hide show
  1. package/dist/css/accordion.css +1 -235
  2. package/dist/css/alerts.css +1 -761
  3. package/dist/css/background.css +1 -20
  4. package/dist/css/badge.css +1 -90
  5. package/dist/css/border-radius.css +1 -3
  6. package/dist/css/breadcrumbs.css +1 -20
  7. package/dist/css/button-groups.css +1 -412
  8. package/dist/css/buttons.css +1 -1382
  9. package/dist/css/chevron.css +1 -35
  10. package/dist/css/circles.css +1 -284
  11. package/dist/css/close.css +1 -47
  12. package/dist/css/column-layout.css +1 -164
  13. package/dist/css/currency-flags.css +1 -45
  14. package/dist/css/decision.css +1 -95
  15. package/dist/css/dropdowns.css +1 -413
  16. package/dist/css/droppable.css +1 -207
  17. package/dist/css/flex.css +1 -598
  18. package/dist/css/footer.css +1 -118
  19. package/dist/css/grid.css +1 -2369
  20. package/dist/css/input-groups.css +1 -2706
  21. package/dist/css/link-callout.css +1 -20
  22. package/dist/css/list-group.css +1 -267
  23. package/dist/css/loaders.css +1 -76
  24. package/dist/css/media.css +1 -74
  25. package/dist/css/modals.css +1 -185
  26. package/dist/css/navbar-base.css +1 -1385
  27. package/dist/css/navbar.css +1 -2397
  28. package/dist/css/navs.css +1 -296
  29. package/dist/css/neptune-addons.css +1 -1829
  30. package/dist/css/neptune-core.css +2 -2037
  31. package/dist/css/neptune-social-media.css +1 -144
  32. package/dist/css/neptune.css +2 -24374
  33. package/dist/css/panels.css +1 -528
  34. package/dist/css/popovers.css +1 -538
  35. package/dist/css/process.css +1 -483
  36. package/dist/css/progress-bars.css +1 -76
  37. package/dist/css/ring.css +1 -59
  38. package/dist/css/select.css +1 -99
  39. package/dist/css/sequences.css +1 -855
  40. package/dist/css/table.css +1 -446
  41. package/dist/css/tick.css +1 -32
  42. package/dist/css/tooltip.css +1 -142
  43. package/dist/css/utilities.css +1 -145
  44. package/dist/css/wells.css +1 -74
  45. package/package.json +2 -3
  46. package/src/less/buttons.less +6 -2
  47. package/src/less/core/_scaffolding.less +1 -3
  48. package/scripts/analyze-css-selectors.js +0 -39
@@ -1,35 +1 @@
1
- .tw-chevron {
2
- display: inline-block;
3
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
4
- }
5
- .tw-chevron.top {
6
- transform: rotate(0deg);
7
- }
8
- .tw-chevron.right {
9
- transform: rotate(90deg);
10
- }
11
- [dir="rtl"] .tw-chevron.right {
12
- transform: rotate(-90deg);
13
- }
14
- .tw-chevron.right-sigle-direction {
15
- transform: rotate(90deg) !important;
16
- }
17
- .tw-chevron.bottom {
18
- transform: rotate(180deg);
19
- }
20
- .tw-chevron.left {
21
- transform: rotate(270deg);
22
- }
23
- [dir="rtl"] .tw-chevron.left {
24
- transform: rotate(-270deg);
25
- }
26
- .tw-chevron.left-single-direction {
27
- transform: rotate(270deg) !important;
28
- }
29
- .chevron-color {
30
- color: #0097c7;
31
- color: var(--color-content-accent);
32
- }
33
- .np-theme-personal .chevron-color {
34
- color: var(--color-interactive-primary);
35
- }
1
+ .tw-chevron{display:inline-block;transition:transform .35s cubic-bezier(0,.94,.62,1)}.tw-chevron.top{transform:rotate(0deg)}.tw-chevron.right{transform:rotate(90deg)}[dir=rtl] .tw-chevron.right{transform:rotate(-90deg)}.tw-chevron.right-sigle-direction{transform:rotate(90deg)!important}.tw-chevron.bottom{transform:rotate(180deg)}.tw-chevron.left{transform:rotate(270deg)}[dir=rtl] .tw-chevron.left{transform:rotate(-270deg)}.tw-chevron.left-single-direction{transform:rotate(270deg)!important}.chevron-color{color:#0097c7;color:var(--color-content-accent)}.np-theme-personal .chevron-color{color:var(--color-interactive-primary)}
@@ -1,284 +1 @@
1
- .circle {
2
- display: flex;
3
- align-items: center;
4
- justify-content: center;
5
- color: #37517e;
6
- color: var(--color-content-primary);
7
- text-align: center;
8
- -webkit-text-decoration: none;
9
- text-decoration: none;
10
- text-transform: uppercase;
11
- border: 1px solid transparent;
12
- background-color: #fff;
13
- border-radius: 50%;
14
- background-repeat: no-repeat;
15
- background-size: cover;
16
- background-position: center;
17
- overflow: hidden;
18
- margin-left: auto;
19
- margin-right: auto;
20
- transition: background-color ease 0.15s, border-color ease 0.15s, color ease 0.15s;
21
- }
22
- .circle.active {
23
- border-color: #0081ba;
24
- border-color: var(--color-interactive-accent-active);
25
- background-color: #0081ba;
26
- background-color: var(--color-interactive-accent-active);
27
- }
28
- .circle img {
29
- width: 100%;
30
- border-radius: 50%;
31
- vertical-align: baseline;
32
- vertical-align: initial;
33
- }
34
- img.circle {
35
- background-color: transparent;
36
- border-radius: 50%;
37
- }
38
- .circle[style] {
39
- border: 0;
40
- border-radius: 50% !important;
41
- }
42
- a.circle[style]:hover {
43
- border: 1px solid #00a2dd;
44
- border: 1px solid var(--color-interactive-accent);
45
- }
46
- .navbar-nav > li > a .circle {
47
- width: 40px;
48
- height: 40px;
49
- line-height: 40px;
50
- }
51
- .navbar-nav > li > a .circle .icon {
52
- line-height: 40px;
53
- }
54
- .circle,
55
- .circle-sm {
56
- font-size: 16px;
57
- width: 48px;
58
- height: 48px;
59
- line-height: 48px;
60
- }
61
- .circle .icon,
62
- .circle-sm .icon {
63
- font-size: 24px;
64
- line-height: 46px;
65
- }
66
- .circle-xs {
67
- font-size: 10px;
68
- width: 24px;
69
- height: 24px;
70
- line-height: 24px;
71
- }
72
- .circle-xs .icon {
73
- font-size: 14px;
74
- line-height: 22px;
75
- }
76
- .circle-md {
77
- font-size: 24px;
78
- width: 72px;
79
- height: 72px;
80
- line-height: 72px;
81
- }
82
- .circle-md .icon {
83
- font-size: 32px;
84
- line-height: 70px;
85
- }
86
- .circle-lg {
87
- font-size: 32px;
88
- width: 96px;
89
- height: 96px;
90
- line-height: 96px;
91
- }
92
- .circle-lg .icon {
93
- font-size: 40px;
94
- line-height: 94px;
95
- }
96
- a.circle,
97
- a.circle .icon {
98
- -webkit-text-decoration: none;
99
- text-decoration: none;
100
- }
101
- a:hover .circle,
102
- a.circle:hover {
103
- border-color: #00a2dd;
104
- border-color: var(--color-interactive-accent);
105
- color: #0097c7;
106
- color: var(--color-content-accent);
107
- -webkit-text-decoration: none;
108
- text-decoration: none;
109
- }
110
- a:hover .circle.active,
111
- a.circle.active:hover {
112
- -webkit-text-decoration: none;
113
- text-decoration: none;
114
- color: #fff;
115
- }
116
- /* TODO this could be tidier, ideally change the general link behaviour */
117
- .dropdown-menu li a:hover .circle {
118
- background-color: #ffffff;
119
- background-color: var(--color-background-screen);
120
- border-color: #fff;
121
- color: #37517e;
122
- color: var(--color-content-primary);
123
- }
124
- .dropdown-menu .disabled a:hover .circle {
125
- background-color: rgba(134,167,189,0.10196);
126
- background-color: var(--color-background-neutral);
127
- border-color: transparent;
128
- }
129
- .circle-inverse {
130
- background-color: rgba(134,167,189,0.10196);
131
- background-color: var(--color-background-neutral);
132
- }
133
- .circle-responsive {
134
- background-color: transparent;
135
- border: 0;
136
- border-radius: 0;
137
- width: 24px;
138
- width: var(--size-24);
139
- height: 24px;
140
- height: var(--size-24);
141
- line-height: 24px;
142
- line-height: var(--size-24);
143
- font-size: 16px;
144
- overflow: visible;
145
- }
146
- .circle-responsive .icon {
147
- font-size: 24px;
148
- line-height: 24px;
149
- }
150
- .circle-responsive.circle-lg {
151
- border-radius: 50%;
152
- background-color: #fff;
153
- font-size: 16px;
154
- width: 48px;
155
- height: 48px;
156
- line-height: 48px;
157
- }
158
- .circle-responsive.circle-lg.circle-inverse {
159
- background-color: rgba(134,167,189,0.10196);
160
- background-color: var(--color-background-neutral);
161
- }
162
- .circle-responsive.circle-lg .icon {
163
- font-size: 24px;
164
- line-height: 46px;
165
- }
166
- @media (min-width: 576px) {
167
- .circle-responsive {
168
- border-radius: 50%;
169
- background-color: #fff;
170
- }
171
- .circle-responsive.circle,
172
- .circle-responsive.circle-sm,
173
- .circle-responsive.circle-md {
174
- font-size: 16px;
175
- width: 48px;
176
- height: 48px;
177
- line-height: 48px;
178
- }
179
- .circle-responsive.circle .icon,
180
- .circle-responsive.circle-sm .icon,
181
- .circle-responsive.circle-md .icon {
182
- font-size: 24px;
183
- line-height: 46px;
184
- }
185
- .circle-responsive.circle-lg {
186
- font-size: 24px;
187
- width: 72px;
188
- height: 72px;
189
- line-height: 72px;
190
- }
191
- .circle-responsive.circle-lg .icon {
192
- font-size: 32px;
193
- line-height: 70px;
194
- }
195
- .circle-responsive.circle-inverse {
196
- background-color: rgba(134,167,189,0.10196);
197
- background-color: var(--color-background-neutral);
198
- }
199
- }
200
- @media (--screen-md-min) {
201
- .circle-responsive.circle-md {
202
- font-size: 24px;
203
- width: 72px;
204
- height: 72px;
205
- line-height: 72px;
206
- }
207
- .circle-responsive.circle-md .icon {
208
- font-size: 32px;
209
- line-height: 70px;
210
- }
211
- .circle-responsive.circle-lg {
212
- font-size: 32px;
213
- width: 96px;
214
- height: 96px;
215
- line-height: 96px;
216
- }
217
- .circle-responsive.circle-lg .icon {
218
- font-size: 40px;
219
- line-height: 94px;
220
- }
221
- }
222
- .dropdown-menu li > .circle:first-child,
223
- .dropdown-menu li > a > .circle:first-child {
224
- margin-right: 8px;
225
- margin-right: var(--size-8);
226
- }
227
- [dir="rtl"] .dropdown-menu li > .circle:first-child,
228
- [dir="rtl"] .dropdown-menu li > a > .circle:first-child {
229
- margin-left: 8px;
230
- margin-left: var(--size-8);
231
- margin-right: 0;
232
- margin-right: initial;
233
- }
234
- .dropdown-menu li > .circle-sm:first-child,
235
- .dropdown-menu li > a > .circle-sm:first-child {
236
- margin-right: 12px;
237
- margin-right: var(--size-12);
238
- }
239
- [dir="rtl"] .dropdown-menu li > .circle-sm:first-child,
240
- [dir="rtl"] .dropdown-menu li > a > .circle-sm:first-child {
241
- margin-left: 12px;
242
- margin-left: var(--size-12);
243
- margin-right: 0;
244
- margin-right: initial;
245
- }
246
- .btn .circle:first-child {
247
- margin-right: 8px;
248
- margin-right: var(--size-8);
249
- }
250
- [dir="rtl"] .btn .circle:first-child {
251
- margin-left: 8px;
252
- margin-left: var(--size-8);
253
- margin-right: 0;
254
- margin-right: initial;
255
- }
256
- .btn .circle-sm:first-child {
257
- margin-right: 12px;
258
- margin-right: var(--size-12);
259
- }
260
- [dir="rtl"] .btn .circle-sm:first-child {
261
- margin-left: 12px;
262
- margin-left: var(--size-12);
263
- margin-right: 0;
264
- margin-right: initial;
265
- }
266
- .btn .circle .tw-icon,
267
- .dropdown-menu li .circle .tw-icon {
268
- float: none;
269
- margin-top: 0;
270
- margin-left: 0;
271
- margin-right: 0;
272
- }
273
- [dir="rtl"] .btn .circle .tw-icon,
274
- [dir="rtl"] .dropdown-menu li .circle .tw-icon {
275
- margin-right: 0;
276
- margin-left: 0;
277
- margin-left: initial;
278
- }
279
- [dir="rtl"] .btn .circle .tw-icon,
280
- [dir="rtl"] .dropdown-menu li .circle .tw-icon {
281
- margin-left: 0;
282
- margin-right: 0;
283
- margin-right: initial;
284
- }
1
+ .circle{align-items:center;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid transparent;border-radius:50%;color:#37517e;color:var(--color-content-primary);display:flex;justify-content:center;margin-left:auto;margin-right:auto;overflow:hidden;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.circle.active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active)}.circle img{border-radius:50%;vertical-align:initial;width:100%}img.circle{background-color:transparent;border-radius:50%}.circle[style]{border:0;border-radius:50%!important}a.circle[style]:hover{border:1px solid #00a2dd;border:1px solid var(--color-interactive-accent)}.navbar-nav>li>a .circle{height:40px;line-height:40px;width:40px}.navbar-nav>li>a .circle .icon{line-height:40px}.circle,.circle-sm{font-size:16px;height:48px;line-height:48px;width:48px}.circle .icon,.circle-sm .icon{font-size:24px;line-height:46px}.circle-xs{font-size:10px;height:24px;line-height:24px;width:24px}.circle-xs .icon{font-size:14px;line-height:22px}.circle-md{font-size:24px;height:72px;line-height:72px;width:72px}.circle-md .icon{font-size:32px;line-height:70px}.circle-lg{font-size:32px;height:96px;line-height:96px;width:96px}.circle-lg .icon{font-size:40px;line-height:94px}a.circle,a.circle .icon{text-decoration:none}a.circle:hover,a:hover .circle{border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#0097c7;color:var(--color-content-accent);text-decoration:none}a.circle.active:hover,a:hover .circle.active{color:#fff;text-decoration:none}.dropdown-menu li a:hover .circle{background-color:#fff;background-color:var(--color-background-screen);border-color:#fff;color:#37517e;color:var(--color-content-primary)}.dropdown-menu .disabled a:hover .circle{border-color:transparent}.circle-inverse,.dropdown-menu .disabled a:hover .circle{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.circle-responsive{background-color:transparent;border:0;border-radius:0;font-size:16px;height:24px;height:var(--size-24);line-height:24px;line-height:var(--size-24);overflow:visible;width:24px;width:var(--size-24)}.circle-responsive .icon{font-size:24px;line-height:24px}.circle-responsive.circle-lg{background-color:#fff;border-radius:50%;font-size:16px;height:48px;line-height:48px;width:48px}.circle-responsive.circle-lg.circle-inverse{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.circle-responsive.circle-lg .icon{font-size:24px;line-height:46px}@media (min-width:576px){.circle-responsive{background-color:#fff;border-radius:50%}.circle-responsive.circle,.circle-responsive.circle-md,.circle-responsive.circle-sm{font-size:16px;height:48px;line-height:48px;width:48px}.circle-responsive.circle .icon,.circle-responsive.circle-md .icon,.circle-responsive.circle-sm .icon{font-size:24px;line-height:46px}.circle-responsive.circle-lg{font-size:24px;height:72px;line-height:72px;width:72px}.circle-responsive.circle-lg .icon{font-size:32px;line-height:70px}.circle-responsive.circle-inverse{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}}@media (--screen-md-min ){.circle-responsive.circle-md{font-size:24px;height:72px;line-height:72px;width:72px}.circle-responsive.circle-md .icon{font-size:32px;line-height:70px}.circle-responsive.circle-lg{font-size:32px;height:96px;line-height:96px;width:96px}.circle-responsive.circle-lg .icon{font-size:40px;line-height:94px}}.dropdown-menu li>.circle:first-child,.dropdown-menu li>a>.circle:first-child{margin-right:8px;margin-right:var(--size-8)}[dir=rtl] .dropdown-menu li>.circle:first-child,[dir=rtl] .dropdown-menu li>a>.circle:first-child{margin-left:8px;margin-left:var(--size-8);margin-right:0}.dropdown-menu li>.circle-sm:first-child,.dropdown-menu li>a>.circle-sm:first-child{margin-right:12px;margin-right:var(--size-12)}[dir=rtl] .dropdown-menu li>.circle-sm:first-child,[dir=rtl] .dropdown-menu li>a>.circle-sm:first-child{margin-left:12px;margin-left:var(--size-12);margin-right:0}.btn .circle:first-child{margin-right:8px;margin-right:var(--size-8)}[dir=rtl] .btn .circle:first-child{margin-left:8px;margin-left:var(--size-8);margin-right:0}.btn .circle-sm:first-child{margin-right:12px;margin-right:var(--size-12)}[dir=rtl] .btn .circle-sm:first-child{margin-left:12px;margin-left:var(--size-12);margin-right:0}.btn .circle .tw-icon,.dropdown-menu li .circle .tw-icon{float:none;margin-left:0;margin-right:0;margin-top:0}[dir=rtl] .btn .circle .tw-icon,[dir=rtl] .dropdown-menu li .circle .tw-icon{margin-left:0;margin-right:0}
@@ -1,47 +1 @@
1
- .close {
2
- float: right;
3
- color: #0097c7;
4
- color: var(--color-content-accent);
5
- -webkit-text-decoration: none;
6
- text-decoration: none;
7
- }
8
- [dir="rtl"] .close {
9
- float: left;
10
- }
11
- .np-theme-personal .close {
12
- color: var(--color-interactive-primary);
13
- }
14
- .close:hover {
15
- color: #0084b3;
16
- color: var(--color-content-accent-hover);
17
- -webkit-text-decoration: none;
18
- text-decoration: none;
19
- cursor: pointer;
20
- }
21
- .np-theme-personal .close:hover {
22
- color: var(--color-interactive-primary-hover);
23
- }
24
- .close:focus {
25
- outline: none;
26
- }
27
- .close:focus-visible {
28
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
29
- outline-offset: var(--ring-outline-offset);
30
- }
31
- .close:active {
32
- color: #0077a5;
33
- color: var(--color-content-accent-active);
34
- }
35
- button.close {
36
- padding: 0;
37
- cursor: pointer;
38
- background: transparent;
39
- border: 0;
40
- -webkit-appearance: none;
41
- -moz-appearance: none;
42
- appearance: none;
43
- }
44
- .np-theme-personal button.close:hover {
45
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
46
- background: initial;
47
- }
1
+ .close{color:#0097c7;color:var(--color-content-accent);float:right;text-decoration:none}[dir=rtl] .close{float:left}.np-theme-personal .close{color:var(--color-interactive-primary)}.close:hover{color:#0084b3;color:var(--color-content-accent-hover);cursor:pointer;text-decoration:none}.np-theme-personal .close:hover{color:var(--color-interactive-primary-hover)}.close:focus{outline:none}.close:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.close:active{color:#0077a5;color:var(--color-content-accent-active)}button.close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.np-theme-personal button.close:hover{background:initial}
@@ -1,164 +1 @@
1
- .column-layout {
2
- width: 100%;
3
- }
4
- .column-layout-left,
5
- .column-layout-right {
6
- position: fixed;
7
- width: 264px;
8
- vertical-align: top;
9
- height: 100%;
10
- z-index: 3;
11
- transition: transform ease 0.5s;
12
- top: 0;
13
- max-height: 100vh;
14
- max-height: 100dvh;
15
- overflow-y: auto;
16
- }
17
- .column-layout-left {
18
- transform: translateX(-264px);
19
- }
20
- .column-layout-right {
21
- right: 0;
22
- transform: translateX(264px);
23
- }
24
- [dir="rtl"] .column-layout-right {
25
- left: 0;
26
- right: auto;
27
- right: initial;
28
- }
29
- .column-layout-left.open,
30
- .column-layout-right.open {
31
- transform: translateX(0);
32
- }
33
- .column-layout-main {
34
- width: 100%;
35
- }
36
- .column-layout-top {
37
- position: fixed;
38
- top: 0;
39
- width: 264px;
40
- max-height: 100vh;
41
- max-height: 100dvh;
42
- overflow-y: auto;
43
- backface-visibility: hidden;
44
- }
45
- .column-layout-bottom {
46
- position: fixed;
47
- bottom: 0;
48
- width: 264px;
49
- padding: 24px;
50
- padding: var(--size-24);
51
- }
52
- @media (min-width: 992px) {
53
- .column-layout {
54
- display: table;
55
- }
56
- .column-layout-left,
57
- .column-layout-right {
58
- position: relative;
59
- display: table-cell;
60
- transform: none;
61
- }
62
- .column-layout-main {
63
- display: table-cell;
64
- vertical-align: top;
65
- width: auto;
66
- }
67
- }
68
- .column-layout-cover.in {
69
- width: 100%;
70
- height: 100%;
71
- opacity: 0.9;
72
- }
73
- .column-layout-cover .close {
74
- position: absolute;
75
- left: 284px;
76
- top: -1000px;
77
- opacity: 0;
78
- transition: opacity 0.35s ease;
79
- transition-delay: 0.35s;
80
- -webkit-text-decoration: none;
81
- text-decoration: none;
82
- }
83
- [dir="rtl"] .column-layout-cover .close {
84
- right: 284px;
85
- left: auto;
86
- left: initial;
87
- }
88
- .column-layout-cover.in .close {
89
- opacity: 1;
90
- top: 20px;
91
- }
92
- @media (min-width: 992px) {
93
- .column-layout-cover {
94
- display: none;
95
- }
96
- }
97
- @media (max-width: 991px) {
98
- .column-layout-open {
99
- overflow: hidden;
100
- }
101
- .column-layout-cover {
102
- position: fixed;
103
- display: block;
104
- top: 0;
105
- left: 0;
106
- width: 0;
107
- height: 0;
108
- opacity: 0;
109
- transition: opacity 0.35s ease;
110
- background-color: #37517e;
111
- cursor: pointer;
112
- z-index: 1055;
113
- }
114
- [dir="rtl"] .column-layout-cover {
115
- right: 0;
116
- left: auto;
117
- left: initial;
118
- }
119
- .column-layout-left,
120
- .column-layout-right {
121
- z-index: 1060;
122
- }
123
- }
124
- .column-layout-main .container {
125
- max-width: 1176px;
126
- margin-left: 0;
127
- }
128
- [dir="rtl"] .column-layout-main .container {
129
- margin-right: 0;
130
- margin-left: 0;
131
- margin-left: initial;
132
- }
133
- .column-layout-brand {
134
- padding: 4px 24px;
135
- padding: var(--size-4) 24px;
136
- }
137
- @media (min-width: 992px) {
138
- .column-layout-brand {
139
- padding-left: 32px;
140
- padding-right: 32px;
141
- }
142
- }
143
- body > .column-layout {
144
- min-height: 100vh;
145
- min-height: 100dvh;
146
- height: 100vh;
147
- height: 100dvh;
148
- }
149
- .column-layout-left .column-layout-top {
150
- background-position: 0 40px;
151
- background-position: 0 var(--size-40);
152
- background-repeat: no-repeat;
153
- background-size: 264px auto;
154
- height: 100vh;
155
- height: 100dvh;
156
- }
157
- @media (min-height: 596px) {
158
- .column-layout-left .column-layout-top {
159
- background-position: left bottom;
160
- }
161
- [dir="rtl"] .column-layout-left .column-layout-top {
162
- background-position: right bottom;
163
- }
164
- }
1
+ .column-layout{width:100%}.column-layout-left,.column-layout-right{height:100%;max-height:100vh;max-height:100dvh;overflow-y:auto;position:fixed;top:0;transition:transform .5s ease;vertical-align:top;width:264px;z-index:3}.column-layout-left{transform:translateX(-264px)}.column-layout-right{right:0;transform:translateX(264px)}[dir=rtl] .column-layout-right{left:0;right:auto}.column-layout-left.open,.column-layout-right.open{transform:translateX(0)}.column-layout-main{width:100%}.column-layout-top{backface-visibility:hidden;max-height:100vh;max-height:100dvh;overflow-y:auto;position:fixed;top:0;width:264px}.column-layout-bottom{bottom:0;padding:24px;padding:var(--size-24);position:fixed;width:264px}@media (min-width:992px){.column-layout{display:table}.column-layout-left,.column-layout-right{display:table-cell;position:relative;transform:none}.column-layout-main{display:table-cell;vertical-align:top;width:auto}}.column-layout-cover.in{height:100%;opacity:.9;width:100%}.column-layout-cover .close{left:284px;opacity:0;position:absolute;text-decoration:none;top:-1000px;transition:opacity .35s ease;transition-delay:.35s}[dir=rtl] .column-layout-cover .close{left:auto;right:284px}.column-layout-cover.in .close{opacity:1;top:20px}@media (min-width:992px){.column-layout-cover{display:none}}@media (max-width:991px){.column-layout-open{overflow:hidden}.column-layout-cover{background-color:#37517e;cursor:pointer;display:block;height:0;left:0;opacity:0;position:fixed;top:0;transition:opacity .35s ease;width:0;z-index:1055}[dir=rtl] .column-layout-cover{left:auto;right:0}.column-layout-left,.column-layout-right{z-index:1060}}.column-layout-main .container{margin-left:0;max-width:1176px}[dir=rtl] .column-layout-main .container{margin-left:0;margin-right:0}.column-layout-brand{padding:4px 24px;padding:var(--size-4) 24px}@media (min-width:992px){.column-layout-brand{padding-left:32px;padding-right:32px}}body>.column-layout{height:100vh;height:100dvh;min-height:100vh;min-height:100dvh}.column-layout-left .column-layout-top{background-position:0 40px;background-position:0 var(--size-40);background-repeat:no-repeat;background-size:264px auto;height:100vh;height:100dvh}@media (min-height:596px){.column-layout-left .column-layout-top{background-position:0 100%}[dir=rtl] .column-layout-left .column-layout-top{background-position:100% 100%}}
@@ -1,45 +1 @@
1
- .currency-flag {
2
- box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
3
- }
4
- .np-theme-personal .currency-flag {
5
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10196);
6
- box-shadow: inset 0 0 0 1px var(--color-border-neutral);
7
- border-radius: 50%;
8
- }
9
- .btn .currency-flag,
10
- .dropdown-menu li .currency-flag {
11
- vertical-align: -3px;
12
- line-height: 16px;
13
- }
14
- .btn-sm .currency-flag,
15
- .form-group-sm .btn .currency-flag,
16
- .input-group-sm .btn .currency-flag {
17
- vertical-align: -4px;
18
- }
19
- .btn-lg .currency-flag,
20
- .form-group-lg .btn .currency-flag,
21
- .input-group-lg .btn .currency-flag {
22
- vertical-align: -1px;
23
- }
24
- li > .currency-flag:first-child,
25
- li > a > .currency-flag:first-child {
26
- margin-right: 8px;
27
- margin-right: var(--size-8);
28
- }
29
- [dir="rtl"] li > .currency-flag:first-child,
30
- [dir="rtl"] li > a > .currency-flag:first-child {
31
- margin-left: 8px;
32
- margin-left: var(--size-8);
33
- margin-right: 0;
34
- margin-right: initial;
35
- }
36
- .btn .currency-flag:first-child {
37
- margin-right: 8px;
38
- margin-right: var(--size-8);
39
- }
40
- [dir="rtl"] .btn .currency-flag:first-child {
41
- margin-left: 8px;
42
- margin-left: var(--size-8);
43
- margin-right: 0;
44
- margin-right: initial;
45
- }
1
+ .currency-flag{box-shadow:0 0 1px 0 rgba(0,0,0,.6)}.np-theme-personal .currency-flag{border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a;box-shadow:inset 0 0 0 1px var(--color-border-neutral)}.btn .currency-flag,.dropdown-menu li .currency-flag{line-height:16px;vertical-align:-3px}.btn-sm .currency-flag,.form-group-sm .btn .currency-flag,.input-group-sm .btn .currency-flag{vertical-align:-4px}.btn-lg .currency-flag,.form-group-lg .btn .currency-flag,.input-group-lg .btn .currency-flag{vertical-align:-1px}li>.currency-flag:first-child,li>a>.currency-flag:first-child{margin-right:8px;margin-right:var(--size-8)}[dir=rtl] li>.currency-flag:first-child,[dir=rtl] li>a>.currency-flag:first-child{margin-left:8px;margin-left:var(--size-8);margin-right:0}.btn .currency-flag:first-child{margin-right:8px;margin-right:var(--size-8)}[dir=rtl] .btn .currency-flag:first-child{margin-left:8px;margin-left:var(--size-8);margin-right:0}
@@ -1,95 +1 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.decision {
4
- cursor: pointer;
5
- margin-bottom: 0 !important;
6
- border: 0;
7
- align-items: center;
8
- transition: background-color ease 350ms;
9
- background-color: transparent;
10
- display: block;
11
- }.decision:not(.np-option):focus-visible,
12
- .decision:not(.np-option):has(:focus-visible) {
13
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
14
- outline-offset: 0;
15
- outline-offset: var(--ring-outline-offset);
16
- --ring-outline-offset: 0;
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;
24
- font-size: 1.125rem;
25
- font-size: var(--font-size-18);
26
- font-weight: 600;
27
- font-weight: var(--font-weight-semi-bold);
28
- letter-spacing: -0.014em;
29
- line-height: 135%;
30
- }.decision__title + p,
31
- .decision__title + ul:not(.list-unstyled),
32
- .decision__title + ol:not(.list-unstyled) {
33
- margin-top: 8px;
34
- margin-top: var(--size-8);
35
- }.decision__content {
36
- line-height: 1.5;
37
- line-height: var(--line-height-body);
38
- font-size: 1rem;
39
- font-size: var(--font-size-16);
40
- font-size: 0.875rem;
41
- font-size: var(--font-size-14);
42
- line-height: 155%;
43
- letter-spacing: -0.006em;
44
- font-weight: 400;
45
- font-weight: var(--font-weight-regular);
46
- margin-top: 4px;
47
- margin-top: var(--size-4);
48
- }.decision + .decision {
49
- margin-top: -1px;
50
- }.decision dd:last-child {
51
- margin-bottom: 0;
52
- }.decision dl {
53
- margin-top: 8px;
54
- margin-top: var(--size-8);
55
- }.decision .media,
56
- .decision.media {
57
- width: 100%;
58
- padding: 16px 12px;
59
- padding: var(--size-16) var(--size-12);
60
- }.np-theme-personal .decision .media,
61
- .np-theme-personal .decision.media {
62
- padding: 16px;
63
- padding: var(--size-16);
64
- }.decision .media .media-left,
65
- .decision.media .media-left {
66
- display: none;
67
- }.decision .media .media-body,
68
- .decision.media .media-body {
69
- color: #5d7079;
70
- color: var(--color-content-secondary);
71
- }@media (min-width: 480px) {
72
- .decision .media .media-left,
73
- .decision.media .media-left {
74
- display: block;
75
- }
76
- }.decision:not(.disabled):hover {
77
- background-color: rgba(134,167,189,0.07059);
78
- }.decision:not(.disabled):hover .circle-inverse {
79
- background-color: #ffffff;
80
- background-color: var(--color-background-screen);
81
- }.np-theme-personal .decision:not(.disabled):hover .circle-inverse {
82
- background-color: rgba(134,167,189,0.10196);
83
- background-color: var(--color-background-neutral);
84
- }.decision:not(.disabled):hover .tw-checkbox-button,
85
- .decision:not(.disabled):hover .tw-radio-button {
86
- border-color: #00a2dd;
87
- border-color: var(--color-interactive-accent);
88
- }.np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
89
- .np-theme-personal .decision:not(.disabled):hover .tw-radio-button {
90
- border-color: transparent;
91
- }.decision.decision-complex {
92
- align-items: initial;
93
- }.np-theme-personal .decision:not(.disabled):hover {
94
- background-color: var(--color-background-screen-hover);
95
- }
1
+ .decision{align-items:center;background-color:transparent;border:0;cursor:pointer;display:block;margin-bottom:0!important;transition:background-color .35s ease}.decision:not(.np-option):focus-visible,.decision:not(.np-option):has(:focus-visible){--ring-outline-offset:0;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.decision__title{color:#37517e;color:var(--color-content-primary);font-size:1.125rem;font-size:var(--font-size-18);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.014em;line-height:1.2;line-height:var(--line-height-title);line-height:135%;margin:0}.decision__title+ol:not(.list-unstyled),.decision__title+p,.decision__title+ul:not(.list-unstyled){margin-top:8px;margin-top:var(--size-8)}.decision__content{font-size:1rem;font-size:var(--font-size-16);font-size:.875rem;font-size:var(--font-size-14);font-weight:400;font-weight:var(--font-weight-regular);letter-spacing:-.006em;line-height:1.5;line-height:var(--line-height-body);line-height:155%;margin-top:4px;margin-top:var(--size-4)}.decision+.decision{margin-top:-1px}.decision dd:last-child{margin-bottom:0}.decision dl{margin-top:8px;margin-top:var(--size-8)}.decision .media,.decision.media{padding:16px 12px;padding:var(--size-16) var(--size-12);width:100%}.np-theme-personal .decision .media,.np-theme-personal .decision.media{padding:16px;padding:var(--size-16)}.decision .media .media-left,.decision.media .media-left{display:none}.decision .media .media-body,.decision.media .media-body{color:#5d7079;color:var(--color-content-secondary)}@media (min-width:480px){.decision .media .media-left,.decision.media .media-left{display:block}}.decision:not(.disabled):hover{background-color:#86a7bd12}.decision:not(.disabled):hover .circle-inverse{background-color:#fff;background-color:var(--color-background-screen)}.np-theme-personal .decision:not(.disabled):hover .circle-inverse{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.decision:not(.disabled):hover .tw-checkbox-button,.decision:not(.disabled):hover .tw-radio-button{border-color:#00a2dd;border-color:var(--color-interactive-accent)}.np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,.np-theme-personal .decision:not(.disabled):hover .tw-radio-button{border-color:transparent}.decision.decision-complex{align-items:normal}.np-theme-personal .decision:not(.disabled):hover{background-color:var(--color-background-screen-hover)}