MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Separate style overrides for range input to fix not displaying on webkit

This commit is contained in:
Andrew Kingston 2022-06-21 15:25:37 +01:00
parent ad57889c79
commit 412c0a3676
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/bbui/src/Form/Core/Slider.svelte
View File

@ -48,9 +48,18 @@
outline: none; outline: none;
} }
input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb {
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border: 2px solid var(--spectrum-global-color-gray-700);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--background);
cursor: pointer;
transition: background 130ms ease-out;
margin-top: -7px;
}
input[type="range"]::-moz-range-thumb {
border: 2px solid var(--spectrum-global-color-gray-700); border: 2px solid var(--spectrum-global-color-gray-700);
height: 12px; height: 12px;
width: 12px; width: 12px;
@ -60,7 +69,13 @@
transition: background 130ms ease-out; transition: background 130ms ease-out;
} }
input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: var(--spectrum-global-color-gray-300);
border-radius: 2px;
}
input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-track {
width: 100%; width: 100%;
height: 2px; height: 2px;