Repository URL to install this package:
|
Version:
3.12.16 ▾
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { keyframes } from 'styled-components';
import { PC, FV } from '@filerobot/common';
var dotsLoaderAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n color: white;\n box-shadow: 10px 0 gray, -10px 0 white;\n opacity: 1;\n }\n 50% {\n color: gray;\n box-shadow: 10px 0 white, -10px 0 gray;\n opacity: 0.6;\n }\n 100% {\n color: gray;\n box-shadow: 10px 0 gray, -10px 0 white;\n opacity: 0.2;\n }\n"])));
var barGradientAnimation = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0% {\n background-position: -3em 0;\n }\n 100% {\n background-position: 0 0;\n }\n"])));
var progressAnimation = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
var Loader = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1200;\n background: rgba(255, 255, 255, 0.4);\n ", ";\n color: ", ";\n\n [data-filerobot-floaty=\"true\"] & {\n top: 32px;\n }\n"])), function (_ref) {
var typography = _ref.theme.typography;
return typography.font[FV.LabelExtraLarge];
}, function (_ref2) {
var theme = _ref2.theme;
return theme.palette[PC.IconsPrimary];
});
var LoaderWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin: auto;\n align-items: center;\n align-content: center;\n gap: 16px;\n width: 100%;\n position: sticky;\n box-sizing: border-box;\n text-align: center;\n color: ", ";\n\n [data-filerobot-floaty=\"true\"] & {\n top: 50%;\n }\n"])), function (_ref3) {
var theme = _ref3.theme;
return theme.palette[PC.IconsPrimary];
});
var LabelWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: baseline;\n gap: 12px;\n width: fit-content;\n position: sticky;\n box-sizing: border-box;\n text-align: center;\n color: ", ";\n \n [data-filerobot-floaty=\"true\"] & {\n top: 50%;\n }\n"])), function (_ref4) {
var theme = _ref4.theme;
return theme.palette[PC.IconsPrimary];
});
var LoadingLabel = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
var DotsLoader = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: currentColor;\n display: flex;\n box-sizing: border-box;\n animation: ", " 2s linear infinite;\n"])), dotsLoaderAnimation);
var ProgressBarLoader = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: block;\n position: relative;\n height: 10px;\n width: 250px;\n border: 1px solid ", ";\n border-radius: 10px;\n overflow: hidden;\n \n &::after {\n content: '';\n position: absolute;\n height: 10px;\n width: 0;\n top: 0;\n left: 0;\n background-size: 3em 1em;\n background-image: linear-gradient(\n 100deg,\n rgba(104, 121, 235, 1) 0%,\n rgba(104, 121, 235, .8) 25%,\n rgba(104, 121, 235, .6) 50%,\n rgba(104, 121, 235, .8) 75%,\n rgba(104, 121, 235, 1) 100%\n );\n animation: 0.5s ", " linear infinite, 7s ", " ease-in infinite;\n }\n"])), function (_ref5) {
var theme = _ref5.theme;
return theme.palette[PC.BordersItem];
}, barGradientAnimation, progressAnimation);
var Styled = {
Loader: Loader,
LoaderWrapper: LoaderWrapper,
LabelWrapper: LabelWrapper,
LoadingLabel: LoadingLabel,
DotsLoader: DotsLoader,
ProgressBarLoader: ProgressBarLoader
};
export default Styled;