public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add global prefix

Browse Source
This commit is contained in:
Vadim
2021-01-27 19:56:06 +03:00
parent 1b36742624
commit fcae87d9c6
4 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Arrow/Arrow.svelte
View File

@@ -13,14 +13,14 @@
</script>
<div
class="carousel-arrow__circle"
class:carousel-arrow__circle_disabled={disabled}
class="sc-carousel-arrow__circle"
class:sc-carousel-arrow__circle_disabled={disabled}
on:click
>
<i
class="carousel-arrow__arrow"
class:carousel-arrow__arrow-next={direction === NEXT}
class:carousel-arrow__arrow-prev={direction === PREV}
class="sc-carousel-arrow__arrow"
class:sc-carousel-arrow__arrow-next={direction === NEXT}
class:sc-carousel-arrow__arrow-prev={direction === PREV}
></i>
</div>
@@ -28,7 +28,7 @@
:root {
--size: 2px
}
.carousel-arrow__circle {
.sc-carousel-arrow__circle {
width: 20px;
height: 20px;
border-radius: 50%;
@@ -39,25 +39,25 @@
transition: opacity 100ms ease;
cursor: pointer;
}
.carousel-arrow__circle:hover {
.sc-carousel-arrow__circle:hover {
opacity: 0.9;
}
.carousel-arrow__arrow {
.sc-carousel-arrow__arrow {
border: solid #1e1e1e;
border-width: 0 var(--size) var(--size) 0;
padding: var(--size);
position: relative;
}
.carousel-arrow__arrow-next {
.sc-carousel-arrow__arrow-next {
transform: rotate(-45deg);
left: calc(var(--size) / -2);
}
.carousel-arrow__arrow-prev {
.sc-carousel-arrow__arrow-prev {
transform: rotate(135deg);
right: calc(var(--size) / -2);
}
.carousel-arrow__circle_disabled,
.carousel-arrow__circle_disabled:hover {
.sc-carousel-arrow__circle_disabled,
.sc-carousel-arrow__circle_disabled:hover {
opacity: 0.5;
}
</style>

22
src/components/Carousel/Carousel.svelte
View File

@@ -179,11 +179,11 @@
}
</script>
<div class="carousel__carousel-container">
<div class="carousel__content-container">
<div class="sc-carousel__carousel-container">
<div class="sc-carousel__content-container">
{#if arrows}
<slot name="prev" {showPrevPage}>
<div class="carousel__arrow-container">
<div class="sc-carousel__arrow-container">
<Arrow
direction="prev"
disabled={!infinite && originalCurrentPageIndex === 0}
@@ -193,11 +193,11 @@
</slot>
{/if}
<div
class="carousel__pages-window"
class="sc-carousel__pages-window"
bind:this={pageWindowElement}
>
<div
class="carousel__pages-container"
class="sc-carousel__pages-container"
use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
on:start={handleSwipeStart}
on:move={handleSwipeMove}
@@ -214,7 +214,7 @@
</div>
{#if arrows}
<slot name="next" {showNextPage}>
<div class="carousel__arrow-container">
<div class="sc-carousel__arrow-container">
<Arrow
direction="next"
disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
@@ -241,30 +241,30 @@
</div>
<style>
.carousel__carousel-container {
.sc-carousel__carousel-container {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
.carousel__content-container {
.sc-carousel__content-container {
position: relative;
display: flex;
width: 100%;
}
.carousel__pages-window {
.sc-carousel__pages-window {
flex: 1;
display: flex;
overflow: hidden;
box-sizing: border-box;
}
.carousel__pages-container {
.sc-carousel__pages-container {
width: 100%;
display: flex; /* to put child elements in one row */
transition-timing-function: ease-in-out;
transition-property: transform;
}
.carousel__arrow-container {
.sc-carousel__arrow-container {
padding: 5px;
box-sizing: border-box;
display: flex;

14
src/components/Dot/Dot.svelte
View File

@@ -20,10 +20,10 @@
}
</script>
<div class="carousel-dot__container">
<div class="sc-carousel-dot__container">
<div
class="carousel-dot__dot"
class:carousel-dot__dot_current={active}
class="sc-carousel-dot__dot"
class:sc-carousel-dot__dot_current={active}
style="
height: {$size}px;
width: {$size}px;
@@ -33,14 +33,14 @@
</div>
<style>
.carousel-dot__container {
.sc-carousel-dot__container {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
}
.carousel-dot__dot {
.sc-carousel-dot__dot {
background-color: #5d5d5d;
border-radius: 50%;
display: inline-block;
@@ -48,10 +48,10 @@
cursor: pointer;
transition: opacity 100ms ease;
}
.carousel-dot__dot:hover {
.sc-carousel-dot__dot:hover {
opacity: 0.9;
}
.carousel-dot__dot_current {
.sc-carousel-dot__dot_current {
opacity: 0.7;
}
</style>

8
src/components/Dots/Dots.svelte
View File

@@ -19,9 +19,9 @@
}
</script>
<div class="carousel-dots__container">
<div class="sc-carousel-dots__container">
{#each Array(pagesCount) as _, pageIndex (pageIndex)}
<div class="carousel-dots__dot-container">
<div class="sc-carousel-dots__dot-container">
<Dot
active={currentPageIndex === pageIndex}
on:click={() => handleDotClick(pageIndex)}
@@ -34,11 +34,11 @@
:root {
--dot-size: 10px;
}
.carousel-dots__container {
.sc-carousel-dots__container {
display: flex;
align-items: center;
}
.carousel-dots__dot-container {
.sc-carousel-dots__dot-container {
height: calc(var(--dot-size) + 10px);
width: calc(var(--dot-size) + 10x);
display: flex;