Options in style that depends on another options

Vitalii Koreiev

My propose:
Make possible to create options that depends on value in another option in style.

For example:
I have an option, such as "fixed menu" and "Design":
depends on value of "Design" in "fixed menu" I set a margin-top 46px or 56px.

At now it's real only if I create two different options of "fixed menu" for two different values of "Design".
Please, help me in my problem.

hideheader

If you want these options

     Design:   [short, tall]
 fixed menu:   [yes, no]

to set these property values

margin-top: 46px;   /* short, yes */
margin-top: 56px;   /* tall, yes */
/* no change */     /* short, no */
/* no change */     /* tall, no */

then add the property value as a CSS variable in the "Design" code

    /* "Design" options */
/* option="short" code */
  body { --fixed-margin: 46px; }

/* option="tall" code */
  body { --fixed-margin: 56px; }

and add the property definition in the "fixed menu" code

    /* "fixed menu" options */
/* option="yes" */
  margin-top: var(--fixed-margin);

/* option="no" */
  /* nothing, empty */

Or do you want something else?

Jefferson

Here's an example of one user style with nested options. Since bits were added here and there over time if you find it a bit overly complex and convoluted, it probably is.

For: https://userstyles.org/styles/122394/url-bar-tweaks-remove-visit-search-limit-width

Vitalii Koreiev

hideheader said:

If you want these options

     Design:   [short, tall]
 fixed menu:   [yes, no]

to set these property values

margin-top: 46px;   /* short, yes */
margin-top: 56px;   /* tall, yes */
/* no change */     /* short, no */
/* no change */     /* tall, no */

then add the property value as a CSS variable in the "Design" code

    /* "Design" options */
/* option="short" code */
  body { --fixed-margin: 46px; }

/* option="tall" code */
  body { --fixed-margin: 56px; }

and add the property definition in the "fixed menu" code

    /* "fixed menu" options */
/* option="yes" */
  margin-top: var(--fixed-margin);

/* option="no" */
  /* nothing, empty */

Or do you want something else?

Thank you!)

Vitalii Koreiev

Jefferson said:

Here's an example of one user style with nested options. Since bits were added here and there over time if you find it a bit overly complex and convoluted, it probably is.

For: https://userstyles.org/styles/122394/url-bar-tweaks-remove-visit-search-limit-width

Thank you for example)