narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change toggle button design

Browse source
This commit is contained in:
sienori 2019-05-03 15:26:55 +09:00
parent c4107f8687
commit bb85f59ef2
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/popup/styles/Header.scss
View file

@ -27,18 +27,29 @@
.toggleButton { .toggleButton {
height: 18px; height: 18px;
.react-toggle { .react-toggle {
$offset-width: 15px; display: flex;
.react-toggle-track { flex-direction: column;
justify-content: center;
height: 18px; height: 18px;
$offset-width: 18px;
.react-toggle-track {
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);
} }
} }