101 lines
2.0 KiB
CSS
101 lines
2.0 KiB
CSS
/**
|
|
* 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;
|
|
}
|