From 833856bc8a2d3b9155ccf938029406fced85458d Mon Sep 17 00:00:00 2001
From: Hener Hoop <hener@play.ee>
Date: Tue, 12 Dec 2023 14:48:47 +0200
Subject: [PATCH] fix(cxl-ui): sliders snap and fade fixes

https://app.clickup.com/t/86ayn4zg9?comment=90140012778694
---
 .../scss/themes/cxl-tabs-slider.scss          | 24 ++++++++++++++++---
 .../cxl-ui/src/components/cxl-tabs-slider.js  |  8 ++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
index 869a5289b..04c7fc5e8 100644
--- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
+++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -237,8 +237,7 @@
  * Theme "cxl-course-slider" and "cxl-category-accordion"
  */
 
-:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-accordion"]),
-:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-slider"]) {
+:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-accordion"]) {
   margin-left: calc(-1 * var(--lumo-space-m));
 
   @media #{mq.$small} {
@@ -250,7 +249,7 @@
  * Theme "cxl-course-slider" and "cxl-slider-dashboard-header"
  */
 
-:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="minimal"]) {
+:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"]) {
   margin-inline: 0;
 
   @media #{mq.$small} {
@@ -269,3 +268,22 @@
     max-width: 300px;
   }
 }
+
+/**
+ * Theme "cxl-course-slider" and "cxl-category-slider"
+ */
+
+:host([theme~="cxl-course-slider"][theme~="cxl-category-slider"]) {
+  margin-left: calc(-1 * var(--lumo-space-m));
+
+  @media #{mq.$small} {
+    margin-left: calc(-1 * var(--lumo-space-l));
+  }
+}
+
+:host([theme~="cxl-course-slider"][theme~="cxl-category-slider"][theme~="unfinished"]) {
+  &::before,
+  &::after {
+    background: linear-gradient(270deg, var(--cxl-color-medium-gray) 0%, rgba(255, 255, 255, 0) 100%);
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-tabs-slider.js b/packages/cxl-ui/src/components/cxl-tabs-slider.js
index 2d66f76c8..e47f77f0c 100644
--- a/packages/cxl-ui/src/components/cxl-tabs-slider.js
+++ b/packages/cxl-ui/src/components/cxl-tabs-slider.js
@@ -12,7 +12,13 @@ export class CXLTabsSliderElement extends Tabs {
   get _scrollOffset() {
     const theme = this.getAttribute('theme').split(' ');
 
-    if (theme.includes('cxl-category-accordion') || theme.includes('cxl-slider-dashboard-header')) {
+    const themes = [
+      'cxl-category-accordion',
+      'cxl-slider-dashboard-header',
+      'cxl-category-slider'
+    ];
+
+    if (themes.some(name => theme.includes(name))) {
       return 200;
     }