diff --git a/src/parts/_core.css b/src/parts/_core.css index db69e63..d10b131 100644 --- a/src/parts/_core.css +++ b/src/parts/_core.css @@ -1,6 +1,7 @@ @import '_base.css'; @import '_typography.css'; @import '_forms.css'; +@import '_range.css'; @import '_links.css'; @import '_code.css'; @import '_misc.css'; \ No newline at end of file diff --git a/src/parts/_forms.css b/src/parts/_forms.css index 934a974..0b21391 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -30,6 +30,7 @@ textarea { } input:not([type='checkbox']):not([type='radio']), +input[type='range'], select, button, textarea { @@ -83,81 +84,3 @@ textarea:disabled { ::placeholder { color: var(--form-placeholder); } - -input[type='range'] { - -webkit-appearance: none; - margin: 10px 0; - padding: 10px 0; - background: transparent; -} -input[type='range']:focus { - outline: none; -} - -input[type='range']::-webkit-slider-runnable-track { - width: 100%; - height: 9.5px; - transition: 0.2s; - background: var(--background); - border-radius: 3px; -} -input[type='range']::-webkit-slider-thumb { - box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d; - height: 20px; - width: 20px; - border-radius: 50%; - background: var(--border); - -webkit-appearance: none; - margin-top: -7px; -} -input[type='range']:focus::-webkit-slider-runnable-track { - background: var(--background); -} -input[type='range']::-moz-range-track { - width: 100%; - height: 9.5px; - transition: 0.2s; - background: var(--background); - border-radius: 3px; -} -input[type='range']::-moz-range-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - height: 20px; - width: 20px; - border-radius: 50%; - background: var(--border); -} -input[type='range']::-ms-track { - width: 100%; - height: 9.5px; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; -} -input[type='range']::-ms-fill-lower { - background: var(--background); - border: 0.2px solid #010101; - border-radius: 3px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; -} -input[type='range']::-ms-fill-upper { - background: var(--background); - border: 0.2px solid #010101; - border-radius: 3px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; -} -input[type='range']::-ms-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 20px; - width: 20px; - border-radius: 50%; - background: var(--border); -} -input[type='range']:focus::-ms-fill-lower { - background: var(--background); -} -input[type='range']:focus::-ms-fill-upper { - background: var(--background); -} diff --git a/src/parts/_range.css b/src/parts/_range.css new file mode 100644 index 0000000..1091291 --- /dev/null +++ b/src/parts/_range.css @@ -0,0 +1,87 @@ +input[type='range'] { + margin: 10px 0; + padding: 10px 0; + background: transparent; +} + +input[type='range']:focus { + outline: none; +} + +input[type='range']::-webkit-slider-runnable-track { + width: 100%; + height: 9.5px; + transition: 0.2s; + background: var(--background); + border-radius: 3px; +} + +input[type='range']::-webkit-slider-thumb { + box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d; + height: 20px; + width: 20px; + border-radius: 50%; + background: var(--border); + -webkit-appearance: none; + margin-top: -7px; +} + +input[type='range']:focus::-webkit-slider-runnable-track { + background: var(--background); +} + +input[type='range']::-moz-range-track { + width: 100%; + height: 9.5px; + transition: 0.2s; + background: var(--background); + border-radius: 3px; +} + +input[type='range']::-moz-range-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + height: 20px; + width: 20px; + border-radius: 50%; + background: var(--border); +} + +input[type='range']::-ms-track { + width: 100%; + height: 9.5px; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} + +input[type='range']::-ms-fill-lower { + background: var(--background); + border: 0.2px solid #010101; + border-radius: 3px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} + +input[type='range']::-ms-fill-upper { + background: var(--background); + border: 0.2px solid #010101; + border-radius: 3px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} + +input[type='range']::-ms-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 20px; + width: 20px; + border-radius: 50%; + background: var(--border); +} + +input[type='range']:focus::-ms-fill-lower { + background: var(--background); +} + +input[type='range']:focus::-ms-fill-upper { + background: var(--background); +} \ No newline at end of file