JustalK/PORTFOLIO

View on GitHub
src/assets/less/back.less

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
.blocks-square(@index, @pos_x, @pos_y, @color) {
& div {
position: absolute;
width: 20px;
height: 20px;
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
&:nth-child(@{index}) {
@{pos_x}: @BACK_BLOCKS_DISTANCE;
@{pos_y}: @BACK_BLOCKS_DISTANCE;
background: @color;
}
}
}
 
.blocks-square-hover(@index, @pos_x, @pos_y) {
div:nth-child(@{index}) {
@{pos_x}: 0;
@{pos_y}: 0;
}
}
 
.back {
position: absolute;
left: -75px;
top: 100px;
width: 185px;
height: 50px;
transform-origin: left;
transform: translateY(165px) rotateZ(-90deg);
 
& div {
cursor: pointer;
display: flex;
justify-content: space-between;
 
& a {
width: 50px;
height: 50px;
transform: rotateZ(45deg);
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
.blocks-square(1, left, top, @background-bloc-0);
.blocks-square(2, right, top, @background-bloc-1);
.blocks-square(3, right, bottom, @background-bloc-2);
.blocks-square(4, left, bottom, @background-bloc-3);
}
 
& .legend {
display: flex;
.transition(all 0.25s ease 0.75s);
 
& span {
font-family: 'Lato-Light', sans-serif;
font-weight: bold;
color: #fff;
font-size: 4rem;
}
}
}
 
&.is_animated,
&.invisible {
& div {
& a {
transform: rotateZ(45deg) scale(0);
}
 
& .legend {
transform: translateX(-200%);
opacity: 0;
}
}
}
 
&.is_activated div,
& div:hover {
& a {
transform: rotateZ(-45deg) scale(0.8);
.blocks-square-hover(1, left, top);
.blocks-square-hover(2, right, top);
.blocks-square-hover(3, right, bottom);
.blocks-square-hover(4, left, bottom);
}
 
& span {
color: @text-color;
 
&:hover {
color: @background-bloc-2;
.transition(all 0.25s ease);
}
}
}
}
 
@media screen and (max-width: @SCREEN_1200) {
.back {
left: -55px;
}
}
 
@media screen and (max-width: @SCREEN_900) {
.back {
display: none;
}
}