docs: publish restructure (#3496)
* docs: added features and guides overview page * added image * added version 2 * added version 3 * added version 4 * docs: implemented new color scheme * docs: redesigned sidebar (#3193) * docs: redesigned navbar for restructure (#3199) * docs: redesigned footer (#3209) * docs: redesigned cards (#3230) * docs: redesigned admonitions (#3231) * docs: redesign announcement bar (#3236) * docs: redesigned large cards (#3239) * docs: redesigned code blocks (#3253) * docs: redesigned search modal and page (#3264) * docs: redesigned doc footer (#3268) * docs: added new sidebars + refactored css and assets (#3279) * docs: redesigned api reference sidebar * docs: refactored css * docs: added code tabs transition * docs: added new sidebars * removed unused assets * remove unusued assets * Fix deploy errors * fix incorrect link * docs: fixed code responsivity + missing icons (#3283) * docs: changed icons (#3296) * docs: design fixes to the sidebar (#3297) * redesign fixes * docs: small design fixes * docs: several design fixes after restructure (#3299) * docs: bordered icon fixes * docs: desgin fixes * fixes to code blocks and sidebar scroll * design adjustments * docs: restructured homepage (#3305) * docs: restructured homepage * design fixes * fixed core concepts icon * docs: added core concepts page (#3318) * docs: restructured homepage * design fixes * docs: added core concepts page * changed text of different components * docs: added architecture link * added missing prop for user guide * docs: added regions overview page (#3327) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page (#3331) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page * fix link * resolve link issues * docs: updated regions architecture image * docs: second-iteration fixes (#3347) * docs: redesigned document * design fixes * docs: added products overview page (#3354) * docs: added carts overview page (#3363) * docs: added orders overview (#3364) * docs: added orders overview * added links in overview * docs: added vercel redirects * docs: added soon badge for cards (#3389) * docs: resolved feedback changes + organized troubleshooting pages (#3409) * docs: resolved feedback changes * added extra line * docs: changed icons for restructure (#3421) * docs: added taxes overview page (#3422) * docs: added taxes overview page * docs: fix sidebar label * added link to taxes overview page * fixed link * docs: fixed sidebar scroll (#3429) * docs: added discounts overview (#3432) * docs: added discounts overview * fixed links * docs: added gift cards overview (#3433) * docs: added price lists overview page (#3440) * docs: added price lists overview page * fixed links * docs: added sales channels overview page (#3441) * docs: added sales overview page * fixed links * docs: added users overview (#3443) * docs: fixed sidebar border height (#3444) * docs: fixed sidebar border height * fixed svg markup * docs: added possible solutions to feedback component (#3449) * docs: added several overview pages + restructured files (#3463) * docs: added several overview pages * fixed links * docs: added feature flags + PAK overview pages (#3464) * docs: added feature flags + PAK overview pages * fixed links * fix link * fix link * fixed links colors * docs: added strategies overview page (#3468) * docs: automated upgrade guide (#3470) * docs: automated upgrade guide * fixed vercel redirect * docs: restructured files in docs codebase (#3475) * docs: restructured files * docs: fixed eslint exception * docs: finished restructure loose-ends (#3493) * fixed uses of backend * docs: finished loose ends * eslint fixes * fixed links * merged master * added update instructions for v1.7.12
This commit is contained in:
Shahed Nasser
GitHub
15
www/docs/src/components/Badge/index.js
Normal file
15
www/docs/src/components/Badge/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from "react"
|
||||
import styles from './styles.module.css'
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function Badge ({ className, variant, children }) {
|
||||
return (
|
||||
<span className={clsx(
|
||||
styles.badge,
|
||||
className,
|
||||
variant === 'purple' && styles.purpleBadge
|
||||
)}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
15
www/docs/src/components/Badge/styles.module.css
Normal file
15
www/docs/src/components/Badge/styles.module.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.badge {
|
||||
font-size: var(--medusa-label-x-small-plus-size);
|
||||
line-height: var(--medusa-label-x-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight);
|
||||
padding: 1px 7px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpleBadge {
|
||||
background-color: var(--medusa-tag-purple-bg);
|
||||
border-color: var(--medusa-tag-purple-border);
|
||||
color: var(--medusa-tag-purple-text);
|
||||
}
|
||||
11
www/docs/src/components/Bordered/index.js
Normal file
11
www/docs/src/components/Bordered/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from "react"
|
||||
import clsx from 'clsx'
|
||||
import styles from './styles.module.css'
|
||||
|
||||
export default function Bordered ({ wrapperClassName, children }) {
|
||||
return (
|
||||
<span className={clsx(styles.elementWrapper, 'no-zoom-img', wrapperClassName)}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
11
www/docs/src/components/Bordered/styles.module.css
Normal file
11
www/docs/src/components/Bordered/styles.module.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.elementWrapper {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
padding: var(--bordered-padding);
|
||||
border: 1px solid var(--bordered-border-color);
|
||||
margin-right: var(--bordered-margin-right);
|
||||
width: fit-content;
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
21
www/docs/src/components/BorderedIcon/index.js
Normal file
21
www/docs/src/components/BorderedIcon/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react"
|
||||
import ThemedImage from '@theme/ThemedImage'
|
||||
import clsx from 'clsx'
|
||||
import styles from './styles.module.css'
|
||||
import Bordered from "../Bordered"
|
||||
|
||||
export default function BorderedIcon ({ icon = null, IconComponent = null, wrapperClassName, iconWrapperClassName, iconClassName }) {
|
||||
return (
|
||||
<Bordered wrapperClassName={wrapperClassName}>
|
||||
<span className={clsx(styles.borderedIconWrapper, iconWrapperClassName)}>
|
||||
{!IconComponent && (
|
||||
<ThemedImage sources={{
|
||||
light: icon.light,
|
||||
dark: icon.dark || icon.light
|
||||
}} className={clsx(styles.icon, iconClassName, 'bordered-icon')} />
|
||||
)}
|
||||
{IconComponent && <IconComponent className={clsx(styles.icon, iconClassName, 'bordered-icon')} />}
|
||||
</span>
|
||||
</Bordered>
|
||||
)
|
||||
}
|
||||
8
www/docs/src/components/BorderedIcon/styles.module.css
Normal file
8
www/docs/src/components/BorderedIcon/styles.module.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.borderedIconWrapper {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: calc(var(--ifm-global-radius) / 2);
|
||||
padding: var(--bordered-inside-padding);
|
||||
background-color: var(--medusa-bg-component);
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.feedback-container {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
padding-bottom: var(--ifm-base-margin-vertical);
|
||||
@@ -18,11 +17,14 @@
|
||||
}
|
||||
|
||||
.inline-feedback span {
|
||||
margin-right: 13px;
|
||||
margin-right: 24px;
|
||||
font-size: var(--medusa-body-regular-size);
|
||||
line-height: var(--medusa-body-regular-line-height);
|
||||
font-weight: var(--medusa-body-regular-font-weight);
|
||||
}
|
||||
|
||||
.inline-question span {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.feedback-btn {
|
||||
@@ -30,51 +32,63 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
color: var(--ifm-primary-btn-color);
|
||||
background-color: var(--ifm-secondary-btn-background-color);
|
||||
border: 1px solid var(--ifm-secondary-btn-border-color);
|
||||
color: var(--ifm-secondary-btn-color);
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.feedback-btn:hover {
|
||||
background-color: var(--ifm-secondary-btn-hover-background-color);
|
||||
}
|
||||
|
||||
.feedback-btn:focus {
|
||||
box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:active,
|
||||
html:not([data-theme="dark"]) .feedback-btn:disabled {
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .feedback-btn,
|
||||
[data-theme="dark"] .inline-question textarea {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: var(--ifm-secondary-btn-focused-shadow);
|
||||
}
|
||||
|
||||
.feedback-btn:not(:last-child) {
|
||||
margin-right: 13px;
|
||||
margin-right: calc(var(--ifm-base-spacing) / 2);
|
||||
}
|
||||
|
||||
.inline-question .feedback-btn {
|
||||
margin-top: 13px;
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.inline-question textarea {
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--ifm-base-border-color);
|
||||
padding: 8px;
|
||||
font-family: var(--ifm-font-family-base);
|
||||
}
|
||||
|
||||
.feedback-message,
|
||||
.solutions-wrapper {
|
||||
font-size: var(--medusa-label-large-plus-size);
|
||||
line-height: var(--medusa-label-large-plus-line-height);
|
||||
}
|
||||
|
||||
.feedback-message {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: var(--medusa-label-large-plus-font-weight);
|
||||
}
|
||||
|
||||
.solutions-wrapper {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.solutions-message {
|
||||
display: inline-block;
|
||||
margin: calc(var(--ifm-base-margin-vertical) / 2) 0;
|
||||
}
|
||||
|
||||
.solutions-wrapper li:not(:last-child) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
|
||||
@@ -5,6 +5,7 @@ import './index.css';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
import uuid from 'react-uuid';
|
||||
import { request } from "@octokit/request";
|
||||
|
||||
export default function Feedback ({
|
||||
event,
|
||||
@@ -14,7 +15,8 @@ export default function Feedback ({
|
||||
positiveQuestion = 'What was most helpful?',
|
||||
negativeQuestion = 'What can we improve?',
|
||||
submitBtn = 'Submit',
|
||||
submitMessage = 'Thank you for helping improve our documentation!'
|
||||
submitMessage = 'Thank you for helping improve our documentation!',
|
||||
showPossibleSolutions = true
|
||||
}) {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [submittedFeedback, setSubmittedFeedback] = useState(false);
|
||||
@@ -24,7 +26,9 @@ export default function Feedback ({
|
||||
const inlineMessageRef = useRef(null)
|
||||
const [positiveFeedback, setPositiveFeedback] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [id, setId] = useState(null)
|
||||
const [id, setId] = useState(null);
|
||||
const [possibleSolutionsQuery, setPossibleSolutionsQuery] = useState('')
|
||||
const [possibleSolutions, setPossibleSolutions] = useState([]);
|
||||
const nodeRef = submittedFeedback ? inlineMessageRef : (showForm ? inlineQuestionRef : inlineFeedbackRef);
|
||||
|
||||
const isBrowser = useIsBrowser();
|
||||
@@ -52,6 +56,7 @@ export default function Feedback ({
|
||||
}, function () {
|
||||
if (showForm) {
|
||||
setLoading(false);
|
||||
checkAvailableSolutions(positiveFeedback, message);
|
||||
resetForm();
|
||||
}
|
||||
})
|
||||
@@ -71,6 +76,34 @@ export default function Feedback ({
|
||||
}
|
||||
}
|
||||
|
||||
function constructQuery (searchQuery) {
|
||||
return `${searchQuery} repo:medusajs/medusa is:closed is:issue`; //Github does not allow queries longer than 256 characters
|
||||
}
|
||||
|
||||
function searchGitHub (query) {
|
||||
return request(`GET /search/issues`, {
|
||||
q: query,
|
||||
sort: 'updated',
|
||||
per_page: 3,
|
||||
})
|
||||
}
|
||||
|
||||
async function checkAvailableSolutions (feedback, message) {
|
||||
if (showPossibleSolutions && !feedback) {
|
||||
//fetch some possible solutions related to the answer.
|
||||
let query = constructQuery(message ? message.substring(0, 256) : document.title)
|
||||
let result = await searchGitHub(query);
|
||||
|
||||
if (!result.data.items.length && message) {
|
||||
query = constructQuery(document.title)
|
||||
result = await searchGitHub(query)
|
||||
}
|
||||
|
||||
setPossibleSolutionsQuery(query);
|
||||
setPossibleSolutions(result.data.items);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) {
|
||||
setId(uuid())
|
||||
@@ -108,8 +141,29 @@ export default function Feedback ({
|
||||
</div>
|
||||
)}
|
||||
{submittedFeedback && (
|
||||
<div className='feedback-message' ref={inlineMessageRef}>
|
||||
{submitMessage}
|
||||
<div className='feedback-message-wrapper'>
|
||||
<div className='feedback-message' ref={inlineMessageRef}>
|
||||
<span>{submitMessage}</span>
|
||||
{possibleSolutions.length > 0 && (
|
||||
<div className='solutions-wrapper'>
|
||||
<span className='solutions-message'>If you faced a problem, here are some possible solutions from GitHub:</span>
|
||||
<ul>
|
||||
{possibleSolutions.map((solution) => (
|
||||
<li key={solution.url}>
|
||||
<a href={solution.html_url} target="_blank">{solution.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span>Explore more issues in <a
|
||||
href={`https://github.com/medusajs/medusa/issues?q=${possibleSolutionsQuery}`}
|
||||
target="_blank"
|
||||
>
|
||||
the GitHub repository
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import React from "react"
|
||||
import Link from "@docusaurus/Link"
|
||||
import CodeBlock from "@theme/CodeBlock"
|
||||
import styles from "./intro.module.css"
|
||||
|
||||
const Intro = ({ title, desc }) => {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="margin-bottom--xs margin-top--lg">Documentation</h1>
|
||||
<p className={styles.title}>{title}</p>
|
||||
<h2 className="margin-top--lg margin-bottom--sm">Quickstart</h2>
|
||||
<p className={styles.description}>{desc}</p>
|
||||
<CodeBlock>
|
||||
{`yarn global add @medusajs/medusa-cli
|
||||
medusa new my-awesome-store`}
|
||||
</CodeBlock>
|
||||
<div>
|
||||
<Link
|
||||
to="quickstart/quick-start"
|
||||
className="margin-top--md margin-bottom--sm button button--lg button--primary"
|
||||
>
|
||||
Quickstart Guide →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={` margin-top--md`}>
|
||||
<Link
|
||||
to="tutorial/set-up-your-development-environment"
|
||||
className={`${styles.docsLink}`}
|
||||
>
|
||||
Set up your own local environment →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={`margin-top--md`}>
|
||||
<Link
|
||||
to="tutorial/creating-your-medusa-server"
|
||||
className={`${styles.docsLink}`}
|
||||
>
|
||||
Create your very own Medusa server →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={`margin-top--md margin-bottom--xl`}>
|
||||
<Link to="how-to/plugins" className={`${styles.docsLink}`}>
|
||||
Explore plugins →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Intro
|
||||
@@ -1 +0,0 @@
|
||||
export { default as Intro } from "./Intro"
|
||||
@@ -1,17 +0,0 @@
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.docsLink {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.docsLink {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
130
www/docs/src/components/LargeCard/index.css
Normal file
130
www/docs/src/components/LargeCard/index.css
Normal file
@@ -0,0 +1,130 @@
|
||||
.large-card {
|
||||
background-color: var(--large-card-bg);
|
||||
border: 1px solid var(--large-card-border-color);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
padding: calc(var(--ifm-base-margin-vertical) * 3) var(--ifm-base-spacing) calc(var(--ifm-base-margin-vertical) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.large-card:not(.large-card-soon):hover,
|
||||
.large-card:not(.large-card-soon):hover:before {
|
||||
background-color: var(--large-card-bg-hover);
|
||||
}
|
||||
|
||||
.large-card-soon:hover a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.large-card-soon:hover .large-card-title,
|
||||
.large-card-soon:hover .large-card-content {
|
||||
color: var(--medusa-text-disabled);
|
||||
}
|
||||
|
||||
.large-card:before,
|
||||
.large-card:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.large-card:before {
|
||||
z-index: 1;
|
||||
height: calc(var(--ifm-base-margin-vertical) * 4);
|
||||
top: 0;
|
||||
background-image: var(--large-card-bg-image);
|
||||
background-color: var(--large-card-bg);
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n+1):before {
|
||||
background-position-x: 2%;
|
||||
background-position-y: 52%;
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n + 2):before {
|
||||
background-position-x: 19%;
|
||||
background-position-y: 16%;
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n + 3):before {
|
||||
background-position-x: 17%;
|
||||
background-position-y: 50%;
|
||||
}
|
||||
|
||||
.large-card:after {
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
height: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
background: var(--large-card-fade-effect);
|
||||
}
|
||||
|
||||
.large-card:not(.large-card-soon):hover:after {
|
||||
background: var(--large-card-fade-effect-hover);
|
||||
}
|
||||
|
||||
.large-card > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.large-card-bordered-icon-wrapper {
|
||||
--bordered-padding: var(--large-card-icon-wrapper-padding);
|
||||
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.large-card-icon-wrapper {
|
||||
--bordered-inside-padding: var(--large-card-icon-inside-padding);
|
||||
}
|
||||
|
||||
.large-card-icon {
|
||||
width: var(--large-card-icon-size);
|
||||
height: var(--large-card-icon-size);
|
||||
}
|
||||
|
||||
.large-card-heading {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.large-card-title {
|
||||
color: var(--ifm-color-primary);
|
||||
font-size: var(--medusa-label-regular-plus-size);
|
||||
line-height: var(--medusa-label-regular-plus-line-height);
|
||||
font-weight: var(--medusa-label-regular-plus-font-weight);
|
||||
}
|
||||
|
||||
.large-card-content {
|
||||
font-size: var(--medusa-body-regular-size);
|
||||
line-height: var(--medusa-body-regular-line-height);
|
||||
font-weight: var(--medusa-body-regular-font-weight);
|
||||
}
|
||||
|
||||
.large-card-title,
|
||||
.large-card-content {
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.large-card-content ul {
|
||||
padding-left: var(--ifm-base-spacing);
|
||||
}
|
||||
|
||||
.large-card-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 4;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.large-card-badge {
|
||||
position: absolute;
|
||||
top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
right: var(--ifm-base-spacing);
|
||||
}
|
||||
43
www/docs/src/components/LargeCard/index.js
Normal file
43
www/docs/src/components/LargeCard/index.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import './index.css'
|
||||
import BorderedIcon from "../BorderedIcon"
|
||||
import clsx from 'clsx';
|
||||
import Badge from "../Badge";
|
||||
|
||||
export default function LargeCard ({
|
||||
Icon,
|
||||
image,
|
||||
title,
|
||||
action: {
|
||||
href
|
||||
},
|
||||
isSoon = false,
|
||||
children
|
||||
}) {
|
||||
return (
|
||||
<article className={clsx(
|
||||
'large-card',
|
||||
isSoon && 'large-card-soon'
|
||||
)}>
|
||||
<div>
|
||||
{isSoon && <Badge variant={'purple'} className={'large-card-badge'}>Guide coming soon</Badge>}
|
||||
{(Icon || image) && (
|
||||
<BorderedIcon
|
||||
IconComponent={Icon}
|
||||
icon={image}
|
||||
iconClassName='large-card-icon'
|
||||
wrapperClassName='large-card-bordered-icon-wrapper'
|
||||
iconWrapperClassName='large-card-icon-wrapper'
|
||||
/>
|
||||
)}
|
||||
<div className="large-card-heading">
|
||||
<span className="large-card-title">{title}</span>
|
||||
</div>
|
||||
<div className="large-card-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
<a href={href} className="large-card-link"></a>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/components/LargeCardList/index.js
Normal file
10
www/docs/src/components/LargeCardList/index.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react"
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default function LargeCardList ({ colSize, className, children }) {
|
||||
return (
|
||||
<section className={clsx('cards-grid', `grid-${colSize || '4'}`, className)}>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +1,17 @@
|
||||
.markdown p + .cards-grid {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
.card {
|
||||
background-color: var(--ifm-card-bg);
|
||||
border: 1px solid var(--ifm-card-bg-hover) !important;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
img.card-icon {
|
||||
width: var(--ifm-card-icon-size);
|
||||
height: var(--ifm-card-icon-size);
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
column-gap: 16px;
|
||||
column-gap: var(--ifm-base-spacing);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
@@ -12,33 +19,52 @@
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.box-link,
|
||||
.box-link:hover {
|
||||
color: #0a3149;
|
||||
}
|
||||
.card-highlighted {
|
||||
--bordered-inside-padding: 6px;
|
||||
|
||||
.card-highlight {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.card-highlight:after {
|
||||
.card-highlighted {
|
||||
background-color: var(--ifm-card-bg);
|
||||
}
|
||||
|
||||
/* html[data-theme="dark"] .card-highlighted::before,
|
||||
html[data-theme="dark"] .card-highlighted::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position:absolute;
|
||||
bottom: -1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--ifm-primary-gradient);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
/* html[data-theme="dark"] .card-highlighted::before {
|
||||
z-index: -2;
|
||||
background-color: var(--ifm-card-bg);
|
||||
background-image: url('/img/stardust.png');
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
html:not([data-theme=dark]) .card {
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
html[data-theme="dark"] .card-highlighted::after {
|
||||
z-index: -1;
|
||||
background-image: url('/img/light-beam.png');
|
||||
} */
|
||||
|
||||
.card-highlighted:hover {
|
||||
background-color: var(--ifm-card-bg-hover);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .card {
|
||||
border: 1px solid var(--ifm-color-primary);
|
||||
.card + p {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.card-wrapper:hover > [class*=cardSoon] [class*=cardTitle],
|
||||
.card-wrapper:hover > [class*=cardSoon] [class*=cardDescription] {
|
||||
color: var(--medusa-text-disabled);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
@@ -53,6 +79,27 @@ html[data-theme="dark"] .card {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.card-highlighted [class*=cardDescription] {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.card-highlighted::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-highlighted::before {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: var(--ifm-card-highlighted-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
/* [data-theme="dark"] pre code {
|
||||
background-color: var(--ifm-code-background);
|
||||
} */
|
||||
|
||||
code {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
color: var(--ifm-code-color);
|
||||
line-height: var(--medusa-body-regular-line-height);
|
||||
}
|
||||
|
||||
[data-tooltip-content]:hover code {
|
||||
background-color: var(--ifm-code-background-hover);
|
||||
}
|
||||
|
||||
[data-tooltip-content] > span:active > code,
|
||||
[data-tooltip-content] > span:focus > code {
|
||||
background-color: var(--ifm-code-background-pressed);
|
||||
}
|
||||
|
||||
.inline-code-copy {
|
||||
@@ -15,17 +21,6 @@ code {
|
||||
color: var(--ifm-code-color)
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: none;
|
||||
word-break: break-word;
|
||||
@@ -38,23 +33,16 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown a.card:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background-color: #161616;
|
||||
padding: 12px var(--ifm-base-spacing);
|
||||
background-color: var(--medusa-code-tabs-bg);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0px 0px;
|
||||
}
|
||||
|
||||
@@ -64,9 +52,10 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
|
||||
.code-tabs .tabs__item {
|
||||
color: var(--ifm-code-tabs-color);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
padding: 4px 12px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
border-radius: 99999px;
|
||||
@@ -77,16 +66,23 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
}
|
||||
|
||||
.code-title {
|
||||
font-size: 13px;
|
||||
line-height: var(--ifm-line-height-base);
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
color: var(--ifm-code-title-color);
|
||||
}
|
||||
|
||||
.code-tabs-ul-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.code-tabs-ul-wrapper .tabs__item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item--active {
|
||||
border-color: #393939;
|
||||
background-color: var(--ifm-code-tabs-active-bg);
|
||||
color: var(--ifm-code-tabs-active-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.theme-code-block:not(.no-header-block),
|
||||
@@ -103,19 +99,22 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
}
|
||||
|
||||
.code-action {
|
||||
--ifm-icon-color: var(--medusa-code-block-action);
|
||||
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.code-action:hover {
|
||||
background-color: var(--ifm-code-action-hover-bg);
|
||||
.code-action:hover,
|
||||
.tabs__item:hover {
|
||||
background-color: var(--ifm-code-action-hover-bg) !important;
|
||||
}
|
||||
|
||||
.code-action:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
margin-left: calc(var(--ifm-base-spacing) / 2);
|
||||
}
|
||||
|
||||
a.code-action {
|
||||
@@ -124,39 +123,19 @@ a.code-action {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-action img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* .theme-code-block:not(.no-header-block) [class*=buttonGroup] {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.theme-code-block [class*=buttonGroup] button {
|
||||
opacity: 1 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.copy-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header,
|
||||
[data-theme="dark"] .theme-code-block {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
.code-header,
|
||||
.theme-code-block {
|
||||
border: 1px solid var(--ifm-code-block-border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header {
|
||||
.code-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
|
||||
--ifm-code-border-color: #393939;
|
||||
|
||||
border-top: 1px solid var(--ifm-code-border-color);
|
||||
}
|
||||
|
||||
.theme-code-block.no-header-block code:not(.thin-code),
|
||||
.theme-code-block:not(.no-header-block) code {
|
||||
padding: var(--ifm-pre-padding);
|
||||
@@ -164,6 +143,12 @@ html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
|
||||
|
||||
.theme-code-block.no-header-block .thin-code {
|
||||
padding: calc(var(--ifm-pre-padding) / 2);
|
||||
padding-left: var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
[class*=codeLineNumber] {
|
||||
color: var(--ifm-code-line-number-color);
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 568px) {
|
||||
@@ -172,13 +157,14 @@ html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
|
||||
}
|
||||
|
||||
.prism-code:after {
|
||||
border-radius: var(--ifm-global-radius);
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: calc(10% + 24px);
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #17171700, #262626 24px);
|
||||
background: linear-gradient(90deg, var(--ifm-pre-background-transparent), var(--ifm-pre-background) 24px);
|
||||
}
|
||||
|
||||
.prism-code:not(:hover)::-webkit-scrollbar-thumb,
|
||||
@@ -190,9 +176,23 @@ html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) {
|
||||
.prism-code:hover::-webkit-scrollbar-track {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-tabs-ul-wrapper .code-tab-selector {
|
||||
position: absolute;
|
||||
border: 1px solid var(--medusa-code-tab-border);
|
||||
background-color: var(--ifm-code-tabs-active-bg);
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border-radius: 99999px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 567px) {
|
||||
.code-tabs .tabs__item--active {
|
||||
border: 1px solid var(--medusa-code-tab-border);
|
||||
background-color: var(--ifm-code-tabs-active-bg);
|
||||
}
|
||||
.code-action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
/* color mode button */
|
||||
.color-mode-tabs {
|
||||
background-color: var(--mode-tabs-bg);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
|
||||
.color-mode-tabs.mobile {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
height: calc(100% - 8px);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pill-button:not(.active) {
|
||||
color: var(--mode-button-text-color);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pill-button.active {
|
||||
color: var(--mode-button-active-text-color);
|
||||
background-color: var(--mode-button-active-bg);
|
||||
border: 1px solid var(--mode-button-active-border-color);
|
||||
}
|
||||
|
||||
/* some style rules for dark mode */
|
||||
|
||||
[data-theme="dark"] .breadcrumbs__item--active a {
|
||||
background-color: var(--ifm-color-gray-800) !important;
|
||||
color: var(--ifm-color-primary-lightest) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.color-mode-tabs {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.color-mode-tabs {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +1,56 @@
|
||||
.DocSearch {
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch {
|
||||
--ifm-search-bar-border-color: #E5E7EB;
|
||||
--docsearch-searchbox-background: #F9FAFB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch {
|
||||
--ifm-search-bar-border-color: #2D2D2D;
|
||||
--docsearch-searchbox-background: #222222;
|
||||
}
|
||||
|
||||
/* Search Modal */
|
||||
.DocSearch-Modal {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--docsearch-modal-border-color);
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .DocSearch-Modal:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: var(--docsearch-modal-fade-bg);
|
||||
border-radius: 8px !important;
|
||||
z-index: 99;
|
||||
} */
|
||||
|
||||
.DocSearch-HitsFooter {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Form {
|
||||
--docsearch-searchbox-focus-background: #2D2D2D;
|
||||
.DocSearch-SearchBar {
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid;
|
||||
}
|
||||
--docsearch-spacing: var(--docsearch-spacing-x);
|
||||
--docsearch-searchbox-height: var(--docsearch-modal-searchbox-height);
|
||||
--docsearch-searchbox-shadow: var(--docsearch-modal-searchbox-focus-background);
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-modal-background);
|
||||
|
||||
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0 !important;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
font-size: var(--medusa-body-regular-size) !important;
|
||||
line-height: var(--medusa-body-regular-line-height) !important;
|
||||
font-weight: var(--medusa-body-regular-font-weight) !important;
|
||||
padding-left: var(--ifm-base-spacing) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input::placeholder,
|
||||
.DocSearch-Input:-ms-input-placeholder,
|
||||
.DocSearch-Input::-ms-input-placeholder {
|
||||
color: #9CA3AF;
|
||||
color: var(--docsearch-placeholder-color);
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown {
|
||||
padding: 0 0 var(--docsearch-footer-height) 0 !important;
|
||||
max-height: calc(var(--docsearch-modal-height) - var(--docsearch-modal-searchbox-height)) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
margin: 0 !important;
|
||||
font-size: var(--medusa-label-small-plus-size) !important;
|
||||
line-height: var(--medusa-label-small-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-plus-font-weight) !important;
|
||||
text-transform: uppercase;
|
||||
color: var(--docsearch-source-color);
|
||||
border-bottom: 1px solid var(--docsearch-hit-border-color);
|
||||
padding: var(--docsearch-source-spacing) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
@@ -68,12 +58,18 @@ html:not([data-theme="dark"]) .DocSearch {
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon {
|
||||
position: relative;
|
||||
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--medusa-border-strong);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon svg {
|
||||
@@ -81,27 +77,34 @@ html:not([data-theme="dark"]) .DocSearch {
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
content: '';
|
||||
background-image: url('/img/search-hit.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
align-items: flex-start !important;
|
||||
[data-theme="dark"] .DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
|
||||
background-image: url('/img/search-hit.svg');
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
|
||||
background-image: url('/img/search-hit-light.svg');
|
||||
}
|
||||
|
||||
.DocSearch-Hit--Child .DocSearch-Hit-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
padding: 18px 16px !important;
|
||||
padding: var(--docsearch-spacing) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--docsearch-hit-border-color);
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(:last-of-type) a {
|
||||
border-bottom: 1px solid var(--docsearch-hit-border-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
@@ -111,56 +114,165 @@ html:not([data-theme="dark"]) .DocSearch {
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-title mark {
|
||||
color: var(--docsearch-hit-title-color) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: var(--medusa-label-small-plus-size) !important;
|
||||
line-height: var(--medusa-label-small-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-plus-font-weight) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-path,
|
||||
.DocSearch-Hit-source {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
line-height: var(--ifm-line-height-base);
|
||||
.DocSearch-Hit-path {
|
||||
color: var(--docsearch-muted-color) !important;
|
||||
font-size: var(--medusa-label-small-size) !important;
|
||||
line-height: var(--medusa-label-small-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-font-weight) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
|
||||
--docsearch-hit-active-color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] a {
|
||||
background-color: var(--docsearch-hit-active-bg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action {
|
||||
align-self: center;
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border: 1px solid var(--medusa-border-strong);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
background-color: var(--docsearch-modal-background);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action svg,
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action svg {
|
||||
color: var(--docsearch-hit-icon-color) !important;
|
||||
.DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg,
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] span.DocSearch-Hit-path {
|
||||
color: var(--docsearch-highlight-color) !important;
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url('/img/search-hit-arrow.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
|
||||
background-image: url('/img/search-hit-arrow.svg');
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
|
||||
background-image: url('/img/search-hit-arrow-light.svg');
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] mark {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
margin-bottom: 12px !important;
|
||||
.DocSearch-Hit-Tree {
|
||||
color: var(--docsearch-tree-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hits:first-child .DocSearch-Hit-source {
|
||||
margin-top: 12px !important
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree {
|
||||
color: var(--docsearch-tree-hover-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hits .DocSearch-Hit-source {
|
||||
padding-top: 0 !important;
|
||||
.DocSearch-HitsFooter {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--docsearch-footer-height);
|
||||
background-color: var(--docsearch-modal-background);
|
||||
border-top: 1px solid var(--docsearch-modal-border-color);
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Reset {
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.DocSearch-Reset:hover {
|
||||
background-color: var(--medusa-bg-base-hover);
|
||||
}
|
||||
|
||||
.DocSearch-Hits:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Modal no results */
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Screen-Icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto calc(var(--ifm-base-margin-vertical) / 2) auto;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Screen-Icon svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Screen-Icon::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-NoResults .DocSearch-Screen-Icon::before {
|
||||
background-image: url('/img/search-no-result.svg');
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-NoResults .DocSearch-Screen-Icon::before {
|
||||
background-image: url('/img/search-no-result-light.svg');
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Title {
|
||||
font-size: var(--medusa-label-small-size) !important;
|
||||
line-height: var(--medusa-label-small-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-font-weight) !important;
|
||||
padding-left: var(--ifm-base-spacing) !important;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List {
|
||||
text-align: center;
|
||||
font-size: var(--medusa-label-small-plus-size) !important;
|
||||
line-height: var(--medusa-label-small-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-plus-font-weight) !important;
|
||||
padding-left: var(--ifm-base-spacing) !important;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List li::marker {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List li button {
|
||||
color: var(--ifm-link-color);
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
|
||||
.DocSearch-Button {
|
||||
width: 100%;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--ifm-search-bar-border-color) !important;
|
||||
padding: 8px !important;
|
||||
height: 100% !important;
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
border: 1px solid var(--docsearch-searchbox-border-color) !important;
|
||||
padding: 6px 6px 6px 8px !important;
|
||||
}
|
||||
|
||||
span.DocSearch-Button-Key {
|
||||
@@ -171,35 +283,56 @@ span.DocSearch-Button-Key {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #737373;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Container:before {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
background-image: url('/static/img/magnifying-glass.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
font-size: 13px !important;
|
||||
color: var(--docsearch-placeholder-color);
|
||||
padding-left: calc(var(--ifm-base-spacing) / 2) !important;
|
||||
font-size: var(--medusa-label-small-size) !important;
|
||||
line-height: var(--medusa-label-small-line-height) !important;
|
||||
font-weight: var(--medusa-label-small-font-weight) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys {
|
||||
width: fit-content;
|
||||
min-width: unset !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
box-shadow: none !important;
|
||||
border-radius: 4px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 20px !important;
|
||||
border-radius: 6px !important;
|
||||
font-size: var(--medusa-label-x-small-plus-size) !important;
|
||||
line-height: var(--medusa-label-x-small-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight) !important;
|
||||
font-family: var(--ifm-font-family-base) !important;
|
||||
vertical-align: middle;
|
||||
padding: 2px !important;
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
border: 1px solid var(--medusa-border-strong) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key:not(:last-child) {
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover,
|
||||
@@ -207,13 +340,17 @@ html:not([data-theme="dark"]) .DocSearch-Button .DocSearch-Search-Icon {
|
||||
border-color: var(--docsearch-searchbox-border-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar__items [class*=searchBox] {
|
||||
display: none;
|
||||
}
|
||||
/* Search Page */
|
||||
.search-page-wrapper article[class*=searchResultItem] {
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
margin-right: 8px;
|
||||
@media screen and (min-width: 992px) {
|
||||
[class*=searchBox] {
|
||||
width: var(--docsearch-searchbox-width);
|
||||
max-width: var(--docsearch-searchbox-width);
|
||||
height: var(--docsearch-searchbox-height) !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,4 +367,17 @@ html:not([data-theme="dark"]) .DocSearch-Button .DocSearch-Search-Icon {
|
||||
.DocSearch-Button:focus, .DocSearch-Button:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.DocSearch-Modal {
|
||||
margin: unset !important;
|
||||
width: var(--docsearch-modal-width);
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,9 @@
|
||||
.main-wrapper {
|
||||
max-width: var(--ifm-max-content-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.theme-doc-breadcrumbs {
|
||||
display: none;
|
||||
}
|
||||
@@ -7,7 +13,11 @@ article {
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top: 2rem !important;
|
||||
padding-top: 48px !important;
|
||||
}
|
||||
|
||||
.margin-bottom--lg {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2) !important;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
@@ -16,22 +26,33 @@ article {
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reference-table {
|
||||
display: table !important;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reference-table p {
|
||||
--ifm-paragraph-margin-bottom: 0;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(1),
|
||||
.reference-table td:nth-child(1) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(2),
|
||||
.reference-table td:nth-child(2) {
|
||||
width: 40%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(3),
|
||||
.reference-table td:nth-child(3) {
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.reference-table .tooltip-container code {
|
||||
@@ -44,6 +65,10 @@ details summary {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.reference-table [class*=codeBlockLinesWithNumbering] {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.container:not(.footer-container) {
|
||||
padding-top: 38px !important;
|
||||
max-width: 100% !important;
|
||||
@@ -54,14 +79,13 @@ details summary {
|
||||
}
|
||||
|
||||
/* User Guide Styling */
|
||||
html[data-theme="dark"] kbd {
|
||||
--ifm-color-emphasis-0: var(--ifm-color-gray-200);
|
||||
}
|
||||
|
||||
kbd {
|
||||
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
||||
|
||||
font: 100% var(--ifm-font-family-monospace) !important;
|
||||
background-color: var(--medusa-bg-component) !important;
|
||||
color: var(--medusa-text-subtle) !important;
|
||||
border-radius: 6px !important;
|
||||
border-color: var(--medusa-border-strong) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
@@ -73,7 +97,6 @@ kbd {
|
||||
.markdown-doc-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: var(--ifm-container-width);
|
||||
padding: 0 var(--ifm-spacing-horizontal);
|
||||
width: 100%;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
@@ -92,45 +115,44 @@ kbd {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .doc-footer {
|
||||
--ifm-doc-footer-border-color: #E5E7EB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-footer {
|
||||
--ifm-doc-footer-border-color: #3E3F41;
|
||||
}
|
||||
|
||||
.theme-edit-this-page {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
background-color: var(--ifm-secondary-btn-background-color);
|
||||
border: 1px solid var(--ifm-secondary-btn-border-color);
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.theme-edit-this-page:hover {
|
||||
background-color: var(--ifm-secondary-btn-hover-background-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.theme-edit-this-page,
|
||||
.theme-edit-this-page:hover {
|
||||
color: var(--ifm-primary-btn-color);
|
||||
color: var(--ifm-secondary-btn-color);
|
||||
}
|
||||
|
||||
.theme-edit-this-page:focus {
|
||||
box-shadow: var(--ifm-secondary-btn-focused-shadow);
|
||||
}
|
||||
|
||||
.theme-last-updated {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
}
|
||||
|
||||
.theme-last-updated,
|
||||
.theme-last-updated b {
|
||||
font-weight: 600 !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
@@ -149,16 +171,35 @@ details > div {
|
||||
--docusaurus-details-decoration-color: transparent !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.markdown-doc-wrapper {
|
||||
max-width: var(--ifm-container-width-xl) !important;
|
||||
.row--justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.docs-page-container {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1419px) {
|
||||
.main-wrapper {
|
||||
min-width: var(--ifm-max-content-width);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
[class*=docItemContainer] > article {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
max-width: none
|
||||
@media screen and (max-width: 1418px) {
|
||||
.main-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.markdown-doc-wrapper {
|
||||
padding: 0 calc(var(--ifm-spacing-horizontal) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.markdown-doc-wrapper {
|
||||
padding: 0 var(--ifm-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
@@ -1,48 +1,27 @@
|
||||
.footer__title {
|
||||
font-weight: 600 !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer__item:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
background-color: transparent !important;
|
||||
border-top: 1px solid var(--ifm-footer-border-color);
|
||||
padding-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
padding-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
padding-top: 108px;
|
||||
padding-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.footer-container .col {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
margin-left: 16px;
|
||||
footer .social-links {
|
||||
--ifm-icon-color: var(--ifm-footer-social-icons-color);
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
line-height: var(--ifm-line-height-base);
|
||||
font-size: var(--ifm-font-size-base);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .footer__item svg {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .footer__item svg {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.social-logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
footer .social-link:hover {
|
||||
--ifm-icon-color: var(--ifm-footer-social-icons-color-hover);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
@@ -51,28 +30,7 @@ html:not([data-theme="dark"]) .footer__item svg {
|
||||
}
|
||||
|
||||
.social-link:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.discord-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.twitter-icon {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.social-logo-container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
margin-left: var(--ifm-base-spacing);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
@@ -80,6 +38,10 @@ html:not([data-theme="dark"]) .footer__item svg {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-container .row--justify-end {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
197
www/docs/src/css/_medusa.css
Normal file
197
www/docs/src/css/_medusa.css
Normal file
@@ -0,0 +1,197 @@
|
||||
/** Light theme/default **/
|
||||
:root {
|
||||
/** Backgrounds **/
|
||||
--medusa-bg-subtle: #F8F9FA;
|
||||
--medusa-bg-subtle-hover: #F1F3F5;
|
||||
--medusa-bg-subtle-pressed: #ECEEF0;
|
||||
--medusa-bg-base: #FFFFFF;
|
||||
--medusa-bg-base-hover: #F8F9FA;
|
||||
--medusa-bg-base-pressed: #F1F3F5;
|
||||
--medusa-bg-component: #F1F3F5;
|
||||
--medusa-bg-field: #F8F9FA;
|
||||
--medusa-bg-field-hover: #F1F3F5;
|
||||
--medusa-bg-highlight: #EDE9FE;
|
||||
--medusa-bg-toggle-off: #C1C8CD;
|
||||
--medusa-bg-overlay: rgba(17, 24, 28, 0.4);
|
||||
--medusa-bg-interactive: #6E56CF;
|
||||
|
||||
/** Borders **/
|
||||
--medusa-border-base: #E6E8EB;
|
||||
--medusa-border-strong: #D7DBDF;
|
||||
--medusa-border-focus: #6E56CF;
|
||||
--medusa-border-focus-inset: #FFFFFF;
|
||||
--medusa-border-interactive: #6E56CF;
|
||||
|
||||
/** Text **/
|
||||
--medusa-text-base: #11181C;
|
||||
--medusa-text-subtle: #687076;
|
||||
--medusa-text-placeholder: #889096;
|
||||
--medusa-text-disabled: #C1C8CD;
|
||||
--medusa-text-on-color: #FFFFFF;
|
||||
--medusa-text-interactive: #6E56CF;
|
||||
--medusa-text-interactive-hover: #644FC1;
|
||||
--medusa-text-error: #E5484D;
|
||||
|
||||
/** Buttons **/
|
||||
--medusa-button-primary: #6E56CF;
|
||||
--medusa-button-primary-hover: #644FC1;
|
||||
--medusa-button-primary-pressed: #5746AF;
|
||||
--medusa-button-secondary: #FFFFFF;
|
||||
--medusa-button-secondary-hover: #F8F9FA;
|
||||
--medusa-button-secondary-pressed: #F1F3F5;
|
||||
--medusa-button-danger: #E5484D;
|
||||
--medusa-button-danger-hover: #DC3D43;
|
||||
--medusa-button-danger-pressed: #CD2B31;
|
||||
--medusa-button-danger-text: var(--medusa-text-on-color);
|
||||
--medusa-button-success: #30A46C;
|
||||
--medusa-button-success-text: var(--medusa-text-on-color);
|
||||
|
||||
/** Icons **/
|
||||
--medusa-icon-primary: #11181C;
|
||||
--medusa-icon-secondary: #687076;
|
||||
--medusa-icon-placeholder: #889096;
|
||||
--medusa-icon-disabled: #C1C8CD;
|
||||
--medusa-icon-on-color: #FFFFFF;
|
||||
--medusa-icon-interactive: #6E56CF;
|
||||
--medusa-icon-interactive-hover: #644FC1;
|
||||
--medusa-icon-error: #E5484D;
|
||||
|
||||
/** Support Info **/
|
||||
--medusa-support-error: #E5484D;
|
||||
--medusa-support-warning: #FFB224;
|
||||
--medusa-support-success: #30A46C;
|
||||
--medusa-support-info: #0091FF;
|
||||
|
||||
/** Code Block **/
|
||||
--medusa-code-block: #1C1C1F;
|
||||
--medusa-code-block-transparent: #1C1C1F00;
|
||||
--medusa-code-block-border: #2E2E32;
|
||||
--medusa-code-block-action: #706F78;
|
||||
|
||||
/** Code Tabs **/
|
||||
--medusa-code-tabs-bg: #161616;
|
||||
--medusa-code-tab: #1C1C1F;
|
||||
--medusa-code-tab-hover: rgba(141, 141, 141, 0.16);
|
||||
--medusa-code-tab-border: #3E3E44;
|
||||
--medusa-code-tab-text: #7E7D86;
|
||||
--medusa-code-tab-active-text: #EDEDEF;
|
||||
--medusa-code-tab-title: #7E7D86;
|
||||
|
||||
/** Tooltip **/
|
||||
--medusa-tooltip: var(--medusa-bg-base);
|
||||
--medusa-tooltip-border: var(--medusa-border-base);
|
||||
--medusa-tooltip-shadow: var(--medusa-shadow-overlay);
|
||||
--medusa-tooltip-text: var(--medusa-text-subtle);
|
||||
|
||||
/** Shadow **/
|
||||
--medusa-shadow-overlay: 0px 2px 16px rgba(0, 0, 0, 0.08);
|
||||
--medusa-shadow-field-focused: 0px 0px 0px 4px #EDE9FE;
|
||||
--medusa-shadow-button-focused: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF;
|
||||
|
||||
/** Typography **/
|
||||
--medusa-body-regular-plus-size: 14px;
|
||||
--medusa-body-regular-plus-line-height: 24px;
|
||||
--medusa-body-regular-plus-font-weight: 500;
|
||||
--medusa-body-regular-size: 14px;
|
||||
--medusa-body-regular-line-height: 24px;
|
||||
--medusa-body-regular-font-weight: 400;
|
||||
--medusa-h1-size: 32px;
|
||||
--medusa-h1-line-height: 44px;
|
||||
--medusa-h1-weight: 500;
|
||||
--medusa-h2-size: 24px;
|
||||
--medusa-h2-line-height: 32px;
|
||||
--medusa-h2-weight: 500;
|
||||
--medusa-h3-size: 18px;
|
||||
--medusa-h3-line-height: 28px;
|
||||
--medusa-h3-weight: 500;
|
||||
--medusa-label-large-plus-size: 16px;
|
||||
--medusa-label-large-plus-line-height: 20px;
|
||||
--medusa-label-large-plus-font-weight: 500;
|
||||
--medusa-label-regular-plus-size: 14px;
|
||||
--medusa-label-regular-plus-line-height: 20px;
|
||||
--medusa-label-regular-plus-font-weight: 500;
|
||||
--medusa-label-regular-size: 14px;
|
||||
--medusa-label-regular-line-height: 20px;
|
||||
--medusa-label-regular-font-weight: 400;
|
||||
--medusa-label-small-plus-size: 13px;
|
||||
--medusa-label-small-plus-line-height: 20px;
|
||||
--medusa-label-small-plus-font-weight: 500;
|
||||
--medusa-label-small-size: 13px;
|
||||
--medusa-label-small-line-height: 20px;
|
||||
--medusa-label-small-font-weight: 400;
|
||||
--medusa-label-x-small-plus-size: 12px;
|
||||
--medusa-label-x-small-plus-line-height: 20px;
|
||||
--medusa-label-x-small-plus-font-weight: 500;
|
||||
|
||||
/** Tags **/
|
||||
--medusa-tag-purple-bg: #EDE9FE;
|
||||
--medusa-tag-purple-bg-hover: #E4DEFC;
|
||||
--medusa-tag-purple-text: #5746AF;
|
||||
--medusa-tag-purple-dot: #6E56CF;
|
||||
--medusa-tag-purple-border: #D7CFF9;
|
||||
}
|
||||
|
||||
/** Dark theme **/
|
||||
html[data-theme="dark"] {
|
||||
/** Backgrounds **/
|
||||
--medusa-bg-subtle: #161618;
|
||||
--medusa-bg-subtle-hover: #1C1C1F;
|
||||
--medusa-bg-subtle-pressed: #232326;
|
||||
--medusa-bg-base: #1C1C1F;
|
||||
--medusa-bg-base-hover: #232326;
|
||||
--medusa-bg-base-pressed: #28282C;
|
||||
--medusa-bg-component: #2E2E32;
|
||||
--medusa-bg-field: #232326;
|
||||
--medusa-bg-field-hover: #28282C;
|
||||
--medusa-bg-highlight: #2C2250;
|
||||
--medusa-bg-toggle-off: #3E3E44;
|
||||
--medusa-bg-overlay: rgba(22, 22, 24, 0.7);
|
||||
--medusa-bg-interactive: #6E56CF;
|
||||
|
||||
/** Borders **/
|
||||
--medusa-border-base: #2E2E32;
|
||||
--medusa-border-strong: #3E3E44;
|
||||
--medusa-border-focus: #6E56CF;
|
||||
--medusa-border-focus-inset: #1C1C1F;
|
||||
--medusa-border-interactive: #6E56CF;
|
||||
|
||||
/** Text **/
|
||||
--medusa-text-base: #EDEDEF;
|
||||
--medusa-text-subtle: #7E7D86;
|
||||
--medusa-text-placeholder: #706F78;
|
||||
--medusa-text-disabled: #504F57;
|
||||
--medusa-text-on-color: #FFFFFF;
|
||||
--medusa-text-interactive: #7C66DC;
|
||||
--medusa-text-interactive-hover: #9E8CFC;
|
||||
--medusa-text-error: #E5484D;
|
||||
|
||||
/** Buttons **/
|
||||
--medusa-button-primary: #6E56CF;
|
||||
--medusa-button-primary-hover: #7C66DC;
|
||||
--medusa-button-primary-pressed: #9E8CFC;
|
||||
--medusa-button-secondary: #232326;
|
||||
--medusa-button-secondary-hover: #2E2E32;
|
||||
--medusa-button-secondary-pressed: #2E2E32;
|
||||
|
||||
/** Icons **/
|
||||
--medusa-icon-primary: #EDEDEF;
|
||||
--medusa-icon-secondary: #7E7D86;
|
||||
--medusa-icon-placeholder: #706F78;
|
||||
--medusa-icon-disabled: #504F57;
|
||||
--medusa-icon-on-color: #FFFFFF;
|
||||
--medusa-icon-interactive: #7C66DC;
|
||||
--medusa-icon-interactive-hover: #9E8CFC;
|
||||
--medusa-icon-error: #E5484D;
|
||||
|
||||
/** Shadow **/
|
||||
--medusa-shadow-overlay: 0px 2px 16px rgba(0, 0, 0, 0.32);
|
||||
--medusa-shadow-field-focused: 0px 0px 0px 4px #2C2250;
|
||||
--medusa-shadow-button-focused: 0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF;
|
||||
|
||||
/** Tags **/
|
||||
--medusa-tag-purple-bg: #2C2250;
|
||||
--medusa-tag-purple-bg-hover: #32275F;
|
||||
--medusa-tag-purple-text: #9E8CFC;
|
||||
--medusa-tag-purple-dot: #6E56CF;
|
||||
--medusa-tag-purple-border: #392C72;
|
||||
}
|
||||
@@ -1,89 +1,88 @@
|
||||
html[data-theme="dark"] .navbar-github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: calc(var(--ifm-z-index-overlay) - 1);
|
||||
padding-top: var(--ifm-navbar-padding-top);
|
||||
padding-bottom: var(--ifm-navbar-padding-bottom);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
.navbar:not(.navbar-sidebar--show) {
|
||||
html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
|
||||
background: none;
|
||||
backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-github-link:before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar__link svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.navbar__item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.navbar__inner {
|
||||
max-width: var(--ifm-max-content-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
|
||||
}
|
||||
|
||||
.navbar__items {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.navbar__item.dropdown > .navbar__link,
|
||||
.external-link .navbar__item {
|
||||
vertical-align: text-top;
|
||||
.navbar__brand {
|
||||
margin-right: calc(var(--ifm-base-spacing) * 2);
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: var(--ifm-logo-height);
|
||||
width: var(--ifm-logo-width);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
[class*=colorModeToggle],
|
||||
.navbar-link-icon {
|
||||
background-color: var(--medusa-button-secondary);
|
||||
border: 1px solid var(--medusa-border-base);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
[class*=toggleButton]:hover,
|
||||
.navbar-link-icon:hover {
|
||||
background-color: var(--medusa-button-secondary-hover) !important;
|
||||
}
|
||||
|
||||
[class*=toggleButton] {
|
||||
--ifm-icon-color: var(--ifm-color-mode-icon-color)
|
||||
}
|
||||
|
||||
.navbar-link-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: auto;
|
||||
[class*=colorModeToggle] {
|
||||
margin-left: var(--ifm-navbar-item-padding-horizontal);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.navbar__link--active {
|
||||
font-weight: 600;
|
||||
[class*=toggleButton] {
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar .right-divider {
|
||||
height: 100%;
|
||||
}
|
||||
.navbar .right-divider:after {
|
||||
content: '';
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar .divider {
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
margin-left: 12px;
|
||||
margin-left: var(--ifm-navbar-item-padding-horizontal);
|
||||
margin-right: var(--ifm-navbar-item-padding-horizontal);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-color: var(--ifm-navbar-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .navbar .right-divider:after {
|
||||
background-color: #D1D5DB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar .right-divider:after {
|
||||
background-color: #393939;
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
.alert {
|
||||
padding: 16px;
|
||||
padding: var(--ifm-base-spacing);
|
||||
border: 1px solid var(--ifm-note-border-color) !important;
|
||||
background-color: var(--ifm-note-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert p > code {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: calc(var(--ifm-base-spacing) / 2);
|
||||
padding-right: calc(var(--ifm-base-spacing) / 2);
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@@ -16,14 +16,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) [class*=alert--] {
|
||||
--ifm-code-background: #F9FAFB !important;
|
||||
--ifm-alert-background-color-highlight: #F9FAFB !important;
|
||||
--ifm-link-color: #4B5563 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] [class*=alert--] {
|
||||
--ifm-code-background: #222222 !important;
|
||||
--ifm-alert-background-color-highlight: #222222 !important;
|
||||
--ifm-link-color: #8A8A8A !important;
|
||||
[class*=alert--] {
|
||||
--ifm-code-background: var(--medusa-bg-base) !important;
|
||||
--ifm-alert-background-color-highlight: var(--ifm-background-surface-color) !important;
|
||||
--ifm-link-color: var(--ifm-color-primary) !important;
|
||||
--ifm-link-hover-color: var(--ifm-color-content) !important;
|
||||
}
|
||||
@@ -1,33 +1,133 @@
|
||||
html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
.redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-background-surface-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus table tbody tr table,
|
||||
.redocusaurus table tbody tr table tbody tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.redocusaurus a {
|
||||
color: var(--ifm-link-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) pre {
|
||||
.redocusaurus pre,
|
||||
.redocusaurus .react-tabs__tab-panel--selected,
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) > div > button,
|
||||
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
|
||||
background-color: var(--medusa-code-block) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .redocusaurus [data-section-id] > div:nth-child(2) > div > button,
|
||||
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(2) > div {
|
||||
border-color: var(--medusa-border-strong) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) > div > button {
|
||||
border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0 !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) > div > button + div > div > div > div {
|
||||
color: var(--ifm-color-primary) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) .react-tabs__tab pre {
|
||||
background-color: transparent !important;
|
||||
margin-top: 10px;
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h5 + svg {
|
||||
fill: #fff;
|
||||
.redocusaurus h5 + svg {
|
||||
fill: var(--ifm-icon-color);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
.redocusaurus h2 + div + div > div + div {
|
||||
padding: 8px 9.6px;
|
||||
background-color: var(--ifm-background-surface-color);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
background-color: #11171a;
|
||||
.redocusaurus h2 + div + div {
|
||||
border-bottom-color: var(--ifm-base-border-color);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus .menu-content,
|
||||
html[data-theme="dark"] .redocusaurus .menu-content label {
|
||||
.redocusaurus .menu-content,
|
||||
.redocusaurus .menu-content label {
|
||||
background-color: var(--ifm-background-color) !important;
|
||||
}
|
||||
|
||||
.redoc-json code {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.redocusaurus p {
|
||||
color: var(--ifm-color-content);
|
||||
}
|
||||
|
||||
.redocusaurus h2, .redocusaurus h3, .redocusaurus h4 {
|
||||
color: var(--ifm-color-headers) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) h2, .redocusaurus [data-section-id] > div:nth-child(2) h3, .redocusaurus [data-section-id] > div:nth-child(2) h4 {
|
||||
--ifm-color-headers: var(--medusa-text-on-color);
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id]:after {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.redocusaurus .property-name + div {
|
||||
color: var(--medusa-icon-error) !important;
|
||||
}
|
||||
|
||||
.redocusaurus .react-tabs__tab:not(.react-tabs__tab--selected) {
|
||||
background-color: var(--ifm-secondary-btn-background-color) !important;
|
||||
border-color: var(--ifm-secondary-btn-border-color) !important;
|
||||
color: var(--ifm-secondary-btn-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus ul > li.react-tabs__tab--selected[aria-selected="true"]:not(.tab-error):not(.tab-success) {
|
||||
background-color: var(--ifm-primary-btn-background-color) !important;
|
||||
border-color: var(--ifm-primary-btn-border-color) !important;
|
||||
color: var(--ifm-primary-btn-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus ul > li.react-tabs__tab--selected.tab-success {
|
||||
background-color: var(--medusa-button-success) !important;
|
||||
border-color: var(--medusa-button-success) !important;
|
||||
color: var(--medusa-button-success-text) !important;
|
||||
}
|
||||
|
||||
.redocusaurus ul > li.react-tabs__tab--selected.tab-error {
|
||||
background-color: var(--medusa-button-danger) !important;
|
||||
border-color: var(--medusa-button-danger) !important;
|
||||
color: var(--medusa-button-danger-text) !important;
|
||||
}
|
||||
|
||||
.redocusaurus ul > li.react-tabs__tab--selected.tab-error:hover {
|
||||
background-color: var(--medusa-button-danger-hover) !important;
|
||||
border-color: var(--medusa-button-danger-hover) !important;
|
||||
}
|
||||
|
||||
.redocusaurus .tab-error:not(.react-tabs__tab--selected) {
|
||||
background-color: var(--ifm-secondary-btn-background-color) !important;
|
||||
border-color: var(--ifm-secondary-btn-border-color) !important;
|
||||
color: var(--medusa-support-error) !important;
|
||||
}
|
||||
|
||||
.redocusaurus .tab-success:not(.react-tabs__tab--selected) {
|
||||
background-color: var(--ifm-secondary-btn-background-color) !important;
|
||||
border-color: var(--ifm-secondary-btn-border-color) !important;
|
||||
color: var(--medusa-support-success) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [type=get] {
|
||||
background-color: var(--medusa-support-success) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [type=delete] {
|
||||
background-color: var(--medusa-support-error) !important;
|
||||
}
|
||||
|
||||
.redocusaurus table th,
|
||||
.redocusaurus table td {
|
||||
border-color: var(--ifm-base-border-color) !important;
|
||||
}
|
||||
@@ -1,243 +1,361 @@
|
||||
.main-wrapper aside {
|
||||
z-index: var(--ifm-z-index-fixed);
|
||||
/** General sidebar styles **/
|
||||
.theme-doc-sidebar-container {
|
||||
z-index: calc(var(--ifm-z-index-overlay) - 2);
|
||||
border-right: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
.main-sidebar {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-left: var(--doc-sidebar-padding) !important;
|
||||
padding-right: var(--doc-sidebar-padding) !important;
|
||||
padding-bottom: calc(var(--ifm-base-margin-vertical) * 2) !important;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list {
|
||||
margin-bottom: calc(var(--ifm-base-spacing) / 4);
|
||||
}
|
||||
|
||||
.menu__list:not(.theme-doc-sidebar-menu),
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.menu__list-item:not(:first-child):not(.sidebar-title) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-],
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]:not(.theme-doc-sidebar-item-link-category)::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category .menu__list-item-collapsible .menu__link--active::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link > .menu__link--active::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category > .menu__list-item-collapsible::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-bg img {
|
||||
width: 100px;
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active::before {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
a.menu__link.menu__link--active.active {
|
||||
padding-left: 16px;
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:first-child::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before,
|
||||
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-child::before {
|
||||
height: calc(var(--ifm-base-margin-vertical) - 4px) !important;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::after,
|
||||
.menu__caret:before {
|
||||
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-link:first-child::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
|
||||
bottom: 0 !important;
|
||||
top: unset !important;
|
||||
}
|
||||
|
||||
.menu__list-item > a {
|
||||
font-weight: 450;
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible {
|
||||
padding-bottom: var(--ifm-menu-link-padding-vertical) !important;
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible .menu__link {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]::before,
|
||||
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
|
||||
background-color: var(--medusa-border-base);
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible .menu__link--active::before,
|
||||
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2 > .menu__link--active::before {
|
||||
background-color: var(--medusa-icon-interactive);
|
||||
z-index: 2 !important;
|
||||
top: var(--ifm-menu-link-padding-vertical) !important;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-2:only-child > .menu__list-item-collapsible .menu__link--active::before,
|
||||
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:only-child > .menu__link--active::before,
|
||||
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:first-child > .menu__link--active::before {
|
||||
top: calc(var(--ifm-menu-link-padding-vertical) + 2px) !important;
|
||||
}
|
||||
|
||||
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link:last-child > .menu__link--active::before {
|
||||
top: calc(var(--ifm-menu-link-padding-vertical) - 2px) !important;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible .menu__caret {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__link,
|
||||
.redocusaurus .menu-content label {
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px;
|
||||
line-height: 1.7em;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link,
|
||||
.redocusaurus .menu-content label.-depth1,
|
||||
.navbar-sidebar__item .menu__link:not(.navbar-github-link),
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label {
|
||||
color: var(--ifm-menu-color)
|
||||
}
|
||||
|
||||
.menu__link:hover,
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible:hover,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label:hover,
|
||||
.redocusaurus .menu-content label.active {
|
||||
background-color: transparent !important;
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label.active {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* .menu__list,
|
||||
.redocusaurus .menu-content ul {
|
||||
padding-left: 1.7em;
|
||||
padding-right: 1.7em;
|
||||
} */
|
||||
|
||||
a.menu__link--sublist::after {
|
||||
.menu__link--sublist-caret:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
a.menu__link--sublist + .menu__caret,
|
||||
.redocusaurus .menu-content label svg {
|
||||
display: none;
|
||||
.sidebar-desktop nav {
|
||||
--ifm-scrollbar-track-background-color: transparent !important;
|
||||
--ifm-scrollbar-thumb-background-color: transparent !important;
|
||||
--ifm-scrollbar-thumb-hover-background-color: transparent !important;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.8px;
|
||||
transition: transform var(--ifm-transition-fast) linear;
|
||||
position: absolute;
|
||||
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right.png');
|
||||
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) .menu__link {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right-dark.png');
|
||||
.menu__list .menu__list {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist:hover::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist.menu__link--active::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-hover.png');
|
||||
/* .sidebar-desktop::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: calc(var(--ifm-base-spacing) * 1.5);
|
||||
display: block;
|
||||
background-color: var(--ifm-background-color);
|
||||
} */
|
||||
|
||||
/** Mobile Sidebar **/
|
||||
.navbar-sidebar__back {
|
||||
background: transparent;
|
||||
width: fit-content;
|
||||
top: unset;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist:hover::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
[data-theme="dark"] a.menu__link--sublist.menu__link--active::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-dark-hover.png');
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible > .menu__link--sublist:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.menu__link:not(.menu__link--sublist):not(.navbar-github-link)::before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: 6px;
|
||||
background-image: url('/img/circle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist):hover::before,
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-hover.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist):hover::before,
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-dark-hover.png');
|
||||
}
|
||||
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) a.menu__link--sublist::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) a.menu__link--sublist::before {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-link-level-1 a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-category-level-1 a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before,
|
||||
.navbar-sidebar__item .menu__link::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label::before {
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.menu__link:not(.menu__link--sublist)::before {
|
||||
top: 21%;
|
||||
}
|
||||
|
||||
.menu__list-item > .menu__list-item-collapsible + .menu__list {
|
||||
transition-property: opacity, height !important;
|
||||
transition-duration: 350ms !important;
|
||||
transition-timing-function: ease-in-out !important;
|
||||
will-change: opacity, height !important;
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
height: 0;
|
||||
transition-delay: 100ms, 0s !important;
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible + .menu__list {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon .menu__link::before {
|
||||
background-image: url('/img/alert.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.topright-icon .menu__link::before {
|
||||
background-image: url('/img/arrow-top-right.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon [class*=iconExternalLink],
|
||||
.menu__list-item.topright-icon [class*=iconExternalLink] {
|
||||
display: none;
|
||||
/** Homepage Sidebar Design **/
|
||||
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__link,
|
||||
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__list-item-collapsible > .menu__link {
|
||||
padding-left: calc(var(--ifm-base-spacing) / 2) !important;
|
||||
}
|
||||
|
||||
/** General Sidebar items styles **/
|
||||
.menu__list-item-collapsible {
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
cursor: pointer;
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible--active {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
|
||||
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
|
||||
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
|
||||
padding-top: var(--ifm-menu-link-padding-vertical);
|
||||
padding-bottom: var(--ifm-menu-link-padding-vertical);
|
||||
}
|
||||
|
||||
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
|
||||
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 2);
|
||||
}
|
||||
|
||||
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
|
||||
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 3);
|
||||
}
|
||||
|
||||
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
|
||||
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
|
||||
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 4);
|
||||
}
|
||||
|
||||
/** Sidebar title **/
|
||||
.sidebar-title {
|
||||
margin: 0 !important;
|
||||
padding: calc(var(--ifm-base-margin-vertical) / 2) 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-title .menu__link,
|
||||
.sidebar-title span {
|
||||
--ifm-menu-link-padding-horizontal: 0;
|
||||
font-size: var(--medusa-label-regular-plus-size) !important;
|
||||
line-height: var(--medusa-label-regular-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-regular-plus-font-weight) !important;
|
||||
color: var(--medusa-text-base);
|
||||
}
|
||||
|
||||
.sidebar-title .menu__link--active,
|
||||
.sidebar-title .menu__link:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/** Group Headline **/
|
||||
.sidebar-group-headline {
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-category-level-1.sidebar-group-headline {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.sidebar-group-headline:not(.theme-doc-sidebar-item-category-level-1) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
|
||||
color: var(--medusa-text-base);
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:not([href]) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:hover,
|
||||
.sidebar-group-headline .menu__list-item-collapsible:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.sidebar-group-headline > .menu__link,
|
||||
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
|
||||
--medusa-label-small-plus-font-weight: 600;
|
||||
}
|
||||
|
||||
/** Divider Line Item **/
|
||||
.sidebar-divider-line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: var(--medusa-border-base);
|
||||
margin: calc(var(--ifm-base-margin-vertical) / 2) 0;
|
||||
}
|
||||
|
||||
/** Sidebar Group Divider **/
|
||||
.sidebar-group-divider {
|
||||
padding-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
color: var(--medusa-text-placeholder);
|
||||
font-size: var(--medusa-label-x-small-plus-size);
|
||||
line-height: var(--medusa-label-x-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.navbar-github-link {
|
||||
overflow: visible;
|
||||
.sidebar-group-divider:first-child {
|
||||
padding-top: 6px !important;
|
||||
}
|
||||
|
||||
.sidebar-desktop:not(.scrolling) nav::-webkit-scrollbar {
|
||||
--ifm-scrollbar-size: 0px;
|
||||
.sidebar-group-divider:not(:first-child) {
|
||||
padding-top: calc(var(--ifm-base-margin-vertical) / 2) !important;
|
||||
}
|
||||
|
||||
/** Sidebar Item Icon **/
|
||||
|
||||
[class*="theme-doc-sidebar-item-"]:not(.sidebar-title) .sidebar-item-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
[class*="theme-doc-sidebar-item-"]:not(.sidebar-title):not(.sidebar-back-link) .sidebar-item-icon {
|
||||
margin-right: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
/** Back Link **/
|
||||
.sidebar-back-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-back-link .menu__link {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-back-link .menu__link,
|
||||
.sidebar-back-link span {
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.sidebar-back-link .menu__link:hover {
|
||||
background-color: transparent !important;
|
||||
color: var(--ifm-menu-color-active);
|
||||
}
|
||||
|
||||
.sidebar-back-link .sidebar-item-icon {
|
||||
margin-right: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible .menu__link--sublist:hover {
|
||||
background-color: var(--ifm-menu-color-background-hover) !important;
|
||||
}
|
||||
|
||||
/** Sidebar Soon Link **/
|
||||
.sidebar-soon-link {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-soon-link * {
|
||||
--ifm-icon-color: var(--medusa-icon-disabled);
|
||||
|
||||
color: var(--medusa-text-disabled);
|
||||
}
|
||||
|
||||
/** Sidebar Badge **/
|
||||
.sidebar-badge-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/** Redocly sidebar **/
|
||||
|
||||
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active) {
|
||||
color: var(--ifm-menu-color);
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]).active,
|
||||
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active):hover {
|
||||
color: var(--ifm-menu-color-active);
|
||||
}
|
||||
|
||||
/** Media Query **/
|
||||
@media screen and (min-width: 992px) {
|
||||
.sidebar-title,
|
||||
.sidebar-back-link {
|
||||
position: sticky;
|
||||
background-color: var(--ifm-background-color);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar-title:first-child {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sidebar-title:not(:first-child) {
|
||||
top: var(--medusa-label-small-plus-line-height);
|
||||
}
|
||||
|
||||
.sidebar-back-link {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
.theme-doc-toc-desktop {
|
||||
padding-top: calc(var(--ifm-base-margin-vertical) * 1.5);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents {
|
||||
border-left: none !important;
|
||||
padding: 0;
|
||||
@@ -7,21 +11,23 @@
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu.svg');
|
||||
background-image: url('/img/side-menu-light.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu-dark.svg');
|
||||
background-image: url('/img/side-menu.svg');
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px;
|
||||
background-position-x: -1px;
|
||||
padding-left: 28px;
|
||||
background-size: 14px 10px;
|
||||
background-position-y: center;
|
||||
padding-left: 22px;
|
||||
content: 'On this page';
|
||||
font-size: 13px;
|
||||
padding-bottom: 0;
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
|
||||
@@ -29,7 +35,7 @@ html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents > li:first-child {
|
||||
margin-top: 16px;
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::after {
|
||||
@@ -42,8 +48,15 @@ html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before
|
||||
background-color: var(--ifm-toc-divider-color);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li a + ul {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link {
|
||||
position: relative;
|
||||
font-size: var(--medusa-label-x-small-plus-size);
|
||||
line-height: var(--medusa-label-x-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link:hover,
|
||||
@@ -64,15 +77,6 @@ html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .toc-wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .markdown-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
@@ -99,14 +103,6 @@ html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before
|
||||
padding-left: calc(var(--ifm-toc-padding-horizontal) + var(--ifm-toc-link-padding-left)) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(2 / 12 * 100%)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(3 / 12 * 100%)
|
||||
}
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: var(--ifm-toc-width);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
.react-tooltip {
|
||||
border: 1px solid var(--ifm-tooltip-border-color) !important;
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 20px !important;
|
||||
box-shadow: 0px 2px 16px var(--ifm-tooltip-box-shadow-color) !important;
|
||||
padding: 8px 16px !important;
|
||||
border-radius: var(--ifm-global-radius) !important;
|
||||
font-size: var(--medusa-label-x-small-plus-size) !important;
|
||||
line-height: var(--medusa-label-x-small-plus-line-height) !important;
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight) !important;
|
||||
box-shadow: var(--ifm-tooltip-box-shadow-color) !important;
|
||||
padding: calc(var(--ifm-base-margin-vertical) / 4 - 1px) var(--ifm-base-spacing) !important;
|
||||
}
|
||||
|
||||
.react-tooltip-arrow {
|
||||
|
||||
@@ -1,73 +1,85 @@
|
||||
h1 {
|
||||
font-size: var(--ifm-h1-font-size);
|
||||
font-weight: var(--ifm-h1-weight);
|
||||
line-height: var(--ifm-h1-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--ifm-h2-font-size);
|
||||
font-weight: var(--ifm-h2-weight);
|
||||
line-height: var(--ifm-h2-line-height);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--ifm-h3-font-size);
|
||||
font-weight: var(--ifm-h3-weight);
|
||||
line-height: var(--ifm-h3-line-height);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--ifm-color-headers);
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
.markdown > h1,
|
||||
.markdown > h1:first-child {
|
||||
--ifm-h1-font-size: var(--medusa-h1-size);
|
||||
--ifm-h1-line-height: var(--medusa-h1-line-height);
|
||||
--ifm-h1-weight: var(--medusa-h1-weight);
|
||||
}
|
||||
|
||||
.theme-doc-markdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown h1:first-child {
|
||||
font-size: 30px !important;
|
||||
.markdown > h1:first-child,
|
||||
.markdown > h2,
|
||||
.markdown > h3 {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.markdown > h2 {
|
||||
font-size: 24px !important;
|
||||
--ifm-h2-font-size: var(--medusa-h2-size);
|
||||
--ifm-h2-line-height: var(--medusa-h2-line-height);
|
||||
--ifm-h2-weight: var(--medusa-h2-weight);
|
||||
}
|
||||
|
||||
.markdown > h3 {
|
||||
--ifm-h3-font-size: var(--medusa-h3-size);
|
||||
--ifm-h3-line-height: var(--medusa-h3-line-height);
|
||||
--ifm-h3-weight: var(--medusa-h3-weight);
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: var(--ifm-font-weight-base);
|
||||
}
|
||||
|
||||
.markdown > p {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.markdown a,
|
||||
.markdown a:hover {
|
||||
color: var(--ifm-link-color);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link) {
|
||||
.markdown a:not(.hash-link),
|
||||
.DocSearch-Prefill {
|
||||
font-weight: var(--ifm-link-weight);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
.markdown p + img,
|
||||
.markdown .alert,
|
||||
.markdown .code-wrapper {
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon-dark.svg');
|
||||
}
|
||||
|
||||
.markdown p + h2,
|
||||
.markdown .alert + h2 {
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.markdown p + .alert {
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown p + .code-wrapper,
|
||||
.markdown p + .tabs-wrapper,
|
||||
.markdown p + .alert,
|
||||
.markdown p + section,
|
||||
video {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.markdown p + .card-wrapper {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown p + p > img:not(.ui-icon) {
|
||||
@@ -76,4 +88,13 @@ html:not([data-theme="dark"]) .markdown a:not(.hash-link):not(.card):not(.img-ur
|
||||
|
||||
p + img:not(.ui-icon) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
h1 + .cards-grid,
|
||||
h1 + .card-wrapper,
|
||||
h2 + .cards-grid,
|
||||
h2 + .card-wrapper,
|
||||
h3 + .cards-grid,
|
||||
h3 + .card-wrapper {
|
||||
margin-top: calc(var(--ifm-hr-margin-vertical) - 8px);
|
||||
}
|
||||
@@ -5,241 +5,285 @@
|
||||
:root {
|
||||
/* Base Styles */
|
||||
--ifm-global-radius: 8px;
|
||||
--ifm-hr-background-color: #E5E7EB;
|
||||
--ifm-hr-background-color: var(--medusa-border-base);
|
||||
--ifm-base-spacing: 16px;
|
||||
--ifm-global-spacing: var(--ifm-base-spacing);
|
||||
--ifm-base-margin-vertical: 32px;
|
||||
--ifm-hr-margin-vertical: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
--ifm-hr-margin-vertical: var(--ifm-base-margin-vertical);
|
||||
--ifm-leading: 24px;
|
||||
--ifm-logo-width: 83px;
|
||||
--ifm-logo-height: 20px;
|
||||
|
||||
/* Colors */
|
||||
--ifm-color-primary: #111827;
|
||||
--ifm-medusa-gray: #f0f0f0;
|
||||
--ifm-color-content: #6B7280;
|
||||
--ifm-color-primary: var(--medusa-text-base);
|
||||
--ifm-background-color: var(--medusa-bg-base);
|
||||
--ifm-background-surface-color: var(--medusa-bg-subtle);
|
||||
--ifm-color-content: var(--medusa-text-subtle) !important;
|
||||
--ifm-color-content-secondary: var(--ifm-color-content) !important;
|
||||
--ifm-primary-gradient: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
|
||||
#9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
|
||||
--ifm-base-border-color: var(--medusa-border-base);
|
||||
--ifm-strong-border-color: var(--medusa-border-strong);
|
||||
--ifm-focus-border-color: var(--medusa-border-focus);
|
||||
--ifm-icon-color: var(--medusa-icon-secondary);
|
||||
|
||||
/* Fonts */
|
||||
--ifm-code-font-size: 14px;
|
||||
--ifm-code-font-size: var(--medusa-body-regular-size);
|
||||
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||
--ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
|
||||
--ifm-font-size-base: 14px;
|
||||
--ifm-line-height-base: 24px;
|
||||
--ifm-font-size-base: var(--medusa-body-regular-size);
|
||||
--ifm-line-height-base: var(--medusa-body-regular-line-height);
|
||||
--ifm-font-weight-base: var(--medusa-body-regular-font-weight);
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #111827;
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-heading-line-height: 24px;
|
||||
--ifm-h1-font-size: 30px;
|
||||
--ifm-h1-line-height: 48px;
|
||||
--ifm-h2-font-size: 24px;
|
||||
--ifm-h2-line-height: 36px;
|
||||
--ifm-h4-font-size: 14px;
|
||||
/** Due to how docusaurus styles headings, the variables are set again in _typography.css **/
|
||||
--ifm-color-headers: var(--ifm-color-primary);
|
||||
--ifm-h1-font-size: var(--medusa-h1-size);
|
||||
--ifm-h1-line-height: var(--medusa-h1-line-height);
|
||||
--ifm-h1-weight: var(--medusa-h1-weight);
|
||||
--ifm-h2-font-size: var(--medusa-h2-size);
|
||||
--ifm-h2-line-height: var(--medusa-h2-line-height);
|
||||
--ifm-h2-weight: var(--medusa-h2-weight);
|
||||
--ifm-h3-font-size: var(--medusa-h3-size);
|
||||
--ifm-h3-line-height: var(--medusa-h3-line-height);
|
||||
--ifm-h3-weight: var(--medusa-h3-weight);
|
||||
--ifm-h4-font-size: var(--ifm-font-size-base);
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #4B5563;
|
||||
--ifm-link-weight: 600;
|
||||
--ifm-link-color: var(--ifm-color-primary);
|
||||
--ifm-link-weight: var(--medusa-body-regular-plus-font-weight);
|
||||
--ifm-link-hover-color: var(--ifm-color-content);
|
||||
--ifm-link-decoration: none;
|
||||
--ifm-link-hover-decoration: none;
|
||||
|
||||
/* Sidebar */
|
||||
--doc-sidebar-width: 250px !important;
|
||||
--ifm-menu-active: #111827;
|
||||
--doc-sidebar-width: 320px !important;
|
||||
--doc-sidebar-padding: 24px;
|
||||
--ifm-menu-link-padding-vertical: 6px;
|
||||
--ifm-menu-link-padding-horizontal: 16px;
|
||||
--ifm-menu-color: var(--medusa-text-subtle);
|
||||
--ifm-menu-color-active: var(--medusa-text-base);
|
||||
--ifm-menu-color-background-hover: var(--medusa-bg-base-hover);
|
||||
--ifm-menu-color-background-active: var(--medusa-bg-base-pressed);
|
||||
|
||||
/* Docs Page */
|
||||
--ifm-docs-page-max-width: 850px;
|
||||
--ifm-docs-page-max-width: var(--ifm-container-width-xl);
|
||||
--ifm-max-content-width: 1419px;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #f0f0f0;
|
||||
--ifm-toc-link-color: #6B7280;
|
||||
--ifm-toc-padding-horizontal: 9px;
|
||||
--ifm-toc-link-active: #111827;
|
||||
--ifm-toc-divider-color: #E5E7EB;
|
||||
--ifm-toc-link-padding-left: 16px;
|
||||
--ifm-toc-border-color: var(--medusa-border-base);
|
||||
--ifm-toc-link-color: var(--medusa-text-subtle);
|
||||
--ifm-toc-padding-horizontal: 16px;
|
||||
--ifm-toc-link-active: var(--medusa-text-base);
|
||||
--ifm-toc-divider-color: var(--medusa-border-base);
|
||||
--ifm-toc-link-padding-left: 11px;
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #E5E7EB;
|
||||
--ifm-navbar-padding-top: 16px;
|
||||
--ifm-navbar-padding-bottom: 17px;
|
||||
--ifm-navbar-padding-vertical: 16px;
|
||||
--ifm-navbar-background-color: var(--ifm-background-color);
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px var(--medusa-border-base);
|
||||
--ifm-navbar-padding-vertical: 12px;
|
||||
--ifm-navbar-padding-horizontal: 24px;
|
||||
--ifm-navbar-item-padding-vertical: 6px;
|
||||
--ifm-navbar-item-padding-horizontal: 16px;
|
||||
--ifm-navbar-height: 57px;
|
||||
--ifm-navbar-link-hover-color: #111827;
|
||||
--ifm-navbar-link-color: #6B7280;
|
||||
--ifm-navbar-link-hover-color: var(--medusa-text-base);
|
||||
--ifm-navbar-link-color: var(--medusa-text-subtle);
|
||||
--ifm-navbar-divider-color: var(--medusa-border-strong);
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #F3F4F6;
|
||||
--mode-button-text-color: #6B7280;
|
||||
--mode-button-active-bg: #FFFFFF;
|
||||
--mode-button-active-border-color: #E5E7EB;
|
||||
--mode-button-active-text-color: #111827;
|
||||
--ifm-color-mode-icon-color: var(--medusa-icon-secondary);
|
||||
|
||||
/* Screen Width */
|
||||
--ifm-container-width-xl: 960px;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #F9FAFB;
|
||||
--ifm-note-border-color: #E5E7EB;
|
||||
--ifm-note-text-color: #4B5563;
|
||||
--ifm-note-background: var(--ifm-background-surface-color);
|
||||
--ifm-note-border-color: var(--medusa-border-base);
|
||||
--ifm-note-text-color: var(--medusa-text-subtle);
|
||||
--ifm-note-info-color: var(--medusa-support-info);
|
||||
--ifm-note-warning-color: var(--medusa-support-error);
|
||||
--ifm-note-tip-color: var(--medusa-support-warning);
|
||||
|
||||
/* Code */
|
||||
/* Inline Code */
|
||||
--ifm-code-border-radius: 8px;
|
||||
--ifm-code-padding-horizontal: 8px;
|
||||
--ifm-code-border-color: #E5E7EB;
|
||||
--ifm-code-background: #F9FAFB;
|
||||
--ifm-code-color: #4B5563;
|
||||
--ifm-code-tabs-color: #6F6F6F;
|
||||
--ifm-code-tabs-active-bg: transparent;
|
||||
--ifm-code-tabs-active-color: #F4F4F4;
|
||||
--ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
|
||||
--ifm-code-border-color: var(--medusa-border-base);
|
||||
--ifm-code-background: var(--medusa-bg-subtle) !important;
|
||||
--ifm-code-background-hover: var(--medusa-bg-subtle-hover);
|
||||
--ifm-code-background-pressed: var(--medusa-bg-subtle-pressed);
|
||||
--ifm-code-color: var(--medusa-text-subtle);
|
||||
|
||||
/* Code Blocks */
|
||||
--ifm-pre-background: var(--medusa-code-block);
|
||||
--ifm-pre-background-transparent: var(--medusa-code-block-transparent);
|
||||
--ifm-code-tabs-color: var(--medusa-code-tab-text);
|
||||
--ifm-code-tabs-active-bg: var(--medusa-code-tab);
|
||||
--ifm-code-tabs-active-color: var(--medusa-code-tab-active-text);
|
||||
--ifm-code-action-hover-bg: var(--medusa-code-tab-hover);
|
||||
--ifm-pre-padding: 16px;
|
||||
--docusaurus-highlighted-code-line-bg: #393939;
|
||||
--ifm-code-title-color: #737373;
|
||||
--ifm-code-title-color: var(--medusa-code-tab-title);
|
||||
--ifm-code-line-number-color: var(--medusa-text-placeholder);
|
||||
--ifm-code-block-border-color: var(--medusa-code-block-border);
|
||||
|
||||
/* Tabs */
|
||||
--ifm-tabs-color-active: var(--ifm-color-primary);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #fff;
|
||||
--ifm-tooltip-border-color: #E5E7EB;
|
||||
--ifm-tooltip-box-shadow-color: rgba(17, 24, 39, 0.08);
|
||||
--ifm-tooltip-background-color: var(--medusa-tooltip);
|
||||
--ifm-tooltip-border-color: var(--medusa-tooltip-border);
|
||||
--ifm-tooltip-box-shadow-color: var(--medusa-tooltip-shadow);
|
||||
--rt-opacity: 1 !important;
|
||||
--rt-color-dark: var(--ifm-tooltip-background-color) !important;
|
||||
--rt-color-white: var(--ifm-color-content) !important;
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #fff;
|
||||
--ifm-primary-btn-color: #111827;
|
||||
--ifm-primary-btn-border-color: #E5E7EB;
|
||||
--ifm-primary-btn-background-color: var(--medusa-button-primary);
|
||||
--ifm-primary-btn-hover-background-color: var(--medusa-button-primary-hover);
|
||||
--ifm-primary-btn-color: var(--medusa-text-on-color);
|
||||
--ifm-primary-btn-border-color: var(--medusa-button-primary);
|
||||
--ifm-primary-btn-focused-shadow: var(--medusa-shadow-button-focused);
|
||||
--ifm-secondary-btn-background-color: var(--medusa-button-secondary);
|
||||
--ifm-secondary-btn-color: var(--ifm-color-primary);
|
||||
--ifm-secondary-btn-border-color: var(--ifm-base-border-color);
|
||||
--ifm-secondary-btn-hover-background-color: var(--medusa-button-secondary-hover);
|
||||
--ifm-secondary-btn-focused-shadow: var(--ifm-primary-btn-focused-shadow);
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #E5E7EB;
|
||||
--ifm-footer-logo-max-width: 24px;
|
||||
--ifm-footer-title-color: #111827;
|
||||
--ifm-footer-color: var(--medusa-text-placeholder);
|
||||
--ifm-footer-background-color: transparent;
|
||||
--ifm-footer-padding-horizontal: 0;
|
||||
--ifm-footer-social-icons-color: var(--medusa-icon-placeholder);
|
||||
--ifm-footer-social-icons-color-hover: var(--medusa-icon-secondary);
|
||||
--ifm-footer-border-color: var(--medusa-border-base);
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
--ifm-doc-footer-border-color: var(--medusa-border-base);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #F9FAFB !important;
|
||||
--docsearch-modal-background: #fff !important;
|
||||
--docsearch-modal-shadow: none !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||||
--docsearch-container-background: rgba(17, 24, 39, 0.4) !important;
|
||||
--docsearch-key-gradient: #E5E7EB !important;
|
||||
--docsearch-muted-color: #6B7280 !important;
|
||||
--docsearch-placeholder-color: #9CA3AF;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1) !important;
|
||||
--docsearch-searchbox-border-color: #7C3AED;
|
||||
--docsearch-primary-color: var(--docsearch-searchbox-border-color);
|
||||
--docsearch-searchbox-height: 40px !important;
|
||||
--docsearch-spacing: 16px !important;
|
||||
--docsearch-highlight-color: #6B7280 !important;
|
||||
--docsearch-text-color: #111827 !important;
|
||||
--docsearch-hit-background: #FFFFFF !important;
|
||||
--docsearch-searchbox-width: 280px;
|
||||
--docsearch-searchbox-height: 32px !important;
|
||||
--docsearch-searchbox-background: var(--medusa-bg-field) !important;
|
||||
--docsearch-searchbox-focus-background: var(--medusa-bg-field-hover) !important;
|
||||
--docsearch-searchbox-border-color: var(--medusa-border-base);
|
||||
--docsearch-searchbox-shadow: none !important;
|
||||
--docsearch-modal-height: 472px !important;
|
||||
--docsearch-modal-background: var(--medusa-bg-base) !important;
|
||||
--docsearch-modal-border-color: var(--medusa-border-base);
|
||||
--docsearch-modal-shadow: var(--medusa-shadow-overlay) !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); /* TODO */
|
||||
--docsearch-modal-searchbox-height: 56px;
|
||||
--docsearch-modal-searchbox-focus-background: none;
|
||||
--docsearch-container-background: var(--medusa-bg-overlay) !important;
|
||||
--docsearch-key-gradient: var(--medusa-bg-component) !important;
|
||||
--docsearch-muted-color: var(--medusa-text-subtle) !important;
|
||||
--docsearch-placeholder-color: var(--medusa-text-placeholder);
|
||||
--docsearch-primary-color: var(--ifm-color-primary);
|
||||
--docsearch-source-color: var(--medusa-text-placeholder);
|
||||
--docsearch-spacing-y: 12px;
|
||||
--docsearch-spacing-x: 24px;
|
||||
--docsearch-spacing: var(--docsearch-spacing-y) var(--docsearch-spacing-x) !important;
|
||||
--docsearch-source-spacing: 10px 24px;
|
||||
--docsearch-highlight-color: var(--medusa-text-placeholder) !important;
|
||||
--docsearch-text-color: var(--ifm-color-primary) !important;
|
||||
--docsearch-hit-background: var(--docsearch-modal-background) !important;
|
||||
--docsearch-hit-height: auto !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #F9FAFB;
|
||||
--docsearch-hit-icon-color: #9CA3AF;
|
||||
--docsearch-hit-border-color: #E5E7EB;
|
||||
--docsearch-hit-title-color: #000000;
|
||||
--docsearch-hit-active-bg: var(--medusa-bg-base-hover);
|
||||
--docsearch-hit-icon-color: var(--medusa-icon-placeholder);
|
||||
--docsearch-icon-color: var(--medusa-icon-placeholder);
|
||||
--docsearch-hit-border-color: var(--medusa-border-base);
|
||||
--docsearch-hit-title-color: var(--docsearch-primary-color);
|
||||
--docsearch-tree-color: var(--medusa-border-base);
|
||||
--docsearch-tree-hover-color: var(--medusa-border-strong);
|
||||
--docsearch-footer-height: 40px !important;
|
||||
|
||||
/* Announcement Bar */
|
||||
--ifm-announcement-bar-bg: #FFFFFF;
|
||||
--ifm-announcement-bar-border-color: #E5E7EB;
|
||||
--ifm-announcement-bar-hover-bg: #F9FAFB;
|
||||
--ifm-announcement-bar-icon-bg: #F3F4F6;
|
||||
--ifm-announcement-bar-icon-border-color: var(--ifm-announcement-bar-border-color);
|
||||
--ifm-announcement-bar-title-color: var(--ifm-color-headers);
|
||||
--docusaurus-announcement-bar-height: auto !important;
|
||||
--ifm-announcement-bar-bg: var(--ifm-background-surface-color);
|
||||
--ifm-announcement-bar-border-color: var(--ifm-base-border-color);
|
||||
--ifm-announcement-bar-hover-bg: var(--medusa-bg-subtle-hover);
|
||||
--ifm-announcement-bar-icon-bg: url('/img/announcement-bg.svg');
|
||||
--ifm-announcement-bar-icon-color: var(--medusa-icon-on-color);
|
||||
--ifm-announcement-bar-title-color: var(--ifm-color-primary);
|
||||
--ifm-announcement-bar-text-color: var(--ifm-color-content);
|
||||
--ifm-announcement-bar-close-icon-color: #9CA3AF;
|
||||
--ifm-announcement-bar-close-icon-color: var(--medusa-icon-placeholder);
|
||||
|
||||
/* Cards */
|
||||
--ifm-card-bg: var(--ifm-background-surface-color);
|
||||
--ifm-card-bg-hover: var(--medusa-bg-subtle-hover);
|
||||
--ifm-card-border-color: var(--ifm-background-surface-color);
|
||||
--ifm-card-icon-size: 20px;
|
||||
--ifm-card-highlighted-bg-image: url('/img/small-squares-bg-light.svg');
|
||||
|
||||
/* Large Card */
|
||||
--large-card-bg: var(--ifm-background-surface-color);
|
||||
--large-card-bg-hover: var(--medusa-bg-subtle-hover);
|
||||
--large-card-border-color: var(--ifm-base-border-color);
|
||||
--large-card-bg-image: url('/img/squares-bg-light.svg');
|
||||
--large-card-fade-effect: linear-gradient(transparent, var(--large-card-bg));
|
||||
--large-card-fade-effect-hover: linear-gradient(transparent, var(--large-card-bg-hover));
|
||||
--large-card-icon-size: 20px;
|
||||
--large-card-icon-inside-padding: 6px;
|
||||
--large-card-icon-wrapper-padding: var(--bordered-padding);
|
||||
--large-card-icon-wrapper-border-color: var(--ifm-strong-border-color);
|
||||
--large-card-title-color: var(--ifm-color-primary);
|
||||
|
||||
/* Bordered Element */
|
||||
--bordered-border-color: var(--medusa-border-strong);
|
||||
--bordered-padding: 3px;
|
||||
--bordered-inside-padding: 2px;
|
||||
--bordered-margin-right: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
|
||||
/** Tables **/
|
||||
--ifm-table-border-color: var(--medusa-border-base);
|
||||
--ifm-table-head-background: var(--ifm-background-surface-color);
|
||||
--ifm-table-head-color: var(--ifm-color-primary);
|
||||
--ifm-table-head-font-weight: var(--medusa-body-regular-plus-font-weight);
|
||||
--ifm-table-stripe-background: var(--ifm-background-surface-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
/* Base Styles */
|
||||
--ifm-hr-background-color: #2D2D2D;
|
||||
|
||||
/* Colors */
|
||||
--ifm-color-primary: #F3F3F3;
|
||||
--ifm-background-color: #161616;
|
||||
--ifm-background-surface-color: #161616;
|
||||
--ifm-medusa-gray: #292929;
|
||||
--ifm-color-content: #8A8A8A;
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #F3F3F3;
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #8A8A8A;
|
||||
|
||||
/* Sidebar */
|
||||
--ifm-menu-color: rgba(255, 255, 255, 0.5);
|
||||
--ifm-menu-active: #fff;
|
||||
--ifm-menu-color-background-hover: var(--medusa-bg-subtle-hover);
|
||||
--ifm-menu-color-background-active: var(--medusa-bg-subtle-pressed);
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #333;
|
||||
--ifm-toc-link-active: #F3F3F3;
|
||||
--ifm-toc-link-color: #737373;
|
||||
--ifm-toc-divider-color: #393939;
|
||||
/* Colors */
|
||||
--ifm-background-color: var(--medusa-bg-subtle);
|
||||
--ifm-background-surface-color: var(--medusa-bg-base);
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-background-color: #161616;
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #2D2D2D;
|
||||
--ifm-navbar-link-hover-color: #F3F3F3;
|
||||
--ifm-navbar-link-color: #8A8A8A;
|
||||
/* Inline Code */
|
||||
--ifm-code-background: var(--medusa-bg-base) !important;
|
||||
--ifm-code-background-hover: var(--medusa-bg-base-hover);
|
||||
--ifm-code-background-pressed: var(--medusa-bg-base-pressed);
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #222222;
|
||||
--mode-button-text-color: #8A8A8A;
|
||||
--mode-button-active-bg: #161616;
|
||||
--mode-button-active-border-color: #393939;
|
||||
--mode-button-active-text-color: #F3F3F3;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #222222;
|
||||
--ifm-note-border-color: #393939;
|
||||
--ifm-note-text-color: #8A8A8A;
|
||||
|
||||
/* Code */
|
||||
--ifm-code-border-color: #393939;
|
||||
--ifm-code-background: #222222;
|
||||
--ifm-code-color: #8A8A8A;
|
||||
--ifm-code-tabs-active-bg: #222222;
|
||||
--ifm-code-tabs-active-color: #F3F3F3;
|
||||
--ifm-code-action-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #222222;
|
||||
--ifm-tooltip-border-color: #393939;
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #222222;
|
||||
--ifm-primary-btn-color: #F3F3F3;
|
||||
--ifm-primary-btn-border-color: #393939;
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #3E3F41;
|
||||
--ifm-footer-title-color: #F3F3F3;
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #222222 !important;
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background) !important;
|
||||
--docsearch-modal-background: #222222 !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #222222 100%);
|
||||
--docsearch-container-background: rgba(22, 22, 22, 0.7) !important;
|
||||
--docsearch-key-gradient: #393939 !important;
|
||||
--docsearch-muted-color: #8A8A8A !important;
|
||||
--docsearch-placeholder-color: #686868;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(139, 92, 246, 0.2) !important;
|
||||
--docsearch-searchbox-border-color: #8B5CF6;
|
||||
--docsearch-highlight-color: #8A8A8A !important;
|
||||
--docsearch-text-color: #F3F3F3 !important;
|
||||
--docsearch-hit-background: #222222 !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #2D2D2D;
|
||||
--docsearch-hit-icon-color: #737373;
|
||||
--docsearch-hit-border-color: #393939;
|
||||
--docsearch-hit-title-color: #F3F3F3;
|
||||
/* Cards */
|
||||
--ifm-card-bg-hover: var(--medusa-bg-base-hover);
|
||||
--ifm-card-highlighted-bg-image: url('/img/small-squares-bg.svg');
|
||||
|
||||
/* Announcement Bar */
|
||||
--ifm-announcement-bar-bg: #222222;
|
||||
--ifm-announcement-bar-border-color: #2D2D2D;
|
||||
--ifm-announcement-bar-hover-bg: #2D2D2D;
|
||||
--ifm-announcement-bar-icon-bg: #393939;
|
||||
--ifm-announcement-bar-icon-border-color: #393939;
|
||||
--ifm-announcement-bar-text-color: #737373;
|
||||
--ifm-announcement-bar-hover-bg: var(--medusa-bg-base-hover);
|
||||
|
||||
/* Tabs */
|
||||
--ifm-tabs-color-active: #F3F3F3;
|
||||
/* Large Card */
|
||||
--large-card-bg-hover: var(--medusa-bg-base-hover);
|
||||
--large-card-bg-image: url('/img/squares-bg.svg');
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
:root {
|
||||
/** Table of Content **/
|
||||
--ifm-toc-width: calc(2 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
:root {
|
||||
/** Table of Content **/
|
||||
--ifm-toc-width: calc(3 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
:root {
|
||||
--docusaurus-announcement-bar-height: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,8 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('./_medusa.css');
|
||||
@import url('./_variables.css');
|
||||
|
||||
@import url('./_card.css');
|
||||
@import url('./_code.css');
|
||||
@import url('./_dark.css');
|
||||
@import url('./_docsearch.css');
|
||||
@import url('./_docspage.css');
|
||||
@import url('./_footer.css');
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
.container {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -7,17 +7,32 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
function NoteIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/info-icon.png')} className="no-zoom-img" />
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z"
|
||||
fill="var(--ifm-note-info-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
function TipIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/tip-icon.png')} height={16} width={12} className="no-zoom-img" />
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0002 1.81238C8.6789 1.81208 7.39444 2.24761 6.34586 3.05146C5.29727 3.85532 4.54312 4.9826 4.20028 6.2586C3.85744 7.5346 3.94507 8.88806 4.44958 10.1092C4.95409 11.3303 5.84731 12.351 6.99079 13.0129C7.49005 13.3026 7.80226 13.7465 7.81609 14.1941C7.81991 14.314 7.86311 14.4293 7.93901 14.5221C8.01492 14.615 8.1193 14.6803 8.23602 14.7079C8.4922 14.7683 8.75274 14.8156 9.01766 14.8498C9.25273 14.8797 9.45432 14.6912 9.45432 14.4539V11.0617C9.22435 11.0364 8.99647 10.9948 8.77239 10.9373C8.70296 10.9194 8.63773 10.888 8.58042 10.8449C8.52311 10.8019 8.47485 10.7479 8.43839 10.6862C8.40193 10.6244 8.37798 10.5561 8.36792 10.4851C8.35786 10.4142 8.36189 10.3419 8.37976 10.2724C8.39763 10.203 8.429 10.1378 8.47209 10.0805C8.51517 10.0232 8.56912 9.9749 8.63085 9.93844C8.69259 9.90198 8.7609 9.87804 8.83189 9.86798C8.90288 9.85792 8.97515 9.86194 9.04458 9.87981C9.67139 10.0414 10.3289 10.0414 10.9557 9.87981C11.0259 9.8596 11.0993 9.85366 11.1718 9.86235C11.2443 9.87103 11.3143 9.89416 11.3776 9.93037C11.441 9.96658 11.4965 10.0151 11.5408 10.0731C11.585 10.1312 11.6172 10.1975 11.6354 10.2682C11.6536 10.3388 11.6575 10.4124 11.6468 10.4846C11.636 10.5568 11.6109 10.6261 11.5729 10.6885C11.5349 10.7508 11.4848 10.8048 11.4255 10.8474C11.3663 10.8901 11.2991 10.9204 11.2279 10.9365C11.0039 10.9944 10.776 11.0362 10.546 11.0617V14.4532C10.546 14.6912 10.7476 14.8797 10.9827 14.8498C11.2476 14.8156 11.5081 14.7683 11.7643 14.7079C11.881 14.6803 11.9854 14.615 12.0613 14.5221C12.1372 14.4293 12.1804 14.314 12.1842 14.1941C12.1988 13.7465 12.5103 13.3026 13.0095 13.0129C14.153 12.351 15.0462 11.3303 15.5507 10.1092C16.0552 8.88806 16.1429 7.5346 15.8 6.2586C15.4572 4.9826 14.703 3.85532 13.6545 3.05146C12.6059 2.24761 11.3214 1.81208 10.0002 1.81238Z"
|
||||
fill="var(--ifm-note-tip-color)"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M7.82589 15.7493C7.83925 15.6788 7.86637 15.6117 7.90568 15.5517C7.94499 15.4918 7.99573 15.4401 8.05501 15.3998C8.11428 15.3594 8.18092 15.3312 8.25112 15.3166C8.32132 15.302 8.39371 15.3014 8.46415 15.3148C9.47884 15.5073 10.5207 15.5073 11.5354 15.3148C11.6067 15.2991 11.6804 15.2978 11.7522 15.3111C11.824 15.3244 11.8923 15.352 11.9533 15.3922C12.0142 15.4324 12.0665 15.4844 12.107 15.5452C12.1474 15.6059 12.1753 15.6742 12.189 15.7459C12.2026 15.8176 12.2017 15.8914 12.1863 15.9627C12.171 16.0341 12.1414 16.1017 12.0995 16.1614C12.0576 16.2212 12.0041 16.2719 11.9422 16.3106C11.8803 16.3493 11.8112 16.3752 11.7392 16.3868C10.5898 16.6049 9.40971 16.6049 8.26037 16.3868C8.11825 16.3598 7.99266 16.2775 7.91119 16.1579C7.82973 16.0384 7.79904 15.8914 7.82589 15.7493ZM8.36517 17.5279C8.37262 17.4566 8.39404 17.3875 8.42821 17.3245C8.46238 17.2615 8.50863 17.2058 8.56432 17.1606C8.62001 17.1155 8.68404 17.0818 8.75277 17.0614C8.82149 17.041 8.89357 17.0343 8.96486 17.0418C9.65293 17.1137 10.3466 17.1137 11.0347 17.0418C11.1787 17.0267 11.3227 17.0695 11.4352 17.1607C11.5477 17.2518 11.6193 17.384 11.6344 17.5279C11.6494 17.6719 11.6067 17.816 11.5155 17.9285C11.4243 18.0409 11.2922 18.1126 11.1482 18.1276C10.3847 18.2076 9.61487 18.2076 8.85133 18.1276C8.78003 18.1202 8.7109 18.0988 8.64787 18.0646C8.58485 18.0304 8.52918 17.9842 8.48404 17.9285C8.43889 17.8728 8.40516 17.8088 8.38476 17.74C8.36437 17.6713 8.35771 17.5992 8.36517 17.5279Z"
|
||||
fill="var(--ifm-note-tip-color)"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
function DangerIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/alert-icon.png')} className="no-zoom-img" />
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
|
||||
fill="var(--ifm-note-warning-color)"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
function InfoIcon() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.admonition {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
@@ -9,15 +9,13 @@
|
||||
.admonitionIcon svg,
|
||||
.admonitionIcon img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
max-width: 20px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: var(--ifm-base-spacing);
|
||||
}
|
||||
|
||||
.admonitionIcon img {
|
||||
@@ -25,8 +23,10 @@
|
||||
}
|
||||
|
||||
.admonitionContent {
|
||||
font-size: 14px;
|
||||
color: var(--ifm-note-text-color);
|
||||
font-size: var(--medusa-body-regular-size) !important;
|
||||
line-height: var(--medusa-body-regular-line-height) !important;
|
||||
font-weight: var(--medusa-body-regular-font-weight) !important;
|
||||
flex: 1;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
20
www/docs/src/theme/AnnouncementBar/CloseButton/index.js
Normal file
20
www/docs/src/theme/AnnouncementBar/CloseButton/index.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import IconClose from '@theme/Icon/Close';
|
||||
import styles from './styles.module.css';
|
||||
export default function AnnouncementBarCloseButton(props) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={translate({
|
||||
id: 'theme.AnnouncementBar.closeButtonAriaLabel',
|
||||
message: 'Close',
|
||||
description: 'The ARIA label for close button of announcement bar',
|
||||
})}
|
||||
{...props}
|
||||
className={clsx('clean-btn close', styles.closeButton, props.className)}>
|
||||
<IconClose width={20} height={20} strokeWidth={1.5} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.closeButton {
|
||||
--ifm-icon-color: var(--ifm-announcement-bar-close-icon-color);
|
||||
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.closeButton,
|
||||
.closeButton:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
.contentWrapper {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--ifm-announcement-bar-text-color);
|
||||
font-size: var(--medusa-label-x-small-plus-size);
|
||||
line-height: var(--medusa-label-x-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.contentTitle {
|
||||
font-weight: 600;
|
||||
color: var( --ifm-announcement-bar-title-color);
|
||||
color: var(--ifm-announcement-bar-title-color);
|
||||
}
|
||||
@@ -3,9 +3,9 @@ import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
|
||||
import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
|
||||
import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import styles from './styles.module.css';
|
||||
import IconBell from '../Icon/Bell';
|
||||
import Bordered from '../../components/Bordered';
|
||||
|
||||
export default function AnnouncementBar() {
|
||||
const {announcementBar} = useThemeConfig();
|
||||
@@ -18,13 +18,12 @@ export default function AnnouncementBar() {
|
||||
<div
|
||||
className={styles.announcementBar}
|
||||
style={{backgroundColor, color: textColor}}>
|
||||
<div
|
||||
className={styles.announcementBarIconWrapper}>
|
||||
<ThemedImage alt="announcement" sources={{
|
||||
light: useBaseUrl('/img/bell.png'),
|
||||
dark: useBaseUrl('/img/bell-dark.png')
|
||||
}} className={styles.announcementBarIcon} />
|
||||
</div>
|
||||
<Bordered>
|
||||
<div
|
||||
className={styles.announcementBarIconWrapper}>
|
||||
<IconBell />
|
||||
</div>
|
||||
</Bordered>
|
||||
<AnnouncementBarContent className={styles.announcementBarContent} />
|
||||
{isCloseable && (
|
||||
<AnnouncementBarCloseButton
|
||||
|
||||
@@ -1,27 +1,16 @@
|
||||
:root {
|
||||
--docusaurus-announcement-bar-height: auto !important;
|
||||
}
|
||||
|
||||
.announcementBar {
|
||||
--bordered-margin-right: 12px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--docusaurus-announcement-bar-height);
|
||||
background-color: var(--ifm-announcement-bar-bg);
|
||||
padding: 12px 20px 12px 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--ifm-announcement-bar-border-color);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
margin: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.announcementBar:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: var(--ifm-primary-gradient);
|
||||
margin: 0 var(--doc-sidebar-padding) calc(var(--ifm-base-margin-vertical) / 2) var(--doc-sidebar-padding);
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.announcementBar:hover {
|
||||
@@ -39,33 +28,22 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
|
||||
.announcementBarClose {
|
||||
z-index: 101;
|
||||
text-align: right;
|
||||
color: var(--ifm-announcement-bar-text-color) !important;
|
||||
}
|
||||
|
||||
.announcementBarClose svg {
|
||||
/* color: var(--ifm-announcement-bar-close-icon-color); */
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
}
|
||||
|
||||
.announcementBarClose svg g {
|
||||
stroke-width: 1.9px !important;
|
||||
stroke-width: 1.5px !important;
|
||||
}
|
||||
|
||||
.announcementBarIconWrapper {
|
||||
--ifm-icon-color: var(--ifm-announcement-bar-icon-color);
|
||||
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--ifm-announcement-bar-icon-bg);
|
||||
border: 1px solid var(--ifm-announcement-bar-icon-border-color);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.announcementBarIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--ifm-announcement-bar-icon-bg);
|
||||
background-size: cover;
|
||||
border-radius: calc(var(--ifm-global-radius) / 2);
|
||||
}
|
||||
|
||||
.announcementBarLink {
|
||||
@@ -84,10 +62,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
:root {
|
||||
--docusaurus-announcement-bar-height: 30px;
|
||||
}
|
||||
|
||||
.announcementBarPlaceholder,
|
||||
.announcementBarClose {
|
||||
flex-basis: 50px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Highlight, {defaultProps} from 'prism-react-renderer';
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import {
|
||||
containsLineNumbers,
|
||||
parseCodeBlockTitle,
|
||||
@@ -12,19 +12,19 @@ import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
|
||||
import Container from '@theme/CodeBlock/Container';
|
||||
import CopyButton from '../../CopyButton';
|
||||
import Line from '@theme/CodeBlock/Line';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import Tooltip from '../../Tooltip';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import IconAlert from '../../Icon/Alert';
|
||||
import IconCopy from '../../Icon/Copy';
|
||||
|
||||
export default function CodeBlockString({
|
||||
children,
|
||||
className: blockClassName = '',
|
||||
metastring,
|
||||
title: titleProp,
|
||||
showLineNumbers: showLineNumbersProp,
|
||||
showLineNumbers: showLineNumbersProp = true,
|
||||
language: languageProp,
|
||||
noReport = false,
|
||||
noCopy = false
|
||||
@@ -74,7 +74,7 @@ export default function CodeBlockString({
|
||||
<code
|
||||
className={clsx(
|
||||
styles.codeBlockLines,
|
||||
showLineNumbers && styles.codeBlockLinesWithNumbering,
|
||||
showLineNumbers && tokens.length > 1 && styles.codeBlockLinesWithNumbering,
|
||||
tokens.length === 1 ? 'thin-code' : ''
|
||||
)}>
|
||||
{tokens.map((line, i) => (
|
||||
@@ -84,7 +84,7 @@ export default function CodeBlockString({
|
||||
getLineProps={getLineProps}
|
||||
getTokenProps={getTokenProps}
|
||||
classNames={lineClassNames[i]}
|
||||
showLineNumbers={showLineNumbers}
|
||||
showLineNumbers={showLineNumbers && tokens.length > 1}
|
||||
/>
|
||||
))}
|
||||
</code>
|
||||
@@ -95,19 +95,13 @@ export default function CodeBlockString({
|
||||
{!noReport && (
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<ThemedImage alt='Report Incorrect Code' sources={{
|
||||
light: useBaseUrl('/img/alert-code.png'),
|
||||
dark: useBaseUrl('/img/alert-code-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
<IconAlert />
|
||||
</a>
|
||||
</Tooltip>
|
||||
)}
|
||||
{!noCopy && (
|
||||
<CopyButton buttonClassName='code-action code-action-copy' text={code}>
|
||||
<ThemedImage alt='Copy to Clipboard' sources={{
|
||||
light: useBaseUrl('/img/clipboard-copy.png'),
|
||||
dark: useBaseUrl('/img/clipboard-copy-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
<IconCopy />
|
||||
</CopyButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,37 +1,16 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.codeBlockContent {
|
||||
.codeBlockContent {
|
||||
position: relative;
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.codeBlockTitle {
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-300);
|
||||
font-size: var(--ifm-code-font-size);
|
||||
font-weight: 500;
|
||||
padding: 0.75rem var(--ifm-pre-padding);
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
--ifm-pre-background: var(--prism-background-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.codeBlockTitle + .codeBlockContent .codeBlock {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.codeBlockStandalone {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -56,25 +35,12 @@
|
||||
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
column-gap: 0.2rem;
|
||||
column-gap: 2px;
|
||||
position: absolute;
|
||||
right: var(--ifm-pre-padding);
|
||||
top: var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
.buttonGroup .code-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--prism-background-color);
|
||||
color: var(--prism-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
padding: 0.4rem;
|
||||
line-height: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.buttonGroup button:focus-visible,
|
||||
.buttonGroup button:hover {
|
||||
opacity: 1 !important;
|
||||
|
||||
@@ -37,7 +37,12 @@ export default function CodeBlock({children: rawChildren, noReport = false, noCo
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<CodeBlockComp key={String(isBrowser)} {...props} noReport={noReport} noCopy={noCopy} className={title ? '' : 'no-header-block'}>
|
||||
<CodeBlockComp
|
||||
key={String(isBrowser)}
|
||||
noReport={noReport}
|
||||
noCopy={noCopy}
|
||||
{...props}
|
||||
className={`${props.className} ${title ? '' : 'no-header-block'}`}>
|
||||
{children}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
const allowedModes = [
|
||||
'light',
|
||||
'dark',
|
||||
'auto'
|
||||
]
|
||||
|
||||
function ColorModeToggle({className, onChange}) {
|
||||
const isBrowser = useIsBrowser();
|
||||
const { colorMode } = useThemeConfig();
|
||||
const [storageColorMode, setStorageColorMode] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser) {
|
||||
const previousSelected = window.localStorage.getItem('selected-color-mode') || window.localStorage.getItem('theme')
|
||||
if (previousSelected && allowedModes.includes(previousSelected)) {
|
||||
setStorageColorMode(previousSelected)
|
||||
} else if (colorMode.respectPrefersColorScheme) {
|
||||
setStorageColorMode('auto')
|
||||
} else {
|
||||
setStorageColorMode(colorMode.defaultMode || 'light')
|
||||
}
|
||||
}
|
||||
}, [isBrowser])
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && storageColorMode === 'auto') {
|
||||
|
||||
function userPreferenceChangedHandler(event) {
|
||||
onChange(event.matches ? "dark" : "light")
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', userPreferenceChangedHandler);
|
||||
|
||||
return () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', userPreferenceChangedHandler);
|
||||
}
|
||||
}
|
||||
}, [storageColorMode, isBrowser])
|
||||
|
||||
function handleAutoOption () {
|
||||
if (isBrowser) {
|
||||
onChange(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
}
|
||||
}
|
||||
|
||||
function handleColorModeChange(mode) {
|
||||
if (isBrowser) {
|
||||
window.localStorage.setItem('selected-color-mode', mode)
|
||||
setStorageColorMode(mode)
|
||||
}
|
||||
|
||||
if (mode === 'auto') {
|
||||
handleAutoOption();
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(mode);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx('color-mode-tabs', className)}>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(storageColorMode === 'light') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('light')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Light'}
|
||||
>
|
||||
Light
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(storageColorMode === 'dark') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('dark')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Dark'}
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
storageColorMode === 'auto' && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('auto')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Auto'}
|
||||
>
|
||||
Auto
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default React.memo(ColorModeToggle);
|
||||
@@ -1,28 +0,0 @@
|
||||
/* .toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transition: background var(--ifm-transition-fast);
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
[data-theme='light'] .darkToggleIcon,
|
||||
[data-theme='dark'] .lightToggleIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleButtonDisabled {
|
||||
cursor: not-allowed;
|
||||
} */
|
||||
@@ -9,25 +9,33 @@ import clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import BorderedIcon from '../../components/BorderedIcon';
|
||||
import Badge from '../../components/Badge';
|
||||
import Icons from '../Icon';
|
||||
|
||||
function CardContainer({href, children, className}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx('card', styles.cardContainer, className)}>
|
||||
{children}
|
||||
</Link>
|
||||
<article className={`card-wrapper margin-bottom--lg`}>
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx('card', styles.cardContainer, className)}>
|
||||
{children}
|
||||
</Link>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
function CardLayout({href, icon, title, description, containerClassName}) {
|
||||
|
||||
function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false}) {
|
||||
return (
|
||||
<CardContainer href={href} className={containerClassName}>
|
||||
{icon}
|
||||
<CardContainer href={href} className={clsx(containerClassName, isSoon && styles.cardSoon)}>
|
||||
<div className={clsx(styles.cardIconContainer)}>
|
||||
{icon}
|
||||
{isSoon && <Badge variant={'purple'}>Guide coming soon</Badge>}
|
||||
</div>
|
||||
<div className={clsx(styles.contentContainer)}>
|
||||
<h2 className={clsx(styles.cardTitle)} title={title}>
|
||||
<span className={clsx(styles.cardTitle)} title={title}>
|
||||
{title}
|
||||
</h2>
|
||||
</span>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx(styles.cardDescription)}
|
||||
@@ -35,12 +43,53 @@ function CardLayout({href, icon, title, description, containerClassName}) {
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
{html && (
|
||||
<p
|
||||
className={clsx(styles.cardDescription)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: html
|
||||
}}
|
||||
></p>
|
||||
)}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function getCardIcon (item) {
|
||||
if (item.customProps?.themedImage) {
|
||||
return (
|
||||
<BorderedIcon icon={{
|
||||
light: item.customProps.themedImage.light,
|
||||
dark: item.customProps.themedImage.dark
|
||||
}} wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />
|
||||
)
|
||||
} else if (item.customProps?.image) {
|
||||
return (
|
||||
<BorderedIcon icon={{
|
||||
light: item.customProps.image
|
||||
}} wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />
|
||||
);
|
||||
} else if (item.customProps?.icon) {
|
||||
return <BorderedIcon
|
||||
IconComponent={item.customProps.icon}
|
||||
wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />;
|
||||
} else if (item.customProps?.iconName && Icons.hasOwnProperty(item.customProps?.iconName)) {
|
||||
return <BorderedIcon
|
||||
IconComponent={Icons[item.customProps?.iconName]}
|
||||
wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />;
|
||||
} else {
|
||||
return (
|
||||
<div className={clsx('card-icon-wrapper', 'no-zoom-img')}>
|
||||
{isInternalUrl(item.href) ? '📄️' : '🔗'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function CardCategory({item}) {
|
||||
const href = findFirstCategoryLink(item);
|
||||
const icon = getCardIcon(item);
|
||||
// Unexpected: categories that don't have a link have been filtered upfront
|
||||
if (!href) {
|
||||
return null;
|
||||
@@ -48,11 +97,11 @@ function CardCategory({item}) {
|
||||
return (
|
||||
<CardLayout
|
||||
href={href}
|
||||
icon="🗃️"
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={translate(
|
||||
{
|
||||
message: '{count} items',
|
||||
message: item.customProps?.description || '{count} items',
|
||||
id: 'theme.docs.DocCard.categoryDescription',
|
||||
description:
|
||||
'The default description for a category card in the generated index about how many items this category includes',
|
||||
@@ -60,35 +109,13 @@ function CardCategory({item}) {
|
||||
{count: item.items.length},
|
||||
)}
|
||||
containerClassName={item.customProps?.className}
|
||||
isSoon={item.customProps?.isSoon}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.themedImage) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<ThemedImage alt={item.label} sources={{
|
||||
light: item.customProps.themedImage.light,
|
||||
dark: item.customProps.themedImage.dark
|
||||
}} />
|
||||
</div>
|
||||
)
|
||||
} else if (item.customProps && item.customProps.image) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<img src={item.customProps.image} alt={item.label} />
|
||||
</div>
|
||||
);
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
{isInternalUrl(item.href) ? '📄️' : '🔗'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const icon = getCardIcon(item);
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
|
||||
return (
|
||||
@@ -97,10 +124,13 @@ function CardLink({item}) {
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={item.customProps?.description || doc?.description}
|
||||
html={item.customProps?.html}
|
||||
containerClassName={item.customProps?.className}
|
||||
isSoon={item.customProps?.isSoon}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocCard({item}) {
|
||||
switch (item.type) {
|
||||
case 'link':
|
||||
|
||||
@@ -1,60 +1,51 @@
|
||||
.cardContainer {
|
||||
--ifm-link-hover-decoration: none;
|
||||
--ifm-background-color: #fff;
|
||||
--ifm-background-color-hover: #F9FAFB;
|
||||
--ifm-border-color: #E5E7EB;
|
||||
|
||||
background-color: var(--ifm-background-color);
|
||||
border: 1px solid var(--ifm-border-color) !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: none !important;
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
transition-property: border, box-shadow;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
padding: var(--ifm-base-spacing);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cardContainer {
|
||||
--ifm-background-color-hover: #2D2D2D;
|
||||
--ifm-background-color: #222222;
|
||||
--ifm-border-color: #393939;
|
||||
}
|
||||
|
||||
.cardContainer:hover {
|
||||
background-color: var(--ifm-background-color-hover);
|
||||
}
|
||||
|
||||
.cardContainer *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cardContainer:not(.cardSoon):hover {
|
||||
background-color: var(--ifm-card-bg-hover);
|
||||
}
|
||||
|
||||
.cardIconContainer {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
font-size: var(--medusa-label-regular-plus-size);
|
||||
line-height: var(--medusa-label-regular-plus-line-height);
|
||||
font-weight: var(--medusa-label-regular-plus-font-weight);
|
||||
color: var(--ifm-color-primary);
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-size: var(--medusa-label-regular-size);
|
||||
line-height: var(--medusa-label-regular-line-height);
|
||||
font-weight: var(--medusa-label-regular-font-weight);
|
||||
color: var(--ifm-color-content);
|
||||
}
|
||||
|
||||
.cardTitle,
|
||||
.cardDescription {
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.cardTitle img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
margin-top: 3px;
|
||||
.cardSoon {
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -18,9 +18,7 @@ export default function DocCardList(props) {
|
||||
return (
|
||||
<section className={clsx('cards-grid', `grid-${props.colSize || '4'}`, className)}>
|
||||
{filteredItems.map((item, index) => (
|
||||
<article key={index} className={`card-wrapper margin-bottom--lg`}>
|
||||
<DocCard item={item} />
|
||||
</article>
|
||||
<DocCard item={item} key={index} />
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,7 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||
import DocItemContent from '@theme/DocItem/Content';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
import Footer from '@theme/Footer';
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
@@ -45,6 +46,7 @@ export default function DocItemLayout({children}) {
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
.docItemContainer {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
}
|
||||
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
|
||||
24
www/docs/src/theme/DocPage/Layout/Main/index.js
Normal file
24
www/docs/src/theme/DocPage/Layout/Main/index.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
|
||||
const sidebar = useDocsSidebar();
|
||||
return (
|
||||
<main
|
||||
className={clsx(
|
||||
styles.docMainContainer,
|
||||
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
|
||||
)}>
|
||||
<div
|
||||
className={clsx(
|
||||
'container padding-top--md docs-page-container',
|
||||
styles.docItemWrapper,
|
||||
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
22
www/docs/src/theme/DocPage/Layout/Main/styles.module.css
Normal file
22
www/docs/src/theme/DocPage/Layout/Main/styles.module.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.docMainContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.docMainContainer {
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - var(--doc-sidebar-width));
|
||||
}
|
||||
|
||||
.docMainContainerEnhanced {
|
||||
max-width: calc(100% - var(--doc-sidebar-hidden-width));
|
||||
}
|
||||
|
||||
.docItemWrapperEnhanced {
|
||||
max-width: calc(
|
||||
var(--ifm-container-width) + var(--doc-sidebar-width)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
84
www/docs/src/theme/DocPage/Layout/Sidebar/index.js
Normal file
84
www/docs/src/theme/DocPage/Layout/Sidebar/index.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, {useState, useCallback, useRef} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
import DocSidebar from '@theme/DocSidebar';
|
||||
import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
|
||||
import styles from './styles.module.css';
|
||||
import { SwitchTransition, CSSTransition } from 'react-transition-group';
|
||||
// Reset sidebar state when sidebar changes
|
||||
// Use React key to unmount/remount the children
|
||||
// See https://github.com/facebook/docusaurus/issues/3414
|
||||
function ResetOnSidebarChange({children}) {
|
||||
const sidebar = useDocsSidebar();
|
||||
return (
|
||||
<React.Fragment key={sidebar?.name ?? 'noSidebar'}>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default function DocPageLayoutSidebar({
|
||||
sidebar,
|
||||
hiddenSidebarContainer,
|
||||
setHiddenSidebarContainer,
|
||||
}) {
|
||||
const {pathname} = useLocation();
|
||||
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
||||
const toggleSidebar = useCallback(() => {
|
||||
if (hiddenSidebar) {
|
||||
setHiddenSidebar(false);
|
||||
}
|
||||
setHiddenSidebarContainer((value) => !value);
|
||||
}, [setHiddenSidebarContainer, hiddenSidebar]);
|
||||
const {name} = useDocsSidebar()
|
||||
const sidebarRef = useRef(null)
|
||||
return (
|
||||
<aside
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarContainer,
|
||||
styles.docSidebarContainer,
|
||||
hiddenSidebarContainer && styles.docSidebarContainerHidden,
|
||||
)}
|
||||
onTransitionEnd={(e) => {
|
||||
if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
|
||||
return;
|
||||
}
|
||||
if (hiddenSidebarContainer) {
|
||||
setHiddenSidebar(true);
|
||||
}
|
||||
}}>
|
||||
<SwitchTransition>
|
||||
<CSSTransition
|
||||
key={name}
|
||||
nodeRef={sidebarRef}
|
||||
classNames={{
|
||||
enter: 'animate__animated animate__fadeInLeft',
|
||||
exit: 'animate__animated animate__fadeOutLeft'
|
||||
}}
|
||||
timeout={200}
|
||||
>
|
||||
<div
|
||||
className={styles.sidebarViewportWrapper}
|
||||
ref={sidebarRef}>
|
||||
<ResetOnSidebarChange>
|
||||
<div
|
||||
className={clsx(
|
||||
styles.sidebarViewport,
|
||||
hiddenSidebar && styles.sidebarViewportHidden,
|
||||
)}>
|
||||
<DocSidebar
|
||||
sidebar={sidebar}
|
||||
path={pathname}
|
||||
onCollapse={toggleSidebar}
|
||||
isHidden={hiddenSidebar}
|
||||
/>
|
||||
{hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
|
||||
</div>
|
||||
</ResetOnSidebarChange>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</SwitchTransition>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
36
www/docs/src/theme/DocPage/Layout/Sidebar/styles.module.css
Normal file
36
www/docs/src/theme/DocPage/Layout/Sidebar/styles.module.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:root {
|
||||
--doc-sidebar-width: 300px;
|
||||
--doc-sidebar-hidden-width: 30px;
|
||||
}
|
||||
|
||||
.docSidebarContainer {
|
||||
display: none;
|
||||
|
||||
--animate-duration: 0.2s;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.docSidebarContainer {
|
||||
display: block;
|
||||
width: var(--doc-sidebar-width);
|
||||
/* margin-top: calc(-1 * var(--ifm-navbar-height)); */
|
||||
will-change: width;
|
||||
transition: width var(--ifm-transition-fast) ease;
|
||||
clip-path: inset(0);
|
||||
}
|
||||
|
||||
.docSidebarContainerHidden {
|
||||
width: var(--doc-sidebar-hidden-width);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebarViewportWrapper {
|
||||
top: var(--ifm-navbar-height);
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.sidebarViewportWrapper,
|
||||
.sidebarViewportWrapper > div {
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
63
www/docs/src/theme/DocPage/index.js
Normal file
63
www/docs/src/theme/DocPage/index.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
HtmlClassNameProvider,
|
||||
ThemeClassNames,
|
||||
PageMetadata,
|
||||
} from '@docusaurus/theme-common';
|
||||
import {
|
||||
docVersionSearchTag,
|
||||
DocsSidebarProvider,
|
||||
DocsVersionProvider,
|
||||
useDocRouteMetadata,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import DocPageLayout from '@theme/DocPage/Layout';
|
||||
import NotFound from '@theme/NotFound';
|
||||
import SearchMetadata from '@theme/SearchMetadata';
|
||||
function DocPageMetadata(props) {
|
||||
const {versionMetadata} = props;
|
||||
return (
|
||||
<>
|
||||
<SearchMetadata
|
||||
version={versionMetadata.version}
|
||||
tag={docVersionSearchTag(
|
||||
versionMetadata.pluginId,
|
||||
versionMetadata.version,
|
||||
)}
|
||||
/>
|
||||
<PageMetadata>
|
||||
{versionMetadata.noIndex && (
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
)}
|
||||
</PageMetadata>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default function DocPage(props) {
|
||||
const {versionMetadata} = props;
|
||||
const currentDocRouteMetadata = useDocRouteMetadata(props);
|
||||
if (!currentDocRouteMetadata) {
|
||||
return <NotFound />;
|
||||
}
|
||||
const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DocPageMetadata {...props} />
|
||||
<HtmlClassNameProvider
|
||||
className={clsx(
|
||||
// TODO: it should be removed from here
|
||||
ThemeClassNames.wrapper.docsPages,
|
||||
ThemeClassNames.page.docsDocPage,
|
||||
props.versionMetadata.className,
|
||||
sidebarName && 'doc-has-sidebar'
|
||||
)}>
|
||||
<DocsVersionProvider version={versionMetadata}>
|
||||
<DocsSidebarProvider name={sidebarName} items={sidebarItems}>
|
||||
<DocPageLayout>{docElement}</DocPageLayout>
|
||||
</DocsSidebarProvider>
|
||||
</DocsVersionProvider>
|
||||
</HtmlClassNameProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,12 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import Logo from '@theme/Logo';
|
||||
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
|
||||
import Content from '@theme/DocSidebar/Desktop/Content';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItem from '@theme/DocSidebarItem';
|
||||
import SearchBar from '../../SearchBar';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import AnnouncementBar from '@theme/AnnouncementBar';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const {
|
||||
@@ -17,27 +14,26 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
docs: {
|
||||
sidebar: {hideable},
|
||||
},
|
||||
sidebarFooter = [],
|
||||
} = useThemeConfig();
|
||||
const isBrowser = useIsBrowser()
|
||||
const sidebarRef = useRef(null)
|
||||
const windowSize = useWindowSize();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && sidebarRef.current) {
|
||||
function handleScroll () {
|
||||
if (!sidebarRef.current.classList.contains('scrolling')) {
|
||||
sidebarRef.current.classList.add('scrolling');
|
||||
if (!sidebarRef.current?.classList.contains('scrolling')) {
|
||||
sidebarRef.current?.classList.add('scrolling');
|
||||
const intervalId = setInterval(() => {
|
||||
if (!sidebarRef.current.matches(':hover')) {
|
||||
sidebarRef.current.classList.remove('scrolling');
|
||||
if (!sidebarRef.current?.matches(':hover')) {
|
||||
sidebarRef.current?.classList.remove('scrolling');
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
const navElement = sidebarRef.current.querySelector('nav');
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar');
|
||||
navElement.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
@@ -46,6 +42,42 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
}
|
||||
}, [isBrowser, sidebarRef.current])
|
||||
|
||||
useEffect(() => {
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar'),
|
||||
navElementBoundingRect = navElement.getBoundingClientRect();
|
||||
|
||||
//logic to scroll to current active item
|
||||
const activeItem = document.querySelector('.sidebar-desktop [aria-current=page]'),
|
||||
activeItemBoundingReact = activeItem?.getBoundingClientRect(),
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
isActiveItemVisible = activeItemBoundingReact.top >= 0 && activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
|
||||
|
||||
// alert(isActiveItemVisible);
|
||||
|
||||
if (activeItem && !isActiveItemVisible) {
|
||||
//check if it has a parent list item element
|
||||
// let parentListItem = activeItem.parentElement
|
||||
|
||||
//search only to reach the main sidebar element
|
||||
// while (parentListItem && !parentListItem.classList.contains('sidebar-desktop')) {
|
||||
// if (parentListItem.classList.contains('menu__list-item')) {
|
||||
// break;
|
||||
// }
|
||||
|
||||
// parentListItem = parentListItem.parentElement
|
||||
// }
|
||||
|
||||
const elementToScrollTo = activeItem,
|
||||
elementBounding = elementToScrollTo.getBoundingClientRect()
|
||||
//scroll to element
|
||||
navElement.scroll({
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
top: elementBounding.top - navElementBoundingRect.top + navElement.scrollTop - 160,
|
||||
behaviour: 'smooth'
|
||||
})
|
||||
}
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@@ -55,23 +87,8 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
isHidden && styles.sidebarHidden,
|
||||
)}
|
||||
ref={sidebarRef}>
|
||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
||||
<div className={styles.sidebarSearchContainer}>
|
||||
{windowSize !== 'mobile' && <SearchBar />}
|
||||
</div>
|
||||
<AnnouncementBar />
|
||||
<Content path={path} sidebar={sidebar} />
|
||||
{sidebarFooter.length > 0 && (
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<Content path={path} sidebar={sidebar} className="main-sidebar" />
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,9 +6,8 @@
|
||||
height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-top: var(--ifm-navbar-height);
|
||||
width: var(--doc-sidebar-width);
|
||||
transition: opacity 50ms ease;
|
||||
padding-top: calc(var(--ifm-base-spacing) * 1.5);
|
||||
}
|
||||
|
||||
.sidebarWithHideableNavbar {
|
||||
@@ -25,34 +24,15 @@
|
||||
.sidebarLogo {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
margin: 0 var(--ifm-navbar-padding-horizontal);
|
||||
min-height: var(--ifm-navbar-height);
|
||||
max-height: var(--ifm-navbar-height);
|
||||
margin: 18px 0;
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
width: fit-content;
|
||||
padding-left: var(--doc-sidebar-padding);
|
||||
padding-right: var(--doc-sidebar-padding);
|
||||
}
|
||||
|
||||
.sidebarLogo img {
|
||||
margin-right: 0.5rem;
|
||||
height: 2rem;
|
||||
height: var(--ifm-logo-height);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarLogo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebarFooterList {
|
||||
border-top: 1px solid var(--ifm-toc-border-color);
|
||||
list-style: none;
|
||||
padding-top: 1.7em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebarFooterList li a {
|
||||
padding-left: 1.8em !important;
|
||||
}
|
||||
|
||||
.sidebarSearchContainer {
|
||||
margin: 24px 16px 24px;
|
||||
}
|
||||
195
www/docs/src/theme/DocSidebarItem/Category/index.js
Normal file
195
www/docs/src/theme/DocSidebarItem/Category/index.js
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, {useEffect, useMemo} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
ThemeClassNames,
|
||||
useThemeConfig,
|
||||
usePrevious,
|
||||
useCollapsible,
|
||||
Collapsible
|
||||
} from '@docusaurus/theme-common';
|
||||
import {
|
||||
isActiveSidebarItem,
|
||||
findFirstCategoryLink,
|
||||
useDocSidebarItemsExpandedState,
|
||||
isSamePath,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import Link from '@docusaurus/Link';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import DocSidebarItems from '@theme/DocSidebarItems';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
|
||||
// If we navigate to a category and it becomes active, it should automatically
|
||||
// expand itself
|
||||
function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
|
||||
const wasActive = usePrevious(isActive);
|
||||
useEffect(() => {
|
||||
const justBecameActive = isActive && !wasActive;
|
||||
if (justBecameActive && collapsed) {
|
||||
updateCollapsed(false);
|
||||
}
|
||||
}, [isActive, wasActive, collapsed, updateCollapsed]);
|
||||
}
|
||||
/**
|
||||
* When a collapsible category has no link, we still link it to its first child
|
||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
||||
* the category even when JS fails to load, is delayed or simply disabled
|
||||
* React hydration becomes an optional progressive enhancement
|
||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
||||
* see https://github.com/facebook/docusaurus/issues/3030
|
||||
*/
|
||||
function useCategoryHrefWithSSRFallback(item) {
|
||||
const isBrowser = useIsBrowser();
|
||||
return useMemo(() => {
|
||||
if (item.href) {
|
||||
return item.href;
|
||||
}
|
||||
// In these cases, it's not necessary to render a fallback
|
||||
// We skip the "findFirstCategoryLink" computation
|
||||
if (isBrowser || !item.collapsible) {
|
||||
return undefined;
|
||||
}
|
||||
return findFirstCategoryLink(item);
|
||||
}, [item, isBrowser]);
|
||||
}
|
||||
function CollapseButton({categoryLabel, onClick}) {
|
||||
return (
|
||||
<button
|
||||
aria-label={translate(
|
||||
{
|
||||
id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
|
||||
message: "Toggle the collapsible sidebar category '{label}'",
|
||||
description:
|
||||
'The ARIA label to toggle the collapsible sidebar category',
|
||||
},
|
||||
{label: categoryLabel},
|
||||
)}
|
||||
type="button"
|
||||
className="clean-btn menu__caret"
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default function DocSidebarItemCategory({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {items, label, collapsible, className, href, customProps} = item;
|
||||
const {
|
||||
docs: {
|
||||
sidebar: {autoCollapseCategories},
|
||||
},
|
||||
} = useThemeConfig();
|
||||
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isCurrentPage = isSamePath(href, activePath);
|
||||
const {collapsed, setCollapsed} = useCollapsible({
|
||||
// Active categories are always initialized as expanded. The default
|
||||
// (`item.collapsed`) is only used for non-active categories.
|
||||
initialState: () => {
|
||||
if (!collapsible) {
|
||||
return false;
|
||||
}
|
||||
return isActive ? false : item.collapsed;
|
||||
},
|
||||
});
|
||||
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
|
||||
// Use this instead of `setCollapsed`, because it is also reactive
|
||||
const updateCollapsed = (toCollapsed = !collapsed) => {
|
||||
setExpandedItem(toCollapsed ? null : index);
|
||||
setCollapsed(toCollapsed);
|
||||
};
|
||||
useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
|
||||
useEffect(() => {
|
||||
if (
|
||||
collapsible &&
|
||||
expandedItem != null &&
|
||||
expandedItem !== index &&
|
||||
autoCollapseCategories
|
||||
) {
|
||||
setCollapsed(true);
|
||||
}
|
||||
}, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
'menu__list-item',
|
||||
{
|
||||
'menu__list-item--collapsed': collapsed,
|
||||
},
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}>
|
||||
<div
|
||||
className={clsx('menu__list-item-collapsible', {
|
||||
'menu__list-item-collapsible--active': isCurrentPage,
|
||||
})}>
|
||||
<Link
|
||||
className={clsx('menu__link', {
|
||||
'menu__link--sublist': collapsible,
|
||||
'menu__link--sublist-caret': !href && collapsible,
|
||||
'menu__link--active': isActive,
|
||||
})}
|
||||
onClick={
|
||||
collapsible
|
||||
? (e) => {
|
||||
onItemClick?.(item);
|
||||
if (href) {
|
||||
updateCollapsed(false);
|
||||
} else {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}
|
||||
}
|
||||
: () => {
|
||||
onItemClick?.(item);
|
||||
}
|
||||
}
|
||||
aria-current={isCurrentPage ? 'page' : undefined}
|
||||
aria-expanded={collapsible ? !collapsed : undefined}
|
||||
href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
|
||||
{...props}>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
{label}
|
||||
</Link>
|
||||
{href && collapsible && (
|
||||
<CollapseButton
|
||||
categoryLabel={label}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
updateCollapsed();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
||||
<DocSidebarItems
|
||||
items={items}
|
||||
tabIndex={collapsed ? -1 : 0}
|
||||
onItemClick={onItemClick}
|
||||
activePath={activePath}
|
||||
level={level + 1}
|
||||
/>
|
||||
</Collapsible>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
43
www/docs/src/theme/DocSidebarItem/Html/index.js
Normal file
43
www/docs/src/theme/DocSidebarItem/Html/index.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
|
||||
export default function DocSidebarItemHtml({item, level, index}) {
|
||||
const {value, defaultStyle, className, customProps} = item;
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
defaultStyle && [styles.menuHtmlItem, 'menu__list-item'],
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}
|
||||
|
||||
key={index}
|
||||
>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
<span
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{__html: value}}
|
||||
>
|
||||
|
||||
</span>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
6
www/docs/src/theme/DocSidebarItem/Html/styles.module.css
Normal file
6
www/docs/src/theme/DocSidebarItem/Html/styles.module.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@media (min-width: 997px) {
|
||||
.menuHtmlItem {
|
||||
padding: var(--ifm-menu-link-padding-vertical)
|
||||
var(--ifm-menu-link-padding-horizontal);
|
||||
}
|
||||
}
|
||||
16
www/docs/src/theme/DocSidebarItem/Icon/index.js
Normal file
16
www/docs/src/theme/DocSidebarItem/Icon/index.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from "react"
|
||||
import BorderedIcon from "../../../components/BorderedIcon"
|
||||
import icons from '../../Icon'
|
||||
|
||||
export default function DocSidebarItemIcon ({ icon, is_title }) {
|
||||
const IconComponent = icons[icon]
|
||||
|
||||
return (
|
||||
<>
|
||||
{is_title && (
|
||||
<BorderedIcon icon={null} IconComponent={IconComponent} wrapperClassName={'sidebar-title-icon-wrapper'} iconClassName={'sidebar-item-icon'} />
|
||||
)}
|
||||
{!is_title && <IconComponent className='sidebar-item-icon' />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
66
www/docs/src/theme/DocSidebarItem/Link/index.js
Normal file
66
www/docs/src/theme/DocSidebarItem/Link/index.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import IconExternalLink from '@theme/Icon/ExternalLink';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItemIcon from '../Icon';
|
||||
import Badge from '../../../components/Badge';
|
||||
|
||||
export default function DocSidebarItemLink({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
index,
|
||||
...props
|
||||
}) {
|
||||
const {href, label, className, autoAddBaseUrl, customProps} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const isInternalLink = isInternalUrl(href);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
'menu__list-item',
|
||||
className,
|
||||
customProps?.sidebar_is_title && 'sidebar-title',
|
||||
customProps?.sidebar_is_group_headline && 'sidebar-group-headline',
|
||||
customProps?.sidebar_is_group_divider && 'sidebar-group-divider',
|
||||
customProps?.sidebar_is_divider_line && 'sidebar-divider-line',
|
||||
customProps?.sidebar_is_back_link && 'sidebar-back-link',
|
||||
customProps?.sidebar_is_soon && 'sidebar-soon-link sidebar-badge-wrapper',
|
||||
)}
|
||||
key={label}>
|
||||
<Link
|
||||
className={clsx(
|
||||
'menu__link',
|
||||
!isInternalLink && styles.menuExternalLink,
|
||||
{
|
||||
'menu__link--active': isActive,
|
||||
},
|
||||
)}
|
||||
autoAddBaseUrl={autoAddBaseUrl}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
to={href}
|
||||
{...(isInternalLink && {
|
||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
||||
})}
|
||||
{...props}>
|
||||
{customProps?.sidebar_icon && (
|
||||
<DocSidebarItemIcon icon={customProps.sidebar_icon} is_title={customProps.sidebar_is_title} />
|
||||
)}
|
||||
{label}
|
||||
{!isInternalLink && <IconExternalLink />}
|
||||
</Link>
|
||||
{customProps?.sidebar_is_soon && (
|
||||
<Badge variant='purple' className={`sidebar-soon-badge`}>
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
3
www/docs/src/theme/DocSidebarItem/Link/styles.module.css
Normal file
3
www/docs/src/theme/DocSidebarItem/Link/styles.module.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.menuExternalLink {
|
||||
align-items: center;
|
||||
}
|
||||
18
www/docs/src/theme/EditThisPage/index.js
Normal file
18
www/docs/src/theme/EditThisPage/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
export default function EditThisPage({editUrl}) {
|
||||
return (
|
||||
<a
|
||||
href={editUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className={ThemeClassNames.common.editThisPage}>
|
||||
<Translate
|
||||
id="theme.common.editThisPage"
|
||||
description="The link label to edit the current page">
|
||||
Edit this page
|
||||
</Translate>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -13,15 +13,15 @@ export default function FooterLayout({style, links, logo, copyright}) {
|
||||
})}>
|
||||
<div className="container container-fluid footer-container">
|
||||
{(logo || copyright || socialLinks) && (
|
||||
<div className="text--center col col--6 social-logo-container">
|
||||
<div className="col col--6 social-logo-container">
|
||||
<div className='logo-container'>
|
||||
{logo && <div className="margin-bottom--sm">{logo}</div>}
|
||||
{copyright}
|
||||
</div>
|
||||
{socialLinks && <SocialLinks links={socialLinks} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="col col--6">
|
||||
<div className="col col--6 row row--justify-end">
|
||||
{socialLinks && <SocialLinks links={socialLinks} />}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,22 @@
|
||||
import React from 'react';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import IconTwitter from '../../Icon/Twitter';
|
||||
import IconGitHub from '../../Icon/GitHub';
|
||||
import IconDiscord from '../../Icon/Discord';
|
||||
import IconLinkedIn from '../../Icon/LinkedIn';
|
||||
|
||||
export default function SocialLinks ({ links = [] }) {
|
||||
const socialIcons = {
|
||||
twitter: {
|
||||
light: useBaseUrl('/img/twitter.png'),
|
||||
dark: useBaseUrl('/img/twitter-dark.png')
|
||||
},
|
||||
github: {
|
||||
light: useBaseUrl('/img/github.png'),
|
||||
dark: useBaseUrl('/img/github-dark.png')
|
||||
},
|
||||
discord: {
|
||||
light: useBaseUrl('/img/discord.png'),
|
||||
dark: useBaseUrl('/img/discord-dark.png')
|
||||
}
|
||||
twitter: <IconTwitter />,
|
||||
github: <IconGitHub />,
|
||||
discord: <IconDiscord />,
|
||||
linkedin: <IconLinkedIn />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='social-links'>
|
||||
{links.map((link) => (
|
||||
<a className='social-link' href={link.href} key={link.type}>
|
||||
<ThemedImage sources={socialIcons[link.type]} alt={link.type} className={`social-icon ${link.type}-icon`} />
|
||||
{socialIcons[link.type]}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
12
www/docs/src/theme/Icon/AcademicCapSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/AcademicCapSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconAcademicCapSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M9.67899 1.93018C9.77863 1.88025 9.88855 1.85425 10 1.85425C10.1115 1.85425 10.2214 1.88025 10.321 1.93018C13.1299 3.33766 15.7595 5.07749 18.1534 7.11227C18.2506 7.19485 18.324 7.30188 18.3661 7.42232C18.4081 7.54275 18.4172 7.67222 18.3925 7.79736C18.3677 7.9225 18.31 8.03876 18.2254 8.13415C18.1407 8.22954 18.0321 8.30059 17.9107 8.33996C15.249 9.20318 12.7213 10.4349 10.4013 11.9991C10.2828 12.0792 10.143 12.122 10 12.122C9.85698 12.122 9.71723 12.0792 9.59873 11.9991C8.95249 11.5637 8.28958 11.1535 7.6115 10.7695V9.64504C7.6115 9.41192 7.72233 9.20269 7.90003 9.07944C8.91637 8.37493 9.97048 7.72651 11.0576 7.13711C11.222 7.04516 11.3435 6.89222 11.3959 6.71137C11.4484 6.53052 11.4275 6.3363 11.3379 6.1707C11.2482 6.00511 11.097 5.88145 10.9169 5.82648C10.7368 5.77151 10.5423 5.78963 10.3755 5.87694C9.24192 6.49154 8.14284 7.1677 7.08316 7.90239C6.80297 8.09811 6.57432 8.35876 6.41677 8.66206C6.25921 8.96536 6.17742 9.3023 6.1784 9.64409V10.0071C4.85835 9.35105 3.49158 8.79348 2.08928 8.33901C1.96795 8.29963 1.85934 8.22858 1.77465 8.13319C1.68996 8.03781 1.63227 7.92154 1.60753 7.7964C1.5828 7.67127 1.59192 7.5418 1.63394 7.42136C1.67597 7.30093 1.74939 7.19389 1.84661 7.11132C4.24046 5.07653 6.8701 3.3367 9.67899 1.92922V1.93018ZM6.1784 11.6179C5.41374 11.2138 4.6311 10.8446 3.83289 10.5116C3.67079 11.4982 3.5465 12.4906 3.46028 13.4867C3.4476 13.6312 3.47907 13.7762 3.55055 13.9024C3.62203 14.0287 3.73014 14.1302 3.8606 14.1937C4.36505 14.4383 4.85994 14.7001 5.34529 14.9771C5.14465 15.2867 4.91058 15.579 4.63925 15.8504C4.56885 15.916 4.51238 15.9951 4.47322 16.083C4.43405 16.1709 4.41299 16.2658 4.4113 16.362C4.4096 16.4582 4.4273 16.5537 4.46334 16.643C4.49937 16.7322 4.55302 16.8132 4.62106 16.8813C4.6891 16.9493 4.77015 17.003 4.85937 17.039C4.9486 17.075 5.04417 17.0927 5.14038 17.091C5.23659 17.0893 5.33147 17.0683 5.41937 17.0291C5.50727 16.99 5.58637 16.9335 5.65197 16.8631C6.00547 16.5106 6.3112 16.1274 6.56916 15.7233C7.60815 16.398 8.59644 17.1478 9.52612 17.9666C9.65701 18.082 9.82551 18.1457 10 18.1457C10.1745 18.1457 10.343 18.082 10.4739 17.9666C12.1842 16.4598 14.0899 15.1904 16.1394 14.1928C16.2699 14.1295 16.3781 14.0281 16.4497 13.9021C16.5214 13.776 16.5531 13.6312 16.5407 13.4867C16.4544 12.4906 16.3301 11.4982 16.1681 10.5116C14.4282 11.2377 12.7644 12.1341 11.2009 13.1877C10.8461 13.4267 10.4279 13.5544 10 13.5544C9.57211 13.5544 9.15395 13.4267 8.79906 13.1877C8.40735 12.9249 8.0099 12.6708 7.60481 12.4262C7.55492 13.5968 7.19773 14.7346 6.56916 15.7233C6.16831 15.4634 5.76019 15.2139 5.34529 14.9771C5.89043 14.1295 6.17969 13.1426 6.1784 12.1348V11.6189V11.6179Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/Adjustments/index.tsx
Normal file
10
www/docs/src/theme/Icon/Adjustments/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconAdjustments (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M8.75 5H16.875M8.75 5C8.75 5.33152 8.6183 5.64946 8.38388 5.88388C8.14946 6.1183 7.83152 6.25 7.5 6.25C7.16848 6.25 6.85054 6.1183 6.61612 5.88388C6.3817 5.64946 6.25 5.33152 6.25 5M8.75 5C8.75 4.66848 8.6183 4.35054 8.38388 4.11612C8.14946 3.8817 7.83152 3.75 7.5 3.75C7.16848 3.75 6.85054 3.8817 6.61612 4.11612C6.3817 4.35054 6.25 4.66848 6.25 5M3.125 5H6.25M8.75 15H16.875M8.75 15C8.75 15.3315 8.6183 15.6495 8.38388 15.8839C8.14946 16.1183 7.83152 16.25 7.5 16.25C7.16848 16.25 6.85054 16.1183 6.61612 15.8839C6.3817 15.6495 6.25 15.3315 6.25 15M8.75 15C8.75 14.6685 8.6183 14.3505 8.38388 14.1161C8.14946 13.8817 7.83152 13.75 7.5 13.75C7.16848 13.75 6.85054 13.8817 6.61612 14.1161C6.3817 14.3505 6.25 14.6685 6.25 15M3.125 15H6.25M13.75 10H16.875M13.75 10C13.75 10.3315 13.6183 10.6495 13.3839 10.8839C13.1495 11.1183 12.8315 11.25 12.5 11.25C12.1685 11.25 11.8505 11.1183 11.6161 10.8839C11.3817 10.6495 11.25 10.3315 11.25 10M13.75 10C13.75 9.66848 13.6183 9.35054 13.3839 9.11612C13.1495 8.8817 12.8315 8.75 12.5 8.75C12.1685 8.75 11.8505 8.8817 11.6161 9.11612C11.3817 9.35054 11.25 9.66848 11.25 10M3.125 10H11.25"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
11
www/docs/src/theme/Icon/Alert/index.tsx
Normal file
11
www/docs/src/theme/Icon/Alert/index.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconAlert (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
|
||||
fill="var(--ifm-icon-color)" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/ArrowDownTray/index.tsx
Normal file
10
www/docs/src/theme/Icon/ArrowDownTray/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconArrowDownTray (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M2.5 13.75V15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625V13.75M13.75 10L10 13.75M10 13.75L6.25 10M10 13.75V2.5"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/BackArrow/index.tsx
Normal file
10
www/docs/src/theme/Icon/BackArrow/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBackArow (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M7.66703 12.3331L3.00098 7.66703M3.00098 7.66703L7.66703 3.00098M3.00098 7.66703H12.3331C13.5706 7.66703 14.7574 8.15863 15.6325 9.03368C16.5075 9.90874 16.9991 11.0956 16.9991 12.3331C16.9991 13.5706 16.5075 14.7574 15.6325 15.6325C14.7574 16.5075 13.5706 16.9991 12.3331 16.9991H10.0001"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
13
www/docs/src/theme/Icon/Bell/index.tsx
Normal file
13
www/docs/src/theme/Icon/Bell/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBell (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M4.87497 2.91669C4.97929 2.79237 5.03116 2.63234 5.01961 2.47046C5.00806 2.30858 4.93399 2.15754 4.81307 2.04929C4.69216 1.94104 4.53388 1.88407 4.37171 1.89043C4.20954 1.89678 4.05621 1.96597 3.94414 2.08336C2.92036 3.22523 2.24183 4.63431 1.98747 6.14669C1.96394 6.3084 2.00469 6.4729 2.10098 6.60494C2.19726 6.73697 2.34144 6.82604 2.5026 6.85307C2.66377 6.88009 2.82911 6.84292 2.9632 6.74951C3.09729 6.65611 3.18946 6.5139 3.21997 6.35335C3.43508 5.0742 4.00901 3.88242 4.87497 2.91669ZM16.0558 2.08336C16.0012 2.02163 15.935 1.97131 15.8609 1.93527C15.7868 1.89924 15.7064 1.87821 15.6241 1.87339C15.5419 1.86856 15.4595 1.88005 15.3817 1.90718C15.3039 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0595 2.15291 15.0239 2.22721C14.9883 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.971 2.62894 14.9986 2.70657C15.0262 2.7842 15.0689 2.85561 15.1241 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8986 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3361 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9534 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7584 4.63414 17.0801 3.22506 16.0558 2.08336Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M9.99985 1.875C8.50801 1.875 7.07727 2.46763 6.02237 3.52252C4.96748 4.57742 4.37485 6.00816 4.37485 7.5V8.125C4.37741 9.82433 3.74802 11.4639 2.60902 12.725C2.54061 12.8009 2.49186 12.8924 2.46701 12.9915C2.44216 13.0906 2.44198 13.1942 2.46649 13.2934C2.491 13.3926 2.53944 13.4842 2.60758 13.5603C2.67572 13.6365 2.76148 13.6947 2.85735 13.73C4.14402 14.205 5.49068 14.555 6.88318 14.7658C6.85183 15.1943 6.90915 15.6246 7.05157 16.0299C7.19399 16.4352 7.41845 16.8068 7.71093 17.1214C8.0034 17.4361 8.35762 17.6871 8.75144 17.8587C9.14527 18.0303 9.57025 18.1189 9.99985 18.1189C10.4294 18.1189 10.8544 18.0303 11.2483 17.8587C11.6421 17.6871 11.9963 17.4361 12.2888 17.1214C12.5812 16.8068 12.8057 16.4352 12.9481 16.0299C13.0905 15.6246 13.1479 15.1943 13.1165 14.7658C14.4899 14.5576 15.8385 14.2103 17.1415 13.7292C17.2372 13.6938 17.3229 13.6356 17.3909 13.5595C17.4589 13.4835 17.5073 13.3919 17.5318 13.2929C17.5563 13.1938 17.5561 13.0903 17.5314 12.9913C17.5067 12.8923 17.4581 12.8009 17.3898 12.725C16.2511 11.4638 15.6221 9.82422 15.6248 8.125V7.5C15.6248 6.00816 15.0322 4.57742 13.9773 3.52252C12.9224 2.46763 11.4917 1.875 9.99985 1.875ZM8.12485 15C8.12485 14.9717 8.12485 14.9442 8.12652 14.9167C9.37288 15.029 10.6268 15.029 11.8732 14.9167L11.8748 15C11.8748 15.4973 11.6773 15.9742 11.3257 16.3258C10.974 16.6775 10.4971 16.875 9.99985 16.875C9.50257 16.875 9.02566 16.6775 8.67402 16.3258C8.32239 15.9742 8.12485 15.4973 8.12485 15Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
14
www/docs/src/theme/Icon/BellAlertSolid/index.tsx
Normal file
14
www/docs/src/theme/Icon/BellAlertSolid/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBellAlertSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M4.875 2.91669C4.97932 2.79237 5.03119 2.63234 5.01964 2.47046C5.00809 2.30858 4.93402 2.15754 4.81311 2.04929C4.69219 1.94104 4.53391 1.88407 4.37174 1.89043C4.20957 1.89678 4.05624 1.96597 3.94417 2.08336C2.92039 3.22523 2.24186 4.63431 1.9875 6.14669C1.96397 6.3084 2.00472 6.4729 2.10101 6.60494C2.19729 6.73697 2.34147 6.82604 2.50263 6.85307C2.6638 6.88009 2.82914 6.84292 2.96323 6.74951C3.09732 6.65611 3.18949 6.5139 3.22 6.35335C3.43511 5.0742 4.00904 3.88242 4.875 2.91669ZM16.0558 2.08336C16.0013 2.02163 15.935 1.97131 15.861 1.93527C15.7869 1.89924 15.7064 1.87821 15.6242 1.87339C15.5419 1.86856 15.4595 1.88005 15.3818 1.90718C15.304 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0596 2.15291 15.024 2.22721C14.9884 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.9711 2.62894 14.9987 2.70657C15.0262 2.7842 15.0689 2.85561 15.1242 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8987 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3362 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9535 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7585 4.63414 17.0802 3.22506 16.0558 2.08336Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M10 1.875C8.50816 1.875 7.07742 2.46763 6.02253 3.52252C4.96763 4.57742 4.375 6.00816 4.375 7.5V8.125C4.37757 9.82433 3.74817 11.4639 2.60917 12.725C2.54077 12.8009 2.49201 12.8924 2.46716 12.9915C2.44232 13.0906 2.44214 13.1942 2.46664 13.2934C2.49115 13.3926 2.53959 13.4842 2.60773 13.5603C2.67587 13.6365 2.76163 13.6947 2.8575 13.73C4.14417 14.205 5.49084 14.555 6.88334 14.7658C6.85198 15.1943 6.90931 15.6246 7.05173 16.0299C7.19415 16.4352 7.4186 16.8068 7.71108 17.1214C8.00356 17.4361 8.35777 17.6871 8.7516 17.8587C9.14542 18.0303 9.57041 18.1189 10 18.1189C10.4296 18.1189 10.8546 18.0303 11.2484 17.8587C11.6422 17.6871 11.9964 17.4361 12.2889 17.1214C12.5814 16.8068 12.8059 16.4352 12.9483 16.0299C13.0907 15.6246 13.148 15.1943 13.1167 14.7658C14.49 14.5576 15.8386 14.2103 17.1417 13.7292C17.2374 13.6938 17.323 13.6356 17.391 13.5595C17.4591 13.4835 17.5074 13.3919 17.5319 13.2929C17.5564 13.1938 17.5563 13.0903 17.5316 12.9913C17.5068 12.8923 17.4582 12.8009 17.39 12.725C16.2513 11.4638 15.6222 9.82422 15.625 8.125V7.5C15.625 6.00816 15.0324 4.57742 13.9775 3.52252C12.9226 2.46763 11.4918 1.875 10 1.875ZM8.125 15C8.125 14.9717 8.125 14.9442 8.12667 14.9167C9.37303 15.029 10.627 15.029 11.8733 14.9167L11.875 15C11.875 15.4973 11.6775 15.9742 11.3258 16.3258C10.9742 16.6775 10.4973 16.875 10 16.875C9.50272 16.875 9.02581 16.6775 8.67418 16.3258C8.32255 15.9742 8.125 15.4973 8.125 15Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/Bolt/index.tsx
Normal file
10
www/docs/src/theme/Icon/Bolt/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBolt (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M3.125 11.25L11.875 1.875L10 8.75H16.875L8.125 18.125L10 11.25H3.125Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/BoltSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/BoltSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBoltSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M12.0339 1.57679C12.1478 1.64276 12.2372 1.74652 12.2878 1.87153C12.3384 1.99653 12.3473 2.13558 12.3131 2.26648L10.7638 8.17823H16.4167C16.5304 8.17824 16.6416 8.21282 16.7366 8.27772C16.8317 8.34262 16.9065 8.43501 16.9517 8.54354C16.997 8.65206 17.0108 8.772 16.9915 8.88859C16.9722 9.00518 16.9205 9.11336 16.8429 9.19982L8.67622 18.3067C8.58727 18.4061 8.46885 18.4715 8.33992 18.4926C8.21099 18.5137 8.07899 18.4892 7.96502 18.423C7.85106 18.3568 7.76172 18.2527 7.7113 18.1274C7.66087 18.0022 7.65227 17.8629 7.68688 17.7319L9.23622 11.821H3.5833C3.46962 11.821 3.35842 11.7864 3.26336 11.7215C3.16831 11.6566 3.09355 11.5642 3.04827 11.4557C3.00299 11.3471 2.98916 11.2272 3.0085 11.1106C3.02783 10.994 3.07947 10.8858 3.15708 10.7994L11.3238 1.69255C11.4127 1.5935 11.531 1.52829 11.6597 1.50731C11.7884 1.48633 11.9201 1.51079 12.0339 1.57679Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/BookOpen/index.tsx
Normal file
10
www/docs/src/theme/Icon/BookOpen/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBookOpen (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M10 5.03501C8.62634 3.80281 6.84533 3.12246 5 3.12501C4.12333 3.12501 3.28167 3.27501 2.5 3.55167V15.4267C3.30302 15.1434 4.14847 14.9991 5 15C6.92083 15 8.67333 15.7225 10 16.91M10 5.03501C11.3736 3.80274 13.1547 3.12238 15 3.12501C15.8767 3.12501 16.7183 3.27501 17.5 3.55167V15.4267C16.697 15.1434 15.8515 14.9991 15 15C13.1547 14.9975 11.3737 15.6778 10 16.91M10 5.03501V16.91"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/Bug/index.tsx
Normal file
10
www/docs/src/theme/Icon/Bug/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBug (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M10.0003 10.6153C10.9415 10.6153 11.8679 10.6809 12.7739 10.8097C13.6241 10.9294 14.3037 11.6016 14.3037 12.46C14.3037 15.5164 12.3771 17.994 9.99951 17.994C7.62194 17.994 5.69611 15.5164 5.69611 12.46C5.69611 11.6024 6.37659 10.9294 7.22595 10.8097C8.14506 10.6801 9.07213 10.6152 10.0003 10.6153ZM10.0003 10.6153C12.364 10.6153 14.63 11.0318 16.7288 11.7959C16.6299 13.4859 16.3124 15.1559 15.7844 16.7642M10.0003 10.6153C7.6367 10.6153 5.37063 11.0318 3.271 11.7959C3.37348 13.5209 3.69732 15.1868 4.21628 16.7642M10.0003 10.6153C10.2498 10.6154 10.4966 10.5648 10.726 10.4668C10.9554 10.3687 11.1624 10.2251 11.3347 10.0447C11.507 9.86427 11.6409 9.6508 11.7283 9.41717C11.8157 9.18354 11.8549 8.93461 11.8433 8.68542M10.0003 10.6153C9.75087 10.6154 9.50401 10.5648 9.27465 10.4668C9.04529 10.3687 8.83821 10.2251 8.66593 10.0447C8.49365 9.86427 8.35975 9.6508 8.27233 9.41717C8.1849 9.18354 8.14577 8.93461 8.1573 8.68542M11.8433 8.68542C11.8214 8.2114 11.6176 7.76406 11.2744 7.43639C10.9312 7.10873 10.4749 6.92594 10.0003 6.92602M11.8433 8.68542C13.2994 8.55055 14.7365 8.25301 16.1262 7.79834C16.0812 6.87437 15.9729 5.9668 15.8049 5.08136M8.1573 8.68542C8.17924 8.2114 8.383 7.76406 8.72624 7.43639C9.06948 7.10873 9.52579 6.92594 10.0003 6.92602M8.1573 8.68542C6.67583 8.54769 5.24274 8.24598 3.87523 7.79834C3.91931 6.88633 4.02669 5.97849 4.19661 5.08136M10.0003 6.92602C10.8161 6.92602 11.6163 6.86044 12.3959 6.73254C12.7263 6.67843 13.0026 6.43903 13.0477 6.10781C13.1317 5.4739 13.0174 4.82953 12.7206 4.26315M10.0003 6.92602C9.18457 6.92602 8.38522 6.86044 7.60472 6.73254C7.27514 6.67843 6.99803 6.43903 6.95294 6.10781C6.86626 5.47296 6.98096 4.82691 7.28088 4.26069M7.28088 4.26069C6.93167 4.02814 6.61347 3.75291 6.33396 3.44002C6.39135 2.92352 6.55532 2.43816 6.80455 2.00774M7.28088 4.26069C7.54188 3.76545 7.93313 3.35169 8.41244 3.06249C8.89176 2.77329 9.44093 2.62045 10.0007 2.62045C10.5605 2.62045 11.1097 2.77329 11.589 3.06249C12.0683 3.35169 12.4596 3.76627 12.7206 4.26151C13.0707 4.02949 13.3888 3.7532 13.6675 3.44248C13.6119 2.93613 13.4513 2.44694 13.1961 2.0061"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/BugAntSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/BugAntSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBugAntSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M6.7881 1.72723C6.93928 1.83478 7.0416 1.99794 7.07259 2.18088C7.10357 2.36381 7.06069 2.55156 6.95335 2.7029C6.77659 2.95179 6.63109 3.22146 6.52014 3.50585C6.69286 3.66457 6.87679 3.81302 7.071 3.94747C7.42032 3.50522 7.86536 3.14792 8.37266 2.90243C8.87996 2.65695 9.43631 2.52967 9.99988 2.53018C11.1875 2.53018 12.2453 3.08477 12.9288 3.94747C13.123 3.81302 13.3069 3.66551 13.4796 3.50585C13.3687 3.22146 13.2232 2.95179 13.0464 2.7029C12.9446 2.55142 12.9059 2.36617 12.9387 2.1866C12.9714 2.00703 13.073 1.84735 13.2217 1.74157C13.3705 1.63579 13.5547 1.59227 13.735 1.62028C13.9154 1.6483 14.0777 1.74564 14.1873 1.89155C14.5319 2.37612 14.7942 2.92325 14.9548 3.51239C14.986 3.62715 14.9875 3.74798 14.9591 3.86347C14.9306 3.97896 14.8733 4.08531 14.7924 4.17248C14.4311 4.56203 14.0238 4.90627 13.5795 5.19764C13.6825 5.54399 13.7348 5.90346 13.7345 6.26481C13.7345 6.75032 13.4535 7.16393 13.0595 7.37307C12.7135 7.55658 12.3516 7.70846 11.9783 7.82682C12.0997 8.02102 12.194 8.2339 12.2547 8.46078C13.5739 8.29832 14.8493 7.99395 16.0649 7.56447C16.0796 6.84172 16.0515 6.11874 15.9809 5.39931C15.972 5.30778 15.9811 5.21539 16.0079 5.1274C16.0346 5.03942 16.0785 4.95756 16.1368 4.88651C16.1952 4.81546 16.2671 4.75661 16.3482 4.71331C16.4293 4.67002 16.5182 4.64313 16.6097 4.63418C16.7012 4.62523 16.7936 4.63439 16.8816 4.66115C16.9696 4.68791 17.0515 4.73173 17.1225 4.79012C17.1936 4.84851 17.2524 4.92033 17.2957 5.00146C17.339 5.0826 17.3659 5.17147 17.3749 5.263C17.467 6.20239 17.492 7.14717 17.4495 8.09012C17.4434 8.22648 17.3975 8.35808 17.3176 8.46872C17.2376 8.57937 17.1271 8.66423 16.9995 8.71287C15.4519 9.30451 13.8351 9.69638 12.1884 9.87901C12.1592 9.95761 12.1259 10.0346 12.0885 10.1096C13.7673 10.2866 15.4159 10.6811 16.993 11.2832C17.1311 11.3363 17.2489 11.4317 17.3294 11.5558C17.4099 11.68 17.449 11.8264 17.4411 11.9741C17.3575 13.5925 17.0731 15.1942 16.5943 16.7423C16.5671 16.8302 16.5228 16.9118 16.4641 16.9826C16.4053 17.0533 16.3332 17.1118 16.2518 17.1547C16.1705 17.1975 16.0814 17.224 15.9899 17.2324C15.8983 17.2409 15.8059 17.2312 15.7181 17.204C15.6302 17.1768 15.5486 17.1325 15.4779 17.0738C15.4071 17.015 15.3486 16.9429 15.3058 16.8615C15.2629 16.7802 15.2365 16.6911 15.228 16.5996C15.2195 16.508 15.2292 16.4156 15.2564 16.3278C15.6439 15.0767 15.9006 13.7668 16.0089 12.4158C15.5468 12.2533 15.0753 12.1095 14.5972 11.9853C14.6439 12.2505 14.6682 12.5222 14.6682 12.8004C14.6682 14.4941 14.1855 15.8927 13.3368 16.8805C12.9258 17.3628 12.4139 17.7491 11.8374 18.0121C11.2608 18.275 10.6336 18.4083 9.99988 18.4024C9.36622 18.4082 8.739 18.2749 8.16244 18.012C7.58589 17.749 7.07404 17.3628 6.66299 16.8805C5.81336 15.8918 5.33159 14.4931 5.33159 12.8004C5.33159 12.5222 5.35586 12.2496 5.40255 11.9853C4.92358 12.1095 4.45302 12.2533 3.99086 12.4148C4.09916 13.7668 4.35498 15.0757 4.74338 16.3278C4.79836 16.5052 4.7806 16.6972 4.69401 16.8615C4.60743 17.0259 4.45911 17.1491 4.28169 17.204C4.10427 17.259 3.91228 17.2412 3.74795 17.1547C3.58362 17.0681 3.46042 16.9198 3.40545 16.7423C2.92634 15.1942 2.64157 13.5925 2.55769 11.9741C2.54996 11.8262 2.58936 11.6796 2.67023 11.5554C2.75109 11.4313 2.86925 11.336 3.00771 11.2832C4.58447 10.6812 6.23281 10.2867 7.91129 10.1096C7.87384 10.0346 7.84049 9.95763 7.81139 9.87901C6.16462 9.69638 4.54787 9.30451 3.00024 8.71287C2.8727 8.66423 2.76215 8.57937 2.68219 8.46872C2.60224 8.35808 2.55637 8.22648 2.55022 8.09012C2.50813 7.14716 2.53309 6.20241 2.62491 5.263C2.63386 5.17147 2.66075 5.0826 2.70405 5.00146C2.74734 4.92033 2.8062 4.84851 2.87725 4.79012C2.9483 4.73173 3.03015 4.68791 3.11814 4.66115C3.20612 4.63439 3.29852 4.62523 3.39005 4.63418C3.48157 4.64313 3.57044 4.67002 3.65158 4.71331C3.73271 4.75661 3.80453 4.81546 3.86292 4.88651C3.92131 4.95756 3.96514 5.03942 3.99189 5.1274C4.01865 5.21539 4.02782 5.30778 4.01887 5.39931C3.94839 6.11907 3.92033 6.84235 3.93484 7.5654C5.15046 7.99395 6.42584 8.29832 7.74416 8.46078C7.80579 8.2339 7.89915 8.02102 8.02146 7.82682C7.64813 7.70845 7.28627 7.55658 6.94028 7.37307C6.73772 7.26707 6.56785 7.1079 6.44892 6.91264C6.32999 6.71739 6.2665 6.49343 6.26525 6.26481C6.26501 5.90346 6.31722 5.54399 6.42024 5.19764C5.97564 4.90631 5.56807 4.56207 5.20648 4.17248C5.12573 4.08522 5.06853 3.97883 5.04027 3.86334C5.01202 3.74786 5.01363 3.62708 5.04496 3.51239C5.20336 2.93114 5.46317 2.38243 5.81242 1.89155C5.86576 1.81664 5.93332 1.75296 6.01127 1.70415C6.08921 1.65535 6.17601 1.62238 6.26669 1.60712C6.35738 1.59186 6.45018 1.59461 6.53981 1.61522C6.62943 1.63583 6.71318 1.67389 6.7881 1.72723Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
16
www/docs/src/theme/Icon/BuildingTax/index.tsx
Normal file
16
www/docs/src/theme/Icon/BuildingTax/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBuildingTax (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M17.5 7.5H2.5V5.83333L10 2.5L17.5 5.83333V7.5Z" stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinejoin="round"/>
|
||||
<path d="M8.33333 16.6666H2.5L3.22917 14.1666H8.33333" stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M4.16667 7.5V14.1667M7.50001 14.1667V7.5" stroke="var(--ifm-icon-color)" strokeWidth="1"/>
|
||||
<path d="M17.1354 11.1979L12.0312 16.302" stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12.2917 12.0834C12.6368 12.0834 12.9167 11.8036 12.9167 11.4584C12.9167 11.1132 12.6368 10.8334 12.2917 10.8334C11.9465 10.8334 11.6667 11.1132 11.6667 11.4584C11.6667 11.8036 11.9465 12.0834 12.2917 12.0834Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16.875 16.6666C17.2202 16.6666 17.5 16.3868 17.5 16.0416C17.5 15.6964 17.2202 15.4166 16.875 15.4166C16.5298 15.4166 16.25 15.6964 16.25 16.0416C16.25 16.3868 16.5298 16.6666 16.875 16.6666Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/Calendar/index.tsx
Normal file
10
www/docs/src/theme/Icon/Calendar/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCalendar (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M5.625 2.5V4.375M14.375 2.5V4.375M2.5 15.625V6.25C2.5 5.75272 2.69754 5.27581 3.04917 4.92417C3.40081 4.57254 3.87772 4.375 4.375 4.375H15.625C16.1223 4.375 16.5992 4.57254 16.9508 4.92417C17.3025 5.27581 17.5 5.75272 17.5 6.25V15.625M2.5 15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625M2.5 15.625V9.375C2.5 8.87772 2.69754 8.40081 3.04917 8.04917C3.40081 7.69754 3.87772 7.5 4.375 7.5H15.625C16.1223 7.5 16.5992 7.69754 16.9508 8.04917C17.3025 8.40081 17.5 8.87772 17.5 9.375V15.625"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/CashSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/CashSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCashSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M1 4C1 3.73478 1.10536 3.48043 1.29289 3.29289C1.48043 3.10536 1.73478 3 2 3H18C18.2652 3 18.5196 3.10536 18.7071 3.29289C18.8946 3.48043 19 3.73478 19 4V12C19 12.2652 18.8946 12.5196 18.7071 12.7071C18.5196 12.8946 18.2652 13 18 13H2C1.73478 13 1.48043 12.8946 1.29289 12.7071C1.10536 12.5196 1 12.2652 1 12V4ZM13 8C13 8.79565 12.6839 9.55871 12.1213 10.1213C11.5587 10.6839 10.7956 11 10 11C9.20435 11 8.44129 10.6839 7.87868 10.1213C7.31607 9.55871 7 8.79565 7 8C7 7.20435 7.31607 6.44129 7.87868 5.87868C8.44129 5.31607 9.20435 5 10 5C10.7956 5 11.5587 5.31607 12.1213 5.87868C12.6839 6.44129 13 7.20435 13 8ZM4 9C4.26522 9 4.51957 8.89464 4.70711 8.70711C4.89464 8.51957 5 8.26522 5 8C5 7.73478 4.89464 7.48043 4.70711 7.29289C4.51957 7.10536 4.26522 7 4 7C3.73478 7 3.48043 7.10536 3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8C3 8.26522 3.10536 8.51957 3.29289 8.70711C3.48043 8.89464 3.73478 9 4 9ZM17 8C17 8.26522 16.8946 8.51957 16.7071 8.70711C16.5196 8.89464 16.2652 9 16 9C15.7348 9 15.4804 8.89464 15.2929 8.70711C15.1054 8.51957 15 8.26522 15 8C15 7.73478 15.1054 7.48043 15.2929 7.29289C15.4804 7.10536 15.7348 7 16 7C16.2652 7 16.5196 7.10536 16.7071 7.29289C16.8946 7.48043 17 7.73478 17 8ZM1.75 14.5C1.55109 14.5 1.36032 14.579 1.21967 14.7197C1.07902 14.8603 1 15.0511 1 15.25C1 15.4489 1.07902 15.6397 1.21967 15.7803C1.36032 15.921 1.55109 16 1.75 16C6.167 16 10.443 16.603 14.499 17.73C15.61 18.039 16.75 17.218 16.75 16.034V15.25C16.75 15.0511 16.671 14.8603 16.5303 14.7197C16.3897 14.579 16.1989 14.5 16 14.5C15.8011 14.5 15.6103 14.579 15.4697 14.7197C15.329 14.8603 15.25 15.0511 15.25 15.25V16.034C15.2484 16.0755 15.2373 16.1161 15.2176 16.1526C15.1979 16.1891 15.1701 16.2207 15.1363 16.2448C15.1025 16.269 15.0637 16.285 15.0227 16.2918C14.9817 16.2986 14.9398 16.2959 14.9 16.284C10.6177 15.0963 6.19392 14.4961 1.75 14.5Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
19
www/docs/src/theme/Icon/Channels/index.tsx
Normal file
19
www/docs/src/theme/Icon/Channels/index.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconChannels (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M14.7189 5.875C15.6509 5.875 16.4064 5.11948 16.4064 4.1875C16.4064 3.25552 15.6509 2.5 14.7189 2.5C13.7869 2.5 13.0314 3.25552 13.0314 4.1875C13.0314 5.11948 13.7869 5.875 14.7189 5.875Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14.7189 11.6875C15.6509 11.6875 16.4064 10.932 16.4064 10C16.4064 9.06802 15.6509 8.3125 14.7189 8.3125C13.7869 8.3125 13.0314 9.06802 13.0314 10C13.0314 10.932 13.7869 11.6875 14.7189 11.6875Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M4.5936 11.6875C5.52558 11.6875 6.2811 10.932 6.2811 10C6.2811 9.06802 5.52558 8.3125 4.5936 8.3125C3.66162 8.3125 2.9061 9.06802 2.9061 10C2.9061 10.932 3.66162 11.6875 4.5936 11.6875Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14.7189 17.5C15.6509 17.5 16.4064 16.7445 16.4064 15.8125C16.4064 14.8805 15.6509 14.125 14.7189 14.125C13.7869 14.125 13.0314 14.8805 13.0314 15.8125C13.0314 16.7445 13.7869 17.5 14.7189 17.5Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13.0308 4.1875H11.1558C10.327 4.1875 9.65576 4.85875 9.65576 5.6875V14.3125C9.65576 15.1413 10.327 15.8125 11.1558 15.8125H13.0308"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13.0301 10H6.28012" stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/ChannelsSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/ChannelsSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconChannelsSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M12.3989 3.43751C12.7152 2.45828 13.6343 1.75 14.7188 1.75C16.065 1.75 17.1563 2.84131 17.1563 4.1875C17.1563 5.53369 16.065 6.625 14.7188 6.625C13.6343 6.625 12.7152 5.91673 12.3989 4.93751L11.1557 4.93752C10.7411 4.93752 10.4057 5.27298 10.4057 5.68752V9.24999L12.3989 9.25C12.7152 8.27076 13.6343 7.56248 14.7188 7.56248C16.065 7.56248 17.1563 8.65379 17.1563 9.99998C17.1563 11.3462 16.065 12.4375 14.7188 12.4375C13.6343 12.4375 12.7152 11.7292 12.3989 10.75L10.4057 10.75V14.3125C10.4057 14.727 10.7411 15.0625 11.1557 15.0625L12.3989 15.0625C12.7152 14.0832 13.6343 13.375 14.7188 13.375C16.065 13.375 17.1563 14.4663 17.1563 15.8125C17.1563 17.1587 16.065 18.25 14.7188 18.25C13.6343 18.25 12.7152 17.5417 12.3989 16.5625L11.1557 16.5625C9.91274 16.5625 8.90568 15.5555 8.90568 14.3125V10.75L6.91344 10.75C6.59711 11.7292 5.67802 12.4375 4.59351 12.4375C3.24731 12.4375 2.15601 11.3462 2.15601 9.99998C2.15601 8.65379 3.24731 7.56248 4.59351 7.56248C5.67802 7.56248 6.59711 8.27076 6.91344 9.24998L8.90568 9.24999V5.68752C8.90568 4.44456 9.91272 3.43752 11.1557 3.43752L12.3989 3.43751Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/CheckCircleSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/CheckCircleSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCheckCircleSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.857 8.191C13.9149 8.11129 13.9566 8.02095 13.9796 7.92514C14.0026 7.82933 14.0065 7.72994 13.991 7.63262C13.9756 7.5353 13.9412 7.44198 13.8897 7.35797C13.8382 7.27396 13.7707 7.20091 13.691 7.143C13.6113 7.08509 13.5209 7.04344 13.4251 7.02044C13.3293 6.99744 13.2299 6.99354 13.1326 7.00895C13.0353 7.02437 12.942 7.0588 12.858 7.11028C12.774 7.16176 12.7009 7.22929 12.643 7.309L9.16 12.099L7.28 10.219C7.21078 10.1474 7.128 10.0903 7.03647 10.051C6.94495 10.0118 6.84653 9.99114 6.74694 9.99032C6.64736 9.9895 6.54861 10.0085 6.45646 10.0463C6.3643 10.084 6.28059 10.1398 6.2102 10.2102C6.13982 10.2807 6.08417 10.3644 6.0465 10.4566C6.00883 10.5488 5.9899 10.6476 5.99081 10.7472C5.99173 10.8467 6.01246 10.9451 6.05181 11.0366C6.09116 11.1281 6.14834 11.2108 6.22 11.28L8.72 13.78C8.79663 13.8567 8.88896 13.9158 8.99065 13.9534C9.09233 13.9909 9.20094 14.006 9.30901 13.9975C9.41708 13.9891 9.52203 13.9573 9.61663 13.9044C9.71123 13.8515 9.79324 13.7787 9.857 13.691L13.857 8.191Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CircleStack/index.tsx
Normal file
10
www/docs/src/theme/Icon/CircleStack/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCircleStack (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M16.875 5.3125C16.875 7.21083 13.7967 8.75 10 8.75C6.20333 8.75 3.125 7.21083 3.125 5.3125M16.875 5.3125C16.875 3.41417 13.7967 1.875 10 1.875C6.20333 1.875 3.125 3.41417 3.125 5.3125M16.875 5.3125V14.6875C16.875 16.5858 13.7967 18.125 10 18.125C6.20333 18.125 3.125 16.5858 3.125 14.6875V5.3125M16.875 5.3125V8.4375M3.125 5.3125V8.4375M16.875 8.4375V11.5625C16.875 13.4608 13.7967 15 10 15C6.20333 15 3.125 13.4608 3.125 11.5625V8.4375M16.875 8.4375C16.875 10.3358 13.7967 11.875 10 11.875C6.20333 11.875 3.125 10.3358 3.125 8.4375"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
16
www/docs/src/theme/Icon/CircleStackSolid/index.tsx
Normal file
16
www/docs/src/theme/Icon/CircleStackSolid/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCircleStackSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M17.5 5.3125C17.5 7.55583 14.1417 9.375 10 9.375C5.85833 9.375 2.5 7.55583 2.5 5.3125C2.5 3.06917 5.85833 1.25 10 1.25C14.1417 1.25 17.5 3.06917 17.5 5.3125Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path d="M10 10.625C12.2375 10.625 14.325 10.1367 15.8983 9.28419C16.4774 8.97677 17.0097 8.58843 17.4792 8.13086C17.4925 8.23169 17.5 8.33419 17.5 8.43753C17.5 10.6809 14.1417 12.5 10 12.5C5.85833 12.5 2.5 10.6809 2.5 8.43753C2.5 8.33419 2.5075 8.23169 2.52083 8.13086C2.99035 8.58841 3.52264 8.97675 4.10167 9.28419C5.67417 10.1367 7.7625 10.625 10 10.625Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path d="M10 13.75C12.2375 13.75 14.325 13.2617 15.8983 12.4092C16.4774 12.1018 17.0097 11.7134 17.4792 11.2559C17.4925 11.3567 17.5 11.4592 17.5 11.5625C17.5 13.8059 14.1417 15.625 10 15.625C5.85833 15.625 2.5 13.8059 2.5 11.5625C2.5 11.4592 2.5075 11.3567 2.52083 11.2559C2.99034 11.7134 3.52263 12.1018 4.10167 12.4092C5.67417 13.2617 7.7625 13.75 10 13.75Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path d="M10 16.875C12.2375 16.875 14.325 16.3867 15.8983 15.5342C16.4774 15.2268 17.0097 14.8384 17.4792 14.3809C17.4925 14.4817 17.5 14.5842 17.5 14.6875C17.5 16.9309 14.1417 18.75 10 18.75C5.85833 18.75 2.5 16.9309 2.5 14.6875C2.5 14.5842 2.5075 14.4817 2.52083 14.3809C2.99034 14.8384 3.52263 15.2268 4.10167 15.5342C5.67417 16.3867 7.7625 16.875 10 16.875Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/ClockSolidMini/index.tsx
Normal file
12
www/docs/src/theme/Icon/ClockSolidMini/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconClockSolidMini (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM10 5.75C10.4142 5.75 10.75 6.08579 10.75 6.5V9.63051L13.1914 10.2748C13.5919 10.3805 13.8309 10.7909 13.7252 11.1914C13.6195 11.5919 13.2091 11.8309 12.8086 11.7252L9.80862 10.9334C9.47938 10.8465 9.25 10.5488 9.25 10.2083V6.5C9.25 6.08579 9.58579 5.75 10 5.75Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
14
www/docs/src/theme/Icon/Close/index.tsx
Normal file
14
www/docs/src/theme/Icon/Close/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
export default function IconClose({
|
||||
width = 20,
|
||||
height = 20,
|
||||
strokeWidth = 1.5,
|
||||
className,
|
||||
...restProps
|
||||
}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...restProps}>
|
||||
<path d="M6 14L14 6M6 6L14 14" stroke="var(--ifm-icon-color)" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CloudArrowUp/index.tsx
Normal file
10
www/docs/src/theme/Icon/CloudArrowUp/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCloudArrowUp (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M10.0002 13.7499V8.12494M10.0002 8.12494L12.5002 10.6249M10.0002 8.12494L7.50017 10.6249M5.62517 16.2499C4.73303 16.2509 3.86977 15.9338 3.19042 15.3555C2.51107 14.7772 2.06013 13.9757 1.9186 13.0949C1.77706 12.214 1.95419 11.3116 2.41819 10.5496C2.88218 9.78761 3.60264 9.21601 4.45017 8.93744C4.23242 7.82174 4.45747 6.6651 5.07766 5.71245C5.69785 4.75979 6.66448 4.08593 7.77285 3.83356C8.88122 3.58119 10.0443 3.77013 11.0158 4.36036C11.9873 4.9506 12.6909 5.89579 12.9777 6.99577C13.421 6.85158 13.8958 6.83423 14.3485 6.94568C14.8012 7.05713 15.2137 7.29294 15.5394 7.62647C15.8652 7.96 16.0911 8.37796 16.1918 8.83315C16.2926 9.28835 16.264 9.76263 16.1093 10.2024C16.7915 10.463 17.361 10.9542 17.719 11.5907C18.0769 12.2273 18.2008 12.969 18.069 13.6873C17.9373 14.4056 17.5583 15.0552 16.9977 15.5232C16.4372 15.9913 15.7305 16.2484 15.0002 16.2499H5.62517Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/CogSixTooth/index.tsx
Normal file
12
www/docs/src/theme/Icon/CogSixTooth/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCogSixTooth (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M7.99509 3.28333C8.07009 2.83167 8.46176 2.5 8.92009 2.5H11.0809C11.5393 2.5 11.9309 2.83167 12.0059 3.28333L12.1834 4.35083C12.2359 4.6625 12.4443 4.9225 12.7209 5.07583C12.7826 5.10917 12.8434 5.145 12.9043 5.18167C13.1743 5.345 13.5043 5.39583 13.8001 5.285L14.8143 4.905C15.0221 4.82684 15.2509 4.82498 15.46 4.89976C15.6691 4.97454 15.8448 5.1211 15.9559 5.31333L17.0359 7.18583C17.1468 7.37809 17.1859 7.60344 17.1462 7.8218C17.1065 8.04017 16.9907 8.23737 16.8193 8.37833L15.9834 9.0675C15.7393 9.2675 15.6184 9.57833 15.6243 9.89417C15.6256 9.96499 15.6256 10.0358 15.6243 10.1067C15.6184 10.4217 15.7393 10.7317 15.9826 10.9317L16.8201 11.6217C17.1734 11.9133 17.2651 12.4167 17.0368 12.8133L15.9551 14.6858C15.8441 14.878 15.6686 15.0246 15.4597 15.0996C15.2508 15.1745 15.0221 15.1729 14.8143 15.095L13.8001 14.715C13.5043 14.6042 13.1751 14.655 12.9034 14.8183C12.843 14.8551 12.7819 14.8906 12.7201 14.925C12.4443 15.0775 12.2359 15.3375 12.1834 15.6492L12.0059 16.7158C11.9309 17.1683 11.5393 17.5 11.0809 17.5H8.91926C8.46092 17.5 8.06926 17.1683 7.99426 16.7167L7.81676 15.6492C7.76509 15.3375 7.55676 15.0775 7.28009 14.9242C7.2183 14.8901 7.15717 14.8548 7.09676 14.8183C6.82592 14.655 6.49676 14.6042 6.20009 14.715L5.18592 15.095C4.9782 15.1729 4.74956 15.1747 4.54067 15.0999C4.33178 15.0251 4.15618 14.8787 4.04509 14.6867L2.96426 12.8142C2.85338 12.6219 2.8143 12.3966 2.85397 12.1782C2.89364 11.9598 3.0095 11.7626 3.18092 11.6217L4.01759 10.9325C4.26092 10.7325 4.38176 10.4217 4.37592 10.1058C4.37462 10.035 4.37462 9.96416 4.37592 9.89333C4.38176 9.57833 4.26092 9.26833 4.01759 9.06833L3.18092 8.37833C3.00971 8.23741 2.89399 8.04036 2.85432 7.82219C2.81465 7.60401 2.8536 7.37884 2.96426 7.18667L4.04509 5.31417C4.15608 5.12178 4.33177 4.97505 4.54085 4.90011C4.74993 4.82518 4.97883 4.82691 5.18676 4.905L6.20009 5.285C6.49676 5.39583 6.82592 5.345 7.09676 5.18167C7.15676 5.145 7.21842 5.10917 7.28009 5.075C7.55676 4.9225 7.76509 4.6625 7.81676 4.35083L7.99509 3.28333V3.28333Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 10 12.5C9.33696 12.5 8.70107 12.2366 8.23223 11.7678C7.76339 11.2989 7.5 10.663 7.5 10C7.5 9.33696 7.76339 8.70107 8.23223 8.23223C8.70107 7.76339 9.33696 7.5 10 7.5C10.663 7.5 11.2989 7.76339 11.7678 8.23223C12.2366 8.70107 12.5 9.33696 12.5 10V10Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
12
www/docs/src/theme/Icon/CogSixToothSolid/index.tsx
Normal file
12
www/docs/src/theme/Icon/CogSixToothSolid/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCogSixToothSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M9.23166 1.875C8.46749 1.875 7.81582 2.4275 7.68999 3.18083L7.54166 4.07417C7.52499 4.17417 7.44582 4.29083 7.29416 4.36417C7.00862 4.50143 6.73393 4.66022 6.47249 4.83917C6.33416 4.935 6.19416 4.94417 6.09749 4.90833L5.24999 4.59C4.90353 4.4602 4.52224 4.45755 4.174 4.58253C3.82577 4.70751 3.53318 4.95201 3.34832 5.2725L2.57999 6.60333C2.39507 6.92363 2.32975 7.29915 2.39567 7.66307C2.46159 8.027 2.65447 8.35575 2.93999 8.59083L3.63999 9.1675C3.71916 9.2325 3.78166 9.35833 3.76832 9.52583C3.74458 9.84178 3.74458 10.1591 3.76832 10.475C3.78082 10.6417 3.71916 10.7683 3.64082 10.8333L2.93999 11.41C2.65447 11.6451 2.46159 11.9738 2.39567 12.3378C2.32975 12.7017 2.39507 13.0772 2.57999 13.3975L3.34832 14.7283C3.53331 15.0487 3.82596 15.293 4.17418 15.4178C4.5224 15.5426 4.90362 15.5399 5.24999 15.41L6.09916 15.0917C6.19499 15.0558 6.33499 15.0658 6.47416 15.16C6.73416 15.3383 7.00832 15.4975 7.29499 15.635C7.44666 15.7083 7.52582 15.825 7.54249 15.9267L7.69082 16.8192C7.81666 17.5725 8.46832 18.125 9.23249 18.125H10.7692C11.5325 18.125 12.185 17.5725 12.3108 16.8192L12.4592 15.9258C12.4758 15.8258 12.5542 15.7092 12.7067 15.635C12.9933 15.4975 13.2675 15.3383 13.5275 15.16C13.6667 15.065 13.8067 15.0558 13.9025 15.0917L14.7525 15.41C15.0987 15.5394 15.4797 15.5418 15.8275 15.4168C16.1754 15.2919 16.4677 15.0476 16.6525 14.7275L17.4217 13.3967C17.6066 13.0764 17.6719 12.7009 17.606 12.3369C17.5401 11.973 17.3472 11.6443 17.0617 11.4092L16.3617 10.8325C16.2825 10.7675 16.22 10.6417 16.2333 10.4742C16.257 10.1582 16.257 9.84095 16.2333 9.525C16.22 9.35833 16.2825 9.23167 16.3608 9.16667L17.0608 8.59C17.6508 8.105 17.8033 7.265 17.4217 6.6025L16.6533 5.27167C16.4683 4.95132 16.1757 4.707 15.8275 4.58218C15.4792 4.45735 15.098 4.46013 14.7517 4.59L13.9017 4.90833C13.8067 4.94417 13.6667 4.93417 13.5275 4.83917C13.2663 4.66025 12.9919 4.50145 12.7067 4.36417C12.5542 4.29167 12.4758 4.175 12.4592 4.07417L12.31 3.18083C12.2492 2.81589 12.0609 2.48435 11.7786 2.24522C11.4963 2.0061 11.1383 1.87491 10.7683 1.875H9.23249H9.23166ZM9.99999 13.125C10.8288 13.125 11.6236 12.7958 12.2097 12.2097C12.7958 11.6237 13.125 10.8288 13.125 10C13.125 9.1712 12.7958 8.37634 12.2097 7.79029C11.6236 7.20424 10.8288 6.875 9.99999 6.875C9.17119 6.875 8.37633 7.20424 7.79028 7.79029C7.20423 8.37634 6.87499 9.1712 6.87499 10C6.87499 10.8288 7.20423 11.6237 7.79028 12.2097C8.37633 12.7958 9.17119 13.125 9.99999 13.125Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CommandLine/index.tsx
Normal file
10
www/docs/src/theme/Icon/CommandLine/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCommandLine (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M5.625 6.25L8.125 8.125L5.625 10M9.375 10H11.875M4.375 16.875H15.625C16.1223 16.875 16.5992 16.6775 16.9508 16.3258C17.3025 15.9742 17.5 15.4973 17.5 15V5C17.5 4.50272 17.3025 4.02581 16.9508 3.67417C16.5992 3.32254 16.1223 3.125 15.625 3.125H4.375C3.87772 3.125 3.40081 3.32254 3.04917 3.67417C2.69754 4.02581 2.5 4.50272 2.5 5V15C2.5 15.4973 2.69754 15.9742 3.04917 16.3258C3.40081 16.6775 3.87772 16.875 4.375 16.875Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CommandLineSolid/index.tsx
Normal file
10
www/docs/src/theme/Icon/CommandLineSolid/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCommandLineSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.63622 3.40051C3.07362 3.40051 2.53407 3.624 2.13626 4.02182C1.73844 4.41963 1.51495 4.95918 1.51495 5.52178V14.4782C1.51495 15.0408 1.73844 15.5804 2.13626 15.9782C2.53407 16.376 3.07362 16.5995 3.63622 16.5995H16.3638C16.6424 16.5995 16.9182 16.5446 17.1756 16.438C17.4329 16.3314 17.6668 16.1752 17.8638 15.9782C18.0607 15.7812 18.217 15.5474 18.3236 15.29C18.4302 15.0326 18.4851 14.7568 18.4851 14.4782V5.52178C18.4851 5.24321 18.4302 4.96737 18.3236 4.71C18.217 4.45264 18.0607 4.21879 17.8638 4.02182C17.6668 3.82484 17.4329 3.66859 17.1756 3.56198C16.9182 3.45538 16.6424 3.40051 16.3638 3.40051H3.63622ZM4.52526 11.6518C4.46299 11.5828 4.41492 11.5022 4.38382 11.4146C4.35272 11.327 4.33919 11.2341 4.34401 11.1413C4.34882 11.0485 4.37189 10.9576 4.41189 10.8737C4.45189 10.7898 4.50803 10.7146 4.57712 10.6524L6.34955 9.05722L4.57712 7.46108C4.50591 7.39956 4.4477 7.32445 4.40589 7.24014C4.36409 7.15583 4.33954 7.06402 4.33367 6.9701C4.32781 6.87618 4.34075 6.78204 4.37174 6.69318C4.40273 6.60433 4.45114 6.52255 4.51414 6.45265C4.57714 6.38275 4.65346 6.32612 4.73863 6.2861C4.82379 6.24607 4.91609 6.22345 5.01011 6.21955C5.10414 6.21566 5.19799 6.23057 5.28618 6.26341C5.37436 6.29625 5.4551 6.34637 5.52367 6.41082L7.88063 8.53209C7.95416 8.59839 8.01294 8.67939 8.05318 8.76985C8.09342 8.86031 8.11421 8.95821 8.11421 9.05722C8.11421 9.15622 8.09342 9.25412 8.05318 9.34458C8.01294 9.43504 7.95416 9.51605 7.88063 9.58235L5.52367 11.7036C5.45468 11.7659 5.37409 11.814 5.2865 11.8451C5.19892 11.8762 5.10606 11.8897 5.01325 11.8849C4.92043 11.8801 4.82947 11.857 4.74558 11.817C4.66168 11.777 4.58744 11.7208 4.52526 11.6518ZM9.76431 10.2357C9.57678 10.2357 9.39693 10.3102 9.26433 10.4428C9.13172 10.5754 9.05722 10.7553 9.05722 10.9428C9.05722 11.1303 9.13172 11.3102 9.26433 11.4428C9.39693 11.5754 9.57678 11.6499 9.76431 11.6499H12.1213C12.3088 11.6499 12.4887 11.5754 12.6213 11.4428C12.7539 11.3102 12.8284 11.1303 12.8284 10.9428C12.8284 10.7553 12.7539 10.5754 12.6213 10.4428C12.4887 10.3102 12.3088 10.2357 12.1213 10.2357H9.76431Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
16
www/docs/src/theme/Icon/ComponentSolid/index.tsx
Normal file
16
www/docs/src/theme/Icon/ComponentSolid/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconComponentSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M5.125 7.37509L7.75 10.0001L5.125 12.6251L2.5 10.0001L5.125 7.37509Z"
|
||||
fill="var(--ifm-icon-color)" stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M9.99969 2.5L12.6247 5.125L9.99969 7.75L7.37469 5.125L9.99969 2.5Z"
|
||||
fill="var(--ifm-icon-color)" stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M14.8752 7.37509L17.5002 10.0001L14.8752 12.6251L12.2502 10.0001L14.8752 7.37509Z"
|
||||
fill="var(--ifm-icon-color)" stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M9.99969 12.25L12.6247 14.875L9.99969 17.5L7.37469 14.875L9.99969 12.25Z"
|
||||
fill="var(--ifm-icon-color)" stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/ComputerDesktop/index.tsx
Normal file
10
www/docs/src/theme/Icon/ComputerDesktop/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconComputerDesktop (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M7.5 14.375V15.2142C7.50004 15.5426 7.43537 15.8678 7.30968 16.1712C7.184 16.4746 6.99976 16.7503 6.7675 16.9825L6.25 17.5H13.75L13.2325 16.9825C13.0002 16.7503 12.816 16.4746 12.6903 16.1712C12.5646 15.8678 12.5 15.5426 12.5 15.2142V14.375M17.5 4.375V12.5C17.5 12.9973 17.3025 13.4742 16.9508 13.8258C16.5992 14.1775 16.1223 14.375 15.625 14.375H4.375C3.87772 14.375 3.40081 14.1775 3.04917 13.8258C2.69754 13.4742 2.5 12.9973 2.5 12.5V4.375M17.5 4.375C17.5 3.87772 17.3025 3.40081 16.9508 3.04917C16.5992 2.69754 16.1223 2.5 15.625 2.5H4.375C3.87772 2.5 3.40081 2.69754 3.04917 3.04917C2.69754 3.40081 2.5 3.87772 2.5 4.375M17.5 4.375V10C17.5 10.4973 17.3025 10.9742 16.9508 11.3258C16.5992 11.6775 16.1223 11.875 15.625 11.875H4.375C3.87772 11.875 3.40081 11.6775 3.04917 11.3258C2.69754 10.9742 2.5 10.4973 2.5 10V4.375"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
11
www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx
Normal file
11
www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconComputerDesktopSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd"
|
||||
d="M1.875 4.375C1.875 3.71196 2.13839 3.07607 2.60723 2.60723C3.07607 2.13839 3.71196 1.875 4.375 1.875H15.625C16.288 1.875 16.9239 2.13839 17.3928 2.60723C17.8616 3.07607 18.125 3.71196 18.125 4.375V12.5C18.125 13.163 17.8616 13.7989 17.3928 14.2678C16.9239 14.7366 16.288 15 15.625 15H13.125V15.2142C13.125 15.7117 13.3225 16.1892 13.6742 16.54L14.1917 17.0583C14.279 17.1457 14.3384 17.2571 14.3625 17.3782C14.3865 17.4994 14.3742 17.625 14.3269 17.7391C14.2796 17.8532 14.1996 17.9508 14.0969 18.0195C13.9943 18.0882 13.8735 18.1249 13.75 18.125H6.25C6.12647 18.1249 6.00574 18.0882 5.90306 18.0195C5.80038 17.9508 5.72035 17.8532 5.67309 17.7391C5.62583 17.625 5.61346 17.4994 5.63753 17.3782C5.6616 17.2571 5.72104 17.1457 5.80833 17.0583L6.32583 16.54C6.67726 16.1886 6.87478 15.712 6.875 15.215V15H4.375C3.71196 15 3.07607 14.7366 2.60723 14.2678C2.13839 13.7989 1.875 13.163 1.875 12.5V4.375ZM3.125 4.375V10.625C3.125 10.9565 3.2567 11.2745 3.49112 11.5089C3.72554 11.7433 4.04348 11.875 4.375 11.875H15.625C15.9565 11.875 16.2745 11.7433 16.5089 11.5089C16.7433 11.2745 16.875 10.9565 16.875 10.625V4.375C16.875 4.04348 16.7433 3.72554 16.5089 3.49112C16.2745 3.2567 15.9565 3.125 15.625 3.125H4.375C4.04348 3.125 3.72554 3.2567 3.49112 3.49112C3.2567 3.72554 3.125 4.04348 3.125 4.375Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
14
www/docs/src/theme/Icon/Copy/index.tsx
Normal file
14
www/docs/src/theme/Icon/Copy/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCopy (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M2 4.25C2 3.65326 2.23705 3.08097 2.65901 2.65901C3.08097 2.23705 3.65326 2 4.25 2H10.75C11.3467 2 11.919 2.23705 12.341 2.65901C12.7629 3.08097 13 3.65326 13 4.25V5.5H9.25C8.25544 5.5 7.30161 5.89509 6.59835 6.59835C5.89509 7.30161 5.5 8.25544 5.5 9.25V13H4.25C3.65326 13 3.08097 12.7629 2.65901 12.341C2.23705 11.919 2 11.3467 2 10.75V4.25Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path
|
||||
d="M9.25 7C8.65326 7 8.08097 7.23705 7.65901 7.65901C7.23705 8.08097 7 8.65326 7 9.25V15.75C7 16.3467 7.23705 16.919 7.65901 17.341C8.08097 17.7629 8.65326 18 9.25 18H15.75C16.3467 18 16.919 17.7629 17.341 17.341C17.7629 16.919 18 16.3467 18 15.75V9.25C18 8.65326 17.7629 8.08097 17.341 7.65901C16.919 7.23705 16.3467 7 15.75 7H9.25Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
14
www/docs/src/theme/Icon/CreditCardSolid/index.tsx
Normal file
14
www/docs/src/theme/Icon/CreditCardSolid/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCreditCardSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M3.97603 3.37305C3.33696 3.37305 2.72406 3.62692 2.27217 4.07881C1.82028 4.5307 1.56641 5.1436 1.56641 5.78267V6.38508H18.4338V5.78267C18.4338 5.1436 18.1799 4.5307 17.728 4.07881C17.2761 3.62692 16.6632 3.37305 16.0241 3.37305H3.97603Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M18.4338 8.19336H1.56641V14.2174C1.56641 14.8565 1.82028 15.4694 2.27217 15.9213C2.72406 16.3732 3.33696 16.627 3.97603 16.627H16.0241C16.6632 16.627 17.2761 16.3732 17.728 15.9213C18.1799 15.4694 18.4338 14.8565 18.4338 14.2174V8.19336ZM3.97603 11.2054C3.97603 11.0456 4.0395 10.8924 4.15247 10.7794C4.26544 10.6665 4.41867 10.603 4.57844 10.603H9.39768C9.55745 10.603 9.71068 10.6665 9.82365 10.7794C9.93662 10.8924 10.0001 11.0456 10.0001 11.2054C10.0001 11.3652 9.93662 11.5184 9.82365 11.6314C9.71068 11.7443 9.55745 11.8078 9.39768 11.8078H4.57844C4.41867 11.8078 4.26544 11.7443 4.15247 11.6314C4.0395 11.5184 3.97603 11.3652 3.97603 11.2054ZM4.57844 13.0126C4.41867 13.0126 4.26544 13.0761 4.15247 13.189C4.0395 13.302 3.97603 13.4552 3.97603 13.615C3.97603 13.7748 4.0395 13.928 4.15247 14.041C4.26544 14.154 4.41867 14.2174 4.57844 14.2174H6.98806C7.14783 14.2174 7.30105 14.154 7.41402 14.041C7.527 13.928 7.59047 13.7748 7.59047 13.615C7.59047 13.4552 7.527 13.302 7.41402 13.189C7.30105 13.0761 7.14783 13.0126 6.98806 13.0126H4.57844Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CubeSolid/index.tsx
Normal file
10
www/docs/src/theme/Icon/CubeSolid/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCubeSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.346 1.63371C10.24 1.5753 10.121 1.54468 9.99999 1.54468C9.879 1.54468 9.75997 1.5753 9.654 1.63371L2.85366 5.38512L9.99999 9.3277L17.1463 5.38512L10.346 1.63371ZM17.6462 6.7471L10.7168 10.5702V18.4554L17.2754 14.8368C17.3877 14.7749 17.4814 14.6839 17.5466 14.5735C17.6118 14.463 17.6462 14.3371 17.6462 14.2088V6.7471ZM9.28316 18.4554V10.5702L2.35379 6.7471V14.2088C2.35377 14.3371 2.38816 14.463 2.45339 14.5735C2.51862 14.6839 2.61229 14.7749 2.72463 14.8368L9.28316 18.4554Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/CurrencyDollar/index.tsx
Normal file
10
www/docs/src/theme/Icon/CurrencyDollar/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCurrencyDollar (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M10 5V15M7.5 12.6517L8.2325 13.2008C9.20833 13.9333 10.7908 13.9333 11.7675 13.2008C12.7442 12.4683 12.7442 11.2817 11.7675 10.5492C11.28 10.1825 10.64 10 10 10C9.39583 10 8.79167 9.81667 8.33083 9.45083C7.40917 8.71833 7.40917 7.53167 8.33083 6.79917C9.2525 6.06667 10.7475 6.06667 11.6692 6.79917L12.015 7.07417M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
14
www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx
Normal file
14
www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconCurrencyDollarSolid (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M10.75 10.818V13.432C11.1539 13.3639 11.5406 13.2171 11.888 13C12.37 12.685 12.5 12.352 12.5 12.125C12.5 11.898 12.37 11.565 11.888 11.25C11.5406 11.0329 11.1539 10.8862 10.75 10.818ZM8.33 8.62003C8.383 8.67503 8.445 8.73003 8.514 8.78403C8.722 8.94403 8.974 9.06803 9.25 9.14703V6.60303C9.1302 6.6374 9.01319 6.68085 8.9 6.73303C8.76 6.79803 8.63 6.87603 8.514 6.96603C8.137 7.25803 8 7.59303 8 7.87503C8 8.05903 8.058 8.26503 8.202 8.46703C8.239 8.51803 8.282 8.57003 8.33 8.62003Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
<path
|
||||
fillRule="evenodd" clipRule="evenodd"
|
||||
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 4C10.1989 4 10.3897 4.07902 10.5303 4.21967C10.671 4.36032 10.75 4.55109 10.75 4.75V5.066C11.3504 5.16708 11.9175 5.41168 12.403 5.779C12.829 6.109 13.147 6.519 13.328 6.979C13.3951 7.16273 13.3877 7.36539 13.3075 7.54377C13.2272 7.72215 13.0805 7.86213 12.8985 7.93386C12.7166 8.0056 12.5138 8.00342 12.3334 7.92779C12.1531 7.85216 12.0094 7.70906 11.933 7.529C11.8376 7.30438 11.6831 7.10982 11.486 6.966C11.2658 6.79964 11.016 6.67647 10.75 6.603V9.3C11.448 9.393 12.133 9.62 12.709 9.996C13.496 10.51 13.999 11.266 13.999 12.126C13.999 12.986 13.495 13.742 12.709 14.256C12.133 14.633 11.448 14.859 10.749 14.952V15.251C10.749 15.4499 10.67 15.6407 10.5293 15.7813C10.3887 15.922 10.1979 16.001 9.999 16.001C9.80009 16.001 9.60932 15.922 9.46867 15.7813C9.32802 15.6407 9.249 15.4499 9.249 15.251V14.951C8.552 14.859 7.867 14.633 7.291 14.256C6.809 13.941 6.434 13.539 6.213 13.068C6.12866 12.8878 6.11937 12.6814 6.18716 12.4944C6.25496 12.3073 6.39429 12.1548 6.5745 12.0705C6.75471 11.9862 6.96105 11.9769 7.14812 12.0447C7.33519 12.1125 7.48766 12.2518 7.572 12.432C7.652 12.605 7.817 12.808 8.112 13.001C8.425 13.206 8.818 13.354 9.25 13.433V10.685C8.64964 10.5838 8.08258 10.3393 7.597 9.972C6.9 9.433 6.5 8.681 6.5 7.875C6.5 7.07 6.9 6.317 7.597 5.779C8.08254 5.41168 8.64962 5.16708 9.25 5.066V4.75C9.25 4.55109 9.32902 4.36032 9.46967 4.21967C9.61032 4.07902 9.80109 4 10 4Z"
|
||||
fill="var(--ifm-icon-color)"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
10
www/docs/src/theme/Icon/DarkMode/index.tsx
Normal file
10
www/docs/src/theme/Icon/DarkMode/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
export default function IconDarkMode(props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M18.1267 12.5017C17.136 12.9147 16.0732 13.1265 15 13.1251C10.5125 13.1251 6.875 9.48758 6.875 5.00008C6.875 3.89175 7.09667 2.83591 7.49833 1.87341C6.01789 2.49101 4.75331 3.53287 3.86386 4.86779C2.9744 6.20271 2.49986 7.77098 2.5 9.37508C2.5 13.8626 6.1375 17.5001 10.625 17.5001C12.2291 17.5002 13.7974 17.0257 15.1323 16.1362C16.4672 15.2468 17.5091 13.9822 18.1267 12.5017Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user