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/common / lib / LoaderView / LoaderView.styled.js
Size: Mime:
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;