From 5f698150f54eee707d03b036f54ea2d876c76231 Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 4 Mar 2024 15:18:42 +0100 Subject: [PATCH] slick carroussel --- .../epau-antimatter/css-compiled/template.css | 46 +++--------- .../css-compiled/template/slick-theme.css | 12 ++-- .../images/chevron_to_left.svg | 1 + .../images/chevron_to_right.svg | 1 + .../epau-antimatter/images/fleche_blanche.svg | 2 +- .../images/noun_Arrow_3771902.svg | 53 ++++++++++++++ .../themes/epau-antimatter/scss/template.scss | 5 +- .../{slick-theme.scss => _slick-theme.scss} | 71 ++++++++++--------- .../scss/template/{slick.scss => _slick.scss} | 2 +- 9 files changed, 114 insertions(+), 79 deletions(-) create mode 100644 user/themes/epau-antimatter/images/chevron_to_left.svg create mode 100644 user/themes/epau-antimatter/images/chevron_to_right.svg create mode 100644 user/themes/epau-antimatter/images/noun_Arrow_3771902.svg rename user/themes/epau-antimatter/scss/template/{slick-theme.scss => _slick-theme.scss} (77%) rename user/themes/epau-antimatter/scss/template/{slick.scss => _slick.scss} (98%) diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css index 8bfa24f..95c21d5 100644 --- a/user/themes/epau-antimatter/css-compiled/template.css +++ b/user/themes/epau-antimatter/css-compiled/template.css @@ -1746,10 +1746,8 @@ h1 { .slick-next { position: absolute; display: block; - height: 20px; - width: 20px; - line-height: 0px; - font-size: 0px; + opacity: 0.5; + width: 60px; cursor: pointer; background: transparent; color: transparent; @@ -1760,48 +1758,26 @@ h1 { padding: 0; border: none; outline: none; } - .slick-prev:hover, .slick-prev:focus, - .slick-next:hover, - .slick-next:focus { - outline: none; - background: transparent; - color: transparent; } - .slick-prev:hover:before, .slick-prev:focus:before, - .slick-next:hover:before, - .slick-next:focus:before { - opacity: 1; } - .slick-prev.slick-disabled:before, - .slick-next.slick-disabled:before { - opacity: 0.25; } - .slick-prev:before, - .slick-next:before { - font-family: "slick"; - font-size: 20px; - line-height: 1; - color: white; - opacity: 0.75; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } .slick-prev { - left: 5%; } + left: 100px; } [dir="rtl"] .slick-prev { left: auto; - right: 5%; } + right: 100px; } .slick-prev:before { - content: url("../../images/fleche_blanche.svg"); } + content: url(../images/chevron_to_left.svg); } [dir="rtl"] .slick-prev:before { - content: url("../../images/fleche_blanche.svg"); } + content: url(../images/chevron_to_right.svg); } .slick-next { - right: -25px; } + right: 100px; } [dir="rtl"] .slick-next { - left: -25px; + left: 100px; right: auto; } .slick-next:before { - content: url("../../images/fleche_blanche.svg"); } + content: url(../images/chevron_to_right.svg); } [dir="rtl"] .slick-next:before { - content: url("../../images/fleche_blanche.svg"); } + content: url(../images/chevron_to_left.svg); } /* Dots */ .slick-dotted.slick-slider { @@ -1911,7 +1887,7 @@ h1 { .slick-slide { float: left; - height: 100%; + height: 50vh; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { diff --git a/user/themes/epau-antimatter/css-compiled/template/slick-theme.css b/user/themes/epau-antimatter/css-compiled/template/slick-theme.css index 052827e..e8c9dcf 100644 --- a/user/themes/epau-antimatter/css-compiled/template/slick-theme.css +++ b/user/themes/epau-antimatter/css-compiled/template/slick-theme.css @@ -54,14 +54,14 @@ -moz-osx-font-smoothing: grayscale; } .slick-prev { - left: 5%; } + left: -25px; } [dir="rtl"] .slick-prev { left: auto; - right: 5%; } + right: -25px; } .slick-prev:before { - content: url("../../images/fleche_blanche.svg"); } + content: "←"; } [dir="rtl"] .slick-prev:before { - content: url("../../images/fleche_blanche.svg"); } + content: "→"; } .slick-next { right: -25px; } @@ -69,9 +69,9 @@ left: -25px; right: auto; } .slick-next:before { - content: url("../../images/fleche_blanche.svg"); } + content: "→"; } [dir="rtl"] .slick-next:before { - content: url("../../images/fleche_blanche.svg"); } + content: "←"; } /* Dots */ .slick-dotted.slick-slider { diff --git a/user/themes/epau-antimatter/images/chevron_to_left.svg b/user/themes/epau-antimatter/images/chevron_to_left.svg new file mode 100644 index 0000000..ff747b2 --- /dev/null +++ b/user/themes/epau-antimatter/images/chevron_to_left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/user/themes/epau-antimatter/images/chevron_to_right.svg b/user/themes/epau-antimatter/images/chevron_to_right.svg new file mode 100644 index 0000000..689ef1e --- /dev/null +++ b/user/themes/epau-antimatter/images/chevron_to_right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/user/themes/epau-antimatter/images/fleche_blanche.svg b/user/themes/epau-antimatter/images/fleche_blanche.svg index 2e6e8aa..22ced1b 100644 --- a/user/themes/epau-antimatter/images/fleche_blanche.svg +++ b/user/themes/epau-antimatter/images/fleche_blanche.svg @@ -6,7 +6,7 @@ viewBox="0 0 51.400001 18.692308" xml:space="preserve" id="svg8" - sodipodi:docname="flèche_blanche.svg" + sodipodi:docname="fleche_blanche.svg" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" width="29.653847" height="18.692308" diff --git a/user/themes/epau-antimatter/images/noun_Arrow_3771902.svg b/user/themes/epau-antimatter/images/noun_Arrow_3771902.svg new file mode 100644 index 0000000..0f54258 --- /dev/null +++ b/user/themes/epau-antimatter/images/noun_Arrow_3771902.svg @@ -0,0 +1,53 @@ + +image/svg+xml diff --git a/user/themes/epau-antimatter/scss/template.scss b/user/themes/epau-antimatter/scss/template.scss index 2f96f03..0d1e64d 100644 --- a/user/themes/epau-antimatter/scss/template.scss +++ b/user/themes/epau-antimatter/scss/template.scss @@ -69,5 +69,6 @@ // Media Queries @import "template/mediaqueries"; -@import "template/slick-theme.scss"; -@import "template/slick.scss"; \ No newline at end of file +// @import "template/slick_custom"; +@import "template/slick-theme"; +@import "template/slick"; \ No newline at end of file diff --git a/user/themes/epau-antimatter/scss/template/slick-theme.scss b/user/themes/epau-antimatter/scss/template/_slick-theme.scss similarity index 77% rename from user/themes/epau-antimatter/scss/template/slick-theme.scss rename to user/themes/epau-antimatter/scss/template/_slick-theme.scss index 1d28d08..4ed6f92 100644 --- a/user/themes/epau-antimatter/scss/template/slick-theme.scss +++ b/user/themes/epau-antimatter/scss/template/_slick-theme.scss @@ -13,8 +13,8 @@ $slick-loader-path: "./" !default; $slick-arrow-color: white !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; -$slick-prev-character: "\2190" !default; -$slick-next-character: "\2192" !default; +$slick-prev-character: url(../images/chevron_to_left.svg); +$slick-next-character: url(../images/chevron_to_right.svg); $slick-dot-character: "\2022" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; @@ -64,10 +64,11 @@ $slick-opacity-not-active: 0.25 !default; .slick-next { position: absolute; display: block; - height: 20px; - width: 20px; - line-height: 0px; - font-size: 0px; + opacity: 0.5; + // height: 50px; + width: 60px; + // line-height: 2rem; + // font-size: 8rem; cursor: pointer; background: transparent; color: transparent; @@ -78,52 +79,54 @@ $slick-opacity-not-active: 0.25 !default; padding: 0; border: none; outline: none; - &:hover, &:focus { - outline: none; - background: transparent; - color: transparent; - &:before { - opacity: $slick-opacity-on-hover; - } - } - &.slick-disabled:before { - opacity: $slick-opacity-not-active; - } - &:before { - font-family: $slick-font-family; - font-size: 20px; - line-height: 1; - color: $slick-arrow-color; - opacity: $slick-opacity-default; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } + // &:hover, &:focus { + // outline: none; + // background: transparent; + // color: transparent; + // &:before { + // opacity: $slick-opacity-on-hover; + // } + // } + // &.slick-disabled:before { + // opacity: $slick-opacity-not-active; + // } + // &:before { + // font-family: $slick-font-family; + // font-size: 50px; + + // line-height: 1; + // color: $slick-arrow-color; + // opacity: $slick-opacity-default; + // -webkit-font-smoothing: antialiased; + // -moz-osx-font-smoothing: grayscale; + // } } .slick-prev { - left: 5%; + left: 100px; [dir="rtl"] & { left: auto; - right: 5%; + right: 100px; } + &:before { - content: url("../../images/fleche_blanche.svg"); + content: $slick-prev-character; [dir="rtl"] & { - content: url("../../images/fleche_blanche.svg"); + content: $slick-next-character; } } } .slick-next { - right: -25px; + right: 100px; [dir="rtl"] & { - left: -25px; + left: 100px; right: auto; } &:before { - content: url("../../images/fleche_blanche.svg"); + content: $slick-next-character; [dir="rtl"] & { - content: url("../../images/fleche_blanche.svg"); + content: $slick-prev-character; } } } diff --git a/user/themes/epau-antimatter/scss/template/slick.scss b/user/themes/epau-antimatter/scss/template/_slick.scss similarity index 98% rename from user/themes/epau-antimatter/scss/template/slick.scss rename to user/themes/epau-antimatter/scss/template/_slick.scss index 8d1fc9f..46042cf 100644 --- a/user/themes/epau-antimatter/scss/template/slick.scss +++ b/user/themes/epau-antimatter/scss/template/_slick.scss @@ -63,7 +63,7 @@ } .slick-slide { float: left; - height: 100%; + height: 50vh; min-height: 1px; [dir="rtl"] & { float: right;