@vimeo/iris/components/Tabs/Tabs.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');
var color_colors = require('../../color/colors.js');

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

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

var Nav = styled__default["default"].ol(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  margin: 0 0 0.25rem;\n  padding: 0;\n  list-style-type: none;\n  border-radius: ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  margin: 0 0 0.25rem;\n  padding: 0;\n  list-style-type: none;\n  border-radius: ", ";\n\n  ", ";\n"])), function (p) { return (p.pill ? '2rem' : '0.25rem'); }, variant);
function variant(_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'minimalTransparent' : _b;
    return (variant === 'inlay' && styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n      background: ", ";\n      padding: 0.334rem 0;\n    "], ["\n      background: ", ";\n      padding: 0.334rem 0;\n    "])), function (p) { return p.theme.formats.secondary; }));
}
var Indicator = styled__default["default"].div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  background: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    width: ", "%;\n    height: ", ";\n    background-color: ", ";\n    transform: translateX(", "%);\n    transition: 120ms ease-in-out;\n  }\n"], ["\n  width: 100%;\n  background: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    width: ", "%;\n    height: ", ";\n    background-color: ", ";\n    transform: translateX(", "%);\n    transition: 120ms ease-in-out;\n  }\n"])), function (p) { return polished.rgba(p.theme.content.color, 0.1); }, function (p) { return 100 / p.width; }, polished.rem(2), color_colors.blue(500), function (p) { return p.position * 100; });
var templateObject_1, templateObject_2, templateObject_3;

exports.Indicator = Indicator;
exports.Nav = Nav;