@lobehub/ui 5.16.0 → 5.16.2
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.
|
@@ -34,7 +34,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
34
34
|
height: var(--active-tab-height);
|
|
35
35
|
border-radius: ${cssVar.borderRadius};
|
|
36
36
|
|
|
37
|
-
background: ${cssVar.
|
|
37
|
+
background: ${cssVar.colorBgElevated};
|
|
38
|
+
box-shadow: ${cssVar.boxShadowTertiary};
|
|
38
39
|
`,
|
|
39
40
|
indicatorSquare: css`
|
|
40
41
|
inset-block-end: 0;
|
|
@@ -57,6 +58,19 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
57
58
|
flex-direction: column;
|
|
58
59
|
align-items: stretch;
|
|
59
60
|
}
|
|
61
|
+
`,
|
|
62
|
+
listRounded: css`
|
|
63
|
+
gap: 4px;
|
|
64
|
+
align-self: flex-start;
|
|
65
|
+
|
|
66
|
+
padding: 3px;
|
|
67
|
+
border-radius: ${cssVar.borderRadiusLG};
|
|
68
|
+
|
|
69
|
+
background: ${cssVar.colorFillTertiary};
|
|
70
|
+
|
|
71
|
+
&[data-orientation='vertical'] {
|
|
72
|
+
align-self: stretch;
|
|
73
|
+
}
|
|
60
74
|
`,
|
|
61
75
|
listSquare: css`
|
|
62
76
|
gap: 16px;
|
|
@@ -117,7 +131,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
117
131
|
}
|
|
118
132
|
|
|
119
133
|
&:active:not([data-disabled]) {
|
|
120
|
-
transform: scale(0.
|
|
134
|
+
transform: scale(0.98);
|
|
121
135
|
}
|
|
122
136
|
|
|
123
137
|
&:focus-visible {
|
|
@@ -151,7 +165,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
151
165
|
font-size: 13px;
|
|
152
166
|
`,
|
|
153
167
|
tabPoint: css`
|
|
154
|
-
|
|
168
|
+
height: auto;
|
|
169
|
+
padding-block: 8px 14px;
|
|
155
170
|
`,
|
|
156
171
|
tabSmall: css`
|
|
157
172
|
height: 26px;
|
|
@@ -160,6 +175,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
160
175
|
font-size: 12px;
|
|
161
176
|
`,
|
|
162
177
|
tabSquare: css`
|
|
178
|
+
height: auto;
|
|
179
|
+
padding-block: 8px;
|
|
163
180
|
border-radius: 0;
|
|
164
181
|
`
|
|
165
182
|
}));
|
|
@@ -193,7 +210,7 @@ const listVariants = cva(styles.list, {
|
|
|
193
210
|
defaultVariants: { variant: "rounded" },
|
|
194
211
|
variants: { variant: {
|
|
195
212
|
point: null,
|
|
196
|
-
rounded:
|
|
213
|
+
rounded: styles.listRounded,
|
|
197
214
|
square: styles.listSquare
|
|
198
215
|
} }
|
|
199
216
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n indicator: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 0;\n\n transition-timing-function: ${cssVar.motionEaseOut};\n transition-duration: 240ms;\n transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorPoint: css`\n inset-block-end: 6px;\n inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n width: 5px;\n height: 5px;\n border-radius: 50%;\n\n background: ${cssVar.colorPrimary};\n `,\n indicatorRounded: css`\n inset-block-start: var(--active-tab-top);\n inset-inline-start: var(--active-tab-left);\n\n width: var(--active-tab-width);\n height: var(--active-tab-height);\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n indicator: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 0;\n\n transition-timing-function: ${cssVar.motionEaseOut};\n transition-duration: 240ms;\n transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorPoint: css`\n inset-block-end: 6px;\n inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n width: 5px;\n height: 5px;\n border-radius: 50%;\n\n background: ${cssVar.colorPrimary};\n `,\n indicatorRounded: css`\n inset-block-start: var(--active-tab-top);\n inset-inline-start: var(--active-tab-left);\n\n width: var(--active-tab-width);\n height: var(--active-tab-height);\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadowTertiary};\n `,\n indicatorSquare: css`\n inset-block-end: 0;\n inset-inline-start: var(--active-tab-left);\n\n width: var(--active-tab-width);\n height: 2px;\n\n background: ${cssVar.colorPrimary};\n `,\n list: css`\n position: relative;\n\n display: inline-flex;\n flex-wrap: nowrap;\n gap: 2px;\n align-items: center;\n\n &[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n `,\n listRounded: css`\n gap: 4px;\n align-self: flex-start;\n\n padding: 3px;\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorFillTertiary};\n\n &[data-orientation='vertical'] {\n align-self: stretch;\n }\n `,\n listSquare: css`\n gap: 16px;\n box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n &[data-orientation='vertical'] {\n box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n padding-block-start: 12px;\n outline: none;\n\n &:focus-visible {\n border-radius: ${cssVar.borderRadius};\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 2px;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &[data-orientation='vertical'] {\n flex-direction: row;\n }\n `,\n tab: css`\n cursor: pointer;\n user-select: none;\n\n position: relative;\n z-index: 1;\n\n display: inline-flex;\n flex-shrink: 0;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 0;\n\n font-weight: 500;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n\n background: transparent;\n outline: none;\n\n transition:\n color 120ms ${cssVar.motionEaseOut},\n transform 120ms ${cssVar.motionEaseOut};\n\n &:hover:not([data-disabled]) {\n color: ${cssVar.colorText};\n }\n\n &:active:not([data-disabled]) {\n transform: scale(0.98);\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: -2px;\n }\n\n &[data-active] {\n color: ${cssVar.colorPrimary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n tabLarge: css`\n height: 36px;\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n tabMiddle: css`\n height: 32px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n font-size: 13px;\n `,\n tabPoint: css`\n height: auto;\n padding-block: 8px 14px;\n `,\n tabSmall: css`\n height: 26px;\n padding-inline: 10px;\n border-radius: ${cssVar.borderRadius};\n font-size: 12px;\n `,\n tabSquare: css`\n height: auto;\n padding-block: 8px;\n border-radius: 0;\n `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n defaultVariants: {\n size: 'middle',\n variant: 'rounded',\n },\n variants: {\n size: {\n large: styles.tabLarge,\n middle: styles.tabMiddle,\n small: styles.tabSmall,\n },\n variant: {\n point: styles.tabPoint,\n rounded: null,\n square: styles.tabSquare,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: {\n variant: 'rounded',\n },\n variants: {\n variant: {\n point: styles.indicatorPoint,\n rounded: styles.indicatorRounded,\n square: styles.indicatorSquare,\n },\n },\n});\n\nexport const listVariants = cva(styles.list, {\n defaultVariants: {\n variant: 'rounded',\n },\n variants: {\n variant: {\n point: null,\n rounded: styles.listRounded,\n square: styles.listSquare,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;CAEpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;CAEzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;CAEpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,kBAAkB;;;;;;CAMzC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;CAKf,EAAE;AAEH,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;GAChB;EACF;CACF,CAAC;AAEF,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;EAChB,EACF;CACF,CAAC"}
|