Merge pull request #1224 from ita-social-projects/feature/issue-823-another-approach

Feature/issue 823 another approach

Author: Adeodonne

src/assets/images/utils/LeftDefaultSliderArrow.svg

@@ -34,10 +34,12 @@ $copyright-section-color: #C4C4C4 !important;
 $selected-arrow-color: #C4C4C4 !important;
 $base-arrow-color: #F2F2F2 !important;
 
-$base-arrow-filter-color: invert(97%) sepia(66%) saturate(423%)
-  hue-rotate(212deg) brightness(113%) contrast(90%) !important;
-$selected-arrow-filter-color: invert(87%) sepia(0%) saturate(479%)
-  hue-rotate(143deg) brightness(95%) contrast(81%) !important;
+$base-arrow-filter-color: invert(95%) sepia(90%) saturate(0%)
+     hue-rotate(225deg) brightness(110%) contrast(90%);
+$active-arrow-filter-color:  invert(88%) sepia(0%) saturate(0%) 
+     hue-rotate(219deg) brightness(91%) contrast(88%);
+$selected-arrow-filter-color: invert(38%) sepia(0%) saturate(0%)
+     hue-rotate(143deg) brightness(80%) contrast(81%);
 $hovered-btn-box-shadow: 0 2px 15px rgba(61, 0, 0, .25) !important;
 
 $card-scrollbar-track-color: #DEDCDC !important;

src/assets/images/utils/RightDefaultSliderArrow.svg

@@ -41,8 +41,10 @@
 
 .slider-arrow {
     min-width: 44px;
+    transition: .5s;
+    filter: c.$active-arrow-filter-color;
     &:hover {
-      fill: #000000;
+      filter: c.$selected-arrow-filter-color;
     }
 }
 

src/assets/sass/variables/_variables.colors.scss

@@ -24,7 +24,7 @@
 
                 &::before {
                     content: url("@assets/images/utils/LeftSmallSliderArrow.svg");
-                    opacity: 0.8;
+                    opacity: 0.9;
                     filter: none;
                 }
 

src/features/AboutUsPage/TeamMembers/TeamMembers.component.scss

@@ -4,21 +4,28 @@
 @use "@assets/sass/variables/_variables.layers.scss" as l;
 @import "slick-carousel/slick/slick.css";
 @import "slick-carousel/slick/slick-theme.css";
+
+
+
 @mixin slick-arrow-pseudo($direction, $margin) {
     transition: .5s;
     margin-left: pxToRem($margin);
     @include mut.sized(40px, 58px);
     $path: "@assets/images/utils/#{$direction}DefaultSliderArrow.svg";
     content: url($path);
+    opacity: 1 !important;
 }
 
+
 .slick-next,
 .slick-prev {
+    transition: .5s;
     pointer-events: none;
     &:hover:before {
-        filter: brightness(25%);
+        filter: c.$selected-arrow-filter-color;
     }
     &:before {
+        filter: c.$active-arrow-filter-color;
         pointer-events: all;
     }
 }
@@ -31,20 +38,29 @@
     @include slick-arrow-pseudo(Right, -5px);
 }
 
-.slick-dots li button:before {
-    content: '';
-    @include mut.sized(12px, 12px);
-    background: c.$slider-base-dot-color;
-    transition: .5s;
+.slick-arrow {
+    z-index: l.$slickArrow;
 }
 
 .slick-disabled {
-    filter: c.$base-arrow-filter-color;
+    transition: .5s;
     &:before {
+        filter: c.$base-arrow-filter-color;
         pointer-events: none;
     }
+    &:hover:before{
+        filter: c.$base-arrow-filter-color;
+    }
 }
 
+.slick-dots li button:before {
+    content: '';
+    @include mut.sized(12px, 12px);
+    background: c.$slider-base-dot-color;
+    transition: .5s;
+}
+
+
 li.slick-active button:before {
     background: c.$dark-red-color;
 }
@@ -76,14 +92,7 @@ li.slick-active button:before {
     }
 }
 
-.slick-arrow {
-    z-index: l.$slickArrow;
-    opacity: 1;
-    filter: c.$selected-arrow-filter-color;
-    &:hover {
-        opacity: 1;
-    }
-}
+
 
 @media screen and (max-width:1024px) {
     .slick-next,