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

dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on @lobehub/ui

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
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),
    input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      box-sizing: border-box;\n      width: 280px;\n      height: ", "px;\n      padding: 0;\n      padding-inline-start: 40px;\n      padding-inline-end: 12px;\n\n      font-size: 14px;\n      color: ", ";\n\n      background-color: transparent;\n      border: 1px solid ", ";\n      border-radius: 20px;\n      outline: none;\n\n      transition: all 0.3s;\n\n      &::input-placeholder {\n        color: ", ";\n      }\n\n      &:focus {\n        background: ", ";\n        border-color: ", ";\n\n        ~ .site-header-shortcut {\n          opacity: 0;\n        }\n      }\n    "])), token.controlHeightLG, token.colorTextSecondary, token.colorBorder, token.colorTextPlaceholder, token.colorBgElevated, token.colorBorderSecondary),
    popover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 100%;\n      inset-inline-end: 0;\n\n      overflow: auto;\n      overscroll-behavior: contain;\n      flex: 1;\n\n      width: 540px;\n      min-height: 60px;\n      max-height: 400px;\n      margin-top: 8px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      box-shadow: ", ";\n\n      -webkit-overflow-scrolling: touch;\n\n      .dumi-default-search-result {\n        > dl {\n          > dt {\n            color: ", ";\n            background: ", ";\n          }\n\n          > dd {\n            > a {\n              > h4 {\n                color: ", ";\n              }\n\n              > p {\n                color: ", ";\n              }\n\n              &:hover {\n                background: ", ";\n              }\n            }\n\n            + dd {\n              border-color: ", ";\n            }\n          }\n        }\n\n        mark {\n          color: #000;\n          background: ", ";\n        }\n      }\n    "])), token.colorBgElevated, token.colorBorder, token.borderRadiusLG, token.boxShadow, token.colorText, token.colorFillTertiary, token.colorTextSecondary, token.colorTextDescription, token.colorFillSecondary, token.colorBorderSecondary, token.yellow9),
    shortcut: cx('site-header-shortcut', css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        pointer-events: none;\n\n        position: absolute;\n        top: 50%;\n        inset-inline-end: 11px;\n        transform: translateY(-50%);\n\n        display: inline-block;\n\n        padding: 4px 8px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        white-space: nowrap;\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: 11px;\n\n        transition: all 0.3s;\n\n        ", " {\n          display: none;\n        }\n      "])), token.colorTextDescription, token.colorFillSecondary, token.colorBorderSecondary, responsive.mobile)),
    svg: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 50%;\n      inset-inline-start: 16px;\n      transform: translateY(-50%);\n\n      width: 16px;\n      margin-top: 1px;\n\n      color: ", ";\n    "])), token.colorTextPlaceholder))
  };
});