From dc9a00f280015994956e9f934f769d0b64d0945a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 9 May 2023 05:16:40 +0000 Subject: [PATCH] Remove an obsolete variable and use a custom property for Slider (#10779) --- res/css/_common.pcss | 3 --- res/css/views/elements/_Slider.pcss | 15 ++++++++------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 26d4033c0e..bb4dc6a68f 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -27,9 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */ $selected-message-border-width: 4px; -$slider-dot-size: 1em; -$slider-selection-dot-size: 2.4em; - $timeline-image-border-radius: 8px; :root { font-size: 10px; diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss index e234cad837..261c27f1d8 100644 --- a/res/css/views/elements/_Slider.pcss +++ b/res/css/views/elements/_Slider.pcss @@ -27,6 +27,7 @@ limitations under the License. font-size: 1em; // set base multiplier for em units applied later --active-color: $accent; + --selection-dot-size: 2.4em; &:disabled { cursor: not-allowed; @@ -47,12 +48,12 @@ limitations under the License. } &::-webkit-slider-thumb { border: 0 solid #000000; - width: $slider-selection-dot-size; - height: $slider-selection-dot-size; + width: var(--selection-dot-size); + height: var(--selection-dot-size); background: var(--active-color); border-radius: 50%; -webkit-appearance: none; - margin-top: calc(2px + 1.2em - $slider-selection-dot-size); + margin-top: calc(2px + 1.2em - var(--selection-dot-size)); } &:focus::-webkit-slider-runnable-track { background: $slider-background-color; @@ -73,8 +74,8 @@ limitations under the License. } &::-moz-range-thumb { border: 0 solid #000000; - width: $slider-selection-dot-size; - height: $slider-selection-dot-size; + width: var(--selection-dot-size); + height: var(--selection-dot-size); background: var(--active-color); border-radius: 50%; } @@ -94,8 +95,8 @@ limitations under the License. } &::-ms-thumb { margin-top: 1px; - width: $slider-selection-dot-size; - height: $slider-selection-dot-size; + width: var(--selection-dot-size); + height: var(--selection-dot-size); background: var(--active-color); border-radius: 50%; }