| 1 | import styled from 'styled-components';
|
| 2 |
|
| 3 | import { Colors, Sizes } from '../index';
|
| 4 |
|
| 5 | const Hiperlink = styled.a<{isType?: string; isActiveRoute?: boolean; }>`
|
| 6 | font-family: "sentico-sans-medium";
|
| 7 | -webkit-font-smoothing: antialiased;
|
| 8 | transition: all 0.15s ease-in-out;
|
| 9 | display: inline-block;
|
| 10 | cursor: pointer;
|
| 11 | text-decoration: none;
|
| 12 | will-change: transform;
|
| 13 |
|
| 14 | & svg {
|
| 15 | position: relative;
|
| 16 | top: 3px;
|
| 17 | height: 16px;
|
| 18 | fill:none;
|
| 19 | stroke: ${Colors.mongeral};
|
| 20 | stroke-miterlimit: 10;
|
| 21 | stroke-width: 2px;
|
| 22 | margin-left: 6px;
|
| 23 | }
|
| 24 |
|
| 25 | ${({ isType }) => (isType === 'forward' || isType === 'backward') && `
|
| 26 | &:hover {
|
| 27 | .switch-arrow-elements {
|
| 28 | transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
|
| 29 | }
|
| 30 |
|
| 31 | .switch-arrow-elements.one {
|
| 32 | stroke: ${Colors.line};
|
| 33 | transform: translateX(-1px);
|
| 34 | }
|
| 35 |
|
| 36 | .switch-arrow-elements.two {
|
| 37 | stroke: ${Colors.regalBlue};
|
| 38 | transform: translateX(5px);
|
| 39 | }
|
| 40 | }
|
| 41 | `}
|
| 42 |
|
| 43 | ${({ isType }) => isType === 'arrow-plus' && `
|
| 44 | .link-arrow-elements {
|
| 45 | fill: none;
|
| 46 | transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
|
| 47 | }
|
| 48 |
|
| 49 | &:hover .link-arrow-elements {
|
| 50 | stroke: ${Colors.regalBlue};
|
| 51 | transform: translateX(5px);
|
| 52 | }
|
| 53 | `}
|
| 54 |
|
| 55 | ${({ isType }) => isType === 'download' && `
|
| 56 | .link-arrow-elements {
|
| 57 | fill: none;
|
| 58 | transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
|
| 59 | }
|
| 60 |
|
| 61 | &:hover .link-arrow-elements {
|
| 62 | stroke: ${Colors.regalBlue};
|
| 63 | transform: translateX(3px);
|
| 64 | }
|
| 65 | `}
|
| 66 |
|
| 67 | ${({ isType }) => isType === 'plus' && `
|
| 68 | .plus { transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out; }
|
| 69 | &:hover .plus { stroke: ${Colors.regalBlue}; }
|
| 70 | &:hover .plus.up { transform: translate(0, -4px); }
|
| 71 | &:hover .plus.right { transform: translate(4px, 0); }
|
| 72 | &:hover .plus.down { transform: translate(0, 4px); }
|
| 73 | &:hover .plus.left { transform: translate(-4px, 0); }
|
| 74 | `}
|
| 75 |
|
| 76 | ${({ className }) => className !== 'navItem' && `
|
| 77 | color: ${Colors.mongeral};
|
| 78 | text-transform: uppercase;
|
| 79 | &:hover { color: ${Colors.regalBlue}; }
|
| 80 | ` }
|
| 81 |
|
| 82 | ${({ className }) => className === 'navItem' && `
|
| 83 | color: ${Colors.support};
|
| 84 | display: block;
|
| 85 | margin-bottom: ${Sizes.s4}px;
|
| 86 | text-transform: capitalize;
|
| 87 | font-family: inherit;
|
| 88 |
|
| 89 | &:hover {
|
| 90 | color: ${Colors.line};
|
| 91 | }
|
| 92 | ` }
|
| 93 |
|
| 94 | ${({ isActiveRoute }) => isActiveRoute && `
|
| 95 | position: relative;
|
| 96 | font-family: 'sentico-sans-medium';
|
| 97 | &:before {
|
| 98 | content: '';
|
| 99 | position: absolute;
|
| 100 | height: 25px;
|
| 101 | width: 3px;
|
| 102 | left: -${Sizes.s5}px;
|
| 103 | top: -4px;
|
| 104 | background-color: ${Colors.mongeral};
|
| 105 | }
|
| 106 | ` }
|
| 107 | `;
|
| 108 |
|
| 109 | export default Hiperlink;
|