docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)
* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
This commit is contained in:
Shahed Nasser
GitHub
276
www/docs/src/css/_docusaurus.css
Normal file
276
www/docs/src/css/_docusaurus.css
Normal file
@@ -0,0 +1,276 @@
|
||||
/** This CSS file includes tailwind styling definitions for classes defined by docusaurus **/
|
||||
html,
|
||||
body {
|
||||
@apply tw-h-full;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
@apply tw-grid tw-gap-x-1 tw-auto-rows-fr;
|
||||
}
|
||||
|
||||
.cards-grid.grid-6 {
|
||||
@apply md:tw-grid-cols-2 tw-grid-cols-1;
|
||||
}
|
||||
|
||||
.cards-grid.grid-4 {
|
||||
@apply lg:tw-grid-cols-3 md:tw-grid-cols-2 tw-grid-cols-1;
|
||||
}
|
||||
|
||||
h1 + .cards-grid,
|
||||
h1 + .card-wrapper,
|
||||
h2 + .cards-grid,
|
||||
h2 + .card-wrapper,
|
||||
h3 + .cards-grid,
|
||||
h3 + .card-wrapper {
|
||||
@apply tw-mt-1.5;
|
||||
}
|
||||
|
||||
.markdown p + img,
|
||||
.markdown .alert,
|
||||
.markdown .code-wrapper {
|
||||
@apply tw-mb-2;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown p + .code-wrapper,
|
||||
.markdown p + .tabs-wrapper,
|
||||
.markdown p + .alert,
|
||||
.markdown p + section,
|
||||
video {
|
||||
@apply tw-mt-2;
|
||||
}
|
||||
|
||||
.theme-code-block {
|
||||
@apply tw-border tw-border-solid tw-border-medusa-code-block-border;
|
||||
}
|
||||
|
||||
.markdown p + .card-wrapper {
|
||||
@apply tw-mt-1.5;
|
||||
}
|
||||
|
||||
.card + p {
|
||||
@apply tw-mt-2;
|
||||
}
|
||||
|
||||
.card-highlighted {
|
||||
|
||||
@apply tw-relative tw-mb-4 tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-subtle-hover-dark;
|
||||
}
|
||||
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: var(--ifm-toc-width);
|
||||
}
|
||||
|
||||
.markdown-doc-wrapper--fluid {
|
||||
@apply tw-max-w-[inherit];
|
||||
}
|
||||
|
||||
:global(.docusaurus-mt-lg) {
|
||||
@apply tw-mt-3;
|
||||
}
|
||||
|
||||
:global(#__docusaurus) {
|
||||
@apply tw-min-h-full tw-flex tw-flex-col;
|
||||
}
|
||||
|
||||
.code-tabs .theme-code-block {
|
||||
@apply !tw-rounded-t-none !tw-rounded-b
|
||||
}
|
||||
|
||||
[class*=codeLineNumber] {
|
||||
@apply tw-text-medusa-text-placeholder !tw-pl-0;
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
@apply xs:tw-max-w-[90%] xs:after:tw-content-[''] xs:after:tw-rounded xs:after:tw-absolute;
|
||||
@apply xs:after:tw-right-0 xs:after:tw-top-0 xs:after:tw-w-[calc(10%+24px)] xs:after:tw-h-full xs:after:tw-bg-code-fade;
|
||||
}
|
||||
|
||||
.prism-code:not(:hover)::-webkit-scrollbar-thumb,
|
||||
.prism-code:not(:hover)::-webkit-scrollbar-track {
|
||||
@apply xs:tw-invisible;
|
||||
}
|
||||
|
||||
.prism-code:hover::-webkit-scrollbar-thumb,
|
||||
.prism-code:hover::-webkit-scrollbar-track {
|
||||
@apply xs:tw-opacity-100
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
@apply tw-bg-transparent tw-break-words !tw-outline-none;
|
||||
}
|
||||
|
||||
.prism-code div {
|
||||
@apply !tw-outline-none focus:!tw-outline-none active:!tw-outline-none;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
@apply tw-relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
@apply tw-max-w-xl tw-mx-auto xl:tw-min-w-xl tw-w-full;
|
||||
}
|
||||
|
||||
.theme-doc-breadcrumbs {
|
||||
@apply tw-hidden;
|
||||
}
|
||||
|
||||
article {
|
||||
@apply tw-max-w-[960px];
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
@apply !tw-pt-3;
|
||||
}
|
||||
|
||||
.margin-bottom--lg {
|
||||
@apply !tw-mb-1;
|
||||
}
|
||||
|
||||
details summary {
|
||||
@apply tw-cursor-pointer;
|
||||
}
|
||||
|
||||
.reference-table {
|
||||
@apply !tw-table tw-table-fixed tw-w-full;
|
||||
}
|
||||
|
||||
.reference-table p {
|
||||
--ifm-paragraph-margin-bottom: 0;
|
||||
}
|
||||
|
||||
.reference-table.table-col-4 th,
|
||||
.reference-table.table-col-4 td {
|
||||
@apply [&:nth-child(1)]:!tw-w-1/5 [&:nth-child(2)]:!tw-w-1/5 [&:nth-child(3)]:!tw-w-2/5 [&:nth-child(4)]:!tw-w-1/5;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(1),
|
||||
.reference-table td:nth-child(1) {
|
||||
@apply [&:nth-child(1)]:!tw-w-[30%] [&:nth-child(2)]:!tw-w-[30%] [&:nth-child(3)]:!tw-w-2/5;
|
||||
}
|
||||
|
||||
.reference-table .tooltip-container code {
|
||||
@apply tw-whitespace-nowrap;
|
||||
}
|
||||
|
||||
.reference-table .theme-code-block span {
|
||||
@apply !tw-max-w-full !tw-break-words !tw-whitespace-break-spaces;
|
||||
}
|
||||
|
||||
.reference-table .code-block-numbering {
|
||||
@apply !tw-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply !tw-pt-[38px] !tw-max-w-full;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
@apply tw-hidden;
|
||||
}
|
||||
|
||||
.markdown kbd {
|
||||
@apply !tw-font-monospace !tw-bg-medusa-bg-component dark:!tw-bg-medusa-bg-component-dark !tw-text-medusa-text-subtle dark:!tw-text-medusa-text-subtle-dark;
|
||||
@apply !tw-rounded-md !tw-border-medusa-border-strong dark:!tw-border-medusa-border-strong-dark !tw-shadow-none;
|
||||
}
|
||||
|
||||
.theme-doc-footer {
|
||||
@apply !tw-mt-0 tw-border-0 !tw-border-t tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
|
||||
@apply tw-pt-2;
|
||||
}
|
||||
|
||||
.theme-last-updated {
|
||||
@apply tw-font-normal tw-not-italic tw-text-label-small-plus;
|
||||
}
|
||||
|
||||
.theme-last-updated,
|
||||
.theme-last-updated b {
|
||||
@apply !tw-font-normal;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
@apply tw-z-[400];
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
@apply tw-z-[400];
|
||||
}
|
||||
|
||||
details > div {
|
||||
--docusaurus-details-decoration-color: transparent !important;
|
||||
}
|
||||
|
||||
.row--justify-end {
|
||||
@apply tw-justify-end;
|
||||
}
|
||||
|
||||
.docs-page-container {
|
||||
@apply !tw-px-0;
|
||||
}
|
||||
|
||||
.search-result-match {
|
||||
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
|
||||
@apply tw-bg-medusa-bg-highlight dark:tw-bg-medusa-bg-highlight-dark tw-py-[4px] tw-px-0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@apply tw-z-[399] tw-p-0;
|
||||
}
|
||||
|
||||
html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
|
||||
@apply supports-[backdrop-filter]:tw-bg-transparent supports-[backdrop-filter]:tw-backdrop-blur-md;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
@apply tw-text-label-small-plus;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
@apply tw-mr-2;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
@apply tw-w-[83px] tw-h-[20px] tw-flex tw-justify-center tw-items-center !tw-mr-0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply !tw-text-h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply !tw-text-h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply !tw-text-h3;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
|
||||
}
|
||||
|
||||
.markdown > h1:first-child,
|
||||
.markdown > h2,
|
||||
.markdown > h3 {
|
||||
@apply tw-mb-0.5;
|
||||
}
|
||||
|
||||
.markdown > p {
|
||||
@apply tw-mb-0.5;
|
||||
}
|
||||
|
||||
.markdown > p img {
|
||||
@apply tw-mt-0.5;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
@apply tw-mb-0;
|
||||
}
|
||||
Reference in New Issue
Block a user