@kofile/gds-foundations 1.4.16 → 1.4.19
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/build/css/components/dialog.module.css +2 -2
- package/build/css/components/modal.module.css +2 -2
- package/build/css/components/tabs.module.css +47 -14
- package/build/css/components/toast.module.css +3 -1
- package/build/css/components/tooltip.module.css +2 -2
- package/build/minified/dialog.module.css +1 -1
- package/build/minified/modal.module.css +1 -1
- package/build/minified/tabs.module.css +1 -1
- package/build/minified/toast.module.css +1 -1
- package/build/minified/tooltip.module.css +1 -1
- package/package.json +1 -1
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
font-weight: var(--font-weights-bold);
|
|
46
46
|
letter-spacing: var(--letter-spacing-xl);
|
|
47
47
|
line-height: var(--line-heights-xl);
|
|
48
|
-
text-align:
|
|
48
|
+
text-align: center;
|
|
49
49
|
}
|
|
50
50
|
.title[data-mode="dark"] {
|
|
51
51
|
color: var(--color-neutral-lightest);
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
font-weight: var(--font-weights-regular);
|
|
61
61
|
letter-spacing: var(--letter-spacing-2xs);
|
|
62
62
|
line-height: var(--line-heights-2xs);
|
|
63
|
-
text-align:
|
|
63
|
+
text-align: center;
|
|
64
64
|
}
|
|
65
65
|
.description[data-mode="dark"] {
|
|
66
66
|
color: var(--color-neutral-lightest);
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
font-weight: var(--font-weights-semibold);
|
|
40
40
|
letter-spacing: var(--letter-spacing-xl);
|
|
41
41
|
line-height: var(--line-heights-xl);
|
|
42
|
-
text-align:
|
|
42
|
+
text-align: center;
|
|
43
43
|
}
|
|
44
44
|
.title[data-mode="dark"] {
|
|
45
45
|
color: var(--color-neutral-lightest);
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
font-weight: var(--font-weights-regular);
|
|
55
55
|
letter-spacing: var(--letter-spacing-2xs);
|
|
56
56
|
line-height: var(--line-heights-2xs);
|
|
57
|
-
text-align:
|
|
57
|
+
text-align: center;
|
|
58
58
|
}
|
|
59
59
|
.description[data-mode="dark"] {
|
|
60
60
|
color: var(--color-neutral-lightest);
|
|
@@ -14,52 +14,85 @@
|
|
|
14
14
|
border-block-end-style: solid;
|
|
15
15
|
}
|
|
16
16
|
.list[data-mode="dark"][data-border] {
|
|
17
|
-
border-color: var(--color-neutral-800);
|
|
17
|
+
border-block-end-color: var(--color-neutral-800);
|
|
18
18
|
}
|
|
19
|
+
|
|
19
20
|
.trigger {
|
|
20
|
-
|
|
21
|
+
/* Reset native button defaults so foundations styles aren't fighting the UA */
|
|
22
|
+
appearance: none;
|
|
21
23
|
background-color: transparent;
|
|
22
|
-
border
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
border: 0;
|
|
25
|
+
margin: 0;
|
|
26
|
+
|
|
27
|
+
/* Layout — hug content horizontally to match Figma; height + flex-center give
|
|
28
|
+
the same vertical rhythm as Figma's padding-block on the tab-label frame. */
|
|
29
|
+
box-sizing: border-box;
|
|
27
30
|
display: flex;
|
|
28
31
|
align-items: center;
|
|
29
32
|
justify-content: center;
|
|
33
|
+
height: var(--spacing-2xl);
|
|
34
|
+
padding: 0;
|
|
35
|
+
|
|
36
|
+
/* Bottom border = the underline target. Reserved at the trigger's full width
|
|
37
|
+
so transitioning from default → hover → active doesn't shift layout. */
|
|
38
|
+
border-block-end-style: solid;
|
|
39
|
+
border-block-end-width: var(--border-width-md);
|
|
40
|
+
border-block-end-color: transparent;
|
|
41
|
+
|
|
42
|
+
/* Typography — Large = 18px SemiBold per Figma .tab-item Size=Large */
|
|
30
43
|
font-family: var(--font-families-default);
|
|
31
44
|
font-size: var(--font-size-lg);
|
|
32
|
-
font-weight: var(--font-weights-
|
|
45
|
+
font-weight: var(--font-weights-semibold);
|
|
33
46
|
letter-spacing: var(--letter-spacing-lg);
|
|
34
47
|
line-height: var(--line-heights-lg);
|
|
35
|
-
height: var(--spacing-2xl);
|
|
36
48
|
color: var(--color-neutral-darkest);
|
|
49
|
+
|
|
50
|
+
cursor: pointer;
|
|
37
51
|
}
|
|
52
|
+
|
|
53
|
+
/* Hover lights up the primary underline + recolors text. Same visual as Active
|
|
54
|
+
but without the weight bump — matches Figma State=Hover. */
|
|
38
55
|
.trigger:hover {
|
|
39
56
|
color: var(--color-primary-700);
|
|
57
|
+
border-block-end-color: var(--color-primary-700);
|
|
40
58
|
}
|
|
59
|
+
|
|
60
|
+
/* Active state — primary underline + bold weight (Figma State=Active). */
|
|
41
61
|
.trigger[data-state="active"] {
|
|
42
|
-
box-sizing: border-box;
|
|
43
62
|
color: var(--color-primary-700);
|
|
44
|
-
border-color: var(--color-primary-700);
|
|
63
|
+
border-block-end-color: var(--color-primary-700);
|
|
64
|
+
font-weight: var(--font-weights-bold);
|
|
45
65
|
}
|
|
66
|
+
|
|
67
|
+
.trigger:focus-visible {
|
|
68
|
+
outline: var(--border-width-md) solid var(--color-primary-700);
|
|
69
|
+
outline-offset: var(--border-width-sm);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* X-Large size — 24px text, 48px height (Figma .tab-item Size=X-Large). */
|
|
46
73
|
.trigger[data-size="xl"] {
|
|
47
|
-
font-family: var(--font-families-default);
|
|
48
74
|
font-size: var(--font-size-2xl);
|
|
49
|
-
font-weight: var(--font-weights-bold);
|
|
50
75
|
letter-spacing: var(--letter-spacing-2xl);
|
|
51
76
|
line-height: var(--line-heights-2xl);
|
|
52
77
|
height: var(--spacing-3xl);
|
|
53
78
|
}
|
|
79
|
+
|
|
80
|
+
/* Dark mode — Figma .tab-item only documents Mode=Light, so dark uses the
|
|
81
|
+
lighter primary tints (300/400) carried over from the previous version. */
|
|
54
82
|
.trigger[data-mode="dark"] {
|
|
55
83
|
color: var(--color-neutral-lightest);
|
|
56
84
|
}
|
|
57
85
|
.trigger[data-mode="dark"]:hover {
|
|
58
86
|
color: var(--color-primary-300);
|
|
87
|
+
border-block-end-color: var(--color-primary-300);
|
|
59
88
|
}
|
|
60
89
|
.trigger[data-mode="dark"][data-state="active"] {
|
|
61
90
|
color: var(--color-primary-400);
|
|
62
|
-
border-color: var(--color-primary-400);
|
|
91
|
+
border-block-end-color: var(--color-primary-400);
|
|
92
|
+
font-weight: var(--font-weights-bold);
|
|
93
|
+
}
|
|
94
|
+
.trigger[data-mode="dark"]:focus-visible {
|
|
95
|
+
outline-color: var(--color-primary-300);
|
|
63
96
|
}
|
|
64
97
|
|
|
65
98
|
.content {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.overlay,.overlay[data-mode=dark]{background-color:rgba(0,0,0,.5);inset:0}.content,.overlay,.overlay[data-mode=dark]{position:fixed;z-index:var(--elevation-absolute-top)}.content{background-color:var(--color-neutral-lightest);border-radius:var(--primitive-6);box-shadow:var(--shadow-md);left:50%;padding-block:var(--spacing-xl);padding-inline:var(--spacing-lg);top:50%;transform:translate(-50%,-50%);width:var(--layout-2xs)}.content:focus{outline:none}.content[data-size=spacious]{width:var(--layout-sm)}.content[data-mode=dark]{background-color:var(--color-neutral-darkest)}.title{color:var(--color-neutral-darkest);font-family:var(--font-families-default);font-size:var(--font-size-xl);font-weight:var(--font-weights-bold);letter-spacing:var(--letter-spacing-xl);line-height:var(--line-heights-xl);margin:var(--spacing-4xs);margin-block-start:var(--spacing-sm);text-align:
|
|
1
|
+
.overlay,.overlay[data-mode=dark]{background-color:rgba(0,0,0,.5);inset:0}.content,.overlay,.overlay[data-mode=dark]{position:fixed;z-index:var(--elevation-absolute-top)}.content{background-color:var(--color-neutral-lightest);border-radius:var(--primitive-6);box-shadow:var(--shadow-md);left:50%;padding-block:var(--spacing-xl);padding-inline:var(--spacing-lg);top:50%;transform:translate(-50%,-50%);width:var(--layout-2xs)}.content:focus{outline:none}.content[data-size=spacious]{width:var(--layout-sm)}.content[data-mode=dark]{background-color:var(--color-neutral-darkest)}.title{color:var(--color-neutral-darkest);font-family:var(--font-families-default);font-size:var(--font-size-xl);font-weight:var(--font-weights-bold);letter-spacing:var(--letter-spacing-xl);line-height:var(--line-heights-xl);margin:var(--spacing-4xs);margin-block-start:var(--spacing-sm);text-align:center}.title[data-mode=dark]{color:var(--color-neutral-lightest)}.description{color:var(--color-neutral-400);font-family:var(--font-families-default);font-size:var(--font-size-2xs);font-weight:var(--font-weights-regular);letter-spacing:var(--letter-spacing-2xs);line-height:var(--line-heights-2xs);margin:var(--spacing-4xs);margin-block-start:var(--spacing-sm);text-align:center}.description[data-mode=dark]{color:var(--color-neutral-lightest)}.icon{background-color:var(--color-neutral-200);border-radius:var(--primitive-6);display:flex;justify-content:center;margin:0 auto;padding:var(--spacing-2xs);width:min-content}.icon[data-type=destructive],.icon[data-type=error]{background-color:var(--color-danger-100)}.icon[data-type=success]{background-color:var(--color-success-100)}.icon[data-mode=dark][data-type=loading],.icon[data-type=loading]{background-color:transparent}.icon[data-mode=dark]{background-color:var(--color-neutral-900)}.icon[data-mode=dark][data-type=destructive],.icon[data-mode=dark][data-type=error]{background-color:var(--color-danger-900)}.icon[data-mode=dark][data-type=success]{background-color:var(--color-success-900)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.overlay,.overlay[data-mode=dark]{background-color:rgba(0,0,0,.5);inset:0;position:fixed}.content{background-color:var(--color-neutral-lightest);border-radius:var(--primitive-6);box-shadow:var(--shadow-md);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);width:var(--layout-md)}.content:focus{outline:none}.content[data-size=spacious]{width:var(--layout-sm)}.content[data-mode=dark]{background-color:var(--color-neutral-darkest)}.title{color:var(--color-neutral-darkest);font-family:var(--font-families-default);font-size:var(--font-size-xl);font-weight:var(--font-weights-semibold);letter-spacing:var(--letter-spacing-xl);line-height:var(--line-heights-xl);margin:var(--spacing-4xs);text-align:
|
|
1
|
+
.overlay,.overlay[data-mode=dark]{background-color:rgba(0,0,0,.5);inset:0;position:fixed}.content{background-color:var(--color-neutral-lightest);border-radius:var(--primitive-6);box-shadow:var(--shadow-md);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);width:var(--layout-md)}.content:focus{outline:none}.content[data-size=spacious]{width:var(--layout-sm)}.content[data-mode=dark]{background-color:var(--color-neutral-darkest)}.title{color:var(--color-neutral-darkest);font-family:var(--font-families-default);font-size:var(--font-size-xl);font-weight:var(--font-weights-semibold);letter-spacing:var(--letter-spacing-xl);line-height:var(--line-heights-xl);margin:var(--spacing-4xs);text-align:center}.title[data-mode=dark]{color:var(--color-neutral-lightest)}.description{color:var(--color-neutral-400);font-family:var(--font-families-default);font-size:var(--font-size-2xs);font-weight:var(--font-weights-regular);letter-spacing:var(--letter-spacing-2xs);line-height:var(--line-heights-2xs);margin:var(--spacing-4xs);margin-block-start:var(--spacing-sm);text-align:center}.description[data-mode=dark]{color:var(--color-neutral-lightest)}.icon{background-color:var(--color-neutral-200);border-radius:var(--primitive-6);display:flex;justify-content:center;margin:0 auto;padding:var(--spacing-2xs);width:min-content}.icon[data-type=destructive],.icon[data-type=error]{background-color:var(--color-danger-100)}.icon[data-type=success]{background-color:var(--color-success-100)}.icon[data-mode=dark][data-type=loading],.icon[data-type=loading]{background-color:transparent}.icon[data-mode=dark]{background-color:var(--color-neutral-900)}.icon[data-mode=dark][data-type=destructive],.icon[data-mode=dark][data-type=error]{background-color:var(--color-danger-900)}.icon[data-mode=dark][data-type=success]{background-color:var(--color-success-900)}.content[data-size=md]{width:var(--layout-md)}.content[data-size=lg]{width:var(--layout-lg)}.content[data-size=xl]{width:var(--layout-xl)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{flex-direction:column}.list,.root{display:flex}.list{column-gap:var(--spacing-xl);flex-shrink:0}.list[data-border]{border-block-end-color:var(--color-neutral-300);border-block-end-style:solid;border-block-end-width:var(--border-width-sm)}.list[data-mode=dark][data-border]{border-color:var(--color-neutral-800)}.trigger{align-items:center;background-color:transparent;border-block-end-color:transparent;border-block-end-style:solid;border-block-end-width:var(--border-width-md);box-sizing:border-box;color:var(--color-neutral-darkest);cursor:pointer;display:flex;font-family:var(--font-families-default);font-size:var(--font-size-lg);font-weight:var(--font-weights-
|
|
1
|
+
.root{flex-direction:column}.list,.root{display:flex}.list{column-gap:var(--spacing-xl);flex-shrink:0}.list[data-border]{border-block-end-color:var(--color-neutral-300);border-block-end-style:solid;border-block-end-width:var(--border-width-sm)}.list[data-mode=dark][data-border]{border-block-end-color:var(--color-neutral-800)}.trigger{align-items:center;appearance:none;background-color:transparent;border:0;border-block-end-color:transparent;border-block-end-style:solid;border-block-end-width:var(--border-width-md);box-sizing:border-box;color:var(--color-neutral-darkest);cursor:pointer;display:flex;font-family:var(--font-families-default);font-size:var(--font-size-lg);font-weight:var(--font-weights-semibold);height:var(--spacing-2xl);justify-content:center;letter-spacing:var(--letter-spacing-lg);line-height:var(--line-heights-lg);margin:0;padding:0}.trigger:hover,.trigger[data-state=active]{border-block-end-color:var(--color-primary-700);color:var(--color-primary-700)}.trigger[data-state=active]{font-weight:var(--font-weights-bold)}.trigger:focus-visible{outline:var(--border-width-md) solid var(--color-primary-700);outline-offset:var(--border-width-sm)}.trigger[data-size=xl]{font-size:var(--font-size-2xl);height:var(--spacing-3xl);letter-spacing:var(--letter-spacing-2xl);line-height:var(--line-heights-2xl)}.trigger[data-mode=dark]{color:var(--color-neutral-lightest)}.trigger[data-mode=dark]:hover{border-block-end-color:var(--color-primary-300);color:var(--color-primary-300)}.trigger[data-mode=dark][data-state=active]{border-block-end-color:var(--color-primary-400);color:var(--color-primary-400);font-weight:var(--font-weights-bold)}.trigger[data-mode=dark]:focus-visible{outline-color:var(--color-primary-300)}.content{background-color:var(--color-neutral-lightest);border:var(--border-width-sm) solid var(--color-neutral-300);border-radius:var(--border-radius-sm);flex-shrink:1;margin-top:var(--spacing-xs);outline:none;padding:var(--spacing-md);width:auto}.content:focus{border:var(--border-width-sm) solid var(--color-neutral-300)}.content[data-mode=dark]{background-color:var(--color-neutral-darkest);border-color:var(--color-neutral-800)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
button{all:unset}.viewport{--viewport-padding:var(--spacing-xs);display:flex;gap:var(--spacing-xs);justify-content:center;list-style:none;margin:0;max-width:100vw;outline:none;padding:var(--viewport-padding);position:fixed;transform:translateX(var(--viewport-translate-x));width:100%;z-index:var(--elevation-absolute-top)}.viewport[data-position=bottom]{bottom:var(--spacing-3xl)}.viewport[data-position=top]{top:var(--spacing-3xl)}.root{align-items:center;background-color:var(--color-neutral-200);border:var(--border-width-sm) solid var(--color-neutral-300);border-radius:var(--primitive-6);display:flex;gap:var(--spacing-xs);padding:var(--spacing-md)}.root[data-state=open]{animation:slideIn .15s cubic-bezier(.16,1,.3,1)}.root[data-state=closed]{animation:hide .1s ease-in}.root[data-swipe=move]{transform:translateX(var(--radix-toast-swipe-move-x))}.root[data-swipe=cancel]{transform:translateX(0);transition:transform .2s ease-out}.root[data-swipe=end]{animation:swipeOut .1s ease-out}.root[data-status=success]{background-color:var(--color-success-100);border-color:var(--color-neutral-300);color:var(--color-success-900)}.root[data-status=highlight]{background-color:var(--color-highlight-200);border-color:var(--color-neutral-300);color:var(--color-highlight-900)}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateX(calc(100% + var(--viewport-padding)))}to{transform:translateX(0)}}@keyframes swipeOut{0%{transform:translateX(var(--radix-toast-swipe-end-x))}to{transform:translateX(calc(100% + var(--viewport-padding)))}}.title{align-items:center;color:var(--color-neutral-900);display:flex;font-family:var(--font-families-default);font-size:var(--font-size-md);font-weight:var(--font-weights-semibold);gap:var(--spacing-xs);letter-spacing:var(--letter-spacing-md);line-height:var(--line-heights-md);margin-bottom:var(--primitive-5)}.description{color:var(--primitive-gray-800);font:var(--font-size-md-regular);margin:0}.action{grid-area:action}
|
|
1
|
+
.root button,.viewport button{all:unset}.viewport{--viewport-padding:var(--spacing-xs);display:flex;gap:var(--spacing-xs);justify-content:center;list-style:none;margin:0;max-width:100vw;outline:none;padding:var(--viewport-padding);position:fixed;transform:translateX(var(--viewport-translate-x));width:100%;z-index:var(--elevation-absolute-top)}.viewport[data-position=bottom]{bottom:var(--spacing-3xl)}.viewport[data-position=top]{top:var(--spacing-3xl)}.root{align-items:center;background-color:var(--color-neutral-200);border:var(--border-width-sm) solid var(--color-neutral-300);border-radius:var(--primitive-6);display:flex;gap:var(--spacing-xs);padding:var(--spacing-md)}.root[data-state=open]{animation:slideIn .15s cubic-bezier(.16,1,.3,1)}.root[data-state=closed]{animation:hide .1s ease-in}.root[data-swipe=move]{transform:translateX(var(--radix-toast-swipe-move-x))}.root[data-swipe=cancel]{transform:translateX(0);transition:transform .2s ease-out}.root[data-swipe=end]{animation:swipeOut .1s ease-out}.root[data-status=success]{background-color:var(--color-success-100);border-color:var(--color-neutral-300);color:var(--color-success-900)}.root[data-status=highlight]{background-color:var(--color-highlight-200);border-color:var(--color-neutral-300);color:var(--color-highlight-900)}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateX(calc(100% + var(--viewport-padding)))}to{transform:translateX(0)}}@keyframes swipeOut{0%{transform:translateX(var(--radix-toast-swipe-end-x))}to{transform:translateX(calc(100% + var(--viewport-padding)))}}.title{align-items:center;color:var(--color-neutral-900);display:flex;font-family:var(--font-families-default);font-size:var(--font-size-md);font-weight:var(--font-weights-semibold);gap:var(--spacing-xs);letter-spacing:var(--letter-spacing-md);line-height:var(--line-heights-md);margin-bottom:var(--primitive-5)}.description{color:var(--primitive-gray-800);font:var(--font-size-md-regular);margin:0}.action{grid-area:action}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
button{all:unset}.content{--gds-tooltip-width:fit-content;--radix-tooltip-trigger-width:var(--gds-tooltip-width);animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--color-neutral-darkest);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm);color:var(--color-neutral-lightest);font-size:var(--font-size-xs);line-height:var(--line-heights-xs);max-width:var(--gds-tooltip-width);padding:var(--spacing-xs) var(--spacing-sm);user-select:none;width:var(--radix-tooltip-content-available-width);will-change:transform,opacity;z-index:var(--elevation-absolute-top)}.content[data-state=delayed-open][data-side=top]{animation-name:slideDownAndFade}.content[data-state=delayed-open][data-side=right]{animation-name:slideLeftAndFade}.content[data-state=delayed-open][data-side=bottom]{animation-name:slideUpAndFade}.content[data-state=delayed-open][data-side=left]{animation-name:slideRightAndFade}.arrow{fill:var(--color-neutral-darkest)}@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRightAndFade{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeftAndFade{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}
|
|
1
|
+
.content button{all:unset}.content{--gds-tooltip-width:fit-content;--radix-tooltip-trigger-width:var(--gds-tooltip-width);animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--color-neutral-darkest);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm);color:var(--color-neutral-lightest);font-size:var(--font-size-xs);line-height:var(--line-heights-xs);max-width:var(--gds-tooltip-width);padding:var(--spacing-xs) var(--spacing-sm);user-select:none;width:var(--radix-tooltip-content-available-width);will-change:transform,opacity;z-index:var(--elevation-absolute-top)}.content[data-state=delayed-open][data-side=top]{animation-name:slideDownAndFade}.content[data-state=delayed-open][data-side=right]{animation-name:slideLeftAndFade}.content[data-state=delayed-open][data-side=bottom]{animation-name:slideUpAndFade}.content[data-state=delayed-open][data-side=left]{animation-name:slideRightAndFade}.arrow{fill:var(--color-neutral-darkest)}@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRightAndFade{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeftAndFade{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}
|