Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 10:34:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Create Slider

Browse Source
This commit is contained in:
Jeremy Thomas
2024-06-24 03:25:58 +01:00
parent 7d92a2b872
commit 4a165737df
12 changed files with 339 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/_react/bulma-customizer/src/components/Slider.module.css Normal file
View File

@@ -0,0 +1,50 @@
.main {
position: relative;
width: 15rem;
padding: 0.375rem 0;
box-shadow: 0 0 0 1px green;
cursor: grab;
}
.moving {
cursor: grabbing;
}
.handle {
background-color: rgba(255, 255, 255, 0.05);
box-shadow:
rgba(0, 0, 0, 0.15) 0 0 0 1px,
rgba(0, 0, 0, 0.05) 0 10px 10px -5px;
height: 1.25rem;
width: 1.25rem;
border-radius: 9999px;
position: absolute;
top: 0rem;
cursor: grab;
border: 0.25rem solid white;
left: -0.625rem;
}
.moving .handle,
.handle:active {
cursor: grabbing;
}
.background {
border-radius: 0.125rem;
background-color: white;
height: 0.5rem;
}
.hue {
background-image: linear-gradient(
to right,
rgb(255, 0, 0),
rgb(255, 255, 0),
rgb(0, 255, 0),
rgb(0, 255, 255),
rgb(0, 0, 255),
rgb(255, 0, 255),
rgb(255, 0, 0)
);
}