studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

sliders personnalisés

Browse source
This commit is contained in:
Julie Blanc 2025-12-10 16:24:58 +01:00
parent 68343a52f5
commit 202b7aeab4
3 changed files with 131 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

61
public/assets/css/src/_forms.scss
View file

@ -14,6 +14,67 @@ input[type="number"] {
}
/// RANGE ---------------------------------------------------------------------------------
input[type="range"]{
-webkit-appearance: none;
background: transparent;
}
@mixin thumb(){
border: 2px solid var(--color-panel-bg);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-interface-500);
position: relative;
top: -6px;
cursor: pointer;
}
@mixin track(){
width: 100%;
height: 4px;
cursor: pointer;
background: var(--color-interface-200);
border-radius: 2px;
}
/* WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
@include thumb();
}
input[type=range]::-webkit-slider-runnable-track {
@include track();
}
/* Firefox */
input[type=range]::-moz-range-thumb {
@include thumb();
}
input[type=range]::-moz-range-track{
@include track();
}
/* IE */
input[type=range]::-ms-thumb {
@include thumb();
}
input[type=range]::-ms-track{
background: transparent;
border-color: transparent;
color: transparent;
@include track();
}
.field {
display: flex;

69
public/assets/css/style.css
View file

@ -281,6 +281,75 @@ input[type=number] {
padding-left: 0.5ch;
}
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
/* WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid var(--color-panel-bg);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-interface-500);
position: relative;
top: -6px;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: var(--color-interface-200);
border-radius: 2px;
}
/* Firefox */
input[type=range]::-moz-range-thumb {
border: 2px solid var(--color-panel-bg);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-interface-500);
position: relative;
top: -6px;
cursor: pointer;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
background: var(--color-interface-200);
border-radius: 2px;
}
/* IE */
input[type=range]::-ms-thumb {
border: 2px solid var(--color-panel-bg);
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-interface-500);
position: relative;
top: -6px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
color: transparent;
width: 100%;
height: 4px;
cursor: pointer;
background: var(--color-interface-200);
border-radius: 2px;
}
.field {
display: flex;
}

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long