ultra-design/lib/select/select-style.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var fade = require('../utils/fade.js');
var slide = require('../styles/transition/slide.js');

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

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

var _templateObject, _templateObject2;
var selectLayerStyles = function selectLayerStyles(props) {
  var theme = props.theme;
  var _theme$style = theme.style,
      radius = _theme$style.radius,
      boxShadow = _theme$style.boxShadow;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      thirdBackgroundColor = _theme$theme$mode.thirdBackgroundColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    &.", "-layer-wrapper {\n      .", " {\n        transform-origin: top;\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n        border-radius: ", "px;\n        &__content {\n          padding: 8px 0;\n        }\n      }\n\n      .", "__content {\n        width: 100%;\n        max-height: 300px;\n      }\n      ", "\n    }\n  "])), props.name, props.name, thirdBackgroundColor, textColor, boxShadow, radius, props.name, slide.transitionSlide('ultra-select-layer-slide'));
};
var selectStyles = function selectStyles(props) {
  var theme = props.theme;
  var _theme$style2 = theme.style,
      primaryColor = _theme$style2.primaryColor,
      radius = _theme$style2.radius;
  var _theme$theme$mode2 = theme[theme.mode],
      borderColor = _theme$theme$mode2.borderColor,
      backgroundColor = _theme$theme$mode2.backgroundColor,
      textColor = _theme$theme$mode2.textColor,
      disabledBgColor = _theme$theme$mode2.disabledBgColor,
      disabledTextColor = _theme$theme$mode2.disabledTextColor;
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    display: inline-flex;\n    align-items: center;\n    height: 32px;\n    min-width: 140px;\n    margin: 0;\n    list-style: none;\n    position: relative;\n    color: ", ";\n    font-size: 14px;\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    transition: all 0.3s;\n    cursor: pointer;\n    user-select: none;\n    :focus {\n      outline: 0;\n    }\n    &.ultra-select--focused {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n    &.ultra-select--disabled {\n      cursor: not-allowed;\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n    .ultra-select__selection {\n      margin-left: 12px;\n      flex: 1;\n      display: flex;\n      align-items: center;\n      white-space: nowrap;\n    }\n\n    .ultra-select__placeholder {\n      color: ", ";\n    }\n\n    &:not(&.ultra-input--disabled):hover {\n      border-color: ", ";\n    }\n\n    .ultra-icon {\n      display: inline-flex;\n    }\n\n    .ultra-select__icon {\n      width: 32px;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    input {\n      margin-left: 12px;\n      border: 0;\n      outline: 0;\n      flex: 1;\n    }\n  "])), textColor, backgroundColor, borderColor, radius, primaryColor, fade.fade(primaryColor, 0.2), disabledBgColor, disabledTextColor, fade.fade(textColor, 0.3), primaryColor);
};

exports.selectLayerStyles = selectLayerStyles;
exports.selectStyles = selectStyles;