Daggerheart-fvtt/scss/utils/_mixins.scss

110 lines
2.6 KiB
SCSS
Raw Normal View History

@mixin element-invisible {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
@mixin hide {
display: none;
}
@mixin centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/// Mixin to place items on a circle
/// @author Kitty Giraudel
/// @author Ana Tudor
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
@mixin on-circle-old($item-count, $circle-size, $item-size) {
position: relative;
width: $circle-size;
height: $circle-size;
padding: 0;
border-radius: 50%;
list-style: none;
> * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -($item-size / 2);
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);
}
$rot: $rot + $angle;
}
}
}
/// Mixin to place items on a circle responsively
/// $author Sơn Trần-Nguyễn
/// $author Hugo Giraudel
/// $author Ana Tudor
/// $param {percentage} [$item-size=20%] - Size of a single item as percentage of the circle.
/// $param {integer} [$max-items=8] - Max number of items to be placed on the circle
@mixin circle-blackmagic($item-size: 10%, $max-items: 32) {
$radius: math.div(100% * 50%, $item-size) + $item-size;
& > * {
display: block;
position: absolute;
// Move the items to center of the listing.
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
// Offset half the size so they are truly centered.
// Usually we use negative translation with transform,
// but transform is used for positioning them, so we
// use negative margin instead.
margin: -1 * math.div($item-size, 2);
// First one is always at the top.
&:nth-of-type(1) {
transform: rotate(270deg) translate($radius) rotate(90deg);
}
// Supports number of items from 1 to $max-items.
@for $index from 0 to $max-items + 1 {
@include circle-witchery($radius, $index);
}
}
}
@mixin circle-witchery($radius, $item-count) {
$angle: math.div(360, $item-count + 1);
&:nth-last-child(#{$item-count + 1}):first-child {
@for $index from 0 through $item-count {
$i: $index + 1;
$rot: $angle * ($i);
& ~ :nth-of-type(#{$i}) {
transform: rotate($rot * 1deg + 270deg % 360deg) translate($radius) rotate($rot * -1deg + 90deg);
}
}
}
}