chaoszone.cz/site/css/menu.scss
2017-11-10 13:28:35 +01:00

184 lines
3.4 KiB
SCSS

@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);
}
}
}
}