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

Add prefixes to dot

Browse Source
This commit is contained in:
Vadim
2021-01-27 19:40:10 +03:00
parent fca1335a99
commit a210cab1f1
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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