docs: streamline release v2 documentation (#6760)
This commit is contained in:
Thomas authored and 
GitHub committed
1 parent
ac62e5bfd6
commit
b3aa6155cc
163 files changed
+2908
-4208
No files matched your search
@@ -0,0 +1,175 @@
|
||||
.connector {
|
||||
--flow-accent: var(--ifm-color-primary);
|
||||
--flow-coral: #f17865;
|
||||
--flow-head: var(--diagram-ink, var(--ifm-font-color-base));
|
||||
--flow-line: var(--diagram-line, var(--ifm-color-emphasis-300));
|
||||
--flow-rail: color-mix(in srgb, var(--flow-line) 68%, var(--flow-head));
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 0.22rem;
|
||||
min-width: 0;
|
||||
color: var(--flow-head);
|
||||
}
|
||||
|
||||
.label {
|
||||
z-index: 1;
|
||||
max-width: 100%;
|
||||
padding: 0.17rem 0.36rem;
|
||||
border: 1px solid color-mix(in srgb, var(--flow-accent) 32%, var(--flow-line));
|
||||
border-radius: 999px;
|
||||
color: var(--diagram-muted, var(--ifm-color-emphasis-700));
|
||||
background: var(--diagram-panel, var(--ifm-background-surface-color));
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.5rem;
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: calc(100% + 0.5rem);
|
||||
height: 1.1rem;
|
||||
margin-inline: -0.25rem;
|
||||
}
|
||||
|
||||
.rail {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.18rem;
|
||||
left: 0.18rem;
|
||||
height: 2px;
|
||||
background: var(--flow-rail);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.beam {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5px);
|
||||
left: 0.23rem;
|
||||
width: 48%;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, transparent, var(--flow-coral) 34%, var(--flow-accent) 68%, transparent);
|
||||
filter: drop-shadow(0 0 0.28rem color-mix(in srgb, var(--flow-accent) 48%, transparent));
|
||||
animation: flow-beam-horizontal 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
animation-delay: var(--flow-delay);
|
||||
}
|
||||
|
||||
.vertical {
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.vertical .track {
|
||||
width: 1.1rem;
|
||||
height: 2.6rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.vertical .rail {
|
||||
top: 0.16rem;
|
||||
right: auto;
|
||||
bottom: 0.16rem;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.vertical .beam {
|
||||
top: 0.23rem;
|
||||
left: calc(50% - 1.5px);
|
||||
width: 3px;
|
||||
height: 48%;
|
||||
background: linear-gradient(180deg, transparent, var(--flow-coral) 46%, var(--flow-accent));
|
||||
animation-name: flow-beam-vertical;
|
||||
}
|
||||
|
||||
.visuallyHidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
clip: rect(0 0 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes flow-beam-horizontal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-35%);
|
||||
}
|
||||
|
||||
18%,
|
||||
72% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(155%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flow-beam-vertical {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-35%);
|
||||
}
|
||||
|
||||
18%,
|
||||
72% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(155%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.connector:not(.vertical) {
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.connector:not(.vertical) .track {
|
||||
width: 1.1rem;
|
||||
height: 2.6rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.connector:not(.vertical) .rail {
|
||||
top: 0.16rem;
|
||||
right: auto;
|
||||
bottom: 0.16rem;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.connector:not(.vertical) .beam {
|
||||
top: 0.23rem;
|
||||
left: calc(50% - 1.5px);
|
||||
width: 3px;
|
||||
height: 48%;
|
||||
background: linear-gradient(180deg, transparent, var(--flow-coral) 46%, var(--flow-accent));
|
||||
animation-name: flow-beam-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.beam {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import styles from "./flow-connector.module.css";
|
||||
|
||||
type FlowConnectorProps = {
|
||||
label?: string;
|
||||
animationDelay?: number;
|
||||
orientation?: "responsive" | "vertical";
|
||||
};
|
||||
|
||||
export function FlowConnector({ label, animationDelay = 0, orientation = "responsive" }: FlowConnectorProps) {
|
||||
let className = styles.connector;
|
||||
if (orientation === "vertical") className = `${className} ${styles.vertical}`;
|
||||
const style = { "--flow-delay": `${animationDelay}ms` } as CSSProperties;
|
||||
|
||||
let accessibleLabel = <span className={styles.visuallyHidden}>then</span>;
|
||||
if (label) accessibleLabel = <small className={styles.label}>{label}</small>;
|
||||
|
||||
return (
|
||||
<span className={className} style={style}>
|
||||
{accessibleLabel}
|
||||
<span className={styles.track} aria-hidden="true">
|
||||
<span className={styles.rail} />
|
||||
<span className={styles.beam} />
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user