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

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem } from 'polished';
import { slate, grayscale } from '../../color/colors.esm.js';

var ICON_SIZE = rem(48);
var BORDER_RADIUS = rem(5);
var TRANSITION = '300ms ease-in-out';
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __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 = css(templateObject_2 || (templateObject_2 = __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 = css(templateObject_3 || (templateObject_3 = __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.a(templateObject_4 || (templateObject_4 = __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.button(templateObject_5 || (templateObject_5 = __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"])), slate(200), BORDER_RADIUS);
var Background = styled.div(templateObject_6 || (templateObject_6 = __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.div(templateObject_7 || (templateObject_7 = __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.div(templateObject_8 || (templateObject_8 = __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.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  text-align: center;\n  padding: ", ";\n"], ["\n  text-align: center;\n  padding: ", ";\n"])), rem(24));
var Icon = styled.div(templateObject_10 || (templateObject_10 = __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"])), rem(8), ICON_SIZE, ICON_SIZE, grayscale(100));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

export { Anchor, Background, CardCategory, CardContent, CardContentWrap, Icon, Overlay, Wrapper };