@taiga-ui/kit
Version:
Taiga UI Angular main components kit
50 lines (45 loc) • 1.32 kB
text/less
@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);
}
}