JustalK/PORTFOLIO

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

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
.slide {
height: 100%;
 
& .borders_bottom_left,
& .borders_top_right {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: @LAYER-COUCHE-1;
 
&::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;
background: linear-gradient(to top, transparent, #61c3ff);
transform: translateY(100%);
animation: going_top 8s linear infinite;
animation-delay: 4s;
}
 
@keyframes going_top {
0% {
transform: translateY(100%);
}
 
100% {
transform: translateY(-100%);
}
}
}
 
& .slider_ads {
position: absolute;
left: 30%;
top: calc(400px - 88px);
color: white;
width: 70%;
text-align: center;
animation: blinker 3s linear infinite;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.5s);
}
 
@keyframes blinker {
50% {
opacity: 0;
}
}
 
& .slider_images {
position: absolute;
right: 0;
width: 70%;
height: calc(400px - 85px);
top: 0;
margin-top: 41px;
border-bottom: 1px solid black;
background: #1d1d23e8;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.5s);
 
& img {
position: absolute;
right: 50%;
top: 50%;
width: 480px;
height: 280px;
border: 1px solid black;
transform: translateX(200%);
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
&.loaded {
transform: translateX(50%) translateY(-50%);
}
}
}
 
& .slider_legend {
position: absolute;
bottom: 0;
right: 0;
top: calc(400px - 44px);
width: 70%;
text-align: center;
background: #1d1d23;
height: 44px;
display: block;
line-height: 42px;
color: white;
border-top: 1px solid black;
font-size: 1.2rem;
font-family: 'Lato-Bold', sans-serif;
box-shadow: 0 0 5px rgb(0 0 0 / 75%);
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 1s);
}
 
.informations {
position: absolute;
left: 0;
top: 0;
padding-top: 42px;
height: calc(100% - 42px);
width: 30%;
background: #1d1d23ab;
min-width: 250px;
border-right: 1px solid black;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.25s);
 
& .slider_index {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
 
& li {
height: 42px;
list-style-type: none;
background: #1d1d23;
padding-left: 10px;
display: flex;
border-top: 1px solid black;
align-items: center;
font-size: 1.2rem;
font-family: 'Lato-Bold', sans-serif;
color: white;
position: relative;
 
&::before {
content: ' ';
display: block;
width: 15px;
height: 15px;
margin-right: 8px;
background: #302c30;
border-radius: 50%;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
}
 
&:hover {
&::before {
background: #61c3ff;
}
}
 
&.selected {
&::before {
background: white;
}
}
}
}
 
& .field {
margin: 20px;
 
& span:nth-child(1) {
display: block;
padding-bottom: 10px;
.font-size(1.5);
}
 
& span:nth-child(2) {
font-family: 'Lato-Bold', sans-serif;
color: @text-color-white;
.font-size(1.2);
}
}
}
 
.description {
position: absolute;
right: 0;
bottom: 0;
background: rgba(29, 29, 35, 0.8);
width: calc(70% - 1px);
height: 200px;
overflow: hidden;
border-top: 1px solid black;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.75s);
 
& .block {
position: absolute;
left: 0;
width: 100%;
height: 100%;
 
& .block_information {
position: absolute;
left: 44px;
height: 100%;
background: rgb(17 17 22);
transform: skewX(-20deg);
display: flex;
justify-content: center;
align-items: center;
 
& span {
transform: skewX(20deg);
font-size: 1.5rem;
width: 330px;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
}
}
 
& .block_title {
position: absolute;
width: 42px;
height: 200%;
bottom: 0;
transform: translateY(25%) rotateZ(20deg);
background: #302c30;
text-align: center;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
 
& span {
font-family: 'Lato-Bold', sans-serif;
transform: rotateZ(-90deg);
font-size: 1.2rem;
color: white;
}
}
 
&.block_1 {
left: 111px;
width: calc(100% - 111px);
z-index: 2;
.transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
 
& .block_information {
width: calc(100% - 109px);
}
}
 
&.block_2 {
left: 66px;
width: calc(100% - 66px);
z-index: 1;
 
& .block_information {
width: calc(100% - 109px);
}
}
}
 
&.loading {
& .block {
& .block_information {
span {
opacity: 0;
}
}
}
}
 
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 130px;
height: 100%;
background: @text-color-h2;
border-right: 1px solid @background-shadow;
transform: skewX(-20deg) translateX(-50%);
z-index: 3;
}
 
&::after {
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 130px;
height: 100%;
background: @text-color-h2;
border-left: 1px solid @background-shadow;
transform: skewX(-20deg) translateX(50%);
z-index: 3;
}
 
&:hover {
& .block_1 {
transform: translate3d(calc(100% - 109px), 0, 0);
}
}
}
 
&.invisible {
& .informations {
transform: translateY(-100%);
}
 
& .slider_images {
transform: translateX(100%);
}
 
& .slider_ads {
transform: translateX(100%);
}
 
& .slider_legend {
transform: translateX(100%);
}
 
& .description {
transform: translateY(100%);
}
}
}
 
@media screen and (max-width: @SCREEN_1200) {
.slide {
& .informations {
height: calc(100% - 243px);
min-width: initial;
 
& .slider_index {
display: flex;
flex-wrap: wrap;
 
& li {
width: calc(50% - 10px);
}
}
}
 
& .description {
width: 100%;
}
}
}
 
@media screen and (max-width: @SCREEN_900) {
.slide {
& .slider_images {
width: 100%;
}
 
& .slider_ads {
left: 0;
width: 100%;
}
 
& .slider_legend {
width: 100%;
border-bottom: 1px solid @background-shadow;
}
 
& .informations {
top: 400px;
padding-top: 0;
height: calc(100% - 400px);
 
& .slider_index {
display: unset;
 
& li {
width: unset;
}
}
}
 
& .description_mobile {
background: #1d1d23;
position: absolute;
right: 0;
bottom: 0;
width: calc(70% - 1px);
height: calc(100% - 400px);
overflow: auto;
 
& span {
font-size: 1.5rem;
padding: 20px;
display: block;
}
}
 
& .description {
display: none;
}
}
}
 
@media screen and (max-width: @MOBILE) {
.slide {
& .informations {
width: 100%;
height: 180px;
top: unset;
bottom: 0;
display: flex;
justify-content: space-evenly;
background: #302c30db;
 
& .field {
margin: 20px;
width: 20%;
}
 
& .slider_index {
display: flex;
 
& li {
width: calc(50% - 20px);
padding-left: 20px;
}
}
}
 
& .description_mobile {
width: 100%;
height: 319px;
bottom: 180px;
background: #302c30db;
border-bottom: 1px solid black;
}
}
}