slick arrows

web/themes/custom/reha/dist/css/bundle.css

@@ -1048,7 +1048,7 @@ aside.layout-sidebar-second {
   cursor: pointer;
   background: transparent;
   color: transparent;
-  top: 20%;
+  top: 18%;
   -webkit-transform: translate(0, -50%);
   -ms-transform: translate(0, -50%);
   transform: translate(0, -50%);
@@ -1078,13 +1078,13 @@ aside.layout-sidebar-second {
   font-size: 200px;
   line-height: 1;
   color: rgb(153, 147, 174);
-  opacity: 0.75;
+  opacity: 0.4;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .slick-prev {
-  left: -25px;
+  left: 250px;
   padding-left: 4rem;
 }
 [dir=rtl] .slick-prev {
@@ -1092,28 +1092,24 @@ aside.layout-sidebar-second {
   right: 200px;
 }
 .slick-prev:before {
-  content: "<";
-  font-weight: lighter;
+  content: url("../../dist/images/grandes_fleches_prev.svg");
 }
 [dir=rtl] .slick-prev:before {
-  content: ">";
-  font-weight: lighter;
+  content: url("../../dist/images/grandes_fleches_prev.svg");
 }
 
 .slick-next {
-  right: 200px;
+  right: 350px;
 }
 [dir=rtl] .slick-next {
   left: -25px;
   right: auto;
 }
 .slick-next:before {
-  content: ">";
-  font-weight: lighter;
+  content: url("../../dist/images/grandes_fleches_next.svg");
 }
 [dir=rtl] .slick-next:before {
-  content: "<";
-  font-weight: lighter;
+  content: url("../../dist/images/grandes_fleches_next.svg");
 }
 
 /* Dots */
@@ -1177,7 +1173,7 @@ aside.layout-sidebar-second {
 }
 .slick-dots li.slick-active button:before {
   color: black;
-  opacity: 0.75;
+  opacity: 0.4;
 }
 
 /* Slider */
@@ -1274,8 +1270,6 @@ aside.layout-sidebar-second {
 }
 
 .view-actus.slick-slider.slick-next:before {
-  content: ">";
-  font-weight: 100;
   background: rgba(255, 255, 255, 0.1);
 }
 

web/themes/custom/reha/dist/images/grandes_fleches_next.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>

web/themes/custom/reha/dist/images/grandes_fleches_prev.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="17.028627mm"
+   height="34.876175mm"
+   viewBox="0 0 17.028627 34.876175"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-137.03258,-135.34556)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>

web/themes/custom/reha/scss/partials/_slick-theme.scss

@@ -15,9 +15,11 @@ $slick-dot-color: black !default;
 $slick-dot-color-active: $slick-dot-color !default;
 $slick-prev-character: "\003C" !default;
 $slick-next-character: "\003E" !default;
+// $slick-prev-character: "../../../../../dist/" !default;
+// $slick-next-character: "\003E" !default;
 $slick-dot-character: "\2022" !default;
 $slick-dot-size: 40px !default;
-$slick-opacity-default: 0.75 !default;
+$slick-opacity-default: 0.40 !default;
 $slick-opacity-on-hover: 1 !default;
 $slick-opacity-not-active: 0.25 !default;
 
@@ -72,7 +74,7 @@ $slick-opacity-not-active: 0.25 !default;
     cursor: pointer;
     background: transparent;
     color: transparent;
-    top: 20%;
+    top: 18%;
     -webkit-transform: translate(0, -50%);
     -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
@@ -102,37 +104,41 @@ $slick-opacity-not-active: 0.25 !default;
 }
 
 .slick-prev {
-    left: -25px;
+    left: 250px;
     padding-left: 4rem;
     [dir="rtl"] & {
         left: auto;
         right: 200px;
     }
     &:before {
-        content: $slick-prev-character;
-        font-weight: lighter;
+        content: url('../../dist/images/grandes_fleches_prev.svg');
+        // content: $slick-prev-character;
+        // font-weight: lighter;
 
         [dir="rtl"] & {
-            content: $slick-next-character;
-            font-weight: lighter;
+            content: url('../../dist/images/grandes_fleches_prev.svg');
+            // content: $slick-next-character;
+            // font-weight: lighter;
 
         }
     }
 }
 
 .slick-next {
-    right: 200px;
+    right: 350px;
     [dir="rtl"] & {
         left: -25px;
         right: auto;
     }
     &:before {
-        content: $slick-next-character;
-        font-weight: lighter;
+        content: url('../../dist/images/grandes_fleches_next.svg');
+        // content: $slick-next-character;
+        // font-weight: lighter;
 
         [dir="rtl"] & {
-            content: $slick-prev-character;
-            font-weight: lighter;
+            content: url('../../dist/images/grandes_fleches_next.svg');
+            // content: $slick-prev-character;
+            // font-weight: lighter;
 
         }
     }

web/themes/custom/reha/scss/partials/_slick_custom.scss

@@ -13,8 +13,7 @@ $slick-arrow-color: $yellow-puca !default;
 
 .view-actus.slick-slider.slick-next {
     &:before {
-        content: $slick-next-character;
-        font-weight: 100;
+
         background: rgba(255, 255, 255, 0.1);
     }
 }