3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-09 06:12:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(website): shadow on showcase toggle (#5968)

Browse source 
* refactor: shadow on showcase toggle

* minor update

* faster transition

Co-authored-by: Josh-Cena <sidachen2003@gmail.com>
This commit is contained in:
Don 2021-11-20 22:21:03 -05:00 • committed by GitHub
parent 3551212d50
commit cd96ce165c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
website/src/pages/showcase/_components/ShowcaseFilterToggle/index.tsx
View file

@ -55,7 +55,6 @@ export default function ShowcaseFilterToggle(): JSX.Element {
<label htmlFor={id} className={clsx(styles.checkboxLabel, 'shadow--md')}> <label htmlFor={id} className={clsx(styles.checkboxLabel, 'shadow--md')}>
<span className={styles.checkboxLabelOr}>OR</span> <span className={styles.checkboxLabelOr}>OR</span>
<span className={styles.checkboxLabelAnd}>AND</span> <span className={styles.checkboxLabelAnd}>AND</span>
<span className={styles.checkboxToggle} aria-hidden />
</label> </label>
</div> </div>
); );

45
website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
View file

@ -6,26 +6,30 @@
*/ */
.checkboxLabel { .checkboxLabel {
--height: 25px;
--width: 80px;
--border: 2px;
display: flex; display: flex;
width: 80px; width: var(--width);
height: 25px; height: var(--height);
position: relative; position: relative;
border-radius: 25px; border-radius: var(--height);
border: 2px solid var(--ifm-color-primary-darkest); border: var(--border) solid var(--ifm-color-primary-darkest);
overflow: hidden;
background-color: transparent;
cursor: pointer; cursor: pointer;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
opacity: 0.75; opacity: 0.75;
transition: opacity 200ms ease-out; transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
box-shadow: var(--ifm-global-shadow-md);
} }
input:focus ~ .checkboxLabel, input:focus ~ .checkboxLabel,
input:focus-visible ~ .checkboxLabel, input:focus-visible ~ .checkboxLabel,
.checkboxLabel:hover { .checkboxLabel:hover {
opacity: 1; opacity: 1;
box-shadow: 0px 0px 2px 1px var(--ifm-color-primary-dark); box-shadow: var(--ifm-global-shadow-md),
0px 0px 2px 1px var(--ifm-color-primary-dark);
} }
.checkboxLabel > * { .checkboxLabel > * {
@ -34,24 +38,19 @@ input:focus-visible ~ .checkboxLabel,
transition: opacity 150ms ease-in 50ms; transition: opacity 150ms ease-in 50ms;
} }
.checkboxToggle { .checkboxLabel::after {
position: absolute; position: absolute;
content: ''; content: '';
top: -2px; inset: 0;
left: -2px; width: calc(var(--width) / 2);
width: 40px; height: 100%;
height: 25px; border-radius: var(--height);
border-radius: 20px;
background-color: var(--ifm-color-primary-darkest); background-color: var(--ifm-color-primary-darkest);
box-sizing: border-box; transition: transform var(--ifm-transition-fast)
border: 0.04em solid var(--ifm-color-primary-darkest); var(--ifm-transition-timing-default);
transition-property: transform; transform: translateX(calc(var(--width) / 2 - var(--border)));
transition-duration: 200ms;
transition-timing-function: ease-out;
transition-delay: 150ms;
transform: translateX(38px);
} }
input:checked ~ .checkboxLabel > .checkboxToggle { input:checked ~ .checkboxLabel::after {
transform: translateX(0); transform: translateX(calc(-1 * var(--border)));
} }