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

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem, rgba } from 'polished';

var Card = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: ", ";\n  width: 100%;\n  transform: scale(1) translate3d(0, 0, 0);\n  transition: border 170ms ease-in-out;\n\n  ", ";\n  ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    transition: box-shadow 120ms ease-in-out,\n      transform 120ms ease-in-out, opacity 120ms ease-in-out;\n    pointer-events: none;\n\n    ", ";\n  }\n"], ["\n  position: relative;\n  border-radius: ", ";\n  width: 100%;\n  transform: scale(1) translate3d(0, 0, 0);\n  transition: border 170ms ease-in-out;\n\n  ", ";\n  ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    transition: box-shadow 120ms ease-in-out,\n      transform 120ms ease-in-out, opacity 120ms ease-in-out;\n    pointer-events: none;\n\n    ", ";\n  }\n"])), rem(3), themeStyles, hoverStyles, boxShadow);
function themeStyles(_a) {
    var _b = _a.theme, formats = _b.formats, item = _b.item, content = _b.content, $loading = _a.$loading, selected = _a.selected;
    var background = $loading ? item.locked : item.bg;
    var borderColor = selected ? formats.primary : formats.secondary;
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: 1px solid ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: 1px solid ", ";\n  "])), content.color, background, borderColor);
}
function boxShadow(_a) {
    var formats = _a.theme.formats, $loading = _a.$loading, selected = _a.selected;
    var boxShadowColor = selected
        ? rem(3) + ' ' + formats.primary
        : rem(8) + ' 0 rgba(0, 0, 0, 0.1)';
    return (!$loading && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: 0 0 0 ", ";\n    "], ["\n      box-shadow: 0 0 0 ", ";\n    "])), boxShadowColor));
}
function hoverStyles(_a) {
    var content = _a.theme.content, $loading = _a.$loading, selected = _a.selected;
    var borderColor = rgba(content.color, 0.334);
    return (!$loading &&
        !selected && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &:hover {\n        border: ", " solid ", ";\n\n        box-shadow: rgba(0, 0, 0, 0.16667) 0 0.5rem 1rem -0.5rem,\n          rgba(0, 0, 0, 0.3334) 0 0 0.25rem -0.0625rem;\n      }\n    "], ["\n      &:hover {\n        border: ", " solid ", ";\n\n        box-shadow: rgba(0, 0, 0, 0.16667) 0 0.5rem 1rem -0.5rem,\n          rgba(0, 0, 0, 0.3334) 0 0 0.25rem -0.0625rem;\n      }\n    "])), rem(1), borderColor));
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

export { Card, boxShadow, hoverStyles };