Repository URL to install this package:
|
Version:
3.12.20 ▾
|
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;