CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 14:01:27 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Andrew Kingston 2022-06-21 15:25:37 +01:00
parent cc4b2b159c
commit e9696440be
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;