chore: scss styles for custom element

nolimits4web · Nov 9, 2022 · ba938b0 · ba938b0
1 parent c2247b2
commit ba938b0
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 64 deletions.
diff --git a/src/core/core.scss b/src/core/core.scss
@@ -3,7 +3,8 @@
     --swiper-theme-color: #{$themeColor};
   }
 }
-.swiper {
+.swiper,
+swiper-container {
   margin-left: auto;
   margin-right: auto;
   position: relative;
@@ -12,8 +13,10 @@
   padding: 0;
   /* Fix of Webkit flickering */
   z-index: 1;
+  display: block;
 }
-.swiper-vertical > .swiper-wrapper {
+.swiper-vertical > .swiper-wrapper,
+:host(.swiper-vertical) > .swiper-wrapper {
   flex-direction: column;
 }
 .swiper-wrapper {
@@ -26,49 +29,60 @@
   box-sizing: content-box;
 }
 .swiper-android .swiper-slide,
+.swiper-android swiper-slide,
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
+
 .swiper-pointer-events {
   touch-action: pan-y;
   &.swiper-vertical {
     touch-action: pan-x;
   }
 }
-.swiper-slide {
+.swiper-slide,
+swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
   transition-property: transform;
+  display: block;
 }
 .swiper-slide-invisible-blank {
   visibility: hidden;
 }
 /* Auto Height */
-.swiper-autoheight {
-  &,
-  .swiper-slide {
-    height: auto;
-  }
-
-  .swiper-wrapper {
-    align-items: flex-start;
-    transition-property: transform, height;
-  }
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide,
+.swiper-autoheight swiper-slide {
+  height: auto;
+}
+.swiper-autoheight .swiper-wrapper,
+:host(.swiper-autoheight) .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
 }
-.swiper-backface-hidden .swiper-slide {
+.swiper-backface-hidden .swiper-slide,
+.swiper-backface-hidden swiper-slide {
   transform: translateZ(0);
   backface-visibility: hidden;
 }
 /* 3D Effects */
+:host(.swiper-3d.swiper-css-mode) .swiper-wrapper {
+  perspective: 1200px;
+}
+:host(.swiper-3d) .swiper-wrapper {
+  transform-style: preserve-3d;
+}
 .swiper-3d {
   &,
   &.swiper-css-mode .swiper-wrapper {
     perspective: 1200px;
   }
   .swiper-wrapper,
   .swiper-slide,
+  swiper-slide,
   .swiper-slide-shadow,
   .swiper-slide-shadow-left,
   .swiper-slide-shadow-right,
@@ -108,7 +122,8 @@
 }
 
 /* CSS Mode */
-.swiper-css-mode {
+.swiper-css-mode,
+:host(.swiper-css-mode) {
   > .swiper-wrapper {
     overflow: auto;
     scrollbar-width: none; /* For Firefox */
@@ -117,46 +132,57 @@
       display: none;
     }
   }
-  > .swiper-wrapper > .swiper-slide {
+  > .swiper-wrapper > .swiper-slide,
+  > swiper-slide {
     scroll-snap-align: start start;
   }
 }
-.swiper-horizontal.swiper-css-mode {
+.swiper-horizontal.swiper-css-mode,
+:host(.swiper-horizontal.swiper-css-mode) {
   > .swiper-wrapper {
     scroll-snap-type: x mandatory;
   }
 }
-.swiper-vertical.swiper-css-mode {
+.swiper-vertical.swiper-css-mode,
+:host(.swiper-vertical.swiper-css-mode) {
   > .swiper-wrapper {
     scroll-snap-type: y mandatory;
   }
 }
-.swiper-centered {
+.swiper-centered,
+:host(.swiper-centered) {
   > .swiper-wrapper::before {
     content: '';
     flex-shrink: 0;
     order: 9999;
   }
-  &.swiper-horizontal {
-    > .swiper-wrapper > .swiper-slide:first-child {
-      margin-inline-start: var(--swiper-centered-offset-before);
-    }
-    > .swiper-wrapper::before {
-      height: 100%;
-      width: var(--swiper-centered-offset-after);
-    }
+  > .swiper-wrapper > .swiper-slide,
+  > swiper-slide {
+    scroll-snap-align: center center;
   }
-  &.swiper-vertical {
-    > .swiper-wrapper > .swiper-slide:first-child {
-      margin-block-start: var(--swiper-centered-offset-before);
-    }
-    > .swiper-wrapper::before {
-      width: 100%;
-      height: var(--swiper-centered-offset-after);
-    }
+}
+.swiper-centered.swiper-horizontal,
+:host(.swiper-centered.swiper-horizontal) {
+  > .swiper-wrapper > .swiper-slide:first-child,
+  > swiper-slide:first-child {
+    margin-inline-start: var(--swiper-centered-offset-before);
+  }
+  > .swiper-wrapper::before {
+    height: 100%;
+    min-height: 1px;
+    width: var(--swiper-centered-offset-after);
   }
+}
 
-  > .swiper-wrapper > .swiper-slide {
-    scroll-snap-align: center center;
+.swiper-centered.swiper-vertical,
+:host(.swiper-centered.swiper-vertical) {
+  > .swiper-wrapper > .swiper-slide:first-child,
+  > swiper-slide:first-child {
+    margin-block-start: var(--swiper-centered-offset-before);
+  }
+  > .swiper-wrapper::before {
+    width: 100%;
+    min-width: 1px;
+    height: var(--swiper-centered-offset-after);
   }
 }
diff --git a/src/modules/a11y/a11y.scss b/src/modules/a11y/a11y.scss
@@ -1,5 +1,6 @@
 /* a11y */
-.swiper .swiper-notification {
+.swiper .swiper-notification,
+swiper-container .swiper-notification {
   position: absolute;
   left: 0;
   top: 0;

diff --git a/src/modules/effect-cards/effect-cards.scss b/src/modules/effect-cards/effect-cards.scss
@@ -1,7 +1,9 @@
 .swiper-cards {
   overflow: visible;
-  .swiper-slide {
+  .swiper-slide,
+  swiper-slide {
     transform-origin: center bottom;
     backface-visibility: hidden;
+    overflow: hidden;
   }
 }
diff --git a/src/modules/effect-creative/effect-creative.scss b/src/modules/effect-creative/effect-creative.scss
@@ -1,5 +1,6 @@
 .swiper-creative {
-  .swiper-slide {
+  .swiper-slide,
+  swiper-slide {
     backface-visibility: hidden;
     overflow: hidden;
     transition-property: transform, opacity, height;

diff --git a/src/modules/effect-cube/effect-cube.scss b/src/modules/effect-cube/effect-cube.scss
@@ -1,6 +1,7 @@
 .swiper-cube {
   overflow: visible;
-  .swiper-slide {
+  .swiper-slide,
+  swiper-slide {
     pointer-events: none;
     backface-visibility: hidden;
     z-index: 1;
@@ -12,7 +13,8 @@
       pointer-events: none;
     }
   }
-  &.swiper-rtl .swiper-slide {
+  &.swiper-rtl .swiper-slide,
+  &.swiper-rtl swiper-slide {
     transform-origin: 100% 0;
   }
   .swiper-slide-active {
@@ -24,7 +26,8 @@
   .swiper-slide-active,
   .swiper-slide-next,
   .swiper-slide-prev,
-  .swiper-slide-next + .swiper-slide {
+  .swiper-slide-next + .swiper-slide,
+  .swiper-slide-next + swiper-slide {
     pointer-events: auto;
     visibility: visible;
   }

diff --git a/src/modules/effect-fade/effect-fade.scss b/src/modules/effect-fade/effect-fade.scss
@@ -1,13 +1,16 @@
 .swiper-fade {
   &.swiper-free-mode {
-    .swiper-slide {
+    .swiper-slide,
+    swiper-slide {
       transition-timing-function: ease-out;
     }
   }
-  .swiper-slide {
+  .swiper-slide,
+  swiper-slide {
     pointer-events: none;
     transition-property: opacity;
-    .swiper-slide {
+    .swiper-slide,
+    swiper-slide {
       pointer-events: none;
     }
   }

diff --git a/src/modules/effect-flip/effect-flip.scss b/src/modules/effect-flip/effect-flip.scss
@@ -1,10 +1,12 @@
 .swiper-flip {
   overflow: visible;
-  .swiper-slide {
+  .swiper-slide,
+  swiper-slide {
     pointer-events: none;
     backface-visibility: hidden;
     z-index: 1;
-    .swiper-slide {
+    .swiper-slide,
+    swiper-slide {
       pointer-events: none;
     }
   }

diff --git a/src/modules/free-mode/free-mode.scss b/src/modules/free-mode/free-mode.scss
@@ -1,4 +1,5 @@
-.swiper-free-mode > .swiper-wrapper {
+.swiper-free-mode > .swiper-wrapper,
+:host(.swiper-free-mode) > .swiper-wrapper {
   transition-timing-function: ease-out;
   margin: 0 auto;
 }
diff --git a/src/modules/grid/grid.scss b/src/modules/grid/grid.scss
@@ -1,7 +1,9 @@
-.swiper-grid > .swiper-wrapper {
+.swiper-grid > .swiper-wrapper,
+:host(.swiper-grid) > .swiper-wrapper {
   flex-wrap: wrap;
 }
-.swiper-grid-column > .swiper-wrapper {
+.swiper-grid-column > .swiper-wrapper,
+:host(.swiper-grid-column) > .swiper-wrapper {
   flex-wrap: wrap;
   flex-direction: column;
 }
diff --git a/src/modules/lazy/lazy.scss b/src/modules/lazy/lazy.scss
@@ -22,12 +22,12 @@
   border-top-color: transparent;
 }
 .swiper:not(.swiper-watch-progress),
+swiper-container:not(.swiper-watch-progress),
 .swiper-watch-progress .swiper-slide-visible {
   .swiper-lazy-preloader {
     animation: swiper-preloader-spin 1s infinite linear;
   }
 }
-
 .swiper-lazy-preloader-white {
   --swiper-preloader-color: #fff;
 }

diff --git a/src/modules/navigation/navigation.scss b/src/modules/navigation/navigation.scss
@@ -58,7 +58,6 @@
   right: 10px;
   left: auto;
 }
-
 .swiper-button-lock {
   display: none;
 }
diff --git a/src/modules/pagination/pagination.less b/src/modules/pagination/pagination.less
@@ -21,6 +21,7 @@
     opacity: 0;
   }
   .swiper-pagination-disabled > &,
+  :host(.swiper-pagination-disabled) &,
   &.swiper-pagination-disabled {
     display: none !important;
   }
@@ -29,6 +30,7 @@
 .swiper-pagination-fraction,
 .swiper-pagination-custom,
 .swiper-horizontal > .swiper-pagination-bullets,
+:host(.swiper-horizontal) .swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
   bottom: 10px;
   left: 0;
@@ -75,7 +77,8 @@
     box-shadow: none;
     appearance: none;
   }
-  .swiper-pagination-clickable & {
+  .swiper-pagination-clickable &,
+  :host(.swiper-pagination-clickable) & {
     cursor: pointer;
   }
 
@@ -89,6 +92,7 @@
 }
 
 .swiper-vertical > .swiper-pagination-bullets,
+:host(.swiper-vertical) .swiper-pagination-bullets,
 .swiper-pagination-vertical.swiper-pagination-bullets {
   right: 10px;
   top: 50%;
@@ -108,6 +112,7 @@
   }
 }
 .swiper-horizontal > .swiper-pagination-bullets,
+:host(.swiper-horizontal) > .swiper-pagination-bullets,
 .swiper-pagination-horizontal.swiper-pagination-bullets {
   .swiper-pagination-bullet {
     margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
@@ -121,7 +126,8 @@
     }
   }
 }
-.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right;
 }
 /* Progress */
@@ -138,7 +144,8 @@
     transform: scale(0);
     transform-origin: left top;
   }
-  .swiper-rtl & .swiper-pagination-progressbar-fill {
+  .swiper-rtl & .swiper-pagination-progressbar-fill,
+  :host(.swiper-rtl) & .swiper-pagination-progressbar-fill {
     transform-origin: right top;
   }
   .swiper-horizontal > &,