bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slick arrows

Browse Source
This commit is contained in:
ouidade
2024-06-25 16:41:32 +02:00
parent b34d802908
commit 78e802f07d
5 changed files with 72 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/dist/css/bundle.css
Vendored
+9 -15
View File
@@ -1048,7 +1048,7 @@ aside.layout-sidebar-second {
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: 20%; top: 18%;
-webkit-transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%); -ms-transform: translate(0, -50%);
transform: translate(0, -50%); transform: translate(0, -50%);
@@ -1078,13 +1078,13 @@ aside.layout-sidebar-second {
font-size: 200px; font-size: 200px;
line-height: 1; line-height: 1;
color: rgb(153, 147, 174); color: rgb(153, 147, 174);
opacity: 0.75; opacity: 0.4;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.slick-prev { .slick-prev {
left: -25px; left: 250px;
padding-left: 4rem; padding-left: 4rem;
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
@@ -1092,28 +1092,24 @@ aside.layout-sidebar-second {
right: 200px; right: 200px;
} }
.slick-prev:before { .slick-prev:before {
content: "<"; content: url("../../dist/images/grandes_fleches_prev.svg");
font-weight: lighter;
} }
[dir=rtl] .slick-prev:before { [dir=rtl] .slick-prev:before {
content: ">"; content: url("../../dist/images/grandes_fleches_prev.svg");
font-weight: lighter;
} }
.slick-next { .slick-next {
right: 200px; right: 350px;
} }
[dir=rtl] .slick-next { [dir=rtl] .slick-next {
left: -25px; left: -25px;
right: auto; right: auto;
} }
.slick-next:before { .slick-next:before {
content: ">"; content: url("../../dist/images/grandes_fleches_next.svg");
font-weight: lighter;
} }
[dir=rtl] .slick-next:before { [dir=rtl] .slick-next:before {
content: "<"; content: url("../../dist/images/grandes_fleches_next.svg");
font-weight: lighter;
} }
/* Dots */ /* Dots */
@@ -1177,7 +1173,7 @@ aside.layout-sidebar-second {
} }
.slick-dots li.slick-active button:before { .slick-dots li.slick-active button:before {
color: black; color: black;
opacity: 0.75; opacity: 0.4;
} }
/* Slider */ /* Slider */
@@ -1274,8 +1270,6 @@ aside.layout-sidebar-second {
} }
.view-actus.slick-slider.slick-next:before { .view-actus.slick-slider.slick-next:before {
content: ">";
font-weight: 100;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
web/themes/custom/reha/dist/images/grandes_fleches_next.svg
Vendored
+22
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

web/themes/custom/reha/dist/images/grandes_fleches_prev.svg
Vendored
+22
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 967 B

web/themes/custom/reha/scss/partials/_slick-theme.scss
+18 -12
View File
@@ -15,9 +15,11 @@ $slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default; $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\003C" !default; $slick-prev-character: "\003C" !default;
$slick-next-character: "\003E" !default; $slick-next-character: "\003E" !default;
// $slick-prev-character: "../../../../../dist/" !default;
// $slick-next-character: "\003E" !default;
$slick-dot-character: "\2022" !default; $slick-dot-character: "\2022" !default;
$slick-dot-size: 40px !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-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default; $slick-opacity-not-active: 0.25 !default;
@@ -72,7 +74,7 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: transparent; color: transparent;
top: 20%; top: 18%;
-webkit-transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%); -ms-transform: translate(0, -50%);
transform: translate(0, -50%); transform: translate(0, -50%);
@@ -102,37 +104,41 @@ $slick-opacity-not-active: 0.25 !default;
} }
.slick-prev { .slick-prev {
left: -25px; left: 250px;
padding-left: 4rem; padding-left: 4rem;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
right: 200px; right: 200px;
} }
&:before { &:before {
content: $slick-prev-character; content: url('../../dist/images/grandes_fleches_prev.svg');
font-weight: lighter; // content: $slick-prev-character;
// font-weight: lighter;
[dir="rtl"] & { [dir="rtl"] & {
content: $slick-next-character; content: url('../../dist/images/grandes_fleches_prev.svg');
font-weight: lighter; // content: $slick-next-character;
// font-weight: lighter;
} }
} }
} }
.slick-next { .slick-next {
right: 200px; right: 350px;
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: -25px;
right: auto; right: auto;
} }
&:before { &:before {
content: $slick-next-character; content: url('../../dist/images/grandes_fleches_next.svg');
font-weight: lighter; // content: $slick-next-character;
// font-weight: lighter;
[dir="rtl"] & { [dir="rtl"] & {
content: $slick-prev-character; content: url('../../dist/images/grandes_fleches_next.svg');
font-weight: lighter; // content: $slick-prev-character;
// font-weight: lighter;
} }
} }
web/themes/custom/reha/scss/partials/_slick_custom.scss
+1 -2
View File
@@ -13,8 +13,7 @@ $slick-arrow-color: $yellow-puca !default;
.view-actus.slick-slider.slick-next { .view-actus.slick-slider.slick-next {
&:before { &:before {
content: $slick-next-character;
font-weight: 100;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
} }