@wulperstudio/cms/node/components/InputBoxAddItems/styled.js

Wulper Studio Library Components CMS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InputBoxUploadImageWrapShow = exports.InputBoxUploadImageText = exports.InputBoxUploadImageShow = exports.InputBoxUploadImageFile = exports.InputBoxUploadImageClose = exports.InputBoxUploadImage = exports.Content = void 0;
var _material = require("@mui/material");
var Content = exports.Content = (0, _material.styled)('div')(function () {
  return {
    display: 'flex',
    margin: 0,
    maxWidth: '100%',
    overflow: 'hidden',
    overflowX: 'auto',
    padding: '0 0 15px 0',
    '&::-webkit-scrollbar': {
      width: '2px',
      height: '5px'
    },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 5px #F1F1F1',
      borderRadius: '10px'
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#C1C1C1',
      borderRadius: '10px'
    },
    '&::-webkit-scrollbar-thumb:hover': {
      backgroundColor: '#F1F1F1'
    }
  };
});
var InputBoxUploadImage = exports.InputBoxUploadImage = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'selected';
  }
})(function (_ref) {
  var theme = _ref.theme,
    selected = _ref.selected;
  return Object.assign({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    position: 'relative',
    width: '100px',
    minWidth: '100px',
    height: '100px',
    background: theme.palette.background["default"],
    border: "1px solid ".concat(theme.palette.background.paper),
    borderRadius: '10px',
    padding: '10px 0 15px 0',
    cursor: 'pointer',
    userSelect: 'none',
    margin: '0 15px 0 0'
  }, selected && {
    border: "2px solid ".concat(theme.palette.primary.main)
  });
});
var InputBoxUploadImageWrapShow = exports.InputBoxUploadImageWrapShow = (0, _material.styled)('div')(function () {
  return {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    minWidth: '80px',
    width: '80px',
    maxWidth: '80px',
    minHeight: '50px',
    height: '50px',
    maxHeight: '50px'
  };
});
var InputBoxUploadImageShow = exports.InputBoxUploadImageShow = (0, _material.styled)('img')(function () {
  return {
    maxWidth: '80px',
    maxHeight: '50px'
  };
});
var InputBoxUploadImageText = exports.InputBoxUploadImageText = (0, _material.styled)('span')(function (_ref2) {
  var theme = _ref2.theme;
  return {
    fontFamily: 'Poppins',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '12px',
    lineHeight: '16px',
    color: theme.palette.text.primary,
    maxWidth: '74px',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  };
});
var InputBoxUploadImageClose = exports.InputBoxUploadImageClose = (0, _material.styled)(_material.IconButton)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    position: 'absolute',
    top: '-5px',
    right: '-5px',
    width: '16px',
    height: '16px',
    backgroundColor: theme.palette.background["default"],
    padding: '0 1px 1px 0',
    boxShadow: '0px 4px 12px rgba(178, 190, 218, 0.5)',
    '&:hover': {
      backgroundColor: theme.palette.background["default"],
      opacity: 0.8
    }
  };
});
var InputBoxUploadImageFile = exports.InputBoxUploadImageFile = (0, _material.styled)('input')(function () {
  return {
    width: '0',
    maxWidth: '0',
    height: '0',
    maxHeight: '0',
    visibility: 'hidden'
  };
});