@lobehub/ui/es/DraggableSideNav/style.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggableSideNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n// Layout constants (aligned with DraggablePanel)\nconst LAYOUT = {\n  offset: 16,\n  toggleLength: 54,\n  toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    /* Smooth scroll behavior */\n    scroll-behavior: smooth;\n    overflow: hidden auto;\n    flex: 1;\n\n    /* Better scrollbar styling */\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 3px;\n      background: ${cssVar.colorBorderSecondary};\n\n      &:hover {\n        background: ${cssVar.colorBorder};\n      }\n    }\n  `,\n  container: css`\n    /* Width transition controlled by inline style */\n\n    /* Ensure smooth animations */\n    will-change: width;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n  `,\n  contentContainer: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  contentContainerNoBorder: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border-inline-end: 0 solid ${cssVar.colorBorderSecondary};\n\n    background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n  `,\n  footer: css`\n    flex-shrink: 0;\n  `,\n  handlerIcon: css`\n    /* Icon transitions are now handled by motion */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  header: css`\n    flex-shrink: 0;\n  `,\n  menuOverride: css`\n    .${prefixCls}-menu {\n      .${prefixCls}-menu-item {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n\n        height: unset;\n        min-height: 36px;\n        padding-block: 4px;\n        padding-inline: 8px !important;\n      }\n\n      .${prefixCls}-menu-item-group-title {\n        overflow: hidden;\n        padding-inline: 8px;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .${prefixCls}-menu-item-icon {\n        position: absolute;\n        inset-inline-start: 0;\n\n        display: flex !important;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        width: 36px;\n        height: 36px;\n      }\n\n      .${prefixCls}-menu-title-content {\n        overflow: hidden;\n        flex: 1;\n\n        margin: 0 !important;\n        padding-inline-start: 36px;\n\n        line-height: 1.5;\n      }\n\n      &.${prefixCls}-menu-inline-collapsed {\n        .ant-menu-title-content {\n          display: none;\n          width: 0;\n          opacity: 0;\n        }\n\n        .${prefixCls}-menu-item {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 36px !important;\n          height: 36px !important;\n        }\n      }\n    }\n  `,\n  resizeHandle: css`\n    cursor: col-resize;\n\n    position: absolute;\n    inset-block: 0 0;\n\n    width: 8px;\n\n    transition: background-color 0.2s ease;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 2px;\n\n      background: transparent;\n\n      transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n  `,\n  resizeHandleHighlight: css`\n    &:hover {\n      &::after {\n        width: 3px;\n        background: ${cssVar.colorPrimary};\n        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::after {\n        background: ${cssVar.colorPrimaryActive};\n      }\n    }\n  `,\n  resizeHandleLeft: css`\n    inset-inline-end: -4px;\n  `,\n  resizeHandleRight: css`\n    inset-inline-start: -4px;\n  `,\n  toggleLeft: css`\n    inset-inline-end: -${LAYOUT.offset}px;\n    width: ${LAYOUT.toggleShort}px;\n    height: 100%;\n\n    > div {\n      inset-block-start: 50%;\n\n      width: ${LAYOUT.toggleShort}px;\n      height: ${LAYOUT.toggleLength}px;\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-start: -1px;\n      border-inline-start-width: 0;\n      border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n    }\n  `,\n  toggleRight: css`\n    inset-inline-start: -${LAYOUT.offset}px;\n    width: ${LAYOUT.toggleShort}px;\n    height: 100%;\n\n    > div {\n      inset-block-start: 50%;\n\n      width: ${LAYOUT.toggleShort}px;\n      height: ${LAYOUT.toggleLength}px;\n      margin-block-start: -${LAYOUT.toggleLength / 2}px;\n      margin-inline-end: -1px;\n      border-inline-end-width: 0;\n      border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG}; /* 右侧面板，handle 在左边，左侧圆角 */\n    }\n  `,\n  toggleRoot: css`\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n\n    /* Smooth transitions for all states */\n    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n    &:has(> div) {\n      pointer-events: all;\n    }\n\n    > div {\n      pointer-events: all;\n      cursor: pointer;\n\n      position: absolute;\n\n      border: 1px solid ${cssVar.colorBorder};\n\n      color: ${cssVar.colorTextTertiary};\n\n      background: var(--draggable-side-nav-bg, ${cssVar.colorBgLayout});\n      backdrop-filter: blur(8px);\n\n      /* Enhanced transitions with backdrop blur */\n      transition:\n        color 0.2s ${cssVar.motionEaseOut},\n        transform 0.2s ${cssVar.motionEaseOut},\n        box-shadow 0.2s ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n      }\n\n      &:active {\n        transform: scale(0.95);\n        color: ${cssVar.colorText};\n      }\n    }\n  `,\n}));\n"],"mappings":";;;AAGA,MAAM,SAAS;CACb,QAAQ;CACR,cAAc;CACd,aAAa;CACd;AAED,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,MAAM,KAAG;;;;;;;;;;;;;;;;;oBAiBSA,SAAO,qBAAqB;;;sBAG1BA,SAAO,YAAY;;;;CAIvC,WAAW,KAAG;;;;;;;;;;;;;CAad,kBAAkB,KAAG;;;;;;mCAMYA,SAAO,qBAAqB;;+CAEhBA,SAAO,cAAc;;CAElE,0BAA0B,KAAG;;;;;;iCAMEA,SAAO,qBAAqB;;+CAEdA,SAAO,cAAc;;CAElE,QAAQ,KAAG;;;CAGX,aAAa,KAAG;;;;;;CAMhB,QAAQ,KAAG;;;CAGX,cAAc,KAAG;OACZ,UAAU;SACR,UAAU;;;;;;;;;;;;SAYV,UAAU;;;;;;;SAOV,UAAU;;;;;;;;;;;;;SAaV,UAAU;;;;;;;;;;UAUT,UAAU;;;;;;;WAOT,UAAU;;;;;;;;;;;CAWnB,cAAc,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,uBAAuB,KAAG;;;;sBAINA,SAAO,aAAa;iDACOA,SAAO,aAAa;;;;;;sBAM/CA,SAAO,mBAAmB;;;;CAI9C,kBAAkB,KAAG;;;CAGrB,mBAAmB,KAAG;;;CAGtB,YAAY,KAAG;yBACQ,OAAO,OAAO;aAC1B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;yBAG5BA,SAAO,eAAe,GAAGA,SAAO,eAAe;;;CAGtE,aAAa,KAAG;2BACS,OAAO,OAAO;aAC5B,OAAO,YAAY;;;;;;eAMjB,OAAO,YAAY;gBAClB,OAAO,aAAa;6BACP,OAAO,eAAe,EAAE;;;uBAG9BA,SAAO,eAAe,OAAOA,SAAO,eAAe;;;CAGxE,YAAY,KAAG;;;;;;;;;;;;;;;;;;0BAkBSA,SAAO,YAAY;;eAE9BA,SAAO,kBAAkB;;iDAESA,SAAO,cAAc;;;;;qBAKjDA,SAAO,cAAc;yBACjBA,SAAO,cAAc;0BACpBA,SAAO,cAAc;;;iBAG9BA,SAAO,mBAAmB;;;;;iBAK1BA,SAAO,UAAU;;;;CAIjC,EAAE"}