refactor(v2): adjust dark mode toggle to site style (#3774)

This commit is contained in:
Alexey Pyltsyn 2020-11-18 18:29:13 +03:00 committed by GitHub
parent 61fd53f7c0
commit 7d540a87d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -24,11 +24,9 @@
*/
:global(.react-toggle) {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
@ -61,7 +59,6 @@
top: 0px;
bottom: 0px;
margin: auto 0;
line-height: 0;
left: 8px;
opacity: 0;
transition: opacity 0.25s ease;
@ -80,7 +77,6 @@
top: 0px;
bottom: 0px;
margin: auto 0;
line-height: 0;
right: 10px;
opacity: 1;
transition: opacity 0.25s ease;
@ -92,7 +88,6 @@
}
:global(.react-toggle-thumb) {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
@ -107,13 +102,12 @@
:global([data-theme='dark'] .react-toggle .react-toggle-thumb),
:global(.react-toggle--checked .react-toggle-thumb) {
left: 27px;
border-color: #19ab27;
}
:global(.react-toggle--focus .react-toggle-thumb) {
box-shadow: 0px 0px 2px 3px #0099e0;
box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
}
:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
box-shadow: 0px 0px 5px 5px #0099e0;
box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
}