Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@filerobot/explorer / lib / components / AddFilesPanel / AddFiles.styled.js
Size: Mime:
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { PC, FV } from '@filerobot/common';
import styled, { css } from 'styled-components';
import { CrossButton as SfxCrossButton } from '@scaleflex/ui/core';
var AddFilesPanelWrapper = styled.div(function (_ref) {
  var palette = _ref.theme.palette,
    showDragDropPanel = _ref.showDragDropPanel;
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    color: ", ";\n    box-shadow: 0px 2px 6px ", ";\n    overflow: hidden;\n    z-index: 1005;\n    border-radius: 4px;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    ", "\n  "])), palette[PC.BackgroundSecondary], palette[PC.HeavyShadow], showDragDropPanel && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-radius: 4px;\n      background: ", ";\n    "])), palette[PC.BackgroundSecondary]));
});
var AcquirersMainBody = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding: 40px;\n  overflow-y: auto;\n"])));
var AcquirersWrapper = styled.div(function (_ref2) {
  var _ref2$theme = _ref2.theme,
    palette = _ref2$theme.palette,
    breakpoints = _ref2$theme.breakpoints,
    showFilerobotCopyright = _ref2.showFilerobotCopyright;
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    min-height: 520px;\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      padding: 24px 16px 16px 16px;\n    }\n  "])), showFilerobotCopyright ? '16px 16px 0 16px' : '16px', palette[PC.BordersPrimary], breakpoints.down('md'));
});
var AcquirersList = styled.div(function (_ref3) {
  var breakpoints = _ref3.theme.breakpoints;
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat( auto-fill, minmax(130px, 130px));\n    justify-content: center;\n    width: 100%;\n    max-width: 556px;\n    flex-wrap: wrap;\n    gap: 12px;\n\n    ", " {\n      max-width: 1040px;\n      grid-template-columns: repeat( auto-fill, minmax(160px, 160px));\n      gap: 16px;\n    }\n  "])), breakpoints.up('xxl'));
});
var Acquirer = styled.div(function (_ref4) {
  var breakpoints = _ref4.theme.breakpoints;
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 130px;\n    height: 110px;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n      width: 42px;\n      height: 42px;\n    }\n\n    ", " {\n      width: 160px;\n      height: 160px;\n\n      svg {\n        width: 62px;\n        height: 62px;\n      }\n    }\n  "])), breakpoints.up('xxl'));
});
var AcquirerButtons = styled.div(function (_ref5) {
  var breakpoints = _ref5.theme.breakpoints;
  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 130px;\n    height: 110px;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    cursor: pointer;\n\n    ", " {\n      width: 160px;\n      height: 160px;\n    }\n  "])), breakpoints.up('xxl'));
});
var AcquirerButton = styled.button(function (_ref6) {
  var _ref6$theme = _ref6.theme,
    palette = _ref6$theme.palette,
    breakpoints = _ref6$theme.breakpoints;
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 130px;\n    height: 110px;\n    border: 0;\n    padding: 0;\n    border-radius: 4px;\n    background-color: ", ";\n    box-shadow: 0px 2px 6px ", ";\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", "\n    }\n\n    svg {\n      width: 42px;\n      height: 42px;\n    }\n\n    ", " {\n      width: 160px;\n      height: 160px;\n\n      svg {\n        width: 62px;\n        height: 62px;\n      }\n    }\n  "])), palette[PC.BackgroundStateless], palette[PC.LargeShadow], palette[PC.BackgroundPrimaryHover], breakpoints.up('xxl'));
});
var DropFilesTitle = styled.div(function (_ref7) {
  var _ref7$theme = _ref7.theme,
    palette = _ref7$theme.palette,
    breakpoints = _ref7$theme.breakpoints;
  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: 24px;\n    line-height: 28px;\n    margin-bottom: 16px;\n    background: ", ";\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      font-size: 32px;\n      line-height: 36px;\n      margin-bottom: 28px;\n    }\n  "])), palette[PC.BackgroundStateless], palette[PC.TextPrimary], breakpoints.up('xxl'));
});
var BrowseButton = styled.button(function (_ref8) {
  var _ref8$theme = _ref8.theme,
    palette = _ref8$theme.palette,
    breakpoints = _ref8$theme.breakpoints;
  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    font-size: 24px;\n    line-height: 28px;\n    border: 0;\n    cursor: pointer;\n    background: ", ";\n    color: ", ";\n\n    ", " {\n      font-size: 32px;\n      line-height: 36px;\n    }\n  "])), palette[PC.BackgroundStateless], palette[PC.AccentStateless], breakpoints.up('xxl'));
});
var ImportLabel = styled.span(function (_ref9) {
  var _ref9$theme = _ref9.theme,
    palette = _ref9$theme.palette,
    breakpoints = _ref9$theme.breakpoints;
  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    margin: 0 16px;\n    font-size: 14px;\n    line-height: 20px;\n    color: ", ";\n    white-space: nowrap;\n\n    ", " {\n      font-size: 16px;\n      line-height: 22px;\n    }\n  "])), palette[PC.TextSecondary], breakpoints.up('xxl'));
});
var PowerdByLabel = styled.span(function (_ref10) {
  var palette = _ref10.theme.palette;
  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    position: absolute;\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    bottom: 0;\n    right: 16px;\n    margin-top: auto;\n    padding: 11px 0;\n    font-size: 12px;\n    line-height: 14px;\n    z-index: -1;\n    color: ", ";\n  "])), palette[PC.TextSecondary]);
});
var FilerobotLabel = styled.span(function (_ref11) {
  var palette = _ref11.theme.palette;
  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    line-height: 14px;\n    font-weight: 500;\n    margin-left: 2px;\n    color: ", ";\n  "])), palette[PC.TextSecondary]);
});
var DragDropNote = styled.span(function (_ref12) {
  var palette = _ref12.theme.palette;
  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    font-size: 0.8em;\n    color: ", ";\n  "])), palette[PC.TextPrimary]);
});
var AcquirerButtonsLabel = styled.div(function (_ref13) {
  var _ref13$theme = _ref13.theme,
    palette = _ref13$theme.palette,
    breakpoints = _ref13$theme.breakpoints;
  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-top: 10px;\n    color: ", ";\n    ", ";\n\n    ", " {\n      margin-top: 12px;\n\n      ", ";\n    }\n  "])), palette[PC.TextPrimary], function (_ref14) {
    var theme = _ref14.theme;
    return theme.typography.font[FV.LabelSmall];
  }, breakpoints.up('xxl'), function (_ref15) {
    var theme = _ref15.theme;
    return theme.typography.font[FV.LabelLarge];
  });
});
var DropFilesImportLabel = styled.div(function (_ref16) {
  var _ref16$theme = _ref16.theme,
    palette = _ref16$theme.palette,
    breakpoints = _ref16$theme.breakpoints;
  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    display: flex;\n    width: 100%;\n    max-width: 556px;\n    height: 22px;\n    margin-bottom: 16px;\n    text-align: center;\n\n    ", " {\n      margin-bottom: 28px;\n      max-width: 1040px;\n    }\n\n    &::before {\n      content: \"\";\n      height: 11px;\n      border-bottom: 1px solid ", ";\n      width: 50%;\n    }\n\n    &::after {\n      content: \"\";\n      height: 11px;\n      border-bottom: 1px solid ", ";\n      width: 50%;\n    }\n  "])), breakpoints.up('xxl'), palette[PC.BordersSecondary], palette[PC.BordersSecondary]);
});
var ExplorerTopBar = styled.div(function (_ref17) {
  var _ref17$theme = _ref17.theme,
    palette = _ref17$theme.palette,
    breakpoints = _ref17$theme.breakpoints;
  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 64px;\n    padding: 24px 24px 20px 24px;\n    border: 1px solid ", ";\n    background: ", ";\n\n    ", " {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n  "])), palette[PC.BordersSecondary], palette[PC.BackgroundStateless], breakpoints.down('md'), breakpoints.classes.sm);
});
var ExplorerTopBarTitle = styled.div(function (_ref18) {
  var _ref18$theme = _ref18.theme,
    palette = _ref18$theme.palette,
    breakpoints = _ref18$theme.breakpoints;
  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    font-size: 18px;\n    line-height: 20px;\n    color: ", ";\n\n    ", " {\n      padding: 16px 16px 14px 16px;\n    }\n  "])), palette[PC.TextPrimary], breakpoints.down('md'));
});
var CloseButton = styled(SfxCrossButton)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  padding: 0;\n\n  ", "\n"])), function (_ref19) {
  var breakpoints = _ref19.theme.breakpoints;
  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    ", " {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    ", " & {\n      top: 16px;\n      right: 16px;\n    }\n\n    &:hover {\n      background-color: unset;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
});
var InfoWrapper = styled.div(function (_ref20) {
  var hasAcquirers = _ref20.hasAcquirers,
    _ref20$theme = _ref20.theme,
    palette = _ref20$theme.palette,
    breakpoints = _ref20$theme.breakpoints;
  return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    text-align: center;\n    width: 100%;\n    font-size: 14px;\n    line-height: 20px;\n    color: ", ";\n    margin-top: ", ";\n\n    ", " {\n      font-size: 16px;\n      line-height: 22px;\n      margin-top: ", "\n    }\n\n    ", "\n  "])), palette[PC.TextSecondary], hasAcquirers ? '16px' : 0, breakpoints.up('xxl'), hasAcquirers ? '28px' : 0, hasAcquirers && css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      ", " & {\n        margin-top: 12px;\n      }\n    "])), breakpoints.classes.md));
});
var Styled = {
  AddFilesPanelWrapper: AddFilesPanelWrapper,
  AcquirersMainBody: AcquirersMainBody,
  AcquirersWrapper: AcquirersWrapper,
  AcquirersList: AcquirersList,
  Acquirer: Acquirer,
  AcquirerButtons: AcquirerButtons,
  AcquirerButton: AcquirerButton,
  DropFilesTitle: DropFilesTitle,
  BrowseButton: BrowseButton,
  DropFilesImportLabel: DropFilesImportLabel,
  ImportLabel: ImportLabel,
  PowerdByLabel: PowerdByLabel,
  FilerobotLabel: FilerobotLabel,
  AcquirerButtonsLabel: AcquirerButtonsLabel,
  DragDropNote: DragDropNote,
  ExplorerTopBar: ExplorerTopBar,
  ExplorerTopBarTitle: ExplorerTopBarTitle,
  CloseButton: CloseButton,
  InfoWrapper: InfoWrapper
};
export default Styled;