3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-16 16:25:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
1 changed files with 2 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
View file

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