UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

50 lines (45 loc) 1.32 kB
@import '@taiga-ui/core/styles/taiga-ui-local.less'; /** * @name Compass * @selector tui-compass * * @description * A compass arrow for the map * * @vars * --t-degrees — rotation * * @example * <tui-compass style="--t-degrees: 45deg"></tui-compass> * * @see-also * Pin */ tui-compass { position: relative; display: inline-block; color: var(--tui-background-accent-1); border-radius: 50%; inline-size: 1rem; block-size: 1rem; border: 0.1875rem solid var(--tui-background-base); box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3); transform-style: preserve-3d; // z-index doesn't work on pseudo-element &::before { content: ''; position: absolute; top: 0; left: 0.125rem; mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>'); transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem); inline-size: 0.75rem; block-size: 1rem; background: currentColor; } &::after { .fullsize(absolute, inset); content: ''; border-radius: inherit; background: currentColor linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent); } }