@lobehub/ui/es/base-ui/Drawer/style.mjs.map

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

{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: ${cssVar.colorBgMask};\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n\n    display: flex;\n\n    /* clamp here rather than on the panel, so an oversized size prop shrinks the\n       box instead of detaching the panel from its anchored edge */\n    max-width: 100dvw;\n    max-height: 100dvh;\n  `,\n\n  popupLeft: css`\n    inset-block: 0;\n    inset-inline-start: 0;\n  `,\n\n  popupRight: css`\n    inset-block: 0;\n    inset-inline-end: 0;\n  `,\n\n  popupTop: css`\n    inset-block-start: 0;\n    inset-inline: 0;\n  `,\n\n  popupBottom: css`\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n\n  panel: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n    transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n\n    /* Container, not elevated: the antd-based Drawer paints its panel on container, and in dark\n       themes elevated is a visibly lighter step — the two drawers must read as the same surface. */\n    background: ${cssVar.colorBgContainer};\n\n    /* Geometry and alphas are antd's boxShadowDrawer{Left,Right,Up,Down} verbatim, so both drawers\n       cast identically. antd builds those by scaling colorShadow's *own* alpha by 8/12/5%, and\n       colorShadow flips from opaque black to rgba(255,255,255,0.2) in dark — hence the color-mix\n       against the raw var rather than a literal black (colorShadow has no AliasToken typing, so\n       cssVar cannot reach it). An edge-anchored panel casts along its placement axis rather than\n       downward like a centred dialog would: direction classes set the sign, weight classes scale\n       the alpha, so the two compose without a class per combination. */\n    box-shadow:\n      calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 16px 0\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(8% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 3px) calc(var(--drawer-cast-y, 0) * 3px) 6px -4px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(12% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 9px) calc(var(--drawer-cast-y, 0) * 9px) 28px 8px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(5% * var(--drawer-cast-alpha, 1)),\n          transparent\n        );\n\n    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n  `,\n\n  panelLeft: css`\n    --drawer-cast-x: 1;\n\n    border-inline-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(-100%);\n    }\n  `,\n\n  panelRight: css`\n    --drawer-cast-x: -1;\n\n    border-inline-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(100%);\n    }\n  `,\n\n  panelTop: css`\n    --drawer-cast-y: 1;\n\n    border-block-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-100%);\n    }\n  `,\n\n  panelBottom: css`\n    --drawer-cast-y: -1;\n\n    border-block-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(100%);\n    }\n  `,\n\n  /* Only the edges facing content get rounded; the anchored edge stays flush with the viewport.\n     Kept apart from the direction classes so a flush panel can drop the radius by omitting the\n     class rather than by out-specifying it. */\n  panelRoundedLeft: css`\n    border-start-end-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedRight: css`\n    border-start-start-radius: 12px;\n    border-end-start-radius: 12px;\n  `,\n\n  panelRoundedTop: css`\n    border-end-start-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedBottom: css`\n    border-start-start-radius: 12px;\n    border-start-end-radius: 12px;\n  `,\n\n  /* Filling the viewport leaves nothing to cast onto or to divide from — the shadow and the edge\n     rule would only dirty the seam against the viewport. */\n  panelFlush: css`\n    --drawer-cast-alpha: 0;\n    --drawer-edge-width: 0;\n  `,\n\n  /* Without a backdrop the panel has to earn its separation from live content behind it. */\n  panelBoosted: css`\n    --drawer-cast-alpha: 1.75;\n  `,\n\n  /* A pushed ancestor has receded behind its child; stacking full-weight casts would silt up. */\n  panelRecessed: css`\n    --drawer-cast-alpha: 0.5;\n  `,\n\n  header: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 56px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n\n  containerInner: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    margin-inline: auto;\n  `,\n\n  containerInnerFooter: css`\n    justify-content: flex-end;\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 17px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.005em;\n  `,\n\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    margin-inline-end: -4px;\n  `,\n\n  extraFloating: css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    margin-inline-end: 0;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 8px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      transform 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    /* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: -4px;\n    }\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active {\n      transform: scale(0.96);\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    display: flex;\n    flex: 1;\n    min-height: 0;\n  `,\n\n  bodyContent: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-height: 100%;\n    margin-inline: auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  contentSidebar: css`\n    overflow: hidden;\n  `,\n\n  bodyContentSidebar: css`\n    flex-direction: row;\n    height: 100%;\n    min-height: 0;\n    padding: 0;\n  `,\n\n  sidebar: css`\n    overflow: hidden auto;\n    flex: none;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: ${cssVar.colorBgLayout};\n  `,\n\n  sidebarContent: css`\n    overflow: hidden auto;\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorSplit};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;kBAKG,OAAO,YAAY;;;;;;;;;CAUnC,OAAO,GAAG;;;;;;;;;;;;;CAcV,WAAW,GAAG;;;;CAKd,YAAY,GAAG;;;;CAKf,UAAU,GAAG;;;;CAKb,aAAa,GAAG;;;;CAKhB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;kBAmBM,OAAO,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxC,WAAW,GAAG;;;6DAG6C,OAAO,YAAY;;;;;;;CAQ9E,YAAY,GAAG;;;+DAG8C,OAAO,YAAY;;;;;;;CAQhF,UAAU,GAAG;;;4DAG6C,OAAO,YAAY;;;;;;;CAQ7E,aAAa,GAAG;;;8DAG4C,OAAO,YAAY;;;;;;;CAW/E,kBAAkB,GAAG;;;;CAKrB,mBAAmB,GAAG;;;;CAKtB,iBAAiB,GAAG;;;;CAKpB,oBAAoB,GAAG;;;;CAOvB,YAAY,GAAG;;;;CAMf,cAAc,GAAG;;;CAKjB,eAAe,GAAG;;;CAIlB,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,WAAW;;CAGlD,gBAAgB,GAAG;;;;;;;;;;CAWnB,sBAAsB,GAAG;;;CAIzB,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,OAAO,GAAG;;;;;;;;CASV,eAAe,GAAG;;;;;;;;CASlB,OAAO,GAAG;;;;;;;;;;;;;;;aAeC,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;eAkBvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;;8BAShB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;;CAOZ,aAAa,GAAG;;;;;;;;;;CAWhB,gBAAgB,GAAG;;;CAInB,oBAAoB,GAAG;;;;;;CAOvB,SAAS,GAAG;;;;;;mCAMqB,OAAO,qBAAqB;;kBAE7C,OAAO,cAAc;;CAGrC,gBAAgB,GAAG;;;;;;;;CASnB,QAAQ,GAAG;;;;;;;;;oCASuB,OAAO,WAAW;;AAEtD,EAAE"}