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>