Options in style that depends on another options

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.

Comments

  • edited November 2016 Firefox
    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?
  • edited December 2016 Firefox
    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
  • 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!)
  • 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)
Sign In or Register to comment.