stefanorigano (SRI)
46e5387974
This commit improve the design and simplify the implementation. Popovers have been removed and the overall integration with boostrap is increased allowing customization with the default boostrap variables. Variables for (multi-)range input have been exposed at "theme-level" allowing to customize these components when creating a new theme. task-2907955 Part-of: odoo/odoo#98558
76 lines
2.5 KiB
SCSS
76 lines
2.5 KiB
SCSS
// This code has been more that widely inspired by the multirange library
|
|
// which can be found on https://github.com/LeaVerou/multirange.
|
|
// The license file can be found in the same folder as this file.
|
|
|
|
input[type="range"][multiple] {
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.multirange-wrapper {
|
|
input[type="range"][multiple] {
|
|
visibility: initial;
|
|
|
|
&::-webkit-slider-thumb {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
&.reverse {
|
|
direction: rtl;
|
|
}
|
|
|
|
&.multirange {
|
|
&::-moz-range-track {
|
|
border-color: transparent; /* needed to switch Firefox to "styleable" control */
|
|
}
|
|
|
|
&.original::-webkit-slider-thumb {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
&.ghost {
|
|
|
|
// Workaround to handle Firefox's lack of support of z-index rules
|
|
// for #shadow-root elements, see '&.original::-webkit-slider-thumb'
|
|
// rules. The entire @media query could be removed once Firefox
|
|
// will support the feature.
|
|
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
|
|
|
|
// Helper function to retrive the 'width' segment from a 'border' shorthand rule.
|
|
@function -get-border-width($input) {
|
|
@each $part in $input {
|
|
@if type-of($part) == number {
|
|
@return $part;
|
|
}
|
|
}
|
|
@return null;
|
|
}
|
|
|
|
$-thumb-border-width: #{-get-border-width($form-range-thumb-border)};
|
|
$-ghostGap: calc(#{$form-range-thumb-width} + (#{$-thumb-border-width} * 2));
|
|
|
|
margin-inline-start: $-ghostGap;
|
|
width: calc(100% - #{$-ghostGap});
|
|
}
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
background: linear-gradient(to right, transparent var(--low), var(--primary) var(--low) var(--high), transparent 0) no-repeat 50% / 100% 100%;
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
background: linear-gradient(to right, transparent var(--low), var(--primary) var(--low) var(--high), transparent 0) no-repeat 50% / 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[x-out-of-boundaries] {
|
|
display: none;
|
|
}
|
|
}
|