MMM options widely accept CSS variables to sync with Block Theme Style / Presets

  • Resolved abitofmind

    (@abitofmind)


    1 year, 8 months ago

    Proposal: It would be cool if most MMM customization fields (colors, dimensions) would accept CSS variables.

    Advantages: Keep the menu style in sync with the block theme and its presets/customizations and reduce the maintenance/adaptation effort drastically. Very quickly try out or switch between block-themes or preset-styles of a block theme and MMM visually adapts in an instant!

    1. Dimensions: For Menu Padding Top, I’d like to set var(--wp--style--root--padding-top) and in the theme styles --wp--style--root--padding-top can point either to a preset variable like --wp--preset--spacing--40 or a customized value like 4px. Whenever I change the theme paddings, MMM adapts instantly.
    2. Colors: If a theme has color variables like --color-menu or --color-menu-subitem which are 100% intended to be used for menus or variables like --color-primary or --color-secondary or --color-primary-opposite which are also more/less suited, then again MMM fits into the theme’s color scheme in an instant!
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi,

    You can sort of do this in the Custom Styling tab. In there you can override the CSS rules and use a var option instead. Whilst its an interesting idea, I’m sorry but I don’t intend on adding the ability to use var options directly to the settings.

    Regards,
    Tom

    Thread Starter abitofmind

    (@abitofmind)

    Thanks for the info that

    1. you plan to keep the input fields validations strict.
    2. but that the Custom Styling tab can be used as a means to override MMM’s class-names and attributes with arbitrary values, also CSS variables.

    I now have a proposal to make the best of both!
    In the future MMM’s option fields could look like this:

    Styling Option Name: [  20px  ] (i)

    • When you hover over the (i) action button there’s a tooltip with the proper CSS code (element/classname, whatever your use, plus the corresponding CSS attribute, plus the current value from the input field) and next to the code snippet a “Copy to clipboard button”. Looking like this:
    ← .mega-menu-item: { corresponding-css-attr: 20px;} [ COPY ]

    Behavior:

    • Moving away on a pointer device or clicking anywhere else on a touch device closes the tooltip.
    • Clicking the (i) button again or clicking the explicit “Copy to clipboard button” inside the tooltip, throws a toast message (which disappears after 4secs):

      CSS code was copied to clipboard!
      You may use it in the: Custom Styling tab
    • This reply was modified 1 year, 8 months ago by abitofmind.
    • This reply was modified 1 year, 8 months ago by abitofmind.
    • This reply was modified 1 year, 8 months ago by abitofmind.
    Plugin Author megamenu

    (@megamenu)

    Hi,

    That is correct, and thank you for the suggestion, I will give it some thought.

    Regards,
    Tom

    Thread Starter abitofmind

    (@abitofmind)

    ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘MMM options widely accept CSS variables to sync with Block Theme Style / Presets’ is closed to new replies.