docs,api-ref: added search filters (#4830)
* initial implementation of search modal * added hit and search suggestions * added support for multiple indices * updated sample env * added close when click outside dropdown * test for mobile * added mobile design * added shortcut * dark mode fixes * added search to docs * added plugins filter * added React import * moved filters to configurations * handled error on page load * change suggestion text * removed hits limit * handle select all * open link in current tab * change highlight colors * added support for shortcuts + auto focus * change header and footer * redesigned search ui
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,313 +0,0 @@
|
||||
/** VS Code Dark Theme: https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css **/
|
||||
|
||||
/* .section-content pre {
|
||||
@apply rounded border border-transparent dark:border-medusa-code-border;
|
||||
} */
|
||||
|
||||
/* .code-block {
|
||||
@apply relative;
|
||||
@apply xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade;
|
||||
} */
|
||||
|
||||
/* .prism-code {
|
||||
@apply relative xs:max-w-[90%];
|
||||
}
|
||||
|
||||
.prism-code *::selection, .code-header::selection {
|
||||
@apply bg-medusa-code-text-highlight;
|
||||
}
|
||||
|
||||
.prism-code:not(:hover)::-webkit-scrollbar-thumb,
|
||||
.prism-code:not(:hover)::-webkit-scrollbar-track {
|
||||
@apply xs:invisible;
|
||||
}
|
||||
|
||||
.prism-code:hover::-webkit-scrollbar-thumb,
|
||||
.prism-code:hover::-webkit-scrollbar-track {
|
||||
@apply xs:opacity-100
|
||||
} */
|
||||
|
||||
/* .prism-code {
|
||||
@apply bg-transparent break-words !outline-none;
|
||||
}
|
||||
|
||||
.prism-code div {
|
||||
@apply !outline-none focus:!outline-none active:!outline-none;
|
||||
} */
|
||||
|
||||
/* pre[class*="language-"],
|
||||
code[class*="language-"] {
|
||||
color: #d4d4d4;
|
||||
font-size: 13px;
|
||||
text-shadow: none;
|
||||
font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
code[class*="language-"]::selection,
|
||||
pre[class*="language-"] *::selection,
|
||||
code[class*="language-"] *::selection {
|
||||
text-shadow: none;
|
||||
background: #264F78;
|
||||
}
|
||||
|
||||
@media print {
|
||||
pre[class*="language-"],
|
||||
code[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em .3em;
|
||||
border-radius: .3em;
|
||||
color: #db4c69;
|
||||
background: #1e1e1e;
|
||||
} */
|
||||
/*********************************************************
|
||||
* Tokens
|
||||
*/
|
||||
/* .namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.doctype .token.doctype-tag {
|
||||
color: #569CD6;
|
||||
}
|
||||
|
||||
.token.doctype .token.name {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog {
|
||||
color: #6a9955;
|
||||
}
|
||||
|
||||
.token.punctuation,
|
||||
.language-html .language-css .token.punctuation,
|
||||
.language-html .language-javascript .token.punctuation {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.inserted,
|
||||
.token.unit {
|
||||
color: #b5cea8;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.deleted {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.language-css .token.string.url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.token.operator.arrow {
|
||||
color: #569CD6;
|
||||
}
|
||||
|
||||
.token.atrule {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.token.atrule .token.rule {
|
||||
color: #c586c0;
|
||||
}
|
||||
|
||||
.token.atrule .token.url {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.atrule .token.url .token.function {
|
||||
color: #dcdcaa;
|
||||
}
|
||||
|
||||
.token.atrule .token.url .token.punctuation {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #569CD6;
|
||||
}
|
||||
|
||||
.token.keyword.module,
|
||||
.token.keyword.control-flow {
|
||||
color: #c586c0;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.function .token.maybe-class-name {
|
||||
color: #dcdcaa;
|
||||
}
|
||||
|
||||
.token.regex {
|
||||
color: #d16969;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.constant {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.class-name,
|
||||
.token.maybe-class-name {
|
||||
color: #4ec9b0;
|
||||
}
|
||||
|
||||
.token.console {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.parameter {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.interpolation {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.punctuation.interpolation-punctuation {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.variable,
|
||||
.token.imports .token.maybe-class-name,
|
||||
.token.exports .token.maybe-class-name {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #d7ba7d;
|
||||
}
|
||||
|
||||
.token.escape {
|
||||
color: #d7ba7d;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.token.tag .token.punctuation {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.token.cdata {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.attr-value .token.punctuation {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.token.attr-value .token.punctuation.attr-equals {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
color: #4ec9b0;
|
||||
} */
|
||||
/*********************************************************
|
||||
* Language Specific
|
||||
*/
|
||||
|
||||
/* pre[class*="language-javascript"],
|
||||
code[class*="language-javascript"],
|
||||
pre[class*="language-jsx"],
|
||||
code[class*="language-jsx"],
|
||||
pre[class*="language-typescript"],
|
||||
code[class*="language-typescript"],
|
||||
pre[class*="language-tsx"],
|
||||
code[class*="language-tsx"] {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
|
||||
pre[class*="language-css"],
|
||||
code[class*="language-css"] {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
pre[class*="language-html"],
|
||||
code[class*="language-html"] {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.language-regex .token.anchor {
|
||||
color: #dcdcaa;
|
||||
}
|
||||
|
||||
.language-html .token.punctuation {
|
||||
color: #808080;
|
||||
} */
|
||||
/*********************************************************
|
||||
* Line highlighting
|
||||
*/
|
||||
/* pre[class*="language-"] > code[class*="language-"] {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line-highlight.line-highlight {
|
||||
background: #f7ebc6;
|
||||
box-shadow: inset 5px 0 0 #f7d87c;
|
||||
z-index: 0;
|
||||
} */
|
||||
@@ -1,232 +0,0 @@
|
||||
.DocSearch-Modal {
|
||||
@apply border border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
|
||||
@apply !rounded !relative;
|
||||
@apply md:!m-[unset] md:w-[560px];
|
||||
}
|
||||
|
||||
.DocSearch-SearchBar {
|
||||
@apply !p-0;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
--docsearch-spacing: theme(margin[1.5]);
|
||||
--docsearch-searchbox-height: 56px;
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-modal-background) !important;
|
||||
|
||||
@apply !rounded-t !rounded-b-none border-0 border-b border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
|
||||
@apply !w-[20px] !h-[20px];
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
@apply !text-compact-large lg:!text-medium !pl-1;
|
||||
@apply placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown {
|
||||
@apply !pt-0 !pb-2.5 !px-0;
|
||||
@apply !max-h-[416px];
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
@apply !m-0 !text-compact-small-plus uppercase text-medusa-fg-muted dark:text-medusa-fg-muted-dark;
|
||||
@apply border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
|
||||
@apply !py-[10px] !px-1.5;
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
@apply !hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
@apply !p-0;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon {
|
||||
@apply !w-2.5 !h-2.5 p-0.125 border border-solid border-medusa-border-strong dark:border-medusa-border-strong-dark;
|
||||
@apply rounded flex justify-center items-center;
|
||||
@apply before:content-[''] before:w-2 before:h-2 before:bg-no-repeat before:bg-center before:bg-contain before:bg-search-hit dark:before:bg-search-hit-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon svg {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Hit--Child .DocSearch-Hit-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
@apply !py-0.75 !px-1.5 !shadow-none !rounded-none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(:last-of-type) a {
|
||||
@apply border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
@apply !mt-0 !mx-1;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-title mark {
|
||||
@apply !text-medusa-fg-base dark:!text-medusa-fg-base-dark;
|
||||
@apply !text-compact-small-plus;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path {
|
||||
@apply !text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark !text-compact-small;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
|
||||
--docsearch-hit-active-color: theme(colors.medusa.fg.subtle.DEFAULT);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
|
||||
--docsearch-hit-active-color: theme(colors.medusa.fg.subtle.dark);
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] a {
|
||||
@apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-base-hover-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child {
|
||||
@apply h-1.5 w-1.5 border border-solid border-medusa-border-strong dark:border-medusa-border-strong-dark;
|
||||
@apply rounded bg-medusa-bg-base dark:bg-medusa-bg-base-dark p-0.125 flex justify-center items-center;
|
||||
@apply before:content-[''] before:w-[20px] before:h-[20px] before:bg-search-arrow dark:before:bg-search-arrow-dark before:bg-no-repeat before:bg-center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] mark {
|
||||
@apply !no-underline;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree {
|
||||
@apply text-medusa-border-strong dark:text-medusa-border-strong-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Tree {
|
||||
@apply text-medusa-border-base dark:text-medusa-border-base-dark;
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter {
|
||||
@apply z-[100] absolute bottom-0 left-0 w-full h-2.5 !bg-medusa-bg-base dark:!bg-medusa-bg-base-dark;
|
||||
@apply border-0 border-t border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter a {
|
||||
@apply !border-b-0;
|
||||
}
|
||||
|
||||
.DocSearch-Reset {
|
||||
@apply !rounded transition-all duration-200 ease-ease;
|
||||
@apply hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Screen-Icon {
|
||||
@apply w-[20px] h-[20px] !p-0 flex justify-center items-center mt-0 mb-1 mx-auto;
|
||||
@apply before:content-[''] before:w-full before:h-full before:bg-no-repeat before:bg-center before:bg-contain;
|
||||
@apply before:bg-search-no-result dark:before:bg-search-no-result-dark;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Screen-Icon svg {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults .DocSearch-Title {
|
||||
@apply !text-compact-small !pl-1;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List {
|
||||
@apply text-center !text-compact-small-plus !pl-1;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List li::marker {
|
||||
@apply content-[''];
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List li button {
|
||||
@apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
@apply w-full !h-full !rounded lg:!border lg:!border-solid lg:!border-medusa-border-loud-muted lg:dark:!border-medusa-border-base-dark border-0;
|
||||
@apply lg:!bg-medusa-bg-field lg:dark:!bg-medusa-bg-field-dark !bg-transparent;
|
||||
@apply lg:hover:!bg-medusa-bg-field-hover lg:dark:hover:!bg-medusa-bg-field-hover-dark;
|
||||
@apply lg:disabled:!bg-medusa-bg-disabled lg:dark:disabled:!bg-medusa-bg-disabled-dark;
|
||||
@apply p-0 lg:!py-[5px] lg:!px-0.5 relative ml-0;
|
||||
@apply hover:!border-medusa-border-loud-muted hover:dark:!border-medusa-border-loud-muted-dark;
|
||||
@apply active:!border-medusa-border-interactive active:dark:!border-medusa-border-interactive-dark;
|
||||
@apply focus:!border-medusa-border-interactive focus:dark:!border-medusa-border-interactive-dark;
|
||||
@apply disabled:!border-medusa-border-base disabled:dark:!border-medusa-border-base-dark;
|
||||
@apply lg:!shadow-button-secondary lg:dark:!shadow-button-secondary-dark;
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
@apply !z-[1001] md:flex md:justify-center md:items-center;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
@apply invisible;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Container {
|
||||
@apply before:content-[''] before:h-[20px] before:w-[20px] before:absolute before:left-0.5 before:top-[5px];
|
||||
@apply before:bg-magnifying-glass dark:before:bg-magnifying-glass-dark before:bg-no-repeat;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
@apply text-medusa-fg-muted dark:text-medusa-fg-muted-dark;
|
||||
@apply !pl-0.5 !text-compact-small lg:!block !hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys {
|
||||
@apply w-fit !min-w-[unset] lg:!flex !hidden;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
@apply !shadow-none !rounded-md !text-compact-x-small-plus !font-base align-middle !p-0.25;
|
||||
@apply !border !border-solid !border-medusa-tag-neutral-border dark:!border-medusa-tag-neutral-border-dark;
|
||||
@apply [&span]:hidden [&:not(:last-child)]:!mr-0.25 last:!mr-0;
|
||||
}
|
||||
|
||||
[class*=searchBox] {
|
||||
@apply lg:w-[280px] lg:max-w-[280px] lg:!h-2 lg:!p-0;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--docsearch-searchbox-background: theme(colors.medusa.bg.field.DEFAULT) !important;
|
||||
--docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.DEFAULT) !important;
|
||||
--docsearch-searchbox-shadow: none !important;
|
||||
--docsearch-modal-height: 472px !important;
|
||||
--docsearch-modal-background: theme(colors.medusa.bg.base.DEFAULT) !important;
|
||||
--docsearch-modal-shadow: theme(boxShadow.modal) !important;
|
||||
--docsearch-container-background: theme(colors.medusa.bg.overlay.DEFAULT) !important;
|
||||
--docsearch-key-gradient: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
|
||||
--docsearch-muted-color: theme(colors.medusa.tag.neutral.text.DEFAULT) !important;
|
||||
--docsearch-spacing: 12px theme(spacing[1.5]) !important;
|
||||
--docsearch-highlight-color: theme(colors.medusa.fg.muted.DEFAULT) !important;
|
||||
--docsearch-text-color: theme(colors.medusa.fg.base.DEFAULT) !important;
|
||||
--docsearch-hit-background: var(--docsearch-modal-background) !important;
|
||||
--docsearch-hit-height: auto !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-footer-height: 40px !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--docsearch-searchbox-background: theme(colors.medusa.bg.field.dark) !important;
|
||||
--docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.dark) !important;
|
||||
--docsearch-modal-background: theme(colors.medusa.bg.base.dark) !important;
|
||||
--docsearch-modal-shadow: theme(boxShadow.modal-dark) !important;
|
||||
--docsearch-container-background: theme(colors.medusa.bg.overlay.dark) !important;
|
||||
--docsearch-key-gradient: theme(colors.medusa.tag.neutral.bg.dark) !important;
|
||||
--docsearch-muted-color: theme(colors.medusa.tag.neutral.text.dark) !important;
|
||||
--docsearch-highlight-color: theme(colors.medusa.fg.muted.dark) !important;
|
||||
--docsearch-text-color: theme(colors.medusa.fg.base.dark) !important;
|
||||
}
|
||||
@@ -47,8 +47,13 @@
|
||||
@apply !bg-medusa-code-text-highlight;
|
||||
}
|
||||
|
||||
body[data-modal="opened"] {
|
||||
overflow: hidden;
|
||||
body[data-modal="opened"] {
|
||||
@apply !overflow-hidden;
|
||||
}
|
||||
|
||||
mark {
|
||||
@apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
|
||||
@apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -243,9 +248,9 @@
|
||||
@apply inline-flex flex-row justify-center items-center;
|
||||
@apply py-[5px] px-0.75 rounded-sm cursor-pointer;
|
||||
@apply bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark;
|
||||
@apply hover:bg-medusa-button-neutral-hover hover:bg-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark dark:hover:bg-button-neutral-hover-dark hover:no-underline;
|
||||
@apply active:bg-medusa-button-neutral-pressed active:bg-button-neutral-pressed dark:active:bg-medusa-button-neutral-pressed-dark dark:active:bg-button-neutral-pressed-dark;
|
||||
@apply focus:bg-medusa-button-neutral-pressed focus:bg-button-neutral-pressed dark:focus:bg-medusa-button-neutral-pressed-dark dark:focus:bg-button-neutral-pressed-dark;
|
||||
@apply hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline;
|
||||
@apply active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark;
|
||||
@apply focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark;
|
||||
@apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
|
||||
@apply disabled:cursor-not-allowed;
|
||||
@apply border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
|
||||
@@ -263,12 +268,12 @@
|
||||
@apply inline-flex flex-row justify-center items-center;
|
||||
@apply py-[5px] px-0.75 rounded-sm cursor-pointer;
|
||||
@apply bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark;
|
||||
@apply hover:bg-medusa-button-inverted-hover hover:bg-button-inverted-hover dark:hover:bg-medusa-button-inverted-hover-dark dark:hover:bg-button-inverted-hover-dark hover:no-underline;
|
||||
@apply active:bg-medusa-button-inverted-pressed active:bg-button-inverted-pressed dark:active:bg-medusa-button-inverted-pressed-dark dark:active:bg-button-inverted-pressed-dark;
|
||||
@apply focus:bg-medusa-button-inverted-pressed focus:bg-button-inverted-pressed dark:focus:bg-medusa-button-inverted-pressed-dark dark:focus:bg-button-inverted-pressed-dark;
|
||||
@apply hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline;
|
||||
@apply active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark;
|
||||
@apply focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark;
|
||||
@apply shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow;
|
||||
@apply dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark;
|
||||
@apply disabled:!bg-no-image disabled:bg-medusa-button-disabled dark:disabled:bg-medusa-button-disabled-dark;
|
||||
@apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
|
||||
@apply disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark;
|
||||
@apply text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark;
|
||||
@apply disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark;
|
||||
@@ -277,9 +282,8 @@
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
@apply bg-transparent shadow-none border-0 outline-none;
|
||||
@apply bg-transparent shadow-none border-0 outline-none cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@import url('./tooltip.css');
|
||||
@import url('./docsearch.css');
|
||||
@import url('./tooltip.css');
|
||||
@@ -1,13 +1,3 @@
|
||||
/* .react-tooltip {
|
||||
@apply !border !border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
|
||||
@apply !rounded !text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark;
|
||||
@apply !py-0.4 !px-1 lg:block hidden;
|
||||
} */
|
||||
|
||||
/* .react-tooltip-arrow {
|
||||
@apply hidden;
|
||||
} */
|
||||
|
||||
:root {
|
||||
--rt-opacity: theme(opacity.100) !important;
|
||||
--rt-color-dark: theme(colors.medusa.bg.base.DEFAULT) !important;
|
||||
|
||||
Reference in New Issue
Block a user