@esportsplus/ui 0.56.2 → 0.56.4
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/components/bento-grid/scss/index.scss +1 -1
- package/build/components/index.d.ts +3 -0
- package/build/components/index.js +3 -0
- package/build/components/navigation-menu/index.d.ts +28 -0
- package/build/components/navigation-menu/index.js +419 -0
- package/build/components/navigation-menu/scss/index.scss +2 -0
- package/build/components/plan-card/index.d.ts +36 -0
- package/build/components/plan-card/index.js +257 -0
- package/build/components/plan-card/scss/index.scss +2 -0
- package/build/components/surface-field/index.d.ts +2200 -0
- package/build/components/surface-field/index.js +474 -0
- package/build/components/surface-field/scss/index.scss +2 -0
- package/package.json +1 -1
- package/src/components/bento-grid/scss/index.scss +3 -2
- package/src/components/index.ts +3 -0
- package/src/components/navigation-menu/index.ts +608 -0
- package/src/components/navigation-menu/scss/index.scss +213 -0
- package/src/components/navigation-menu/scss/variables.scss +24 -0
- package/src/components/plan-card/index.ts +404 -0
- package/src/components/plan-card/scss/index.scss +513 -0
- package/src/components/plan-card/scss/variables.scss +33 -0
- package/src/components/surface-field/index.ts +816 -0
- package/src/components/surface-field/scss/index.scss +115 -0
- package/src/components/surface-field/scss/variables.scss +11 -0
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@use 'variables';
|
|
2
|
+
|
|
3
|
+
// The canvas paints behind the content and never takes the pointer; the host listens instead, so the light keeps
|
|
4
|
+
// following over surfaces and content.
|
|
5
|
+
.surface-field {
|
|
6
|
+
isolation: isolate;
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
&-canvas {
|
|
10
|
+
color: var(--color);
|
|
11
|
+
height: 100%;
|
|
12
|
+
inset: 0;
|
|
13
|
+
pointer-events: none;
|
|
14
|
+
position: absolute;
|
|
15
|
+
transition: none;
|
|
16
|
+
width: 100%;
|
|
17
|
+
z-index: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-content {
|
|
21
|
+
height: 100%;
|
|
22
|
+
position: relative;
|
|
23
|
+
z-index: 1;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Geometry is written every pointer move, so only the lift eases.
|
|
27
|
+
&-surface {
|
|
28
|
+
background: var(--surface-background);
|
|
29
|
+
border-radius: var(--surface-border-radius);
|
|
30
|
+
box-shadow: 0 0 0 1px var(--surface-border-color), var(--surface-box-shadow);
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
left: 0;
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 0;
|
|
36
|
+
transition: box-shadow var(--surface-lift-duration) ease, scale var(--surface-lift-duration) ease;
|
|
37
|
+
|
|
38
|
+
&.--active {
|
|
39
|
+
box-shadow: 0 0 0 1px var(--surface-border-color), var(--surface-box-shadow-active);
|
|
40
|
+
scale: 1.01;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&-content {
|
|
44
|
+
flex: 1;
|
|
45
|
+
min-height: 0;
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
padding: 0 16px 16px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&-handle,
|
|
51
|
+
&-resize {
|
|
52
|
+
background: none;
|
|
53
|
+
border: 0;
|
|
54
|
+
color: var(--surface-grip-color);
|
|
55
|
+
padding: 0;
|
|
56
|
+
touch-action: none;
|
|
57
|
+
|
|
58
|
+
&:focus-visible {
|
|
59
|
+
outline: 2px solid oklch(from var(--color) l c h / 0.4);
|
|
60
|
+
outline-offset: -2px;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&-handle {
|
|
65
|
+
border-radius: var(--surface-border-radius) var(--surface-border-radius) 0 0;
|
|
66
|
+
cursor: grab;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
height: var(--surface-handle-height);
|
|
69
|
+
position: relative;
|
|
70
|
+
width: 100%;
|
|
71
|
+
|
|
72
|
+
&::before {
|
|
73
|
+
background: currentColor;
|
|
74
|
+
border-radius: 999px;
|
|
75
|
+
content: '';
|
|
76
|
+
height: 2px;
|
|
77
|
+
left: 50%;
|
|
78
|
+
opacity: 0.7;
|
|
79
|
+
position: absolute;
|
|
80
|
+
top: 50%;
|
|
81
|
+
translate: -50% -50%;
|
|
82
|
+
width: 18px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.--active &-handle {
|
|
87
|
+
cursor: grabbing;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Two diagonal ticks in the corner, drawn with a gradient so no icon is needed.
|
|
91
|
+
&-resize {
|
|
92
|
+
background:
|
|
93
|
+
linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 52%, transparent 52%) 4px 4px / 12px 12px no-repeat,
|
|
94
|
+
linear-gradient(135deg, transparent 70%, currentColor 70%, currentColor 77%, transparent 77%) 4px 4px / 12px 12px no-repeat;
|
|
95
|
+
border-radius: 0 0 var(--surface-border-radius) 0;
|
|
96
|
+
bottom: 0;
|
|
97
|
+
cursor: nwse-resize;
|
|
98
|
+
height: 22px;
|
|
99
|
+
opacity: 0.7;
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 0;
|
|
102
|
+
width: 22px;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@media (prefers-reduced-motion: reduce) {
|
|
107
|
+
&-surface {
|
|
108
|
+
transition: box-shadow var(--surface-lift-duration) ease;
|
|
109
|
+
|
|
110
|
+
&.--active {
|
|
111
|
+
scale: 1;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
.surface-field {
|
|
2
|
+
--color: var(--color-text-500);
|
|
3
|
+
--surface-background: var(--color-white-300);
|
|
4
|
+
--surface-border-color: oklch(from var(--color-black-300) l c h / 0.06);
|
|
5
|
+
--surface-border-radius: 14px;
|
|
6
|
+
--surface-box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.06), 0 8px 24px -8px oklch(from var(--color-black-300) l c h / 0.14);
|
|
7
|
+
--surface-box-shadow-active: 0 2px 4px oklch(from var(--color-black-300) l c h / 0.08), 0 20px 40px -12px oklch(from var(--color-black-300) l c h / 0.24);
|
|
8
|
+
--surface-grip-color: var(--color-text-300);
|
|
9
|
+
--surface-handle-height: 28px;
|
|
10
|
+
--surface-lift-duration: 200ms;
|
|
11
|
+
}
|