110 lines
2.6 KiB
SCSS
110 lines
2.6 KiB
SCSS
|
@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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|