@vimeo/iris/components/CardCategory/CardCategory.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 ICON_SIZE = polished.rem(48);
var BORDER_RADIUS = polished.rem(5);
var TRANSITION = '300ms ease-in-out';
var Wrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n"], ["\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
var commonSize = styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
var bgOverlay = styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  top: 0;\n  left: 0;\n  border-radius: ", ";\n  transition: transform ", ", opacity ", ";\n"], ["\n  ", ";\n  top: 0;\n  left: 0;\n  border-radius: ", ";\n  transition: transform ", ", opacity ", ";\n"])), commonSize, BORDER_RADIUS, TRANSITION, TRANSITION);
var Anchor = styled__default["default"].a(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n  text-decoration: none;\n  position: relative;\n  outline: none;\n"], ["\n  text-decoration: none;\n  position: relative;\n  outline: none;\n"])));
var CardCategory = styled__default["default"].button(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n  outline: none;\n  display: flex;\n  border: 0;\n  transition: 150ms;\n\n  &:focus {\n    outline: none;\n    transform: scale(1.025);\n  }\n\n  &:hover {\n    cursor: pointer;\n    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);\n    transform: scale(1.035);\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n  outline: none;\n  display: flex;\n  border: 0;\n  transition: 150ms;\n\n  &:focus {\n    outline: none;\n    transform: scale(1.025);\n  }\n\n  &:hover {\n    cursor: pointer;\n    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);\n    transform: scale(1.035);\n  }\n"])), color_colors.slate(200), BORDER_RADIUS);
var Background = styled__default["default"].div(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  pointer-events: none;\n  background-size: cover;\n  background-position: center;\n  background-image: ", ";\n\n  ", ":hover &,\n  ", ":focus &,\n  ", ":focus & {\n    transform: scale(1.05);\n  }\n"], ["\n  ", ";\n  pointer-events: none;\n  background-size: cover;\n  background-position: center;\n  background-image: ", ";\n\n  ", ":hover &,\n  ", ":focus &,\n  ", ":focus & {\n    transform: scale(1.05);\n  }\n"])), bgOverlay, function (_a) {
    var bg = _a.bg;
    return "url(".concat(bg, ")");
}, CardCategory, CardCategory, Anchor);
var Overlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  opacity: 0.7;\n  background-image: linear-gradient(\n    -180deg,\n    rgba(0, 0, 0, 0) 0%,\n    rgba(0, 0, 0, 1) 100%\n  );\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"], ["\n  ", ";\n  opacity: 0.7;\n  background-image: linear-gradient(\n    -180deg,\n    rgba(0, 0, 0, 0) 0%,\n    rgba(0, 0, 0, 1) 100%\n  );\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), bgOverlay, CardCategory);
var CardContentWrap = styled__default["default"].div(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), commonSize);
var CardContent = styled__default["default"].div(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n  text-align: center;\n  padding: ", ";\n"], ["\n  text-align: center;\n  padding: ", ";\n"])), polished.rem(24));
var Icon = styled__default["default"].div(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n  margin-bottom: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  margin-bottom: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"])), polished.rem(8), ICON_SIZE, ICON_SIZE, color_colors.grayscale(100));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

exports.Anchor = Anchor;
exports.Background = Background;
exports.CardCategory = CardCategory;
exports.CardContent = CardContent;
exports.CardContentWrap = CardContentWrap;
exports.Icon = Icon;
exports.Overlay = Overlay;
exports.Wrapper = Wrapper;