Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add HSL sliders

Browse Source
This commit is contained in:
Jeremy Thomas
2024-06-24 04:10:08 +01:00
parent 681592e689
commit 34029baa2c
3 changed files with 103 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/_react/bulma-customizer/src/components/Slider.module.css
View File

@@ -2,7 +2,6 @@
position: relative;
width: 15rem;
padding: 0.375rem 0;
box-shadow: 0 0 0 1px green;
cursor: grab;
}
@@ -31,7 +30,7 @@
}
.background {
border-radius: 0.125rem;
border-radius: 0.25rem;
background-color: white;
height: 0.5rem;
}
@@ -48,3 +47,21 @@
rgb(255, 0, 0)
);
}
.saturation {
background-image: linear-gradient(
to right,
hsl(var(--h), 0%, var(--l)),
hsl(var(--h), var(--s), var(--l)),
hsl(var(--h), 100%, var(--l))
);
}
.lightness {
background-image: linear-gradient(
to right,
hsl(var(--h), var(--s), 0%),
hsl(var(--h), var(--s), 50%),
hsl(var(--h), var(--s), 100%)
);
}