@vimeo/iris/typography/Link/Link.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 Link = styled__default["default"].span(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var variant = _a.variant, theme = _a.theme, format = _a.format;
    if (!format || !theme.formats[format])
        format = 'primary';
    var color = theme.formats[format];
    var hoverColor = polished.tint(0.15, color);
    return styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n      color: ", ";\n      display: inline;\n      position: relative;\n      padding: 0;\n      font-size: inherit;\n      line-height: inherit;\n      text-decoration: none;\n      border: 0;\n      background-color: transparent;\n      transition: all 0.1s ease-in-out;\n      appearance: none;\n      cursor: pointer;\n\n      &:hover {\n        color: ", ";\n      }\n\n      &::-moz-focus-inner {\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      &:active {\n        cursor: wait;\n      }\n\n      ", "\n    "], ["\n      color: ", ";\n      display: inline;\n      position: relative;\n      padding: 0;\n      font-size: inherit;\n      line-height: inherit;\n      text-decoration: none;\n      border: 0;\n      background-color: transparent;\n      transition: all 0.1s ease-in-out;\n      appearance: none;\n      cursor: pointer;\n\n      &:hover {\n        color: ", ";\n      }\n\n      &::-moz-focus-inner {\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      &:active {\n        cursor: wait;\n      }\n\n      ", "\n    "])), color, hoverColor, variant !== 'minimal' && styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n        &::after {\n          display: block;\n          position: absolute;\n          bottom: ", ";\n          left: 0;\n          width: 100%;\n          height: 1em;\n          margin-top: ", ";\n          border-bottom: ", " solid currentColor;\n          content: '';\n        }\n      "], ["\n        &::after {\n          display: block;\n          position: absolute;\n          bottom: ", ";\n          left: 0;\n          width: 100%;\n          height: 1em;\n          margin-top: ", ";\n          border-bottom: ", " solid currentColor;\n          content: '';\n        }\n      "])), polished.rem(-2), polished.rem(10), polished.rem(1)));
});
var templateObject_1, templateObject_2, templateObject_3;

exports.Link = Link;