Announcement

Collapse
No announcement yet.

Quick Order Component CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Nick
    replied
    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

    Leave a comment:


  • jpatrickm
    replied
    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.

    Leave a comment:


  • Nick
    replied
    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?

    Leave a comment:


  • jpatrickm
    replied
    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.

    Leave a comment:


  • Nick
    replied
    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?

    Leave a comment:


  • jpatrickm
    started a topic Quick Order Component CSS

    Quick Order Component CSS

    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?

    Code:
    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);
    }
Working...
X