ouidade/dev-epau.archi.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slick carroussel

Browse Source
This commit is contained in:
ouidade
2024-03-04 15:18:42 +01:00
parent 297d94a6fb
commit 5f698150f5
9 changed files with 114 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/epau-antimatter/css-compiled/template.css
+11 -35
View File
@@ -1746,10 +1746,8 @@ h1 {
.slick-next { .slick-next {
position: absolute; position: absolute;
display: block; display: block;
height: 20px; opacity: 0.5;
width: 20px; width: 60px;
line-height: 0px;
font-size: 0px;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
@@ -1760,48 +1758,26 @@ h1 {
padding: 0; padding: 0;
border: none; border: none;
outline: 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 { .slick-prev {
left: 5%; } left: 100px; }
[dir="rtl"] .slick-prev { [dir="rtl"] .slick-prev {
left: auto; left: auto;
right: 5%; } right: 100px; }
.slick-prev:before { .slick-prev:before {
content: url("../../images/fleche_blanche.svg"); } content: url(../images/chevron_to_left.svg); }
[dir="rtl"] .slick-prev:before { [dir="rtl"] .slick-prev:before {
content: url("../../images/fleche_blanche.svg"); } content: url(../images/chevron_to_right.svg); }
.slick-next { .slick-next {
right: -25px; } right: 100px; }
[dir="rtl"] .slick-next { [dir="rtl"] .slick-next {
left: -25px; left: 100px;
right: auto; } right: auto; }
.slick-next:before { .slick-next:before {
content: url("../../images/fleche_blanche.svg"); } content: url(../images/chevron_to_right.svg); }
[dir="rtl"] .slick-next:before { [dir="rtl"] .slick-next:before {
content: url("../../images/fleche_blanche.svg"); } content: url(../images/chevron_to_left.svg); }
/* Dots */ /* Dots */
.slick-dotted.slick-slider { .slick-dotted.slick-slider {
@@ -1911,7 +1887,7 @@ h1 {
.slick-slide { .slick-slide {
float: left; float: left;
height: 100%; height: 50vh;
min-height: 1px; min-height: 1px;
display: none; } display: none; }
[dir="rtl"] .slick-slide { [dir="rtl"] .slick-slide {
user/themes/epau-antimatter/css-compiled/template/slick-theme.css
+6 -6
View File
@@ -54,14 +54,14 @@
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
.slick-prev { .slick-prev {
left: 5%; } left: -25px; }
[dir="rtl"] .slick-prev { [dir="rtl"] .slick-prev {
left: auto; left: auto;
right: 5%; } right: -25px; }
.slick-prev:before { .slick-prev:before {
content: url("../../images/fleche_blanche.svg"); } content: "←"; }
[dir="rtl"] .slick-prev:before { [dir="rtl"] .slick-prev:before {
content: url("../../images/fleche_blanche.svg"); } content: "→"; }
.slick-next { .slick-next {
right: -25px; } right: -25px; }
@@ -69,9 +69,9 @@
left: -25px; left: -25px;
right: auto; } right: auto; }
.slick-next:before { .slick-next:before {
content: url("../../images/fleche_blanche.svg"); } content: "→"; }
[dir="rtl"] .slick-next:before { [dir="rtl"] .slick-next:before {
content: url("../../images/fleche_blanche.svg"); } content: "←"; }
/* Dots */ /* Dots */
.slick-dotted.slick-slider { .slick-dotted.slick-slider {
user/themes/epau-antimatter/images/chevron_to_left.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

user/themes/epau-antimatter/images/chevron_to_right.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 399 B

user/themes/epau-antimatter/images/fleche_blanche.svg
+1 -1
View File
@@ -6,7 +6,7 @@
viewBox="0 0 51.400001 18.692308" viewBox="0 0 51.400001 18.692308"
xml:space="preserve" xml:space="preserve"
id="svg8" id="svg8"
sodipodi:docname="flèche_blanche.svg" sodipodi:docname="fleche_blanche.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
width="29.653847" width="29.653847"
height="18.692308" height="18.692308"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

user/themes/epau-antimatter/images/noun_Arrow_3771902.svg
+53
View File
@@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
x="0px"
y="0px"
viewBox="0 0 52 33"
xml:space="preserve"
id="svg8"
sodipodi:docname="noun_Arrow_3771902.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
width="30"
height="auto"
inkscape:export-filename="/home/ouidade/Sites/EQL/docker-eql/src_d9/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.png"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
id="metadata14"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs12" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview10"
showgrid="false"
inkscape:zoom="6.92"
inkscape:cx="20.953757"
inkscape:cy="38.222543"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg8"
inkscape:pagecheckerboard="0"
width="99px" /><polygon
points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2 "
id="polygon2"
inkscape:export-filename="/home/ouidade/Sites/EQL/docker-eql/src_d9/web/themes/custom/eql/images/pictos/polygon2.png"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300"
transform="translate(-23.815852,-33.316918)" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

user/themes/epau-antimatter/scss/template.scss
+3 -2
View File
@@ -69,5 +69,6 @@
// Media Queries // Media Queries
@import "template/mediaqueries"; @import "template/mediaqueries";
@import "template/slick-theme.scss"; // @import "template/slick_custom";
@import "template/slick.scss"; @import "template/slick-theme";
@import "template/slick";
user/themes/epau-antimatter/scss/template/slick-theme.scss → user/themes/epau-antimatter/scss/template/_slick-theme.scss
+37 -34
View File
@@ -13,8 +13,8 @@ $slick-loader-path: "./" !default;
$slick-arrow-color: white !default; $slick-arrow-color: white !default;
$slick-dot-color: black !default; $slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default; $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default; $slick-prev-character: url(../images/chevron_to_left.svg);
$slick-next-character: "\2192" !default; $slick-next-character: url(../images/chevron_to_right.svg);
$slick-dot-character: "\2022" !default; $slick-dot-character: "\2022" !default;
$slick-dot-size: 6px !default; $slick-dot-size: 6px !default;
$slick-opacity-default: 0.75 !default; $slick-opacity-default: 0.75 !default;
@@ -64,10 +64,11 @@ $slick-opacity-not-active: 0.25 !default;
.slick-next { .slick-next {
position: absolute; position: absolute;
display: block; display: block;
height: 20px; opacity: 0.5;
width: 20px; // height: 50px;
line-height: 0px; width: 60px;
font-size: 0px; // line-height: 2rem;
// font-size: 8rem;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
@@ -78,52 +79,54 @@ $slick-opacity-not-active: 0.25 !default;
padding: 0; padding: 0;
border: none; border: none;
outline: none; outline: none;
&:hover, &:focus { // &:hover, &:focus {
outline: none; // outline: none;
background: transparent; // background: transparent;
color: transparent; // color: transparent;
&:before { // &:before {
opacity: $slick-opacity-on-hover; // opacity: $slick-opacity-on-hover;
} // }
} // }
&.slick-disabled:before { // &.slick-disabled:before {
opacity: $slick-opacity-not-active; // opacity: $slick-opacity-not-active;
} // }
&:before { // &:before {
font-family: $slick-font-family; // font-family: $slick-font-family;
font-size: 20px; // font-size: 50px;
line-height: 1;
color: $slick-arrow-color; // line-height: 1;
opacity: $slick-opacity-default; // color: $slick-arrow-color;
-webkit-font-smoothing: antialiased; // opacity: $slick-opacity-default;
-moz-osx-font-smoothing: grayscale; // -webkit-font-smoothing: antialiased;
} // -moz-osx-font-smoothing: grayscale;
// }
} }
.slick-prev { .slick-prev {
left: 5%; left: 100px;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
right: 5%; right: 100px;
} }
&:before { &:before {
content: url("../../images/fleche_blanche.svg"); content: $slick-prev-character;
[dir="rtl"] & { [dir="rtl"] & {
content: url("../../images/fleche_blanche.svg"); content: $slick-next-character;
} }
} }
} }
.slick-next { .slick-next {
right: -25px; right: 100px;
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: 100px;
right: auto; right: auto;
} }
&:before { &:before {
content: url("../../images/fleche_blanche.svg"); content: $slick-next-character;
[dir="rtl"] & { [dir="rtl"] & {
content: url("../../images/fleche_blanche.svg"); content: $slick-prev-character;
} }
} }
} }
user/themes/epau-antimatter/scss/template/slick.scss → user/themes/epau-antimatter/scss/template/_slick.scss
+1 -1
View File
@@ -63,7 +63,7 @@
} }
.slick-slide { .slick-slide {
float: left; float: left;
height: 100%; height: 50vh;
min-height: 1px; min-height: 1px;
[dir="rtl"] & { [dir="rtl"] & {
float: right; float: right;