mirror of
https://github.com/ApfelTeeSaft/LiveSplitOne.git
synced 2026-08-27 03:33:40 +00:00
Christopher Serr
d771cda89d
This refactors some code to use CSS modules, functional React components and splits up the Settings component into roughly one component per setting.
80 lines
1.5 KiB
SCSS
80 lines
1.5 KiB
SCSS
@use "sass:math";
|
|
|
|
@use "variables.icss";
|
|
|
|
$label-size: 14px;
|
|
|
|
.group {
|
|
position: relative;
|
|
border-bottom: 1px solid variables.$border-color;
|
|
|
|
>input {
|
|
font-size: 18px;
|
|
padding: $label-size + variables.$ui-margin 0 math.div(variables.$ui-margin, 2) math.div(variables.$ui-margin, 2);
|
|
display: block;
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
color: white;
|
|
font-family: inherit;
|
|
}
|
|
|
|
>input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
>label {
|
|
color: hsla(50, 0%, 75%, 1);
|
|
font-size: $label-size;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: math.div(variables.$ui-margin, 2);
|
|
top: 0;
|
|
transition: 0.2s ease all;
|
|
}
|
|
|
|
>input:focus~label {
|
|
color: hsla(50, 100%, 50%, 1);
|
|
}
|
|
|
|
&.invalid>input:focus~label {
|
|
color: hsla(0, 100%, 50%, 1);
|
|
}
|
|
|
|
>.bar {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
>.bar:before,
|
|
>.bar:after {
|
|
content: "";
|
|
height: 2px;
|
|
width: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
background: hsla(50, 100%, 50%, 1);
|
|
transition: 0.2s ease all;
|
|
}
|
|
|
|
>.bar:before {
|
|
left: 50%;
|
|
}
|
|
|
|
>.bar:after {
|
|
right: 50%;
|
|
}
|
|
|
|
&.invalid>.bar:before,
|
|
&.invalid>.bar:after {
|
|
background: hsla(0, 100%, 50%, 1);
|
|
}
|
|
|
|
>input:focus~.bar:before,
|
|
>input:focus~.bar:after {
|
|
width: 50%;
|
|
}
|
|
}
|