@everymatrix/casino-slider 1.13.14 → 1.13.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-slider",
-  "version": "1.13.14",
+  "version": "1.13.16",
   "main": "dist/casino-slider.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a5cf232b09fe0b3050e2243fb25404a2e17f382f"
+  "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
 }

package/src/CasinoSlider.svelte

@@ -231,16 +231,16 @@
   $: lang && setActiveLanguage();
 </script>
 
-<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" part="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
-  <div class="CarouselContainer CarouselContainerMobile} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" part="CarouselContainer {isMobile ? 'CarouselContainerMobile' : ''} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" style="{ (location === 'headerMain') ? 'max-width: auto' : `max-width: ${containermaxwidth}px` }">
-    <div class="CarouselLeftArrow" part="CarouselLeftArrow" on:click="{() => scrollLeft()}">
-      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<div class="CarouselWrapper { (location === 'headerMain') ? 'CarouselWrapperHeaderMain' : '' }" bind:this={customStylingContainer}>
+  <div class="CarouselContainer CarouselContainerMobile} { (location === 'headerMain') ? 'CarouselContainerHeaderMain' : '' }" style="{ (location === 'headerMain') ? 'max-width: auto' : `max-width: ${containermaxwidth}px` }">
+    <div class="CarouselLeftArrow" on:click="{() => scrollLeft()}">
+      <svg fill="none" stroke="var(--emfe-w-categories-arrows, var( --emfe-w-color-white, #FFFFFF));" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
       </svg>
     </div>
     
     <div class="CarouselNavWrap" bind:this={scroller}>
-      <ul id="CarouselNav" class="CarouselItems" part="CarouselItems" bind:this={carousel}>
+      <ul id="CarouselNav" class="CarouselItems" bind:this={carousel}>
         <li class="TouchOnly"><a href="#CarouselNav">Close Subs</a></li>
         {#if sliderdata.length > 0}
 
@@ -275,7 +275,7 @@
       </ul>
     </div>
 
-    <div class="CarouselRightArrow" part="CarouselRightArrow" on:click="{() => scrollRight()}">
+    <div class="CarouselRightArrow" on:click="{() => scrollRight()}">
       <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
       </svg>
@@ -294,9 +294,10 @@
   }
 
   .CarouselWrapper {
-    background: var(--emfe-w-color-primary, #D0046C);  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left, var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left, var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    // background: var(--emfe-w-color-primary, #D0046C);  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-orange-500, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-pink-500, #D0046C)));  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-orange-500, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-pink-500, #D0046C))); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
     &.CarouselWrapperHeaderMain {
       background: transparent;
     }
@@ -308,7 +309,7 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     width: 100%;
-    color: var(--emfe-w-color-white, #FFFFFF);
+    color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
     margin: 0 auto;
     &.CarouselContainerMobile {
       padding: 0;
@@ -338,7 +339,7 @@
           &.active,
           &:focus,
           &:focus-within {
-            background: var(--emfe-w-color-contrast, #07072A);
+            background: var(--emfe-w-categories-contrast, var(--emfe-w-color-dunkel, #07072A));
             cursor: pointer;
           }
         }
@@ -393,11 +394,12 @@
       justify-content: center;
       width: 50%;
       max-width: 64px;
-      background: rgba(255,255,255,.3);
+      background: var(--emfe-w-categories-arrows-bg, var(--emfe-w-color-gray-transparency-30, rgba(255, 255, 255, .3) ));
 
       svg {
         width: 100%;
         max-width: 39px;
+        stroke: var(--emfe-w-categories-arrows, var( --emfe-w-color-white, #FFFFFF));
       }
     }
 
@@ -438,7 +440,7 @@
       a {
         display: block;
         padding: 7px 10px;
-        color: var(--emfe-w-color-white, #FFFFFF);
+        color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
         text-decoration: none;
         white-space: nowrap;
         position: relative;
@@ -448,7 +450,7 @@
         a:hover,
         li:focus > a,
         a:focus {
-          background: var(--emfe-w-color-contrast, #07072A);
+          background: var(--emfe-w-categories-contrast, var(--emfe-w-color-dunkel, #07072A));
         }
       }
       ul {
@@ -458,9 +460,9 @@
         top: 0;
         opacity: 0;
         transition: opacity 0.1s, left 0s 0.1s, top 0.1s;
-        background: var(--emfe-w-color-secondary, #FD2839);  /* fallback for old browsers */
-        background: -webkit-linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C));  /* Chrome 10-25, Safari 5.1-6 */
-        background: linear-gradient(var(--emfe-w-color-secondary, #FD2839), var(--emfe-w-color-primary, #D0046C)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+        background: var(--emfe-w-categories-color-secondary, var(--emfe-w-color-orange-500, #FD2839));  /* fallback for old browsers */
+        background: -webkit-linear-gradient(var(--emfe-w-categories-color-secondary, var(--emfe-w-color-orange-500, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-pink-500, #D0046C)));  /* Chrome 10-25, Safari 5.1-6 */
+        background: linear-gradient(var(--emfe-w-categories-color-secondary, var(--emfe-w-color-orange-500, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-pink-500, #D0046C))); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
       }
     }
 
@@ -473,8 +475,8 @@
       display: inline-block;
     }
     .touch-device .CarouselItems .TouchOnly a {
-      background: var(--emfe-w-color-contrast, #07072A);
-      color: var(--emfe-w-color-white, #FFFFFF);
+      background: var(--emfe-w-categories-contrast, var(--emfe-w-color-dunkel, #07072A));
+      color: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
     }
 
     /* Remove hover when scrolling  */
@@ -484,8 +486,8 @@
     }
 
     .SubDropDown:hover, .SubDropDown.active {
-      color: var(--emfe-w-color-black, #000);
-      background: var(--emfe-w-color-white, #FFF);
+      color: var(--emfe-w-categories-contrast, var(--emfe-w-color-dunkel, #07072A));
+      background: var(--emfe-w-categories-typography, var(--emfe-w-color-white, #FFFFFF));
     }
   }
 
@@ -496,8 +498,8 @@
       &:focus,
       &:focus-within {
         a {
-          border-bottom: 1px solid var(--emfe-w-color-primary, #D0046C);
-          color: var(--emfe-w-color-primary, #D0046C);
+          border-bottom: 1px solid var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+          color: var(--emfe-w-header-color-primary, var(--emfe-w-color-pink-500, #D0046C));
         }
       }
       span {
@@ -518,7 +520,7 @@
       display: none;
     }
     .CarouselItem a {
-      color: var(--emfe-w-color-white, #FFFFFF);
+      color: var(--emfe-w-header-typography, var(--emfe-w-color-white, #FFFFFF));
       text-decoration: none;
     }
   }