@vimeo/iris/components/LoaderCircular/LoaderCircular.style.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var styled = require('styled-components');
var polished = require('polished');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var sizes = {
    xl: polished.rem(40),
    lg: polished.rem(26),
    md: polished.rem(24),
    sm: polished.rem(16),
    xs: polished.rem(12),
};
var rotate = styled.keyframes(templateObject_1 || (templateObject_1 = tslib_es6.__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 styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n    animation: ", " ", "ms linear infinite;\n  "], ["\n    animation: ", " ", "ms linear infinite;\n  "])), rotate, speed);
}
var LoaderCircular = styled__default["default"].div(templateObject_3 || (templateObject_3 = tslib_es6.__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) || styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__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    "])), polished.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;

exports.LoaderCircular = LoaderCircular;