Enable a Style.less rule only while a plugin is running

[Sparklester]

Hey everyone,

I have been trying to hide all the scrollbars only while in the Zen-plus mode of the Zen-plus package. This mode is entered after a combination of keys is pressed.

Adding these lines to my Stylesheet file hides them effectively:

atom-text-editor[with-minimap] .vertical-scrollbar {
display: none;
}

However, I want this to rule to be applied on condition that the Zen-plus mode is enabled. There has to be a way, since I also use this as suggested by the minimap package documentation to hide the editor’s scrollbar while the minimap is enabled:

atom-text-editor[with-minimap] .vertical-scrollbar {
display: none;
}

How can I find a similar rule to [with-minimap] but for the Zen-plus package?

Thank you!

[idleberg]

Zen-mode is active, Zen Plus adds the data-attribute data-zen-plus="true"to the body tag, Have you tried wrapping your style-changes within that CSS selector?

Example:

body[data-zen-plus="true"] {
  atom-text-editor[with-minimap] .vertical-scrollbar {
    display: none;
  }
}

[Sparklester]

My bad, I meant to say this in my first block of code:

.scrollbars-visible-always {
  /deep/ ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}

Which hides all the scrollbars. Applying your data-attribute worked with this one as well. Thank you for the help!
Also do you mind if I ask you where I can find such data-attribute names?

[idleberg]

Since Atom is built on top of Chrome, it shares the same developer tools. This allows you to use the inspector you might already know from any web browser.

Further reading: Debugging

[Sparklester]

Great! Thank you!