more cleanup
This commit is contained in:
parent
3c4c254bd7
commit
782311c832
3 changed files with 0 additions and 297 deletions
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue