202 lines
4.5 KiB
SCSS
Vendored
202 lines
4.5 KiB
SCSS
Vendored
/*POSTS*/
|
|
#carrousel2 {
|
|
margin-top: 2rem;
|
|
|
|
.carrousel {
|
|
padding-bottom: 1.5em;
|
|
overflow: hidden;
|
|
outline-color: transparent;
|
|
.carrousel__container {
|
|
transition: transform 0.3s;
|
|
transform: translateZ(0);
|
|
&:after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
}
|
|
|
|
.carrousel__item {
|
|
float: left;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
> a {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
&:hover .item__link {
|
|
background-color: $color-main;
|
|
}
|
|
}
|
|
|
|
.item__body {
|
|
// position: absolute;
|
|
flex-basis: 60%;
|
|
padding: 90px;
|
|
color: $color-light;
|
|
background-color: $color-dark;
|
|
}
|
|
|
|
.item__title {
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
// width:770px;
|
|
color: $color-main;
|
|
font-size: 16px;
|
|
// &:before,
|
|
// &:after{
|
|
// content:"";
|
|
// position:absolute;
|
|
// top:0;
|
|
// width:7px;
|
|
// height:100%;
|
|
// background-color:$color-light;
|
|
// }
|
|
// &:before{
|
|
// left:0;
|
|
// }
|
|
// &:after{
|
|
// right:0;
|
|
// }
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 2px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: $color-main;
|
|
}
|
|
}
|
|
|
|
.item__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 1em;
|
|
color: $color-light;
|
|
background-color: $color-main;
|
|
font-size: calc(#{$globalfont} * 0.65);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
transition: background-color 0.3s;
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.carrousel,
|
|
.items {
|
|
position: relative;
|
|
}
|
|
|
|
.carrousel__next,
|
|
.carrousel__prev {
|
|
position: absolute;
|
|
width: 2.3em;
|
|
height: 2.3em;
|
|
background: url(~@/images/caroussel_arrow-right.png) 50% no-repeat;
|
|
background-size: contain;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
margin-top: -1.2em;
|
|
right: 0;
|
|
cursor: pointer;
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
.carrousel__prev {
|
|
background-image: url(~@/images/caroussel_arrow-left.png);
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
.carrousel__next--hidden,
|
|
.carrousel__prev--hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.carrousel__next:hover,
|
|
.carrousel__prev:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
#carrousel2 {
|
|
.carrousel__pagination {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
// left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#carrousel2 {
|
|
.carrousel__pagination__button {
|
|
background-color: rgba($color-main, 0.5);
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin: 0 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carrousel__pagination__button--active,
|
|
.carrousel__pagination__button:hover {
|
|
background-color: $color-main;
|
|
// transform: scale(1.4);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 800px) {
|
|
#carrousel2 {
|
|
.carrousel__pagination {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 799px) {
|
|
#carrousel2 {
|
|
.carrousel {
|
|
.item__body {
|
|
padding: 2em;
|
|
text-align: center;
|
|
}
|
|
.item__title .secondtitle {
|
|
padding-right: 5em;
|
|
font-size: calc(#{$globalfont} * 0.9);
|
|
}
|
|
.item img {
|
|
width: 70%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|