update docusaurus to v2.0.0-beta.5
Signed-off-by: jffarge <jf@dagger.io>
This commit is contained in:
100
website/src/theme/Toggle/styles.css
Normal file
100
website/src/theme/Toggle/styles.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Styles for React Toggle
|
||||
* copied over because we want to allow user to swizzle it and modify the css
|
||||
* and also to make sure its compatible with our dark mode
|
||||
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
|
||||
*/
|
||||
.react-toggle {
|
||||
touch-action: pan-x;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 55px;
|
||||
height: 24px;
|
||||
border-radius: 30px;
|
||||
background-color: #40b8bb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-track-check,
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
right: 6px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-track-x,
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 3px solid var(--ifm-color-primary-dark);
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-thumb,
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 31px;
|
||||
}
|
||||
|
||||
.icon_day_svg__mode,
|
||||
.icon_night_svg__mode {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
Reference in New Issue
Block a user