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

Merge pull request #44 from vadimkorr/feature/#43_Move-colors-to-css-vars

Browse Source 
feature/#43 Move colors to css vars
This commit is contained in:
Vadim
2021-07-15 19:03:42 +03:00
committed by GitHub
parent 629e0232d1 c3957ca4f3
commit ff36cb98d9
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>
:root {
--size: 2px
--sc-arrow-size: 2px;
}
.sc-carousel-arrow__circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
background-color: var(--sc-color-rgb-light-50p);
display: flex;
align-items: center;
justify-content: center;
@@ -44,18 +44,18 @@
opacity: 0.9;
}
.sc-carousel-arrow__arrow {
border: solid #1e1e1e;
border-width: 0 var(--size) var(--size) 0;
padding: var(--size);
border: solid var(--sc-color-hex-dark);
border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
padding: var(--sc-arrow-size);
position: relative;
}
.sc-carousel-arrow__arrow-next {
transform: rotate(-45deg);
left: calc(var(--size) / -2);
left: calc(var(--sc-arrow-size) / -2);
}
.sc-carousel-arrow__arrow-prev {
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:hover {

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

@@ -318,6 +318,12 @@
</div>
<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 {
display: flex;
width: 100%;

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

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

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

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