/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ RANGE \* ˍˍˍˍˍˍˍˍˍ */ .fr-range-group { position: relative; } .fr-range-group--valid::before, .fr-range-group--error::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } .fr-range { --thumb-size: 1.5rem; position: relative; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .fr-range input[type=range] { outline: none; width: 100%; } .fr-range__output { visibility: hidden; color: var(--text-active-blue-france); } .fr-range__output, .fr-range__min, .fr-range__max { text-align: center; min-width: var(--thumb-size); font-size: 0.75rem; line-height: 1.25rem; } .fr-range[data-fr-js-range] { --progress-left: 0; --progress-right: calc(var(--thumb-size) * 0.5); } .fr-range[data-fr-js-range]::before, .fr-range[data-fr-js-range]::after { content: ""; display: block; position: absolute; top: 1.625rem; right: 0; left: 0; width: 100%; height: 0.75rem; border-radius: 0.375rem; } .fr-range[data-fr-js-range]::before { outline-offset: -1px; box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); } .fr-range[data-fr-js-range]::after { clip-path: polygon(var(--progress-left) 0, var(--progress-right) 0, var(--progress-right) 100%, var(--progress-left) 100%); background-color: var(--background-active-blue-france); --idle: transparent; --hover: var(--background-active-blue-france-hover); --active: var(--background-active-blue-france-active); } .fr-range[data-fr-js-range] input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; width: 100%; height: var(--thumb-size); z-index: 1; } .fr-range[data-fr-js-range] input[type=range]:not(:only-of-type) { pointer-events: none; } .fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none; pointer-events: auto; z-index: calc(var(--ground) + 500); background-color: var(--background-raised-grey); --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); border: 1px solid var(--border-action-high-blue-france); } .fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb:active { z-index: 2; } .fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--thumb-size); height: var(--thumb-size); border-radius: 50%; border: none; pointer-events: auto; z-index: calc(var(--ground) + 500); background-color: var(--background-raised-grey); --hover: var(--background-raised-grey-hover); --active: var(--background-raised-grey-active); filter: drop-shadow(var(--raised-shadow)); background-color: var(--background-default-grey); --idle: transparent; --hover: var(--background-default-grey-hover); --active: var(--background-default-grey-active); border: 1px solid var(--border-action-high-blue-france); } .fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb:active { z-index: 2; } .fr-range[data-fr-js-range] .fr-range__output { visibility: visible; } .fr-range--sm { --thumb-size: 1rem; } .fr-range--sm[data-fr-js-range]::before, .fr-range--sm[data-fr-js-range]::after { top: 1.5rem; height: 0.5rem; border-radius: 0.25rem; } .fr-range--step[data-fr-js-range] { --step-width: 0; } .fr-range--step[data-fr-js-range]::before, .fr-range--step[data-fr-js-range]::after { padding-left: 0.625rem; padding-right: 0.625rem; background-repeat: repeat-x; background-size: var(--step-width) 100%; background-position: 0.625rem 0; background-clip: content-box; } .fr-range--step.fr-range--sm[data-fr-js-range]::before, .fr-range--step.fr-range--sm[data-fr-js-range]::after { background-position: 0.375rem 0; padding-left: 0.375rem; padding-right: 0.375rem; } .fr-range--double .fr-range__output { min-width: calc(var(--thumb-size) * 2); } .fr-range--double[data-fr-js-range] input[type=range] { width: calc(100% - var(--thumb-size)); } .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(1) { margin-right: var(--thumb-size); } .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(2) { position: absolute; right: 0; top: 1.25rem; } .fr-range--double.fr-range--step[data-fr-js-range]::before, .fr-range--double.fr-range--step[data-fr-js-range]::after { background-size: 0; } .fr-range[data-fr-js-range] input[type=range]:disabled::-webkit-slider-thumb { border: 1px solid var(--border-disabled-grey); } .fr-range[data-fr-js-range] input[type=range]:disabled::-moz-range-thumb { border: 1px solid var(--border-disabled-grey); } .fr-range__min, .fr-range__max { color: var(--text-mention-grey); } .fr-range--step[data-fr-js-range]::before { background-image: radial-gradient(circle at 2px 50%, var(--background-action-high-blue-france) 0, var(--background-action-high-blue-france) 1px, transparent 1px); } .fr-range--step[data-fr-js-range]::after { background-image: radial-gradient(circle at 2px 50%, var(--background-action-low-blue-france) 0, var(--background-action-low-blue-france) 2px, transparent 2px); box-shadow: inset 10px 0 0 0 var(--border-active-blue-france), inset -10px 0 0 0 var(--border-active-blue-france); } .fr-range--step.fr-range--sm[data-fr-js-range]::after { box-shadow: inset 6px 0 0 0 var(--border-active-blue-france), inset -6px 0 0 0 var(--border-active-blue-france); } .fr-range-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-range-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-range-group--disabled .fr-range[data-fr-js-range]::before { box-shadow: inset 0 0 0 1px var(--border-disabled-grey); } .fr-range-group--disabled .fr-range[data-fr-js-range]::after { background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-range-group--disabled .fr-range--step[data-fr-js-range]::before { background-image: radial-gradient(circle at 2px 50%, var(--background-disabled-grey) 0, var(--background-disabled-grey) 1px, transparent 1px); } .fr-range-group--disabled .fr-range--step[data-fr-js-range]::after { background-image: radial-gradient(circle at 2px 50%, var(--background-default-grey) 0, var(--background-default-grey) 2px, transparent 2px); } .fr-range-group--disabled .fr-range__output, .fr-range-group--disabled .fr-range__min, .fr-range-group--disabled .fr-range__max { color: var(--text-disabled-grey); } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }