JustalK/PORTFOLIO

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

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
.position-to-corner(@index, @pos_x, @pos_y, @delay, @x, @y) {
&:nth-child(@{index}) {
transition: opacity 0.5s cubic-bezier(0.8, 0, 0.25, 1) @delay, transform 0.5s cubic-bezier(0.8, 0, 0.25, 1) @delay;
@{pos_x}: @x;
@{pos_y}: @y;
}
}
 
.design-arrow(@pos_y, @right, @left) {
content: '';
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
position: absolute;
width: 50px;
height: 1px;
background: @background-bloc-0;
top: 50%;
@{pos_y}: 0;
.if(@pos_y, right, transform, translateY(-50%) rotateZ(@right));
.if(@pos_y, left, transform, translateY(-50%) rotateZ(@left));
 
transform-origin: @pos_y;
}
 
.position-arrow(@pos_y) {
position: absolute;
@{pos_y}: -120px;
width: 100px;
height: 100%;
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
cursor: pointer;
 
&.invisible {
opacity: 0;
}
 
& > span {
position: absolute;
transition: transform 0.35s cubic-bezier(0.8, 0, 0.25, 1), opacity 0.2s cubic-bezier(0.8, 0, 0.25, 1);
.if(@pos_y, right, transform, translateX(100%) translateY(-50%));
.if(@pos_y, left, transform, translateX(-100%) translateY(-50%));
 
opacity: 0;
top: 50%;
@{pos_y}: 0;
line-height: 18px;
color: @background-bloc-0;
user-select: none;
.font-size(1.2);
}
 
em::before,
&::before {
.design-arrow(@pos_y, -50deg, 50deg);
}
 
em::after,
&::after {
.design-arrow(@pos_y, 50deg, -50deg);
}
 
em::after,
em::before {
width: 20px;
.if(@pos_y, right, right, -5px);
.if(@pos_y, left, left, -5px);
}
 
&:hover {
&::before,
&::after {
background: @text-color-white;
}
 
& ~ ul > li {
.if(@pos_y, right, transform, translateX(-30px));
.if(@pos_y, left, transform, translateX(30px));
}
 
em::before {
.if(@pos_y, right, transform, translateX(15px) translateY(-50%) rotateZ(-50deg));
.if(@pos_y, left, transform, translateX(-15px) translateY(-50%) rotateZ(50deg));
}
 
em::after {
.if(@pos_y, right, transform, translateX(15px) translateY(-50%) rotateZ(50deg));
.if(@pos_y, left, transform, translateX(-15px) translateY(-50%) rotateZ(-50deg));
}
 
& > span {
transition: transform 0.35s cubic-bezier(0.8, 0, 0.25, 1), opacity 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.15s;
opacity: 1;
.if(@pos_y, right, transform, translateX(-15px) translateY(-50%));
.if(@pos_y, left, transform, translateX(15px) translateY(-50%));
 
color: @text-color-white;
}
}
}
 
#PROJECTS {
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
height: 600px;
min-height: 600px;
position: relative;
opacity: 1;
 
& ul {
list-style-type: none;
margin: 0;
}
 
& .previous {
.position-arrow(left);
}
 
& .next {
.position-arrow(right);
}
 
& li {
float: left;
width: 48%;
height: 280px;
border: 1px solid #000;
position: absolute;
transform: initial;
opacity: 1;
 
.position-to-corner(1, top, left, 0s, 0, 0);
.position-to-corner(2, top, right, 0.25s, 0, 0);
.position-to-corner(3, bottom, left, 0.5s, 0, 0);
.position-to-corner(4, bottom, right, 0.75s, 0, 0);
 
& .borders_bottom_left,
& .borders_top_right {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
 
&::after,
&::before {
content: ' ';
position: absolute;
z-index: @LAYER-ANIMATION;
}
}
 
& .borders_top_right {
&::before {
width: 100%;
height: 1px;
top: 0;
left: 0;
background: linear-gradient(to right, transparent, #61c3ff);
animation: going_right 8s linear infinite;
}
 
@keyframes going_right {
0% {
transform: translateX(-100%);
}
 
100% {
transform: translateX(100%);
}
}
 
&::after {
width: 1px;
height: 100%;
top: 0;
right: 0;
background: linear-gradient(to bottom, transparent, #61c3ff);
transform: translateY(-100%);
animation: going_down 8s linear infinite;
animation-delay: 4s;
}
 
@keyframes going_down {
0% {
transform: translateY(-100%);
}
 
100% {
transform: translateY(100%);
}
}
}
 
& .borders_bottom_left {
&::before {
width: 100%;
height: 1px;
bottom: 0;
right: 0;
background: linear-gradient(to left, transparent, #61c3ff);
animation: going_left 8s linear infinite;
}
 
@keyframes going_left {
0% {
transform: translateX(100%);
}
 
100% {
transform: translateX(-100%);
}
}
 
&::after {
width: 1px;
height: 100%;
bottom: 0;
left: 0;
transform: translateY(100%);
background: linear-gradient(to top, transparent, #61c3ff);
animation: going_top 8s linear infinite;
animation-delay: 4s;
}
 
@keyframes going_top {
0% {
transform: translateY(100%);
}
 
100% {
transform: translateY(-100%);
}
}
}
 
&.invisible {
transform: translateY(100%);
opacity: 0;
}
 
& a {
overflow: hidden;
position: relative;
display: block;
background: @text-color-dark;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
background-size: cover;
background-position: center center;
transition: all 0.5s cubic-bezier(0.8, 0, 0.25, 1);
 
& i {
.button-window(10px, 12px, #61c3ff);
 
&::before {
content: ' ';
.button-window(20px, 0, #005c94);
}
 
&::after {
content: ' ';
.button-window(40px, 0, #dc4242);
}
}
 
& .panel {
.transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1) 0.25s);
 
position: absolute;
transform: translateY(-100%);
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: #0a2234e6;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset;
 
&::before {
content: ' ';
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
width: 100%;
height: 100%;
position: absolute;
}
 
& div {
text-align: center;
transform: translateY(-50%);
display: block;
color: white;
width: 80%;
margin: 0 10%;
position: absolute;
top: calc(50% + 20px);
text-shadow: 0 0 8px #000;
overflow: hidden;
.font-size(1.6);
 
&::after {
content: ' ';
position: absolute;
bottom: 0;
height: 1px;
width: 0;
background: white;
left: 50%;
transform: translateX(-50%);
.transition(width 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.35s);
}
 
& span {
display: block;
padding-bottom: 10px;
transform: translateY(100%);
.transition(transform 0.35s cubic-bezier(0.8, 0, 0.25, 1) 0.55s);
}
}
}
 
&::before {
content: ' ';
width: 100%;
height: calc(100% - 40px);
top: 40px;
position: absolute;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset;
}
 
& .low {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-size: cover;
background-position: center center;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.75) inset;
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
&.loaded {
opacity: 0;
}
}
 
&:hover {
box-shadow: 0 0 @background-shadow;
 
& .projects-header {
color: @text-color-white;
}
 
& .projects-header::after {
left: 0;
}
 
& .panel,
& .low {
transform: translateY(0);
}
 
& .panel {
.transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1));
 
& span {
transform: translateY(0);
}
 
& div::after {
width: 100%;
}
}
}
}
 
& h2 {
font-family: 'Lato-Bold', sans-serif;
position: absolute;
width: 100%;
top: 0;
color: @text-color-white;
background: @text-color-h2;
height: 40px;
pointer-events: none;
z-index: @LAYER-COUCHE-1;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
border-bottom: 1px solid black;
overflow: hidden;
line-height: 40px;
text-align: center;
margin: 0;
text-transform: uppercase;
transition: all 0.25s ease 0.5s;
.font-size(1.2);
}
 
&:hover {
& h2 {
transition: all 0.25s ease 0.3s;
color: @background-bloc-2;
}
 
& .borders_bottom_left,
& .borders_top_right {
opacity: 1;
}
}
}
}
 
.mounted {
& #PROJECTS {
& li {
&.filtered {
opacity: 0;
}
 
&.project-unmounted {
opacity: 0;
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
}
 
&.project-selected {
transform: translateX(0);
 
& .panel {
transform: translateY(0);
 
&::before {
background: @background-bloc-3;
}
 
& span {
transform: translateY(100%);
.transition(transform 0.35s cubic-bezier(0.8, 0, 0.25, 1));
}
 
& div::after {
width: 0;
.transition(width 0.2s cubic-bezier(0.8, 0, 0.25, 1) 0.35s);
}
}
 
& h2 {
color: @background-bloc-2;
}
}
 
&.project-mounted {
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
width: 100%;
height: 100%;
}
}
}
}
 
@media screen and (max-width: @SCREEN_1200) {
#PROJECTS {
& .previous {
left: -75px;
}
 
& .next {
right: -75px;
}
}
}
 
@media screen and (max-width: @SCREEN_900) {
#PROJECTS {
height: 860px;
margin-bottom: 120px;
 
& ul {
padding: 0;
}
 
& li {
height: 200px;
position: absolute;
float: initial;
width: 100%;
 
.position-to-corner(1, top, left, 0s, 0, 0);
.position-to-corner(2, top, right, 0.25s, 220px, 0);
.position-to-corner(3, bottom, left, 0.5s, 220px, 0);
.position-to-corner(4, bottom, right, 0.75s, 0, 0);
 
& i {
display: none;
}
 
& h2 {
.font-size(1.2);
}
}
 
& .previous {
left: 40px;
bottom: -120px;
height: 100px;
}
 
& .next {
right: 40px;
bottom: -120px;
height: 100px;
}
}
}