@lobehub/ui 5.6.4 → 5.6.5
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/es/Menu/sharedStyle.mjs
CHANGED
|
@@ -145,8 +145,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
145
145
|
outline: none;
|
|
146
146
|
box-shadow:
|
|
147
147
|
0 0 15px 0 #00000008,
|
|
148
|
-
0 2px 30px 0 #00000014
|
|
149
|
-
0 0 0 1px ${cssVar.colorBorder} inset;
|
|
148
|
+
0 2px 30px 0 #00000014;
|
|
150
149
|
`,
|
|
151
150
|
positioner: css`
|
|
152
151
|
--lobe-dropdown-animation-duration: 140ms;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n danger: css`\n color: ${cssVar.colorError} !important;\n\n &:hover {\n background: ${cssVar.colorErrorBg} !important;\n }\n `,\n\n empty: css`\n cursor: default;\n font-style: italic;\n color: ${cssVar.colorTextTertiary};\n `,\n\n extra: css`\n margin-inline-start: auto;\n padding-inline-start: 16px;\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n `,\n\n groupLabel: css`\n user-select: none;\n\n padding-block: 8px 4px;\n padding-inline: 12px;\n\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-transform: capitalize;\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n margin-inline-end: 8px;\n `,\n\n item: css`\n cursor: pointer;\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n align-items: center;\n\n width: 100%;\n min-height: 36px;\n padding-block: 8px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n line-height: 20px;\n color: ${cssVar.colorText};\n\n outline: none;\n\n transition: all 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n opacity: 0.5;\n\n &:hover {\n background: transparent;\n }\n }\n\n &[data-highlighted]:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &[data-state='open']:not([data-disabled]),\n &[data-open]:not([data-disabled]),\n &[aria-expanded='true']:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n `,\n\n itemContent: css`\n display: flex;\n flex: 1;\n gap: 0;\n align-items: center;\n `,\n\n itemContentAlignStart: css`\n align-items: flex-start;\n `,\n\n iconAlignStart: css`\n align-self: flex-start;\n margin-block-start: 2px;\n `,\n\n label: css`\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n & a,\n & a:visited,\n & a:hover,\n & a:active {\n color: inherit;\n }\n `,\n\n labelGroup: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-width: 0;\n `,\n\n desc: css`\n overflow: hidden;\n\n font-size: 12px;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n\n popup: css`\n min-width: 120px;\n padding: 4px;\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 15px 0 #00000008,\n 0 2px 30px 0 #00000014
|
|
1
|
+
{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../src/Menu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n danger: css`\n color: ${cssVar.colorError} !important;\n\n &:hover {\n background: ${cssVar.colorErrorBg} !important;\n }\n `,\n\n empty: css`\n cursor: default;\n font-style: italic;\n color: ${cssVar.colorTextTertiary};\n `,\n\n extra: css`\n margin-inline-start: auto;\n padding-inline-start: 16px;\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n `,\n\n groupLabel: css`\n user-select: none;\n\n padding-block: 8px 4px;\n padding-inline: 12px;\n\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-transform: capitalize;\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n margin-inline-end: 8px;\n `,\n\n item: css`\n cursor: pointer;\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n align-items: center;\n\n width: 100%;\n min-height: 36px;\n padding-block: 8px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n line-height: 20px;\n color: ${cssVar.colorText};\n\n outline: none;\n\n transition: all 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n opacity: 0.5;\n\n &:hover {\n background: transparent;\n }\n }\n\n &[data-highlighted]:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &[data-state='open']:not([data-disabled]),\n &[data-open]:not([data-disabled]),\n &[aria-expanded='true']:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n `,\n\n itemContent: css`\n display: flex;\n flex: 1;\n gap: 0;\n align-items: center;\n `,\n\n itemContentAlignStart: css`\n align-items: flex-start;\n `,\n\n iconAlignStart: css`\n align-self: flex-start;\n margin-block-start: 2px;\n `,\n\n label: css`\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n & a,\n & a:visited,\n & a:hover,\n & a:active {\n color: inherit;\n }\n `,\n\n labelGroup: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-width: 0;\n `,\n\n desc: css`\n overflow: hidden;\n\n font-size: 12px;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n\n popup: css`\n min-width: 120px;\n padding: 4px;\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 15px 0 #00000008,\n 0 2px 30px 0 #00000014;\n `,\n positioner: css`\n --lobe-dropdown-animation-duration: 140ms;\n --lobe-dropdown-animation-scale-y: 0.92;\n --lobe-dropdown-animation-ease-in: ease-in;\n --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n z-index: 1100;\n\n & > * {\n will-change: opacity, transform;\n transform-origin: var(--transform-origin);\n animation: none;\n }\n\n &[data-open] > * {\n transform: scaleY(1);\n opacity: 1;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n }\n\n &[data-open] > *[data-starting-style] {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n }\n\n &[data-closed] > * {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n }\n\n &[data-hover-trigger] {\n --lobe-dropdown-animation-duration: 140ms;\n }\n\n &[data-submenu],\n &[data-nested] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n }\n\n &[data-side='left'],\n &[data-side='right'] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n }\n `,\n\n separator: css`\n height: 1px;\n margin-block: 4px;\n margin-inline: 0;\n background: ${cssVar.colorBorder};\n `,\n\n submenuArrow: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 20px;\n margin-inline-start: auto;\n padding-inline-start: 8px;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;aACA,OAAO,WAAW;;;oBAGX,OAAO,aAAa;;;CAItC,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;CAGpC,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;CAGpC,YAAY,GAAG;;;;;;;;;aASJ,OAAO,kBAAkB;;;CAIpC,MAAM,GAAG;;;;;;;;;;CAWT,MAAM,GAAG;;;;;;;;;;;;;;qBAcU,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;;;4BAIF,OAAO,cAAc;;;oBAG7B,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;eAK/B,OAAO,kBAAkB;;;;;;;;;oBASpB,OAAO,kBAAkB;;;;;;oBAMzB,OAAO,kBAAkB;;;CAI3C,aAAa,GAAG;;;;;;CAOhB,uBAAuB,GAAG;;;CAI1B,gBAAgB,GAAG;;;;CAKnB,OAAO,GAAG;;;;;;;;;;;;;CAcV,YAAY,GAAG;;;;;;;;CASf,MAAM,GAAG;;;;;aAKE,OAAO,kBAAkB;;;;CAKpC,OAAO,GAAG;;;qBAGS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;;;;CAMvC,YAAY,GAAG;;;;0CAIyB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD7D,WAAW,GAAG;;;;kBAIE,OAAO,YAAY;;CAGnC,cAAc,GAAG;;;;;;;;;;;CAWlB,EAAE"}
|
|
@@ -67,8 +67,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
67
67
|
outline: none;
|
|
68
68
|
box-shadow:
|
|
69
69
|
0 0 15px 0 #00000008,
|
|
70
|
-
0 2px 30px 0 #00000014
|
|
71
|
-
0 0 0 1px ${cssVar.colorBorder} inset;
|
|
70
|
+
0 2px 30px 0 #00000014;
|
|
72
71
|
|
|
73
72
|
transition-timing-function: var(--lobe-popover-animation-ease-out);
|
|
74
73
|
transition-duration: var(--lobe-popover-animation-duration);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-popover-arrow-offset-block: 5px;\n --lobe-popover-arrow-offset-inline: 8px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 12px;\n height: 6px;\n\n transition: inset-inline-start var(--lobe-popover-animation-duration)\n var(--lobe-popover-animation-ease-out);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n & [data-role='fill'] {\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n fill: none;\n stroke: ${cssVar.colorBorder};\n stroke-width: 1px;\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n position: relative;\n transform-origin: var(--transform-origin);\n\n min-width: 120px;\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 15px 0 #00000008,\n 0 2px 30px 0 #00000014
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-popover-arrow-offset-block: 5px;\n --lobe-popover-arrow-offset-inline: 8px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 12px;\n height: 6px;\n\n transition: inset-inline-start var(--lobe-popover-animation-duration)\n var(--lobe-popover-animation-ease-out);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n & [data-role='fill'] {\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n fill: none;\n stroke: ${cssVar.colorBorder};\n stroke-width: 1px;\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n position: relative;\n transform-origin: var(--transform-origin);\n\n min-width: 120px;\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 15px 0 #00000008,\n 0 2px 30px 0 #00000014;\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: opacity, transform;\n\n &[data-layout-animation] {\n transition-property: opacity, transform, width, height;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n scale(var(--lobe-popover-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-popover-animation-ease-in);\n transition-duration: var(--lobe-popover-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-popover-animation-duration: 150ms;\n --lobe-popover-animation-translate: 6px;\n --lobe-popover-animation-scale: 0.96;\n --lobe-popover-animation-ease-in: ease-in;\n --lobe-popover-animation-duration-exit: 75ms;\n --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n\n z-index: 1100;\n\n width: min(var(--positioner-width), var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant] {\n transition: none;\n }\n\n /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n --lobe-popover-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-translate-y: 0;\n }\n `,\n\n root: css`\n user-select: none;\n position: relative;\n filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n `,\n\n viewport: css`\n --lobe-popover-viewport-inline-padding: 12px;\n\n position: relative;\n\n overflow: clip;\n\n max-width: var(--available-width);\n padding-block: 12px;\n padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n [data-previous],\n [data-current] {\n transform: translateX(0);\n opacity: 1;\n transition:\n transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),\n opacity calc(var(--lobe-popover-animation-duration) / 2)\n var(--lobe-popover-animation-ease-out);\n }\n\n [data-previous] {\n position: absolute;\n inset-block-start: 12px;\n inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(50%);\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(-50%);\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;cAwBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEd,EAAE"}
|