dumi-theme-antd-style/dist/slots/SearchBar/style.js

dumi-theme-antd-style 是为 dumi2 打造的一款文档站主题包，提供了更加美观、易用的研发与阅读体验

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
import { createStyles } from 'antd-style';
export var useStyles = createStyles(function (_ref) {
  var token = _ref.token,
    responsive = _ref.responsive,
    css = _ref.css,
    cx = _ref.cx;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      // TODO: support search for mobile devices\n      ", " {\n        display: none;\n      }\n    "])), responsive.mobile),
    shortcut: cx('site-header-shortcut', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 50%;\n        inset-inline-end: 11px;\n        display: inline-block;\n        padding: 4px 8px;\n        color: ", ";\n        font-size: 12px;\n        line-height: 1;\n        white-space: nowrap;\n        background-color: ", ";\n        border-radius: 11px;\n        border: 1px solid ", ";\n        transform: translateY(-50%);\n        transition: all 0.3s;\n        pointer-events: none;\n\n        ", " {\n          display: none;\n        }\n      "])), token.colorTextDescription, token.colorFillSecondary, token.colorBorderSecondary, responsive.mobile)),
    popover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 100%;\n      inset-inline-end: 0;\n      display: flex;\n      flex-direction: column;\n      width: 540px;\n      max-height: 460px;\n      margin-top: 18px;\n      background-color: ", ";\n      border-radius: 8px;\n      box-shadow: 0 4px 30px rgba(0, 0, 0, 20%);\n\n      &::before {\n        content: '';\n        position: absolute;\n        bottom: 100%;\n        inset-inline-end: 100px;\n        display: inline-block;\n        width: 0;\n        height: 0;\n        border: 8px solid transparent;\n        border-bottom-color: #fff;\n      }\n\n      > section {\n        flex: 1;\n        min-height: 60px;\n        overflow: auto;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        border-radius: inherit;\n      }\n    "])), token.colorBgElevated),
    svg: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: 50%;\n        margin-top: 1px;\n        inset-inline-start: 16px;\n        width: 16px;\n        color: ", ";\n        transform: translateY(-50%);\n      "])), token.colorTextPlaceholder)),
    input: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      width: 280px;\n      height: ", "px;\n      padding: 0;\n      padding-inline-start: 40px;\n      padding-inline-end: 12px;\n      color: ", ";\n      font-size: 14px;\n      border: 1px solid ", ";\n      border-radius: 20px;\n      box-sizing: border-box;\n      outline: none;\n      transition: all 0.3s;\n      background-color: transparent;\n\n      &:focus {\n        border-color: ", ";\n        background: ", ";\n\n        ~ .site-header-shortcut {\n          opacity: 0;\n        }\n      }\n\n      &::-webkit-input-placeholder {\n        color: ", ";\n      }\n    "])), token.controlHeightLG, token.colorTextSecondary, token.colorBorder, token.colorBorderSecondary, token.colorBgElevated, token.colorTextPlaceholder)
  };
});