155 lines
5.4 KiB
SCSS
155 lines
5.4 KiB
SCSS
:root {
|
|
--swiper-navigation-size: 1.5rem;
|
|
--swiper-navigation-color: $blanc;
|
|
}
|
|
|
|
#swiper-hero {
|
|
max-height: 700px;
|
|
}
|
|
|
|
.swiper-hero-pagination,
|
|
.swiper-product-pagination {
|
|
z-index: 1;
|
|
|
|
.swiper-pagination-bullet {
|
|
border: 2px solid #{$text-color};
|
|
background: transparent;
|
|
opacity: 1;
|
|
}
|
|
.swiper-pagination-bullet-active { background: $text-color; }
|
|
}
|
|
|
|
.swiper-slide { height: auto; }
|
|
|
|
.swiper-button-prev {
|
|
right: calc(100% - calc(var(--swiper-navigation-size) * 1.5));
|
|
left: unset;
|
|
}
|
|
|
|
.swiper-button-next {
|
|
right: unset;
|
|
left: calc(100% - calc(var(--swiper-navigation-size) * 1.5));
|
|
}
|
|
|
|
.swiper-engag-btn-prev,
|
|
.swiper-engag-btn-next { top: calc(#{$svg-engag-width} / 2); }
|
|
|
|
// SSSSSSSSSSSSSSS MMMMMMMM MMMMMMMM
|
|
// SS:::::::::::::::SM:::::::M M:::::::M
|
|
// S:::::SSSSSS::::::SM::::::::M M::::::::M
|
|
// S:::::S SSSSSSSM:::::::::M M:::::::::M
|
|
// S:::::S M::::::::::M M::::::::::M
|
|
// S:::::S M:::::::::::M M:::::::::::M
|
|
// S::::SSSS M:::::::M::::M M::::M:::::::M
|
|
// SS::::::SSSSS M::::::M M::::M M::::M M::::::M
|
|
// SSS::::::::SS M::::::M M::::M::::M M::::::M
|
|
// SSSSSS::::S M::::::M M:::::::M M::::::M
|
|
// S:::::SM::::::M M:::::M M::::::M
|
|
// S:::::SM::::::M MMMMM M::::::M
|
|
// SSSSSSS S:::::SM::::::M M::::::M
|
|
// S::::::SSSSSS:::::SM::::::M M::::::M
|
|
// S:::::::::::::::SS M::::::M M::::::M
|
|
// SSSSSSSSSSSSSSS MMMMMMMM MMMMMMMM
|
|
@include media-breakpoint-up(sm) { // >= 576px
|
|
.btn-inox {
|
|
$size-btn-nav: 50px;
|
|
|
|
@include size($size-btn-nav);
|
|
|
|
translate: 0 -25%;
|
|
|
|
&::after {
|
|
@include size($size-btn-nav);
|
|
|
|
background: no-repeat center/cover url("@/images/homepage/fleche-inox.png");
|
|
content: "";
|
|
}
|
|
|
|
&.swiper-button-prev {
|
|
right: unset;
|
|
left: 2rem;
|
|
}
|
|
|
|
&.swiper-button-next {
|
|
right: 2rem;
|
|
left: unset;
|
|
rotate: 180deg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
// M:::::::M M:::::::MD::::::::::::DDD
|
|
// M::::::::M M::::::::MD:::::::::::::::DD
|
|
// M:::::::::M M:::::::::MDDD:::::DDDDD:::::D
|
|
// M::::::::::M M::::::::::M D:::::D D:::::D
|
|
// M:::::::::::M M:::::::::::M D:::::D D:::::D
|
|
// M:::::::M::::M M::::M:::::::M D:::::D D:::::D
|
|
// M::::::M M::::M M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M::::M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::M M::::::M D:::::D D:::::D
|
|
// M::::::M MMMMM M::::::M D:::::D D:::::D
|
|
// M::::::M M::::::MDDD:::::DDDDD:::::D
|
|
// M::::::M M::::::MD:::::::::::::::DD
|
|
// M::::::M M::::::MD::::::::::::DDD
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
@include media-breakpoint-up(md) { // >= 768px
|
|
}
|
|
|
|
// LLLLLLLLLLL GGGGGGGGGGGGG
|
|
// L:::::::::L GGG::::::::::::G
|
|
// L:::::::::L GG:::::::::::::::G
|
|
// LL:::::::LL G:::::GGGGGGGG::::G
|
|
// L:::::L G:::::G GGGGGG
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G GGGGGGGGGG
|
|
// L:::::L G:::::G G::::::::G
|
|
// L:::::L G:::::G GGGGG::::G
|
|
// L:::::L G:::::G G::::G
|
|
// L:::::L LLLLLL G:::::G G::::G
|
|
// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G
|
|
// L::::::::::::::::::::::L GG:::::::::::::::G
|
|
// L::::::::::::::::::::::L GGG::::::GGG:::G
|
|
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
|
@include media-breakpoint-up(lg) { // >= 992px
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xl) { // >= 1200px
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xxl) { // >= 1400px
|
|
}
|