fix(cxl-ui): sliders snap and fade fixes

https://app.clickup.com/t/86ayn4zg9?comment=90140012778694
conversionxl · Dec 12, 2023 · 833856b · 833856b
1 parent 8f38511
commit 833856b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 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
@@ -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
@@ -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;
     }