ultra-design/lib/trigger/trigger-styles.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject;
var layerStyles = function layerStyles(props) {
  var mode = props.theme.mode;
  var radius = props.theme.style.radius;
  var _props$theme$mode = props.theme[mode],
      secondReverseBgColor = _props$theme$mode.secondReverseBgColor,
      reverseTextColor = _props$theme$mode.reverseTextColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    position: absolute;\n    z-index: 999;\n    &.", "-layer-wrapper {\n    }\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      border-radius: ", "px;\n    }\n    .", "__content {\n      white-space: nowrap;\n      word-wrap: break-word;\n      padding: 4px 6px;\n      width: max-content;\n      font-size: 14px;\n      min-width: 30px;\n      min-height: 16px;\n      max-height: calc(100vh - 200px);\n      overflow-y: auto;\n    }\n    .", "__arrow {\n      position: absolute;\n      width: 0;\n      height: 0;\n      border-style: solid;\n      border-width: 6px 7px 6px 0;\n      border-color: transparent ", " transparent transparent;\n      &--placement__topLeft {\n        bottom: -8px;\n        left: 9px;\n        transform: translate(0, 0) rotate(-90deg);\n      }\n      &--placement__top {\n        bottom: -8px;\n        left: 50%;\n        transform: translate(-50%, 0) rotate(-90deg);\n      }\n      &--placement__topRight {\n        bottom: -8px;\n        right: 9px;\n        transform: translate(0, 0) rotate(-90deg);\n      }\n      &--placement__rightTop {\n        top: 9px;\n        left: -6px;\n        transform: translate(0, 0) rotate(0deg);\n      }\n      &--placement__right {\n        top: 50%;\n        left: -6px;\n        transform: translate(0, -50%) rotate(0deg);\n      }\n      &--placement__rightBottom {\n        bottom: 9px;\n        left: -6px;\n        transform: translate(0, 0) rotate(0deg);\n      }\n      &--placement__bottomRight {\n        top: -8px;\n        right: 9px;\n        transform: translate(0, 0) rotate(90deg);\n      }\n      &--placement__bottom {\n        top: -8px;\n        left: 50%;\n        transform: translate(-50%, 0) rotate(90deg);\n      }\n      &--placement__bottomLeft {\n        top: -8px;\n        left: 9px;\n        transform: translate(0, 0) rotate(90deg);\n      }\n      &--placement__leftBottom {\n        bottom: 9px;\n        right: -6px;\n        transform: translate(0, 0) rotate(180deg);\n      }\n      &--placement__left {\n        top: 50%;\n        right: -6px;\n        transform: translate(0, -50%) rotate(180deg);\n      }\n      &--placement__leftTop {\n        top: 9px;\n        right: -6px;\n        transform: translate(0, 0) rotate(180deg);\n      }\n    }\n\n    div::-webkit-scrollbar {\n      -webkit-appearance: none;\n      width: 10px;\n    }\n    div::-webkit-scrollbar-thumb {\n      border-radius: 6px;\n      border: 2px solid ", ";\n      background-color: ", ";\n    }\n    div::-webkit-scrollbar-track {\n      background-color: transparent;\n      border-radius: 6px;\n    }\n  "])), props.name, props.name, secondReverseBgColor, reverseTextColor, radius, props.name, props.name, secondReverseBgColor, mode === 'dark' ? '#000' : '#fff', mode === 'dark' ? '#262626' : '#d8d8d8');
};

exports.layerStyles = layerStyles;