@deriv-web-design/ui 0.0.9 → 0.0.12
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.
- package/dist/index.css +45 -14
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/tokens.css +15 -2
package/dist/index.css
CHANGED
|
@@ -574,34 +574,65 @@
|
|
|
574
574
|
gap: var(--spacing-8);
|
|
575
575
|
border-radius: var(--radius-md);
|
|
576
576
|
border: 1px solid transparent;
|
|
577
|
-
background: var(--field-surface-outline);
|
|
578
|
-
border-color: var(--field-border-default);
|
|
579
577
|
box-sizing: border-box;
|
|
580
578
|
cursor: text;
|
|
581
579
|
transition: background-color 100ms ease, border-color 100ms ease;
|
|
582
580
|
}
|
|
583
|
-
.sf-wrapper.
|
|
581
|
+
.sf-wrapper.outline {
|
|
582
|
+
background: var(--field-surface-outline);
|
|
583
|
+
border-color: var(--field-border-default);
|
|
584
|
+
}
|
|
585
|
+
.sf-wrapper.fill {
|
|
586
|
+
background: var(--field-surface-fill);
|
|
587
|
+
}
|
|
588
|
+
.sf-wrapper.neutral.outline:hover:not([data-disabled]):not(:focus-within) {
|
|
584
589
|
border-color: var(--field-border-hover);
|
|
585
590
|
}
|
|
586
|
-
.sf-wrapper.neutral:
|
|
591
|
+
.sf-wrapper.neutral.fill:hover:not([data-disabled]):not(:focus-within) {
|
|
592
|
+
background: var(--field-surface-fill-hover);
|
|
593
|
+
}
|
|
594
|
+
.sf-wrapper.neutral.outline:focus-within:not([data-disabled]) {
|
|
595
|
+
border-color: var(--field-border-focus);
|
|
596
|
+
}
|
|
597
|
+
.sf-wrapper.neutral.fill:focus-within:not([data-disabled]) {
|
|
587
598
|
border-color: var(--field-border-focus);
|
|
588
599
|
}
|
|
589
|
-
.sf-wrapper.fail {
|
|
600
|
+
.sf-wrapper.fail.outline {
|
|
590
601
|
border-color: var(--field-border-fail-default);
|
|
591
602
|
}
|
|
592
|
-
.sf-wrapper.fail:hover:not([data-disabled]):not(:focus-within) {
|
|
603
|
+
.sf-wrapper.fail.outline:hover:not([data-disabled]):not(:focus-within) {
|
|
593
604
|
border-color: var(--field-border-fail-hover);
|
|
594
605
|
}
|
|
595
|
-
.sf-wrapper.fail:focus-within:not([data-disabled]) {
|
|
606
|
+
.sf-wrapper.fail.outline:focus-within:not([data-disabled]) {
|
|
607
|
+
border-color: var(--field-border-fail-focus);
|
|
608
|
+
}
|
|
609
|
+
.sf-wrapper.fail.fill {
|
|
610
|
+
background: var(--field-surface-fail);
|
|
611
|
+
}
|
|
612
|
+
.sf-wrapper.fail.fill:hover:not([data-disabled]):not(:focus-within) {
|
|
613
|
+
background: var(--field-surface-fail-hover);
|
|
614
|
+
}
|
|
615
|
+
.sf-wrapper.fail.fill:focus-within:not([data-disabled]) {
|
|
616
|
+
background: var(--field-surface-fail);
|
|
596
617
|
border-color: var(--field-border-fail-focus);
|
|
597
618
|
}
|
|
598
|
-
.sf-wrapper.success {
|
|
619
|
+
.sf-wrapper.success.outline {
|
|
599
620
|
border-color: var(--field-border-success-default);
|
|
600
621
|
}
|
|
601
|
-
.sf-wrapper.success:hover:not([data-disabled]):not(:focus-within) {
|
|
622
|
+
.sf-wrapper.success.outline:hover:not([data-disabled]):not(:focus-within) {
|
|
602
623
|
border-color: var(--field-border-success-hover);
|
|
603
624
|
}
|
|
604
|
-
.sf-wrapper.success:focus-within:not([data-disabled]) {
|
|
625
|
+
.sf-wrapper.success.outline:focus-within:not([data-disabled]) {
|
|
626
|
+
border-color: var(--field-border-success-focus);
|
|
627
|
+
}
|
|
628
|
+
.sf-wrapper.success.fill {
|
|
629
|
+
background: var(--field-surface-success);
|
|
630
|
+
}
|
|
631
|
+
.sf-wrapper.success.fill:hover:not([data-disabled]):not(:focus-within) {
|
|
632
|
+
background: var(--field-surface-success-hover);
|
|
633
|
+
}
|
|
634
|
+
.sf-wrapper.success.fill:focus-within:not([data-disabled]) {
|
|
635
|
+
background: var(--field-surface-success);
|
|
605
636
|
border-color: var(--field-border-success-focus);
|
|
606
637
|
}
|
|
607
638
|
.sf-wrapper[data-disabled] {
|
|
@@ -3121,7 +3152,7 @@
|
|
|
3121
3152
|
min-height: var(--ctab-section-min-height);
|
|
3122
3153
|
max-width: var(--ctab-max-width);
|
|
3123
3154
|
margin: 0 auto;
|
|
3124
|
-
padding: 0;
|
|
3155
|
+
padding: 0 var(--spacing-24);
|
|
3125
3156
|
box-sizing: border-box;
|
|
3126
3157
|
}
|
|
3127
3158
|
@media (min-width: 992px) {
|
|
@@ -3272,7 +3303,7 @@
|
|
|
3272
3303
|
.navbar__pill {
|
|
3273
3304
|
display: flex;
|
|
3274
3305
|
align-items: center;
|
|
3275
|
-
gap: var(--spacing-
|
|
3306
|
+
gap: var(--spacing-8);
|
|
3276
3307
|
padding: var(--spacing-8);
|
|
3277
3308
|
border-radius: var(--navbar-pill-radius);
|
|
3278
3309
|
backdrop-filter: blur(8px);
|
|
@@ -3292,13 +3323,13 @@
|
|
|
3292
3323
|
.navbar__nav-group {
|
|
3293
3324
|
display: flex;
|
|
3294
3325
|
align-items: center;
|
|
3295
|
-
padding: 0
|
|
3326
|
+
padding: 0;
|
|
3296
3327
|
}
|
|
3297
3328
|
.navbar__nav-item {
|
|
3298
3329
|
display: inline-flex;
|
|
3299
3330
|
align-items: center;
|
|
3300
3331
|
gap: var(--spacing-8);
|
|
3301
|
-
padding: var(--spacing-8)
|
|
3332
|
+
padding: var(--spacing-8);
|
|
3302
3333
|
height: 2.5rem;
|
|
3303
3334
|
border: none;
|
|
3304
3335
|
border-radius: var(--radius-full);
|