JustalK/PORTFOLIO

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