From ba39a319f38346fbbe401316be9202d7face6946 Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Sat, 7 Dec 2013 15:40:32 -0500 Subject: [PATCH] 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: Fixes #177 --- HISTORY.md | 14 ++++++++++++-- src/base/css/base.css | 8 ++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 611eea6..b28ce12 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -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 + + ``` + + 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 diff --git a/src/base/css/base.css b/src/base/css/base.css index 92980eb..076058d 100644 --- a/src/base/css/base.css +++ b/src/base/css/base.css @@ -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; +}