ultra-design/lib/upload/upload-styles.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');

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

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

var _templateObject;
var uploadStyles = function uploadStyles(props) {
  var _props$theme$style = props.theme.style,
      radius = _props$theme$style.radius,
      errorColor = _props$theme$style.errorColor;
  var _props$theme$props$th = props.theme[props.theme.mode],
      textColor = _props$theme$props$th.textColor,
      borderColor = _props$theme$props$th.borderColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    font-size: 14px;\n    color: ", ";\n    .ultra-uplopd-content {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n    .ultra-uplopd-item {\n      position: relative;\n      overflow: hidden;\n      cursor: pointer;\n      border-radius: ", "px;\n      border: 1px solid ", ";\n      width: 100px;\n      height: 100px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background-color 0.3s;\n      &.ultra-uplopd-item--add {\n        border-style: dashed;\n      }\n      &:not(.ultra-uplopd-item--add) {\n        .ultra-uplopd-item__img {\n          width: 100px;\n          height: 100px;\n          border-radius: ", "px;\n          object-fit: cover;\n        }\n        .ultra-uplopd-item__remove {\n          width: 18px;\n          height: 18px;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          visibility: hidden;\n          color: #ffffff;\n          opacity: 1;\n          position: absolute;\n          top: 4px;\n          right: 4px;\n          transition: opacity 0.3s;\n          z-index: 10;\n          .i-icon {\n            display: inline-flex;\n            align-items: center;\n          }\n          &:hover {\n            background-color: #ffffff;\n            border-radius: 50%;\n            color: ", ";\n          }\n        }\n        .ultra-uplopd-item__error {\n          width: 100%;\n          background-color: ", ";\n          padding: 4px;\n          position: absolute;\n          bottom: 4px;\n          color: #fff;\n          display: flex;\n          z-index: 11;\n          .i-icon {\n            display: flex;\n            align-items: center;\n            margin-right: 4px;\n          }\n          &_text {\n            flex: 1;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n            font-size: 12px;\n          }\n        }\n        &:before {\n          visibility: hidden;\n          opacity: 0;\n          background-color: ", ";\n          content: '';\n          position: absolute;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          z-index: 1;\n        }\n        &:hover {\n          &:before,\n          .ultra-uplopd-item__remove {\n            visibility: visible;\n            opacity: 1;\n          }\n        }\n      }\n    }\n    .ultra-uplopd-input {\n      visibility: hidden;\n      width: 0;\n      height: 0;\n      overflow: hidden;\n    }\n  "])), textColor, radius, borderColor, radius, textColor, fade.fade(errorColor, 0.8), fade.fade('#000000', 0.4));
};

exports.uploadStyles = uploadStyles;