From bb85f59ef2ac234645ba1534803a7040cf50bea9 Mon Sep 17 00:00:00 2001 From: sienori Date: Fri, 3 May 2019 15:26:55 +0900 Subject: [PATCH] Change toggle button design --- src/popup/styles/Header.scss | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/popup/styles/Header.scss b/src/popup/styles/Header.scss index 696d1dc..9904a13 100644 --- a/src/popup/styles/Header.scss +++ b/src/popup/styles/Header.scss @@ -27,18 +27,29 @@ .toggleButton { height: 18px; .react-toggle { - $offset-width: 15px; + display: flex; + flex-direction: column; + justify-content: center; + height: 18px; + $offset-width: 18px; .react-toggle-track { - height: 18px; + 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); } }