more cleanup

This commit is contained in:
nek0 2023-11-25 05:50:52 +01:00
parent 3c4c254bd7
commit 782311c832
3 changed files with 0 additions and 297 deletions

View File

@ -1,56 +0,0 @@
.tooltip-toggle {
cursor: pointer;
//position: relative;
//Tooltip text container
&::before {
position: absolute;
top: -30px;
//left: -80px;
background-color: #00ff00;
border-radius: 5px;
color: #fff;
content: attr(aria-label); //This pulls in the text from the element with the tooltip
padding: 1ex;
text-transform: none;
font-weight: bold;
transition: all 0.5s ease;
width: 160px;
line-height: 16px;
}
//Tooltip arrow
//&::after {
// position: absolute;
// top: -12px;
// left: 9px;
// border-left: 5px solid transparent;
// border-right: 5px solid transparent;
// border-top: 5px solid #2B222A;
// content: " ";
// font-size: 0;
// line-height: 0;
// margin-left: -5px;
// width: 0;
//}
//Setting up the transition
&::before,
&::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
//Triggering the transition
&:focus::before,
&:focus::after,
&:hover::before,
&:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
}

View File

@ -1,58 +0,0 @@
@function fact($number) {
$value: 1;
@if $number > 0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
}
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
@function pi() {
@return 3.14159265359;
}
@function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
// If the angle has 'deg' as unit, convert to radians.
@if $unit == deg {
$unitless: $unitless / 180 * pi();
}
@return $unitless;
}
@function sin($angle) {
$sin: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
@return $sin;
}
@function cos($angle) {
$cos: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
}
@return $cos;
}

View File

@ -1,183 +0,0 @@
@import "math";
// vars
$fg:#ff0000;
$bg:#00ff00;
// config
$menu-items: 5;
$open-distance: 110px;
$start-angle: (0 - pi()) / 2;
$opening-angle: pi() + 0;
.menu {
//@extend %goo;
$width:300px;
$height:300px;
//$width: 250px + (150px * abs(cos($start-angle)));
//$height: 250px + (150px * abs(sin($start-angle)));
position:fixed;
//left:50%;
display: inline-block;
margin-left:-$width/2;
padding-top:$height/2;
padding-left:$width/2;
padding-bottom:-$height/2;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
%ball {
background: $bg;
border-radius: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
position: absolute;
top: 50%;
color: white;
text-align:center;
line-height: 80px;
transform: translate3d(0,0,0);
transition:transform ease-out 200ms;
svg {
padding-top: 10px;
width: 60px;
height: 60px;
}
}
.menu-open {
display: none;
}
.menu-item {
@extend %ball;
}
.hamburger {
$width: 25px;
$height: 3px;
width: $width;
height: $height;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -$width/2;
margin-top: -$height/2;
transition: transform 200ms;
}
$hamburger-spacing:8px;
.hamburger-1 {
transform:translate3d(0,-$hamburger-spacing,0);
}
.hamburger-2 {
transform:translate3d(0,0,0);
}
.hamburger-3 {
transform:translate3d(0,$hamburger-spacing,0);
}
.menu-open:checked + .menu-open-button {
.hamburger-1 {
transform:translate3d(0,0,0) rotate(45deg);
}
.hamburger-2 {
transform:translate3d(0,0,0) scale(0.1,1);
}
.hamburger-3 {
transform:translate3d(0,0,0) rotate(-45deg);
}
}
.menu-item {
&:hover {
background:#acffac;
color:$fg;
}
@for $i from 1 through $menu-items {
&:nth-child(#{$i+2}) {
transition-duration:10ms+(60ms*($i));
}
}
}
.menu-open-button {
@extend %ball;
z-index:2;
//transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.0);
transition-duration:400ms;
transform:scale(1.1,1.1) translate3d(0,0,0);
cursor:pointer;
}
.menu-open-button:hover {
transform:scale(1.2,1.2) translate3d(0,0,0);
}
.menu-open:checked + .menu-open-button {
transition-timing-function:linear;
transition-duration:200ms;
transform:scale(0.8,0.8) translate3d(0,0,0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function:cubic-bezier(0.935, 0.000, 0.340, 1.330);
@for $i from 1 through $menu-items {
$angle:((pi() - pi())/2)+((pi()/($menu-items - 1))*($i - 1) + $start-angle);
&:nth-child(#{$i+2}) {
transition-duration:80ms+(80ms*$i);
transform:translate3d(cos($angle)*$open-distance,sin($angle)*$open-distance,0);
}
}
}
@media screen and (max-width: 600px){
.menu {
position: relative;
padding-top: 0;
padding-bottom: 0;
height: 80px;
width: 100%;
}
%ball {
$dim: 1.4cm;
width: $dim;
height: $dim;
line-height: $dim;
svg {
$dim: 1.2cm;
padding-top: 0.1cm;
width: $dim;
height: $dim;
}
}
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
@for $i from 1 through $menu-items{
&:nth-child(#{$i+2}){
transition-duration:90ms+(100ms*$i);
transform:translate3d(1.4cm*$i,0,0);
}
}
}
}