Replace display:none with .hidden

[craigloftus]

The main reason I'm suggesting this change is to better facilitate using RecurrenceWidget with a style reset (e.g., cleanslatecss) to get around collisions with other stylesheets.

[dominicrodger]

Seems reasonable to me - but I'm curious, what collisions would the current approach (i.e. effectively inline styles) cause?

[craigloftus]

The style reset uses !important rules to set (among other things):

div {
  display: block !important;
}

Then to get the widget css to work again you set all those rules to also be !important to override the reset styles. I do that using less to process the original stylesheet:

#makeRecurrenceImportant() {
    @import (less) "recurrence.css";
}

& {
    #makeRecurrenceImportant() !important;
}

But that does not effect any inline styles.

Also, everyone knows classes are better than inline styles ;)

[dominicrodger]

That seems pretty crazy to me - doesn't that mean having !important all over the place?

Regardless - this seems like a reasonable change, and you are of course right that classes are better than inline styles, so I'm happy for this to go in.

[craigloftus]

It is slightly crazy, but the !important rules of the reset and widget are restricted by containing classes which I didn't include in the example for simplicity.

Unfortunately atm I am stuck between this crazy approach and re-implementing the recurrence widget... which seems ever so slightly more crazy for what is not a large project.