@yuntijs/ui/es/MonacoEditor/base/style.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
import { createStyles, keyframes } from 'antd-style';
/**
 * styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
 */
export var useStyles = createStyles(function (_ref, _ref2) {
  var css = _ref.css,
    token = _ref.token,
    prefixCls = _ref.prefixCls;
  var _ref2$minimapEnabled = _ref2.minimapEnabled,
    minimapEnabled = _ref2$minimapEnabled === void 0 ? false : _ref2$minimapEnabled,
    _ref2$isFullScreen = _ref2.isFullScreen,
    isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
    _ref2$diff = _ref2.diff,
    diff = _ref2$diff === void 0 ? false : _ref2$diff,
    _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'outlined' : _ref2$variant;
  var dots = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      0% { content: '.'; }\n      20% { content: '..'; }\n      40% { content: '...'; }\n      60% { content: '....'; }\n      80% { content: '.....'; }\n    "])));
  var getBgColor = function getBgColor() {
    switch (variant) {
      case 'outlined':
        {
          return token.colorBgBase;
        }
      case 'filled':
        {
          return token.colorFillTertiary;
        }
      default:
        {
          return 'transparent';
        }
    }
  };
  return {
    base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        box-sizing: content-box;\n        min-height: 100px;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        &:hover {\n          border-color: ", ";\n          ", "\n        }\n\n        &.ve-focused {\n          ", "\n          ", "\n        }\n\n        &.ve-outline {\n          border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n        }\n\n        & > .react-monaco-editor-container {\n          width: 100%;\n          height: 100%;\n          min-height: 100px;\n          background: transparent;\n\n          ", "\n\n          & > .monaco-editor {\n            border-radius: ", "px;\n            outline: none;\n            .overflow-guard,\n            .margin {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            .monaco-scrollable-element {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n          .monaco-diff-editor {\n            border-radius: ", "px;\n            & > .gutter {\n              outline: none;\n            }\n            & > .original > .monaco-editor {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n              outline: none;\n              .overflow-guard,\n              .margin {\n                border-top-left-radius: ", "px;\n                border-bottom-left-radius: ", "px;\n              }\n            }\n            & > .modified > .monaco-editor {\n              outline: none;\n            }\n            .diffViewport {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n              outline: none;\n            }\n          }\n        }\n\n        .syntaxTips {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n\n          box-sizing: border-box;\n          width: 100%;\n          max-height: 0;\n          margin: 0;\n          padding: 10px 30px;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition: 0.2s ease max-height;\n        }\n\n        .syntaxTips:hover {\n          overflow: auto;\n          max-height: 50%;\n        }\n\n        .syntaxTips .infoIcon {\n          position: absolute;\n          top: 2px;\n          right: 5px;\n          transform: rotateY(180deg);\n\n          width: 20px;\n          height: 16px;\n        }\n      "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            border-color: ", ";\n          "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            position: fixed;\n            z-index: 9998;\n            inset: 0;\n\n            width: auto !important;\n            height: auto !important;\n          "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
    fullScreenBtn: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        &.", "-btn {\n          position: absolute;\n          top: 20px;\n          color: ", ";\n          transition: none;\n          ", "\n        }\n      "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                z-index: 9999;\n                right: ", "px;\n              "])), diff ? 64 : 138) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                right: ", "px;\n              "])), minimapEnabled || diff ? 64 : 20)),
    loading: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background-color: transparent;\n\n        &::after {\n          content: '';\n          width: 16px;\n          /* display: inline; */\n          animation: ", " steps(3) 1s infinite;\n        }\n      "])), token.fontSizeSM, token.colorTextTertiary, dots)
  };
}, {
  hashPriority: 'low'
});