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

#43 : Move colors and values to css vars

Browse Source
This commit is contained in:
Vadim
2021-07-15 13:17:33 +03:00
parent 629e0232d1
commit c3957ca4f3
4 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,13 +26,13 @@
<style> <style>
:root { :root {
--size: 2px --sc-arrow-size: 2px;
} }
.sc-carousel-arrow__circle { .sc-carousel-arrow__circle {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */ background-color: var(--sc-color-rgb-light-50p);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -44,18 +44,18 @@
opacity: 0.9; opacity: 0.9;
} }
.sc-carousel-arrow__arrow { .sc-carousel-arrow__arrow {
border: solid #1e1e1e; border: solid var(--sc-color-hex-dark);
border-width: 0 var(--size) var(--size) 0; border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
padding: var(--size); padding: var(--sc-arrow-size);
position: relative; position: relative;
} }
.sc-carousel-arrow__arrow-next { .sc-carousel-arrow__arrow-next {
transform: rotate(-45deg); transform: rotate(-45deg);
left: calc(var(--size) / -2); left: calc(var(--sc-arrow-size) / -2);
} }
.sc-carousel-arrow__arrow-prev { .sc-carousel-arrow__arrow-prev {
transform: rotate(135deg); transform: rotate(135deg);
right: calc(var(--size) / -2); right: calc(var(--sc-arrow-size) / -2);
} }
.sc-carousel-arrow__circle_disabled, .sc-carousel-arrow__circle_disabled,
.sc-carousel-arrow__circle_disabled:hover { .sc-carousel-arrow__circle_disabled:hover {

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

@@ -318,6 +318,12 @@
</div> </div>
<style> <style>
:root {
--sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
--sc-color-rgb-light: #5d5d5d;
--sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5);
--sc-color-hex-dark: #1e1e1e;
}
.sc-carousel__carousel-container { .sc-carousel__carousel-container {
display: flex; display: flex;
width: 100%; width: 100%;

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

@@ -41,7 +41,7 @@
width: 16px; width: 16px;
} }
.sc-carousel-dot__dot { .sc-carousel-dot__dot {
background-color: #5d5d5d; background-color: var(--sc-color-rgb-light);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
opacity: 0.5; opacity: 0.5;

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

@@ -32,7 +32,7 @@
<style> <style>
:root { :root {
--dot-size: 10px; --sc-dot-size: 10px;
} }
.sc-carousel-dots__container { .sc-carousel-dots__container {
display: flex; display: flex;
@@ -42,8 +42,8 @@
padding: 0 30px; padding: 0 30px;
} }
.sc-carousel-dots__dot-container { .sc-carousel-dots__dot-container {
height: calc(var(--dot-size) + 10px); height: calc(var(--sc-dot-size) + 10px);
width: calc(var(--dot-size) + 10x); width: calc(var(--sc-dot-size) + 10px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;