@vimeo/iris/components/Card/Card.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 Card = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__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"])), polished.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 styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__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
        ? polished.rem(3) + ' ' + formats.primary
        : polished.rem(8) + ' 0 rgba(0, 0, 0, 0.1)';
    return (!$loading && styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__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 = polished.rgba(content.color, 0.334);
    return (!$loading &&
        !selected && styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__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    "])), polished.rem(1), borderColor));
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.Card = Card;
exports.boxShadow = boxShadow;
exports.hoverStyles = hoverStyles;