imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use em to detach slider from root font-size

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-23 10:58:00 +01:00
parent 8f0d81e770
commit a16fe09d42
3 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

22
res/css/views/elements/_Slider.scss
View file

@ -30,30 +30,30 @@ limitations under the License.
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
height: 1rem; height: 1em;
width: 100%; width: 100%;
padding: 0 0.5rem; // half the width of a dot. padding: 0 0.5em; // half the width of a dot.
align-items: center; align-items: center;
} }
.mx_Slider_bar > hr { .mx_Slider_bar > hr {
width: 100%; width: 100%;
border: 0.2rem solid $Slider-background-color; border: 0.2em solid $Slider-background-color;
} }
.mx_Slider_selection { .mx_Slider_selection {
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(100% - 1rem); // 2 * half the width of a dot width: calc(100% - 1em); // 2 * half the width of a dot
height: 1rem; height: 1em;
position: absolute; position: absolute;
} }
.mx_Slider_selectionDot { .mx_Slider_selectionDot {
transition: left 0.25s; transition: left 0.25s;
position: absolute; position: absolute;
width: 1.1rem; width: 1.1em;
height: 1.1rem; height: 1.1em;
background-color: $Slider-selection-color; background-color: $Slider-selection-color;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 6px lightgrey; box-shadow: 0 0 6px lightgrey;
@ -63,13 +63,13 @@ limitations under the License.
.mx_Slider_selection > hr { .mx_Slider_selection > hr {
transition: width 0.25s; transition: width 0.25s;
margin: 0; margin: 0;
border: 0.2rem solid $Slider-selection-color; border: 0.2em solid $Slider-selection-color;
} }
.mx_Slider_dot { .mx_Slider_dot {
transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in;
height: 1rem; height: 1em;
width: 1rem; width: 1em;
border-radius: 50%; border-radius: 50%;
background-color: $Slider-background-color; background-color: $Slider-background-color;
z-index: 0; z-index: 0;
@ -89,7 +89,7 @@ limitations under the License.
// The following is a hack to center the labels without adding // The following is a hack to center the labels without adding
// any width to the slider's dots. // any width to the slider's dots.
.mx_Slider_labelContainer { .mx_Slider_labelContainer {
width: 1rem; width: 1em;
} }
.mx_Slider_label { .mx_Slider_label {

1
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -27,6 +27,7 @@ limitations under the License.
padding: 10px; padding: 10px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10px; border-radius: 10px;
font-size: 10px;
} }
.mx_AppearanceUserSettingsTab_fontSlider_smallText { .mx_AppearanceUserSettingsTab_fontSlider_smallText {

2
src/components/views/elements/Slider.tsx
View file

@ -89,7 +89,7 @@ export default class Slider extends React.Component<IProps> {
{ this.props.disabled ? { this.props.disabled ?
null : null :
<div className="mx_Slider_selection"> <div className="mx_Slider_selection">
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} /> <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
<hr style={{width: offset + "%"}} /> <hr style={{width: offset + "%"}} />
</div> </div>
} }