@vimeo/iris
Version:
Vimeo Design System
39 lines (36 loc) • 2.29 kB
JavaScript
import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { keyframes, css } from 'styled-components';
import { rem } from 'polished';
var sizes = {
xl: rem(40),
lg: rem(26),
md: rem(24),
sm: rem(16),
xs: rem(12),
};
var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { transform: rotate(0deg) }\n to { transform: rotate(360deg) }\n"], ["\n from { transform: rotate(0deg) }\n to { transform: rotate(360deg) }\n"])));
function loaderAnimation(_a) {
var _b, _c;
var theme = _a.theme;
var speed = ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.motion) === null || _b === void 0 ? void 0 : _b.loaderCircular) === null || _c === void 0 ? void 0 : _c.speed) || 800;
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: ", " ", "ms linear infinite;\n "], ["\n animation: ", " ", "ms linear infinite;\n "])), rotate, speed);
}
var LoaderCircular = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), loaderAnimation, shapeStyles);
function shapeStyles(_a) {
var _b, _c;
var theme = _a.theme, format = _a.format;
var color = theme.formats[format];
var borderColor = format === 'adapative' ? 'currentColor' : color;
return (((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.motion) === null || _b === void 0 ? void 0 : _b.loaderCircular) === null || _c === void 0 ? void 0 : _c.shape) || css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-width: ", ";\n border-style: solid;\n border-color: ", ";\n border-bottom-color: transparent !important;\n ", ";\n "], ["\n border-width: ", ";\n border-style: solid;\n border-color: ", ";\n border-bottom-color: transparent !important;\n ", ";\n "])), rem(2), borderColor, sizeStyles));
}
function sizeStyles(_a) {
var size = _a.size;
var loaderSize = sizes[size];
return {
width: loaderSize,
height: loaderSize,
borderRadius: loaderSize,
};
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
export { LoaderCircular };