Quick Order Component CSS

[Nick]

jpatrickm Here is documentation on how to add custom CSS to flex components: https://docs.miva.com/developer/deve.../flex-styling/

Since the default flex components are built using HTML Web Components and the Shadow DOM you have limited control over the CSS. Using the mmx-customizations CSS resource you can update any of the CSS variables located in the mmx-base.css resource: https://github.com/mivaecommerce/fle...s/mmx-base.css

You also have the ability to use the ::part() selector to allow for further CSS customization: https://github.com/mivaecommerce/fle...s/mmx-base.css

[jpatrickm]

Ok, maybe we're just seeing other conflicting styles. What's the recommended way to override the input style without uploading our own custom component? It doesn't seem to be respecting the mmx-customizations module.

[Nick]

jpatrickm The CSS that you are seeing is rendered in the Shadow Dom and does not leak out to the main document. When you inspect element on another input that is not inside of the Shadow DOM are you seen the same CSS present?

Can you DM the link so I can help troubleshoot?

[jpatrickm]

On your default setup (https://shadows.mivareadythemes.com/flex-components) the quick order form does show the same thing I'm talking about. If you inspect the source of one of the "Search for a product..." input fields, it shows the input CSS definition that I'm referring to.

[Nick]

jpatrickm

Our team has not seen that issue before and we are not seeing that issue on our default setup (ex https://shadows.mivareadythemes.com/flex-components)

The css:mmx-quick-order resource is being output within a <template> (https://github.com/mivaecommerce/sha...s/init.mvt#L19) which makes the <link> tag get treated as text, not HTML, so the rest of the page does not get the styles.

Can you provide a URL or describe any customizations?

[jpatrickm]

We noticed that the CSS that loads in the mmx-quick-order resource includes this definition, which does not include any other selector and so it takes over all input fields on the page. It also loads last with the json resource so it can't be overridden. How can we override this?

input,
textarea {
appearance: none;
background-color: var(--mmx-color-white);
border-radius: var(--mmx-spacing-xs);
border: 1px solid var(--mmx-color-grey-02);
display: inline-block;
font-family: inherit;
font-size: 0.8125rem;
line-height: 1;
padding: calc(1.35em - 1px) calc(1.7em - 1px);
width: 100%;
height: var(--mmx-quick-order-input-height);
}