responsive fleche prev next

This commit is contained in:
ouidade 2024-11-07 09:28:12 +01:00
parent 1ef82845c9
commit f4ac6a3a3f
2 changed files with 22 additions and 23 deletions

View File

@ -916,9 +916,9 @@ footer {
.slick-prev { .slick-prev {
left: 45%; left: 45%;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
.slick-prev { .slick-prev {
left: 35%; left: 45%;
} }
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
@ -929,7 +929,7 @@ footer {
content: url("../img/prev.svg"); content: url("../img/prev.svg");
display: block; display: block;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
.slick-prev:before { .slick-prev:before {
transform: scale(0.8); transform: scale(0.8);
} }
@ -938,19 +938,19 @@ footer {
content: url("../img/next.svg"); content: url("../img/next.svg");
display: block; display: block;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
[dir=rtl] .slick-prev:before { [dir=rtl] .slick-prev:before {
left: 35%; left: 45%;
transform: scale(0.8); transform: scale(0.8);
} }
} }
.slick-next { .slick-next {
right: 45%; right: 48%;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
.slick-next { .slick-next {
right: 42%; right: 47%;
} }
} }
[dir=rtl] .slick-next { [dir=rtl] .slick-next {
@ -961,7 +961,7 @@ footer {
content: url("../img/next.svg"); content: url("../img/next.svg");
display: block; display: block;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
.slick-next:before { .slick-next:before {
transform: scale(0.8); transform: scale(0.8);
} }
@ -970,9 +970,9 @@ footer {
content: url("../img/prev.svg"); content: url("../img/prev.svg");
display: block; display: block;
} }
@media (max-width: 810px) { @media (max-width: 1080px) {
[dir=rtl] .slick-next:before { [dir=rtl] .slick-next:before {
right: 42%; right: 47%;
transform: scale(0.8); transform: scale(0.8);
} }
} }

View File

@ -114,9 +114,8 @@ $slick-opacity-not-active: 0.25 !default;
.slick-prev { .slick-prev {
left: 45%; left: 45%;
@media(max-width:810px){ @media(max-width:1080px){
left: 35%; left: 45%;
} }
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
@ -125,14 +124,14 @@ $slick-opacity-not-active: 0.25 !default;
&:before { &:before {
content: $slick-prev-character; content: $slick-prev-character;
display: block; display: block;
@media(max-width:810px){ @media(max-width:1080px){
transform: scale(0.8); transform: scale(0.8);
} }
[dir="rtl"] & { [dir="rtl"] & {
content: $slick-next-character; content: $slick-next-character;
display: block; display: block;
@media(max-width:810px){ @media(max-width:1080px){
left: 35%; left: 45%;
transform: scale(0.8); transform: scale(0.8);
} }
@ -141,9 +140,9 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-next { .slick-next {
right: 45%; right: 48%;
@media(max-width:810px){ @media(max-width:1080px){
right: 42%; right: 47%;
} }
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: -25px;
@ -152,15 +151,15 @@ $slick-opacity-not-active: 0.25 !default;
&:before { &:before {
content: $slick-next-character; content: $slick-next-character;
display: block; display: block;
@media(max-width:810px){ @media(max-width:1080px){
transform: scale(0.8); transform: scale(0.8);
} }
[dir="rtl"] & { [dir="rtl"] & {
content: $slick-prev-character; content: $slick-prev-character;
display: block; display: block;
@media(max-width:810px){ @media(max-width:1080px){
right: 42%; right: 47%;
transform: scale(0.8); transform: scale(0.8);
} }