@vimeo/iris/components/CounterIcon/CounterIcon.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 typography_typography = require('../../typography/typography.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var size = 18;
var CounterIcon = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
var Icon = styled__default["default"].span(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"])), polished.rem(5), polished.rem(4), polished.rem(size), polished.rem(size), polished.rem(size), polished.rem(size), function (_a) {
    var theme = _a.theme;
    return theme.formats.soft;
});
var Content = styled__default["default"].span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  padding: ", " ", " ", " ", ";\n  color: ", ";\n  border: 0;\n  border-radius: ", ";\n  background: transparent;\n  transition: 100ms ease-in-out;\n  text-align: center;\n  vertical-align: middle;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  ", ";\n\n  ", ":hover & {\n    background-color: ", ";\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  padding: ", " ", " ", " ", ";\n  color: ", ";\n  border: 0;\n  border-radius: ", ";\n  background: transparent;\n  transition: 100ms ease-in-out;\n  text-align: center;\n  vertical-align: middle;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  ", ";\n\n  ", ":hover & {\n    background-color: ", ";\n  }\n"])), polished.rem(4), polished.rem(4), polished.rem(4), polished.rem(size + 10), function (_a) {
    var theme = _a.theme;
    return theme.formats.soft;
}, polished.rem(3), typography_typography.antialias, CounterIcon, polished.rgba(162, 175, 184, 0.16));
var templateObject_1, templateObject_2, templateObject_3;

exports.Content = Content;
exports.CounterIcon = CounterIcon;
exports.Icon = Icon;