Change toggle button design

This commit is contained in:
sienori 2019-05-03 15:26:55 +09:00
parent c4107f8687
commit bb85f59ef2

View file

@ -27,18 +27,29 @@
.toggleButton {
height: 18px;
.react-toggle {
$offset-width: 15px;
.react-toggle-track {
display: flex;
flex-direction: column;
justify-content: center;
height: 18px;
$offset-width: 18px;
.react-toggle-track {
height: 10px;
width: 50px - $offset-width;
background-color: var(--sub-text);
-webkit-box-transition: all 100ms ease;
-moz-box-transition: all 100ms ease;
transition: all 100ms ease;
}
.react-toggle-thumb {
height: 16px;
width: 16px;
left: 0px;
-webkit-box-shadow: none;
-moz-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 {
@ -46,7 +57,7 @@
background-color: var(--highlight);
}
.react-toggle-thumb {
left: 33px - $offset-width;
left: 34px - $offset-width;
border-color: var(--highlight);
}
}