diff --git a/admin/README.md b/admin/README.md index f3597311e39..dc09f769797 100644 --- a/admin/README.md +++ b/admin/README.md @@ -6,7 +6,7 @@ A Rails engine that provides an administrative interface to the Solidus ecommerc - [Customizing tailwind](docs/customizing_tailwind.md) - [Customizing view components](docs/customizing_view_components.md) -- [Customizing the main navigation](docs/customizing_main_navigation.md) +- [Customizing the main navigation](docs/customizing_menu_itemigation.md) ### Adding components to Solidus Admin diff --git a/admin/app/assets/builds/solidus_admin/tailwind.css b/admin/app/assets/builds/solidus_admin/tailwind.css new file mode 100644 index 00000000000..1fcf93d279d --- /dev/null +++ b/admin/app/assets/builds/solidus_admin/tailwind.css @@ -0,0 +1,2787 @@ +@import url("https://rsms.me/inter/inter.css"); + +/* +! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #cfcfcf; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #a3a3a3; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #a3a3a3; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +summary::-webkit-details-marker{ + display: none; +} + +summary::marker{ + display: none; +} + +summary{ + list-style: none; +} + +*, ::before, ::after{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop{ + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.form-input,.form-textarea,.form-select,.form-multiselect{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #737373; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus{ + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +.form-input::-moz-placeholder, .form-textarea::-moz-placeholder{ + color: #737373; + opacity: 1; +} + +.form-input::placeholder,.form-textarea::placeholder{ + color: #737373; + opacity: 1; +} + +.form-input::-webkit-datetime-edit-fields-wrapper{ + padding: 0; +} + +.form-input::-webkit-date-and-time-value{ + min-height: 1.5em; +} + +.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field{ + padding-top: 0; + padding-bottom: 0; +} + +.form-select{ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +.form-checkbox,.form-radio{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #737373; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +.form-checkbox{ + border-radius: 0px; +} + +.form-checkbox:focus,.form-radio:focus{ + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +.form-checkbox:checked,.form-radio:checked{ + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:checked{ + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus{ + border-color: transparent; + background-color: currentColor; +} + +.form-checkbox:indeterminate{ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus{ + border-color: transparent; + background-color: currentColor; +} + +.body-link{ + color: #2554b1; +} + +.body-link:hover{ + text-decoration: underline; +} + +.sr-only{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.pointer-events-none{ + pointer-events: none; +} + +.pointer-events-auto{ + pointer-events: auto; +} + +.static{ + position: static; +} + +.fixed{ + position: fixed; +} + +.absolute{ + position: absolute; +} + +.relative{ + position: relative; +} + +.sticky{ + position: sticky; +} + +.inset-0{ + inset: 0px; +} + +.inset-x-0{ + left: 0px; + right: 0px; +} + +.bottom-0{ + bottom: 0px; +} + +.bottom-3{ + bottom: 0.75rem; +} + +.bottom-full{ + bottom: 100%; +} + +.left-0{ + left: 0px; +} + +.right-0{ + right: 0px; +} + +.top-0{ + top: 0px; +} + +.top-2{ + top: 0.5rem; +} + +.z-10{ + z-index: 10; +} + +.z-30{ + z-index: 30; +} + +.z-50{ + z-index: 50; +} + +.m-2{ + margin: 0.5rem; +} + +.m-40{ + margin: 10rem; +} + +.m-6{ + margin: 1.5rem; +} + +.mb-1{ + margin-bottom: 0.25rem; +} + +.mb-3{ + margin-bottom: 0.75rem; +} + +.mb-4{ + margin-bottom: 1rem; +} + +.mb-8{ + margin-bottom: 2rem; +} + +.ml-2{ + margin-left: 0.5rem; +} + +.ml-3{ + margin-left: 0.75rem; +} + +.ml-4{ + margin-left: 1rem; +} + +.ml-80{ + margin-left: 20rem; +} + +.ml-auto{ + margin-left: auto; +} + +.mr-2{ + margin-right: 0.5rem; +} + +.mr-3{ + margin-right: 0.75rem; +} + +.mt-0{ + margin-top: 0px; +} + +.mt-0\.5{ + margin-top: 0.125rem; +} + +.mt-10{ + margin-top: 2.5rem; +} + +.mt-2{ + margin-top: 0.5rem; +} + +.mt-4{ + margin-top: 1rem; +} + +.mt-8{ + margin-top: 2rem; +} + +.mt-auto{ + margin-top: auto; +} + +.block{ + display: block; +} + +.inline-block{ + display: inline-block; +} + +.flex{ + display: flex; +} + +.inline-flex{ + display: inline-flex; +} + +.table{ + display: table; +} + +.hidden{ + display: none; +} + +.h-1{ + height: 0.25rem; +} + +.h-10{ + height: 2.5rem; +} + +.h-12{ + height: 3rem; +} + +.h-2{ + height: 0.5rem; +} + +.h-20{ + height: 5rem; +} + +.h-3{ + height: 0.75rem; +} + +.h-4{ + height: 1rem; +} + +.h-4\/5{ + height: 80%; +} + +.h-5{ + height: 1.25rem; +} + +.h-6{ + height: 1.5rem; +} + +.h-7{ + height: 1.75rem; +} + +.h-8{ + height: 2rem; +} + +.h-9{ + height: 2.25rem; +} + +.h-\[1\.125rem\]{ + height: 1.125rem; +} + +.h-\[1\.35em\]{ + height: 1.35em; +} + +.h-\[1\.4em\]{ + height: 1.4em; +} + +.h-\[1\.5em\]{ + height: 1.5em; +} + +.h-\[1rem\]{ + height: 1rem; +} + +.h-\[22px\]{ + height: 22px; +} + +.h-full{ + height: 100%; +} + +.h-screen{ + height: 100vh; +} + +.max-h-7{ + max-height: 1.75rem; +} + +.max-h-\[240px\]{ + max-height: 240px; +} + +.max-h-\[26rem\]{ + max-height: 26rem; +} + +.max-h-screen{ + max-height: 100vh; +} + +.min-h-\[108px\]{ + min-height: 108px; +} + +.min-h-\[144px\]{ + min-height: 144px; +} + +.min-h-\[84px\]{ + min-height: 84px; +} + +.min-h-full{ + min-height: 100%; +} + +.min-h-screen{ + min-height: 100vh; +} + +.\!w-16{ + width: 4rem !important; +} + +.w-1\/2{ + width: 50%; +} + +.w-10{ + width: 2.5rem; +} + +.w-12{ + width: 3rem; +} + +.w-16{ + width: 4rem; +} + +.w-20{ + width: 5rem; +} + +.w-4{ + width: 1rem; +} + +.w-48{ + width: 12rem; +} + +.w-5{ + width: 1.25rem; +} + +.w-56{ + width: 14rem; +} + +.w-6{ + width: 1.5rem; +} + +.w-7{ + width: 1.75rem; +} + +.w-8{ + width: 2rem; +} + +.w-9{ + width: 2.25rem; +} + +.w-\[1\.125rem\]{ + width: 1.125rem; +} + +.w-\[1\.35em\]{ + width: 1.35em; +} + +.w-\[1\.4em\]{ + width: 1.4em; +} + +.w-\[1\.5em\]{ + width: 1.5em; +} + +.w-\[17\.78rem\]{ + width: 17.78rem; +} + +.w-\[1rem\]{ + width: 1rem; +} + +.w-\[22px\]{ + width: 22px; +} + +.w-\[400px\]{ + width: 400px; +} + +.w-\[52px\]{ + width: 52px; +} + +.w-\[72px\]{ + width: 72px; +} + +.w-auto{ + width: auto; +} + +.w-full{ + width: 100%; +} + +.min-w-\[10rem\]{ + min-width: 10rem; +} + +.min-w-\[240px\]{ + min-width: 240px; +} + +.min-w-\[40rem\]{ + min-width: 40rem; +} + +.max-w-\[20px\]{ + max-width: 20px; +} + +.max-w-lg{ + max-width: 32rem; +} + +.max-w-sm{ + max-width: 24rem; +} + +.flex-1{ + flex: 1 1 0%; +} + +.shrink{ + flex-shrink: 1; +} + +.shrink-0{ + flex-shrink: 0; +} + +.flex-grow{ + flex-grow: 1; +} + +.grow{ + flex-grow: 1; +} + +.table-auto{ + table-layout: auto; +} + +.table-fixed{ + table-layout: fixed; +} + +.border-collapse{ + border-collapse: collapse; +} + +.translate-x-\[calc\(-50\%\+\(1rem\/2\)\)\]{ + --tw-translate-x: calc(-50% + (1rem / 2)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-\[calc\(-100\%-1rem-\(0\.375rem\/2\)\)\]{ + --tw-translate-y: calc(-100% - 1rem - (0.375rem / 2)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-\[calc\(0\.375rem\/2\)\]{ + --tw-translate-y: calc(0.375rem / 2); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-full{ + --tw-translate-y: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.transform{ + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.cursor-auto{ + cursor: auto; +} + +.cursor-default{ + cursor: default; +} + +.cursor-pointer{ + cursor: pointer; +} + +.appearance-none{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.flex-col{ + flex-direction: column; +} + +.flex-wrap{ + flex-wrap: wrap; +} + +.items-start{ + align-items: flex-start; +} + +.items-center{ + align-items: center; +} + +.justify-start{ + justify-content: flex-start; +} + +.justify-end{ + justify-content: flex-end; +} + +.justify-center{ + justify-content: center; +} + +.justify-between{ + justify-content: space-between; +} + +.justify-items-stretch{ + justify-items: stretch; +} + +.gap-0{ + gap: 0px; +} + +.gap-0\.5{ + gap: 0.125rem; +} + +.gap-1{ + gap: 0.25rem; +} + +.gap-1\.5{ + gap: 0.375rem; +} + +.gap-2{ + gap: 0.5rem; +} + +.gap-3{ + gap: 0.75rem; +} + +.gap-4{ + gap: 1rem; +} + +.gap-6{ + gap: 1.5rem; +} + +.space-y-0 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); +} + +.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); +} + +.divide-y > :not([hidden]) ~ :not([hidden]){ + --tw-divide-y-reverse: 0; + border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); +} + +.divide-gray-100 > :not([hidden]) ~ :not([hidden]){ + --tw-divide-opacity: 1; + border-color: rgb(222 222 222 / var(--tw-divide-opacity)); +} + +.self-end{ + align-self: flex-end; +} + +.overflow-auto{ + overflow: auto; +} + +.overflow-hidden{ + overflow: hidden; +} + +.overflow-visible{ + overflow: visible; +} + +.overflow-y-auto{ + overflow-y: auto; +} + +.overflow-x-hidden{ + overflow-x: hidden; +} + +.text-ellipsis{ + text-overflow: ellipsis; +} + +.whitespace-nowrap{ + white-space: nowrap; +} + +.rounded{ + border-radius: 0.25rem; +} + +.rounded-\[4\.81rem\]{ + border-radius: 4.81rem; +} + +.rounded-full{ + border-radius: 9999px; +} + +.rounded-lg{ + border-radius: 0.5rem; +} + +.rounded-md{ + border-radius: 0.375rem; +} + +.rounded-sm{ + border-radius: 4px; +} + +.rounded-b-lg{ + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.rounded-t-lg{ + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.rounded-bl-none{ + border-bottom-left-radius: 0px; +} + +.rounded-br-none{ + border-bottom-right-radius: 0px; +} + +.rounded-tl-none{ + border-top-left-radius: 0px; +} + +.rounded-tr-none{ + border-top-right-radius: 0px; +} + +.border{ + border-width: 1px; +} + +.border-2{ + border-width: 2px; +} + +.border-b{ + border-bottom-width: 1px; +} + +.border-r{ + border-right-width: 1px; +} + +.border-r-0{ + border-right-width: 0px; +} + +.border-t{ + border-top-width: 1px; +} + +.border-dotted{ + border-style: dotted; +} + +.border-gray-100{ + --tw-border-opacity: 1; + border-color: rgb(222 222 222 / var(--tw-border-opacity)); +} + +.border-gray-200{ + --tw-border-opacity: 1; + border-color: rgb(207 207 207 / var(--tw-border-opacity)); +} + +.border-gray-300{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.border-red-500{ + --tw-border-opacity: 1; + border-color: rgb(220 55 40 / var(--tw-border-opacity)); +} + +.border-r-gray-100{ + --tw-border-opacity: 1; + border-right-color: rgb(222 222 222 / var(--tw-border-opacity)); +} + +.bg-black{ + --tw-bg-opacity: 1; + background-color: rgb(34 34 34 / var(--tw-bg-opacity)); +} + +.bg-full-black{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.bg-full-black\/50{ + background-color: rgb(0 0 0 / 0.5); +} + +.bg-graphite-light{ + --tw-bg-opacity: 1; + background-color: rgb(216 218 216 / var(--tw-bg-opacity)); +} + +.bg-gray-100{ + --tw-bg-opacity: 1; + background-color: rgb(222 222 222 / var(--tw-bg-opacity)); +} + +.bg-gray-15{ + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + +.bg-gray-200{ + --tw-bg-opacity: 1; + background-color: rgb(207 207 207 / var(--tw-bg-opacity)); +} + +.bg-gray-25{ + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +.bg-gray-50{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.bg-gray-800{ + --tw-bg-opacity: 1; + background-color: rgb(51 51 51 / var(--tw-bg-opacity)); +} + +.bg-inherit{ + background-color: inherit; +} + +.bg-papaya-whip{ + --tw-bg-opacity: 1; + background-color: rgb(249 227 217 / var(--tw-bg-opacity)); +} + +.bg-red-100{ + --tw-bg-opacity: 1; + background-color: rgb(248 214 211 / var(--tw-bg-opacity)); +} + +.bg-red-500{ + --tw-bg-opacity: 1; + background-color: rgb(220 55 40 / var(--tw-bg-opacity)); +} + +.bg-seafoam{ + --tw-bg-opacity: 1; + background-color: rgb(193 224 222 / var(--tw-bg-opacity)); +} + +.bg-sky{ + --tw-bg-opacity: 1; + background-color: rgb(203 223 241 / var(--tw-bg-opacity)); +} + +.bg-transparent{ + background-color: transparent; +} + +.bg-white{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-arrow-down-s-fill-gray-700{ + background-image: url('solidus_admin/arrow_down_s_fill_gray_700.svg'); +} + +.fill-current{ + fill: currentColor; +} + +.fill-gray-400{ + fill: #a3a3a3; +} + +.fill-gray-500{ + fill: #737373; +} + +.fill-gray-700{ + fill: #4a4a4a; +} + +.fill-gray-800{ + fill: #333333; +} + +.fill-yellow{ + fill: #fdc071; +} + +.object-contain{ + -o-object-fit: contain; + object-fit: contain; +} + +.p-0{ + padding: 0px; +} + +.p-0\.5{ + padding: 0.125rem; +} + +.p-1{ + padding: 0.25rem; +} + +.p-1\.5{ + padding: 0.375rem; +} + +.p-2{ + padding: 0.5rem; +} + +.p-3{ + padding: 0.75rem; +} + +.p-4{ + padding: 1rem; +} + +.p-6{ + padding: 1.5rem; +} + +.\!px-10{ + padding-left: 2.5rem !important; + padding-right: 2.5rem !important; +} + +.px-1{ + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.px-1\.5{ + padding-left: 0.375rem; + padding-right: 0.375rem; +} + +.px-2{ + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-3{ + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-4{ + padding-left: 1rem; + padding-right: 1rem; +} + +.px-6{ + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-\[0\.75rem\]{ + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.py-0{ + padding-top: 0px; + padding-bottom: 0px; +} + +.py-0\.5{ + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.py-1{ + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-1\.5{ + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-10{ + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} + +.py-2{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-3{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.py-4{ + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-6{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.py-\[0\.5rem\]{ + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.pb-0{ + padding-bottom: 0px; +} + +.pb-0\.5{ + padding-bottom: 0.125rem; +} + +.pb-4{ + padding-bottom: 1rem; +} + +.pb-8{ + padding-bottom: 2rem; +} + +.pt-0{ + padding-top: 0px; +} + +.pt-0\.5{ + padding-top: 0.125rem; +} + +.pt-2{ + padding-top: 0.5rem; +} + +.pt-20{ + padding-top: 5rem; +} + +.text-left{ + text-align: left; +} + +.text-center{ + text-align: center; +} + +.text-right{ + text-align: right; +} + +.align-top{ + vertical-align: top; +} + +.align-middle{ + vertical-align: middle; +} + +.align-bottom{ + vertical-align: bottom; +} + +.align-text-bottom{ + vertical-align: text-bottom; +} + +.font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.font-sans{ + font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.text-2xl{ + font-size: 1.5rem; + line-height: 2rem; +} + +.text-3xl{ + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-\[16px\]{ + font-size: 16px; +} + +.text-base{ + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg{ + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm{ + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xl{ + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs{ + font-size: 0.75rem; + line-height: 1rem; +} + +.font-bold{ + font-weight: 700; +} + +.font-medium{ + font-weight: 500; +} + +.font-normal{ + font-weight: 400; +} + +.font-semibold{ + font-weight: 600; +} + +.capitalize{ + text-transform: capitalize; +} + +.italic{ + font-style: italic; +} + +.leading-5{ + line-height: 1.25rem; +} + +.leading-6{ + line-height: 1.5rem; +} + +.leading-\[0\]{ + line-height: 0; +} + +.leading-none{ + line-height: 1; +} + +.text-black{ + --tw-text-opacity: 1; + color: rgb(34 34 34 / var(--tw-text-opacity)); +} + +.text-blue{ + --tw-text-opacity: 1; + color: rgb(37 84 177 / var(--tw-text-opacity)); +} + +.text-forest{ + --tw-text-opacity: 1; + color: rgb(9 103 86 / var(--tw-text-opacity)); +} + +.text-gray-500{ + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); +} + +.text-gray-600{ + --tw-text-opacity: 1; + color: rgb(97 97 97 / var(--tw-text-opacity)); +} + +.text-gray-700{ + --tw-text-opacity: 1; + color: rgb(74 74 74 / var(--tw-text-opacity)); +} + +.text-gray-800{ + --tw-text-opacity: 1; + color: rgb(51 51 51 / var(--tw-text-opacity)); +} + +.text-gray-900{ + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.text-orange{ + --tw-text-opacity: 1; + color: rgb(246 128 80 / var(--tw-text-opacity)); +} + +.text-red-300{ + --tw-text-opacity: 1; + color: rgb(234 137 128 / var(--tw-text-opacity)); +} + +.text-red-400{ + --tw-text-opacity: 1; + color: rgb(227 96 84 / var(--tw-text-opacity)); +} + +.text-red-500{ + --tw-text-opacity: 1; + color: rgb(220 55 40 / var(--tw-text-opacity)); +} + +.text-solidus-red{ + --tw-text-opacity: 1; + color: rgb(239 48 35 / var(--tw-text-opacity)); +} + +.text-white{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.underline{ + text-decoration-line: underline; +} + +.overline{ + text-decoration-line: overline; +} + +.opacity-0{ + opacity: 0; +} + +.shadow{ + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-base{ + --tw-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04); + --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color), 0px 2px 4px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-lg{ + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-sm{ + --tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04); + --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl{ + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.outline-none{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.ring-1{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-black{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 34 34 / var(--tw-ring-opacity)); +} + +.ring-opacity-5{ + --tw-ring-opacity: 0.05; +} + +.filter{ + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.transition{ + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-all{ + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-500{ + transition-duration: 500ms; +} + +.placeholder\:text-gray-400::-moz-placeholder{ + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.placeholder\:text-gray-400::placeholder{ + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.before\:absolute::before{ + content: var(--tw-content); + position: absolute; +} + +.before\:bottom-0::before{ + content: var(--tw-content); + bottom: 0px; +} + +.before\:left-1\/2::before{ + content: var(--tw-content); + left: 50%; +} + +.before\:top-0::before{ + content: var(--tw-content); + top: 0px; +} + +.before\:h-\[0\.375rem\]::before{ + content: var(--tw-content); + height: 0.375rem; +} + +.before\:w-\[0\.375rem\]::before{ + content: var(--tw-content); + width: 0.375rem; +} + +.before\:translate-x-\[-50\%\]::before{ + content: var(--tw-content); + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.before\:translate-y-\[-50\%\]::before{ + content: var(--tw-content); + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.before\:translate-y-\[50\%\]::before{ + content: var(--tw-content); + --tw-translate-y: 50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.before\:rotate-45::before{ + content: var(--tw-content); + --tw-rotate: 45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.before\:bg-inherit::before{ + content: var(--tw-content); + background-color: inherit; +} + +.after\:left-0::after{ + content: var(--tw-content); + left: 0px; +} + +.after\:top-0::after{ + content: var(--tw-content); + top: 0px; +} + +.after\:block::after{ + content: var(--tw-content); + display: block; +} + +.after\:h-4::after{ + content: var(--tw-content); + height: 1rem; +} + +.after\:h-5::after{ + content: var(--tw-content); + height: 1.25rem; +} + +.after\:w-4::after{ + content: var(--tw-content); + width: 1rem; +} + +.after\:w-5::after{ + content: var(--tw-content); + width: 1.25rem; +} + +.after\:rounded-full::after{ + content: var(--tw-content); + border-radius: 9999px; +} + +.after\:bg-white::after{ + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.after\:transition-all::after{ + content: var(--tw-content); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.after\:duration-300::after{ + content: var(--tw-content); + transition-duration: 300ms; +} + +.after\:ease-in-out::after{ + content: var(--tw-content); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.after\:content-\[\'\'\]::after{ + --tw-content: ''; + content: var(--tw-content); +} + +.last\:border-0:last-child{ + border-width: 0px; +} + +.first-of-type\:border-t-0:first-of-type{ + border-top-width: 0px; +} + +.checked\:border-gray-700:checked{ + --tw-border-opacity: 1; + border-color: rgb(74 74 74 / var(--tw-border-opacity)); +} + +.checked\:bg-gray-500:checked{ + --tw-bg-opacity: 1; + background-color: rgb(115 115 115 / var(--tw-bg-opacity)); +} + +.checked\:bg-gray-700:checked{ + --tw-bg-opacity: 1; + background-color: rgb(74 74 74 / var(--tw-bg-opacity)); +} + +.checked\:text-white:checked{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.after\:checked\:translate-x-3:checked::after{ + content: var(--tw-content); + --tw-translate-x: 0.75rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.after\:checked\:translate-x-4:checked::after{ + content: var(--tw-content); + --tw-translate-x: 1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.indeterminate\:border-gray-700:indeterminate{ + --tw-border-opacity: 1; + border-color: rgb(74 74 74 / var(--tw-border-opacity)); +} + +.indeterminate\:bg-gray-700:indeterminate{ + --tw-bg-opacity: 1; + background-color: rgb(74 74 74 / var(--tw-bg-opacity)); +} + +.indeterminate\:text-white:indeterminate{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.invalid\:border-red-400:invalid{ + --tw-border-opacity: 1; + border-color: rgb(227 96 84 / var(--tw-border-opacity)); +} + +.invalid\:bg-arrow-down-s-fill-red-400:invalid{ + background-image: url('solidus_admin/arrow_down_s_fill_red_400.svg'); +} + +.invalid\:text-red-400:invalid{ + --tw-text-opacity: 1; + color: rgb(227 96 84 / var(--tw-text-opacity)); +} + +.read-only\:cursor-not-allowed:-moz-read-only{ + cursor: not-allowed; +} + +.read-only\:cursor-not-allowed:read-only{ + cursor: not-allowed; +} + +.read-only\:bg-gray-15:-moz-read-only{ + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + +.read-only\:bg-gray-15:read-only{ + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + +.hover\:border-gray-500:hover{ + --tw-border-opacity: 1; + border-color: rgb(115 115 115 / var(--tw-border-opacity)); +} + +.hover\:border-gray-700:hover{ + --tw-border-opacity: 1; + border-color: rgb(74 74 74 / var(--tw-border-opacity)); +} + +.hover\:border-red-600:hover{ + --tw-border-opacity: 1; + border-color: rgb(177 44 32 / var(--tw-border-opacity)); +} + +.hover\:bg-gray-25:hover{ + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-300:hover{ + --tw-bg-opacity: 1; + background-color: rgb(186 186 186 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-50:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.hover\:bg-gray-600:hover{ + --tw-bg-opacity: 1; + background-color: rgb(97 97 97 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-500:hover{ + --tw-bg-opacity: 1; + background-color: rgb(220 55 40 / var(--tw-bg-opacity)); +} + +.hover\:fill-gray-500:hover{ + fill: #737373; +} + +.hover\:text-black:hover{ + --tw-text-opacity: 1; + color: rgb(34 34 34 / var(--tw-text-opacity)); +} + +.hover\:text-gray-700:hover{ + --tw-text-opacity: 1; + color: rgb(74 74 74 / var(--tw-text-opacity)); +} + +.hover\:text-red-500:hover{ + --tw-text-opacity: 1; + color: rgb(220 55 40 / var(--tw-text-opacity)); +} + +.hover\:text-white:hover{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hover\:underline:hover{ + text-decoration-line: underline; +} + +.checked\:hover\:border-gray-500:hover:checked{ + --tw-border-opacity: 1; + border-color: rgb(115 115 115 / var(--tw-border-opacity)); +} + +.checked\:hover\:bg-gray-500:hover:checked{ + --tw-bg-opacity: 1; + background-color: rgb(115 115 115 / var(--tw-bg-opacity)); +} + +.indeterminate\:hover\:border-gray-500:hover:indeterminate{ + --tw-border-opacity: 1; + border-color: rgb(115 115 115 / var(--tw-border-opacity)); +} + +.indeterminate\:hover\:bg-gray-500:hover:indeterminate{ + --tw-bg-opacity: 1; + background-color: rgb(115 115 115 / var(--tw-bg-opacity)); +} + +.invalid\:hover\:border-red-400:hover:invalid{ + --tw-border-opacity: 1; + border-color: rgb(227 96 84 / var(--tw-border-opacity)); +} + +.read-only\:hover\:border-gray-300:hover:-moz-read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.read-only\:hover\:border-gray-300:hover:read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.focus\:not-sr-only:focus{ + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; +} + +.focus\:absolute:focus{ + position: absolute; +} + +.focus\:border-indigo-500:focus{ + --tw-border-opacity: 1; + border-color: rgb(99 102 241 / var(--tw-border-opacity)); +} + +.focus\:border-red-600:focus{ + --tw-border-opacity: 1; + border-color: rgb(177 44 32 / var(--tw-border-opacity)); +} + +.focus\:bg-gray-25:focus{ + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +.focus\:bg-gray-50:focus{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.focus\:bg-gray-700:focus{ + --tw-bg-opacity: 1; + background-color: rgb(74 74 74 / var(--tw-bg-opacity)); +} + +.focus\:bg-red-50:focus{ + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity)); +} + +.focus\:bg-red-500:focus{ + --tw-bg-opacity: 1; + background-color: rgb(220 55 40 / var(--tw-bg-opacity)); +} + +.focus\:bg-white:focus{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.focus\:p-2:focus{ + padding: 0.5rem; +} + +.focus\:text-gray-700:focus{ + --tw-text-opacity: 1; + color: rgb(74 74 74 / var(--tw-text-opacity)); +} + +.focus\:text-white:focus{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.focus\:outline-none:focus{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-0:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-2:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-gray-300:focus{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(186 186 186 / var(--tw-ring-opacity)); +} + +.focus\:ring-indigo-500:focus{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); +} + +.focus\:ring-offset-0:focus{ + --tw-ring-offset-width: 0px; +} + +.focus\:ring-offset-1:focus{ + --tw-ring-offset-width: 1px; +} + +.focus\:ring-offset-2:focus{ + --tw-ring-offset-width: 2px; +} + +.focus\:ring-offset-gray-100:focus{ + --tw-ring-offset-color: #dedede; +} + +.checked\:focus\:bg-gray-700:focus:checked{ + --tw-bg-opacity: 1; + background-color: rgb(74 74 74 / var(--tw-bg-opacity)); +} + +.indeterminate\:focus\:bg-gray-700:focus:indeterminate{ + --tw-bg-opacity: 1; + background-color: rgb(74 74 74 / var(--tw-bg-opacity)); +} + +.read-only\:focus\:border-gray-300:focus:-moz-read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.read-only\:focus\:border-gray-300:focus:read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.focus\:-moz-read-only\:bg-gray-15:-moz-read-only:focus{ + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + +.focus\:read-only\:bg-gray-15:read-only:focus{ + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + +.focus\:-moz-read-only\:ring-0:-moz-read-only:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:read-only\:ring-0:read-only:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.read-only\:hover\:focus\:border-gray-300:focus:hover:-moz-read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.read-only\:hover\:focus\:border-gray-300:focus:hover:read-only{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.active\:border-red-700:active{ + --tw-border-opacity: 1; + border-color: rgb(134 34 25 / var(--tw-border-opacity)); +} + +.active\:bg-gray-100:active{ + --tw-bg-opacity: 1; + background-color: rgb(222 222 222 / var(--tw-bg-opacity)); +} + +.active\:bg-gray-800:active{ + --tw-bg-opacity: 1; + background-color: rgb(51 51 51 / var(--tw-bg-opacity)); +} + +.active\:bg-red-600:active{ + --tw-bg-opacity: 1; + background-color: rgb(177 44 32 / var(--tw-bg-opacity)); +} + +.active\:text-black:active{ + --tw-text-opacity: 1; + color: rgb(34 34 34 / var(--tw-text-opacity)); +} + +.active\:text-white:active{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.active\:ring:active{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.active\:ring-0:active{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.active\:ring-gray-300:active{ + --tw-ring-opacity: 1; + --tw-ring-color: rgb(186 186 186 / var(--tw-ring-opacity)); +} + +.active\:ring-offset-1:active{ + --tw-ring-offset-width: 1px; +} + +.disabled\:cursor-not-allowed:disabled{ + cursor: not-allowed; +} + +.disabled\:border-gray-300:disabled{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.disabled\:border-red-200:disabled{ + --tw-border-opacity: 1; + border-color: rgb(241 173 167 / var(--tw-border-opacity)); +} + +.disabled\:bg-gray-100:disabled{ + --tw-bg-opacity: 1; + background-color: rgb(222 222 222 / var(--tw-bg-opacity)); +} + +.disabled\:bg-gray-50:disabled{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.disabled\:bg-transparent:disabled{ + background-color: transparent; +} + +.disabled\:bg-white:disabled{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.disabled\:text-gray-300:disabled{ + --tw-text-opacity: 1; + color: rgb(186 186 186 / var(--tw-text-opacity)); +} + +.disabled\:text-gray-400:disabled{ + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.disabled\:text-gray-500:disabled{ + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); +} + +.disabled\:text-red-300:disabled{ + --tw-text-opacity: 1; + color: rgb(234 137 128 / var(--tw-text-opacity)); +} + +.disabled\:opacity-40:disabled{ + opacity: 0.4; +} + +.disabled\:placeholder\:text-gray-300:disabled::-moz-placeholder{ + --tw-text-opacity: 1; + color: rgb(186 186 186 / var(--tw-text-opacity)); +} + +.disabled\:placeholder\:text-gray-300:disabled::placeholder{ + --tw-text-opacity: 1; + color: rgb(186 186 186 / var(--tw-text-opacity)); +} + +.checked\:disabled\:border-gray-300:disabled:checked{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.checked\:disabled\:bg-gray-300:disabled:checked{ + --tw-bg-opacity: 1; + background-color: rgb(186 186 186 / var(--tw-bg-opacity)); +} + +.indeterminate\:disabled\:border-gray-300:disabled:indeterminate{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.indeterminate\:disabled\:bg-gray-300:disabled:indeterminate{ + --tw-bg-opacity: 1; + background-color: rgb(186 186 186 / var(--tw-bg-opacity)); +} + +.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:hidden{ + display: none; +} + +.peer:placeholder-shown ~ .peer-placeholder-shown\:hidden{ + display: none; +} + +.aria-disabled\:border-gray-300[aria-disabled="true"]{ + --tw-border-opacity: 1; + border-color: rgb(186 186 186 / var(--tw-border-opacity)); +} + +.aria-disabled\:border-red-200[aria-disabled="true"]{ + --tw-border-opacity: 1; + border-color: rgb(241 173 167 / var(--tw-border-opacity)); +} + +.aria-disabled\:bg-gray-100[aria-disabled="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(222 222 222 / var(--tw-bg-opacity)); +} + +.aria-disabled\:bg-transparent[aria-disabled="true"]{ + background-color: transparent; +} + +.aria-disabled\:bg-white[aria-disabled="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.aria-disabled\:text-gray-300[aria-disabled="true"]{ + --tw-text-opacity: 1; + color: rgb(186 186 186 / var(--tw-text-opacity)); +} + +.aria-disabled\:text-gray-400[aria-disabled="true"]{ + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); +} + +.aria-disabled\:text-red-300[aria-disabled="true"]{ + --tw-text-opacity: 1; + color: rgb(234 137 128 / var(--tw-text-opacity)); +} + +.aria-selected\:bg-gray-25[aria-selected="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +.aria-current\:border-red-700[aria-current="true"]{ + --tw-border-opacity: 1; + border-color: rgb(134 34 25 / var(--tw-border-opacity)); +} + +.aria-current\:bg-gray-100[aria-current="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(222 222 222 / var(--tw-bg-opacity)); +} + +.aria-current\:bg-gray-50[aria-current="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.aria-current\:bg-gray-800[aria-current="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(51 51 51 / var(--tw-bg-opacity)); +} + +.aria-current\:bg-red-600[aria-current="true"]{ + --tw-bg-opacity: 1; + background-color: rgb(177 44 32 / var(--tw-bg-opacity)); +} + +.aria-current\:text-black[aria-current="true"]{ + --tw-text-opacity: 1; + color: rgb(34 34 34 / var(--tw-text-opacity)); +} + +.aria-current\:text-white[aria-current="true"]{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hidden\:hidden{ + display: none; +} + +.visible\:flex:not([hidden]){ + display: flex; +} + +.search-cancel\:appearance-none::-webkit-search-cancel-button{ + -webkit-appearance: none; + appearance: none; +} + +@media (prefers-color-scheme: dark){ + .dark\:flex{ + display: flex; + } + + .dark\:hidden{ + display: none; + } +} + +.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{ + display: none; +} + +.\[\&\:\:marker\]\:hidden::marker{ + display: none; +} + +.\[\&\:focus-visible\]\:outline-none:focus-visible{ + outline: 2px solid transparent; + outline-offset: 2px; +} + +.\[\&\>\*\:hover\]\:bg-gray-50>*:hover{ + --tw-bg-opacity: 1; + background-color: rgb(240 240 240 / var(--tw-bg-opacity)); +} + +.\[\&\>\*\]\:min-w-fit>*{ + min-width: -moz-fit-content; + min-width: fit-content; +} + +.\[\&\>\*\]\:rounded-sm>*{ + border-radius: 4px; +} + +.\[\&\>\*\]\:p-2>*{ + padding: 0.5rem; +} + +.\[\&\>\*\]\:text-black>*{ + --tw-text-opacity: 1; + color: rgb(34 34 34 / var(--tw-text-opacity)); +} + +:disabled~.\[\:disabled\~\&\]\:text-gray-300{ + --tw-text-opacity: 1; + color: rgb(186 186 186 / var(--tw-text-opacity)); +} + +[open] .\[\[open\]_\&\]\:fill-gray-500{ + fill: #737373; +} + +[open] > .\[\[open\]_\>_\&\]\:bg-gray-25{ + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +tr:last-child .\[tr\:last-child_\&\:first-child\]\:rounded-bl-lg:first-child{ + border-bottom-left-radius: 0.5rem; +} + +tr:last-child .\[tr\:last-child_\&\:last-child\]\:rounded-br-lg:last-child{ + border-bottom-right-radius: 0.5rem; +} diff --git a/admin/app/components/solidus_admin/layout/navigation/component.rb b/admin/app/components/solidus_admin/layout/navigation/component.rb index d1945e48570..aa39629eb28 100644 --- a/admin/app/components/solidus_admin/layout/navigation/component.rb +++ b/admin/app/components/solidus_admin/layout/navigation/component.rb @@ -9,8 +9,8 @@ def initialize( ) @logo_path = logo_path @items = items.map do |attrs| - children = attrs[:children].to_a.map { SolidusAdmin::MainNavItem.new(**_1, top_level: false) } - SolidusAdmin::MainNavItem.new(**attrs, children: children, top_level: true) + children = attrs[:children].to_a.map { SolidusAdmin::MenuItem.new(**_1, top_level: false) } + SolidusAdmin::MenuItem.new(**attrs, children: children, top_level: true) end @store = store end diff --git a/admin/app/components/solidus_admin/layout/navigation/item/component.rb b/admin/app/components/solidus_admin/layout/navigation/item/component.rb index 7a0a4443c50..17ac8a62f74 100644 --- a/admin/app/components/solidus_admin/layout/navigation/item/component.rb +++ b/admin/app/components/solidus_admin/layout/navigation/item/component.rb @@ -4,7 +4,7 @@ class SolidusAdmin::Layout::Navigation::Item::Component < SolidusAdmin::BaseComponent with_collection_parameter :item - # @param item [SolidusAdmin::MainNavItem] + # @param item [SolidusAdmin::MenuItem] # @param fullpath [String] the current path # @param url_helpers [#solidus_admin, #spree] context for generating paths def initialize( diff --git a/admin/config/locales/main_nav.en.yml b/admin/config/locales/menu_item.en.yml similarity index 95% rename from admin/config/locales/main_nav.en.yml rename to admin/config/locales/menu_item.en.yml index 6349c086e41..4fd38dbeb5c 100644 --- a/admin/config/locales/main_nav.en.yml +++ b/admin/config/locales/menu_item.en.yml @@ -1,6 +1,6 @@ en: solidus_admin: - main_nav: + menu_item: orders: Orders products: Products option_types: Option Types diff --git a/admin/docs/customizing_main_navigation.md b/admin/docs/customizing_menu_items.md similarity index 91% rename from admin/docs/customizing_main_navigation.md rename to admin/docs/customizing_menu_items.md index 47a12e124cf..64cb3b384ec 100644 --- a/admin/docs/customizing_main_navigation.md +++ b/admin/docs/customizing_menu_items.md @@ -1,6 +1,6 @@ # Customizing the main navigation -You are allowed to add your custom links to the main navigation. To do so, you can access `SolidusAdmin::Config.main_nav` in an initializer: +You are allowed to add your custom links to the main navigation. To do so, you can access `SolidusAdmin::Config.menu_items` in an initializer: ```ruby # config/initializers/solidus_admin.rb @@ -13,7 +13,7 @@ SolidusAdmin::Config.menu_items << { ``` - The key you provide will be used to translate the link's label under the -`solidus_admin.main_nav.#{key}` key. +`solidus_admin.menu_item.#{key}` key. - Icon needs to be an icon name from [Remixicon](https://remixicon.com/). - Position tells Solidus where to place the link in the main navigation. The default items are placed with 10 points of difference between them. diff --git a/admin/docs/customizing_view_components.md b/admin/docs/customizing_view_components.md index 9b80970dc22..ea468d64ed2 100644 --- a/admin/docs/customizing_view_components.md +++ b/admin/docs/customizing_view_components.md @@ -11,18 +11,12 @@ All the components Solidus Admin uses are located in the [`app/components`](../a - They are grouped in sidecar directories, where the main component file and all its related files (assets, i18n files, etc.) live together. -For instance, the component for the main navigation is located in -[`app/components/solidus_admin/main_nav/component.rb`](../app/components/solidus_admin/main_nav/component.rb). - Solidus Admin components are designed to be easily customizable by the host application. Because of that, if you look at how they are designed, you'll find a series of patterns are followed consistently: - Components are always resolved from a global registry in - `SolidusAdmin::Config.components` instead of being referenced by their constant. For - example, we call `component('main_nav')` instead of referencing - `SolidusAdmin::MainNav::Component` directly. As you'll see later, this makes - it easy to replace or tweak a component. + `SolidusAdmin::Config.components` instead of being referenced by their constant. - It's possible to override the registry locally inside a component by redefining the `#component` method. This is useful when you need to use a component that is not registered in the global registry or need to address some edge case. @@ -55,9 +49,9 @@ end Some of the customizations detailed below require you to match Solidus Admin's component paths in your application. For instance, if we talk about the component in `solidus_admin` gem's -`app/components/solidus_admin/main_nav/component.rb`, the matching path in your +`app/components/solidus_admin/menu_item/component.rb`, the matching path in your application would be -`app/components/my_application/solidus_admin/main_nav/component.rb`, where +`app/components/my_application/solidus_admin/menu_item/component.rb`, where `my_application` is the underscored name of your application (you can get it by running `Rails.application.class.module_parent_name`). @@ -68,19 +62,15 @@ component. You can do that by creating a new component with a maching path in your application, inheriting from the default one. Then, you can create a new template for it. For example, to replace the main nav template: -```erb -# app/components/my_application/solidus_admin/main_nav/component.rb %> -class MyApplication::SolidusAdmin::MainNav::Component < ::SolidusAdmin::MainNav::Component +```rb +# app/components/my_application/solidus_admin/menu_item/component.rb %> +class MyAdmin::Navigation::Item::Component < ::SolidusAdmin::SolidusAdmin::Layout::Navigation::Item::Component end +``` -<%# app/components/my_application/solidus_admin/main_nav/component.html.erb %> - +```erb +<%# app/components/my_admin/navigation/item/component.html.erb %> +