From 764a287c2006bccf261bf80e2269e3d2887ccb76 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Fri, 27 Sep 2024 13:40:28 +0300 Subject: [PATCH] range styles --- assets/main.scss | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/assets/main.scss b/assets/main.scss index b6733c7..1d0fa2c 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -281,17 +281,7 @@ input[type=checkbox] { } input[type=range] { - @apply bg-neutral-300 appearance-none h-1; - - &::-moz-range-track, - &::-webkit-slider-runnable-track { - @apply h-1 bg-red-500; - } - - &::-moz-range-thumb, - &::-webkit-slider-thumb { - @apply bg-[#61C4FF] shadow-red-700 h-8 w-10; - } + @apply w-full bg-transparent cursor-pointer appearance-none disabled:opacity-50 disabled:pointer-events-none focus:outline-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:-mt-0.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_#111] [&::-webkit-slider-thumb]:shadow-slate-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-in-out [&::-webkit-slider-thumb]:dark:bg-neutral-700 [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-4 [&::-moz-range-thumb]:border-blue-600 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-in-out [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-100 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:dark:bg-neutral-700 [&::-moz-range-track]:w-full [&::-moz-range-track]:h-2 [&::-moz-range-track]:bg-gray-100 [&::-moz-range-track]:rounded-full; } textarea { @@ -337,9 +327,9 @@ button { @apply w-full; } - input[type=range] { - @apply min-w-[calc(100%-8rem)] xl:min-w-min py-0 -translate-y-1/2; - } + // input[type=range] { + // @apply min-w-[calc(100%-8rem)] xl:min-w-min py-0 -translate-y-1/2; + // } } }