1
mirror of https://github.com/pure-css/pure synced 2024-11-22 05:32:20 +01:00

Add [hidden] selector to Base to counteract all display declarations

Anytime a Pure style rule uses the `display` declaration with a value
other than `none`, using the `hidden` HTML attribute on that element
won't have the desired affect of hiding that element. To counteract
this, A new rule has been added to Base to force
`display: none !important;` on elements that use the `hidden` HTML
attribute.

The following button will be hidden from view with these changes:

    <button class="pure-button" hidden>No showy</button>

Fixes #177
This commit is contained in:
Eric Ferraiuolo 2013-12-07 15:40:32 -05:00
parent 7b884f71f8
commit ba39a319f3
2 changed files with 20 additions and 2 deletions

View File

@ -6,8 +6,17 @@ NEXT
### Base
* The `body` selector in the `base-context` module is now replaced with `.pure`,
like the `html` selector.
* Elements that have Pure classnames which set a `display` declaration _and_ use
the `hidden` HTML attribute will now properly be hidden. With these changes,
the following button will be hidden from view:
```html
<button class="pure-button" hidden>No showy</button>
```
A new rule for the `[hidden]` selector has been added with the declaration:
`display: none !important;`. This is a time where it's appropriate for a
project like Pure to use `!important`. ([#177][])
### Buttons
@ -47,6 +56,7 @@ NEXT
[#144]: https://github.com/yui/pure/issues/144
[#164]: https://github.com/yui/pure/issues/164
[#174]: https://github.com/yui/pure/issues/174
[#177]: https://github.com/yui/pure/issues/177
[#191]: https://github.com/yui/pure/issues/191
[#200]: https://github.com/yui/pure/issues/200
[#221]: https://github.com/yui/pure/issues/221

View File

@ -7,3 +7,11 @@
/**
* Extra rules that Pure adds on top of Normalize.css
*/
/**
* Always hide an element when it has the `hidden` HTML attribute.
*/
[hidden] {
display: none !important;
}