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