mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 10:45:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Remove an obsolete variable and use a custom property for Slider (#10779)

Browse source
This commit is contained in:
Suguru Hirahara 2023-05-09 05:16:40 +00:00 committed by GitHub
parent 1cfe126e14
commit dc9a00f280
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
res/css/_common.pcss
View file

@ -27,9 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
$selected-message-border-width: 4px; $selected-message-border-width: 4px;
$slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em;
$timeline-image-border-radius: 8px; $timeline-image-border-radius: 8px;
:root { :root {
font-size: 10px; font-size: 10px;

15
res/css/views/elements/_Slider.pcss
View file

@ -27,6 +27,7 @@ limitations under the License.
font-size: 1em; // set base multiplier for em units applied later font-size: 1em; // set base multiplier for em units applied later
--active-color: $accent; --active-color: $accent;
--selection-dot-size: 2.4em;
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
@ -47,12 +48,12 @@ limitations under the License.
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
border: 0 solid #000000; border: 0 solid #000000;
width: $slider-selection-dot-size; width: var(--selection-dot-size);
height: $slider-selection-dot-size; height: var(--selection-dot-size);
background: var(--active-color); background: var(--active-color);
border-radius: 50%; border-radius: 50%;
-webkit-appearance: none; -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 { &:focus::-webkit-slider-runnable-track {
background: $slider-background-color; background: $slider-background-color;
@ -73,8 +74,8 @@ limitations under the License.
} }
&::-moz-range-thumb { &::-moz-range-thumb {
border: 0 solid #000000; border: 0 solid #000000;
width: $slider-selection-dot-size; width: var(--selection-dot-size);
height: $slider-selection-dot-size; height: var(--selection-dot-size);
background: var(--active-color); background: var(--active-color);
border-radius: 50%; border-radius: 50%;
} }
@ -94,8 +95,8 @@ limitations under the License.
} }
&::-ms-thumb { &::-ms-thumb {
margin-top: 1px; margin-top: 1px;
width: $slider-selection-dot-size; width: var(--selection-dot-size);
height: $slider-selection-dot-size; height: var(--selection-dot-size);
background: var(--active-color); background: var(--active-color);
border-radius: 50%; border-radius: 50%;
} }