src/assets/less/back.less
@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; }}