@vimeo/iris/components/Tip/Tip.style.esm.js

Vimeo Design System

import { a as __makeTemplateObject, _ as __read } from '../../tslib.es6-7f0e734f.js';
import styled, { keyframes, css } from 'styled-components';
import { rgba } from 'polished';
import { maxWidth } from './Tip.settings.esm.js';
import { black, white } from '../../color/colors.esm.js';

var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __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.div(templateObject_2 || (templateObject_2 = __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"])), 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 css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border: 1px solid ", ";\n  "], ["\n    border: 1px solid ", ";\n  "])), rgba(color, opacity));
}
function pill(_a) {
    var _b = _a.pill, pill = _b === void 0 ? false : _b;
    return css(templateObject_4 || (templateObject_4 = __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 css(templateObject_5 || (templateObject_5 = __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(maxWidth / 2, "rem") : '0', black, white, white);
        case 'speech-bubble':
            return css(templateObject_6 || (templateObject_6 = __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      "])), 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 = __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 css(templateObject_7 || (templateObject_7 = __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, 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;

export { Tip };