Change toggle button design
This commit is contained in:
parent
c4107f8687
commit
bb85f59ef2
|
@ -27,18 +27,29 @@
|
||||||
.toggleButton {
|
.toggleButton {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
.react-toggle {
|
.react-toggle {
|
||||||
$offset-width: 15px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 18px;
|
||||||
|
$offset-width: 18px;
|
||||||
.react-toggle-track {
|
.react-toggle-track {
|
||||||
height: 18px;
|
height: 10px;
|
||||||
width: 50px - $offset-width;
|
width: 50px - $offset-width;
|
||||||
background-color: var(--sub-text);
|
background-color: var(--sub-text);
|
||||||
|
-webkit-box-transition: all 100ms ease;
|
||||||
|
-moz-box-transition: all 100ms ease;
|
||||||
|
transition: all 100ms ease;
|
||||||
}
|
}
|
||||||
.react-toggle-thumb {
|
.react-toggle-thumb {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
left: 0px;
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
-moz-box-shadow: none;
|
-moz-box-shadow: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
-webkit-box-transition: all 100ms ease;
|
||||||
|
-moz-box-transition: all 100ms ease;
|
||||||
|
transition: all 100ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.react-toggle--checked {
|
&.react-toggle--checked {
|
||||||
|
@ -46,7 +57,7 @@
|
||||||
background-color: var(--highlight);
|
background-color: var(--highlight);
|
||||||
}
|
}
|
||||||
.react-toggle-thumb {
|
.react-toggle-thumb {
|
||||||
left: 33px - $offset-width;
|
left: 34px - $offset-width;
|
||||||
border-color: var(--highlight);
|
border-color: var(--highlight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue