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

#101 : Update button styles

Browse Source
This commit is contained in:
Vadim
2022-05-04 22:51:50 +03:00
parent bfa295eb81
commit c6679b52e7
3 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@
</script> </script>
<button <button
class="sc-carousel-arrow__circle" class="sc-carousel-button sc-carousel-arrow__circle"
class:sc-carousel-arrow__circle_disabled={disabled} class:sc-carousel-arrow__circle_disabled={disabled}
on:click on:click
> >

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

@@ -368,4 +368,11 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
:global(.sc-carousel-button) {
all: unset;
cursor: pointer;
}
:global(.sc-carousel-button:focus) {
outline: 5px auto;
}
</style> </style>

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

@@ -6,7 +6,7 @@
</script> </script>
<button <button
class="sc-carousel-dot__dot" class="sc-carousel-button sc-carousel-dot__dot"
class:sc-carousel-dot__dot_active={active} class:sc-carousel-dot__dot_active={active}
on:click on:click
></button> ></button>
@@ -18,16 +18,6 @@
--sc-dot-size-animation-time: 250ms; --sc-dot-size-animation-time: 250ms;
} }
button {
all: unset;
cursor: pointer;
}
button:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}
.sc-carousel-dot__dot { .sc-carousel-dot__dot {
background-color: var(--sc-color-rgb-light); background-color: var(--sc-color-rgb-light);
border-radius: 50%; border-radius: 50%;