@vimeo/iris/components/Tip/Tip.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 components_Tip_Tip_settings = require('./Tip.settings.js');
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 fadeIn = styled.keyframes(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  0% {\n    transform: translateY(0.15rem) scale(0.995);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0) scale(1) rotate(0deg);\n    opacity: 1\n  }\n"], ["\n  0% {\n    transform: translateY(0.15rem) scale(0.995);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0) scale(1) rotate(0deg);\n    opacity: 1\n  }\n"])));
var Tip = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  max-width: ", "rem !important;\n  animation: ", " 120ms ease-in-out;\n  will-change: transform;\n  visibility: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  max-width: ", "rem !important;\n  animation: ", " 120ms ease-in-out;\n  will-change: transform;\n  visibility: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"])), components_Tip_Tip_settings.maxWidth, fadeIn, function (_a) {
    var disabled = _a.disabled;
    return (disabled ? 'hidden' : 'visible');
}, pill, variants, themes);
function themes(_a) {
    var theme = _a.theme;
    var opacity = theme.name === 'dark' ? 0.2 : 0.05;
    var color = theme.content.color;
    return styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n    border: 1px solid ", ";\n  "], ["\n    border: 1px solid ", ";\n  "])), polished.rgba(color, opacity));
}
function pill(_a) {
    var _b = _a.pill, pill = _b === void 0 ? false : _b;
    return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n    padding: 0.5rem ", ";\n    border-radius: ", ";\n  "], ["\n    padding: 0.5rem ", ";\n    border-radius: ", ";\n  "])), pill ? '1rem' : '0.5rem', pill ? '2rem' : '0.25rem');
}
function variants(_a) {
    var theme = _a.theme, $wrap = _a.$wrap, _b = _a.variant, variant = _b === void 0 ? 'simple' : _b;
    switch (variant) {
        case 'simple':
            return styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n        min-width: ", ";\n        background-color: ", ";\n        color: ", ";\n        text-align: center;\n\n        p {\n          color: ", ";\n        }\n      "], ["\n        min-width: ", ";\n        background-color: ", ";\n        color: ", ";\n        text-align: center;\n\n        p {\n          color: ", ";\n        }\n      "])), $wrap ? "".concat(components_Tip_Tip_settings.maxWidth / 2, "rem") : '0', color_colors.black, color_colors.white, color_colors.white);
        case 'speech-bubble':
            return styled.css(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n        max-width: ", "rem !important;\n        padding: 1.5rem;\n        background: ", ";\n        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.5rem -0.25rem,\n          rgba(0, 0, 0, 0.15) 0 0.75rem 0.75rem -0.75rem;\n        color: ", ";\n\n        ", ";\n\n        p {\n          color: ", ";\n        }\n      "], ["\n        max-width: ", "rem !important;\n        padding: 1.5rem;\n        background: ", ";\n        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.5rem -0.25rem,\n          rgba(0, 0, 0, 0.15) 0 0.75rem 0.75rem -0.75rem;\n        color: ", ";\n\n        ", ";\n\n        p {\n          color: ", ";\n        }\n      "])), components_Tip_Tip_settings.maxWidth * 1.25, theme.content.background, theme.content.color, caret, theme.content.color);
    }
}
function caret(_a) {
    var theme = _a.theme, attach = _a.attach;
    var _b = tslib_es6.__read(invert(attach), 3), side = _b[0], edge_1 = _b[1], edge_2 = _b[2];
    var _c = theme.content, background = _c.background, color = _c.color;
    var opacity = theme.name === 'dark' ? 0.25 : 0.15;
    var blur = theme.name === 'dark' ? '' : 'filter: blur(1px)';
    return styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n    &:after,\n    &:before {\n      content: '';\n      z-index: 5000;\n      position: absolute;\n      transform: translate3d(0, 0, 0);\n      ", ": calc(50% - 0.75rem);\n      ", ": -0.75rem;\n\n      border-", ": 0.75rem solid ", ";\n      border-", ": 0.75rem solid transparent;\n      border-", ": 0.75rem solid transparent;\n    }\n\n    &:before {\n      border-", ": 0.75rem solid ", ";\n      ", ": -0.83rem;\n      ", ";\n    }\n  "], ["\n    &:after,\n    &:before {\n      content: '';\n      z-index: 5000;\n      position: absolute;\n      transform: translate3d(0, 0, 0);\n      ", ": calc(50% - 0.75rem);\n      ", ": -0.75rem;\n\n      border-", ": 0.75rem solid ", ";\n      border-", ": 0.75rem solid transparent;\n      border-", ": 0.75rem solid transparent;\n    }\n\n    &:before {\n      border-", ": 0.75rem solid ", ";\n      ", ": -0.83rem;\n      ", ";\n    }\n  "])), edge_1, side, attach, background, edge_1, edge_2, attach, polished.rgba(color, opacity), side, blur);
}
function invert(attach) {
    if (attach === 'top')
        return ['bottom', 'left', 'right'];
    if (attach === 'bottom')
        return ['top', 'left', 'right'];
    if (attach === 'left')
        return ['right', 'top', 'bottom'];
    if (attach === 'right')
        return ['left', 'top', 'bottom'];
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

exports.Tip = Tip;