@lobehub/ui/es/DraggablePanel/style.js

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles, css, cx } from 'antd-style';
var offset = 16;
var toggleLength = 40;
var toggleShort = 16;
var prefix = 'draggable-panel';
export var useStyles = createStyles(function (_ref, _ref2) {
  var token = _ref.token;
  var headerHeight = _ref2.headerHeight,
    showHandlerWideArea = _ref2.showHandlerWideArea;
  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        z-index: 50;\n        transition: all 0.2s ", ";\n      }\n\n      &:hover,\n      &:active {\n        &::before {\n          background: ", " !important;\n        }\n      }\n    "])), token.motionEaseOut, token.colorPrimary);
  var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pointer-events: ", ";\n\n      position: absolute;\n      z-index: 10;\n\n      opacity: 0;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        opacity: 1 !important;\n      }\n\n      &:active {\n        opacity: 1 !important;\n      }\n\n      > div {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        color: ", ";\n\n        background: ", ";\n        border-color: ", ";\n        border-style: solid;\n        border-width: 1px;\n        border-radius: 4px;\n\n        transition: all 0.2s ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background: ", ";\n        }\n      }\n    "])), showHandlerWideArea ? 'all' : 'none', token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
  var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 200;\n    "])));
  return {
    bottomFloat: cx(float, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          inset-block-end: 0;\n          inset-inline: 0 0;\n          width: 100%;\n        "])))),
    bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])), commonHandle)),
    container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          flex-shrink: 0;\n          border: 0 solid ", ";\n\n          &:hover {\n            .", "-toggle {\n              opacity: 1;\n            }\n          }\n        "])), token.colorBorderSecondary, prefix)),
    fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n      "]))),
    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block: ", "px 0;\n        inset-inline: 0;\n\n        width: 100%;\n        height: calc(100% - ", "px);\n\n        background: ", ";\n      "])), headerHeight, headerHeight, token.colorBgLayout),
    handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut),
    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-start: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
    leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])), commonHandle), "".concat(prefix, "-left-handle")),
    panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          transition: all 0.2s ", ";\n        "])), token.motionEaseOut)),
    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-end: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
    rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          ", ";\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])), commonHandle), "".concat(prefix, "-right-handle")),
    toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          inset-block-end: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: 16px;\n            margin-inline-start: -20px;\n\n            border-radius: 0 0 4px 4px;\n          }\n        "])), offset, toggleShort, toggleLength)),
    toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          inset-inline-start: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n\n            border-radius: 4px 0 0 4px;\n          }\n        "])), offset, toggleShort, toggleShort, toggleLength)),
    toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          inset-inline-end: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n\n            border-radius: 0 4px 4px 0;\n          }\n        "])), offset, toggleShort, toggleShort, toggleLength)),
    toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          inset-block-start: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n\n            border-radius: 4px 4px 0 0;\n          }\n        "])), offset, toggleShort, toggleLength, toggleShort)),
    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          inset-block-start: ", "px;\n          inset-inline: 0 0;\n          width: 100%;\n        "])), headerHeight)),
    topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])), commonHandle))
  };
});