1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Link = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
11 |
|
12 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
13 |
|
14 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
15 |
|
16 | var Link = (0, _index.styled)('a', function (_ref) {
|
17 | var $theme = _ref.$theme,
|
18 | $isAnimateUnderline = _ref.$isAnimateUnderline,
|
19 | $isFocusVisible = _ref.$isFocusVisible;
|
20 | var colors = $theme.colors,
|
21 | typography = $theme.typography,
|
22 | animation = $theme.animation,
|
23 | direction = $theme.direction;
|
24 | var underlineLTR = "linear-gradient(transparent calc(100% - 1px), ".concat(colors.linkHover, " 1px), linear-gradient(transparent calc(100% - 1px), ").concat(colors.linkText, " 1px)");
|
25 | var underlineRTL = "linear-gradient(transparent calc(100% - 1px), ".concat(colors.linkText, " 1px), linear-gradient(transparent calc(100% - 1px), ").concat(colors.linkHover, " 1px)");
|
26 | return _objectSpread({
|
27 | color: colors.linkText
|
28 | }, typography.font350, {
|
29 | fontSize: 'inherit',
|
30 | lineHeight: 'inherit',
|
31 | transitionProperty: !$isAnimateUnderline ? 'backgroundSize' : '',
|
32 | transitionDuration: animation.timing500,
|
33 | transitionTimingFunction: animation.easeOutQuinticCurve,
|
34 | position: 'relative',
|
35 | textDecoration: $isAnimateUnderline ? 'none' : 'underline',
|
36 | textUnderlinePosition: 'under',
|
37 | willChange: 'background-size',
|
38 | backgroundSize: direction === 'rtl' ? '100% 100%, 100% 100%' : '0% 100%, 100% 100%',
|
39 | backgroundRepeat: 'no-repeat',
|
40 | backgroundImage: $isAnimateUnderline ? direction === 'rtl' ? underlineRTL : underlineLTR : 'none',
|
41 | backgroundPosition: '0 bottom 0 bottom',
|
42 | ':hover': {
|
43 | color: colors.linkHover,
|
44 | backgroundSize: direction === 'rtl' ? '0% 100%, 100% 100%' : '100% 100%, 100% 100%'
|
45 | },
|
46 | ':focus': {
|
47 | outline: $isFocusVisible ? "3px solid ".concat(colors.accent) : 'none',
|
48 | outlineOffset: '1px',
|
49 | textDecoration: 'none'
|
50 | },
|
51 | ':visited': {
|
52 | color: colors.linkVisited
|
53 | },
|
54 | ':active': {
|
55 | color: colors.linkActive
|
56 | }
|
57 | });
|
58 | });
|
59 | exports.Link = Link;
|
60 | Link.displayName = "Link"; |
\ | No newline at end of file |