Skip to content

Commit

Permalink
updated visibility classes to fall back to display inherit instead of…
Browse files Browse the repository at this point in the history 
… block. This fixes #887
  • Loading branch information
@zurbchris
zurbchris committed Oct 5, 2012
1 parent 236ce62 commit c562936
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 12 deletions.
24 changes: 12 additions & 12 deletions scss/foundation/components/modules/_ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@
.hide-for-large-up,
.show-for-xlarge { display: none !important; }

.hide-for-xlarge,
.show-for-large,
.show-for-large-up,
.hide-for-small,
.hide-for-medium,
.hide-for-medium-down { display: block !important; }
.hide-for-medium-down,
.show-for-large,
.show-for-large-up,
.hide-for-xlarge { display: inherit !important; }

/* Very large display targeting */
@media only screen and (min-width: $screenXlarge) {
Expand All @@ -48,7 +48,7 @@
.hide-for-medium-down,
.hide-for-large,
.show-for-large-up,
.show-for-xlarge { display: block !important; }
.show-for-xlarge { display: inherit !important; }

.show-for-small,
.show-for-medium,
Expand All @@ -65,7 +65,7 @@
.show-for-medium-down,
.hide-for-large,
.hide-for-large-up,
.hide-for-xlarge { display: block !important; }
.hide-for-xlarge { display: inherit !important; }

.show-for-small,
.hide-for-medium,
Expand All @@ -82,7 +82,7 @@
.show-for-medium-down,
.hide-for-large,
.hide-for-large-up,
.hide-for-xlarge { display: block !important; }
.hide-for-xlarge { display: inherit !important; }

.hide-for-small,
.show-for-medium,
Expand All @@ -94,28 +94,28 @@

/* Orientation targeting */
.show-for-landscape,
.hide-for-portrait { display: block !important; }
.hide-for-portrait { display: inherit !important; }
.hide-for-landscape,
.show-for-portrait { display: none !important; }

@media screen and (orientation: landscape) {
.show-for-landscape,
.hide-for-portrait { display: block !important; }
.hide-for-portrait { display: inherit !important; }
.hide-for-landscape,
.show-for-portrait { display: none !important; }
}

@media screen and (orientation: portrait) {
.show-for-portrait,
.hide-for-landscape { display: block !important; }
.hide-for-landscape { display: inherit !important; }
.hide-for-portrait,
.show-for-landscape { display: none !important; }
}

/* Touch-enabled device targeting */
.show-for-touch { display: none !important; }
.hide-for-touch { display: block !important; }
.touch .show-for-touch { display: block !important; }
.hide-for-touch { display: inherit !important; }
.touch .show-for-touch { display: inherit !important; }
.touch .hide-for-touch { display: none !important; }

/* Specific overrides for elements that require something other than display: block */
Expand Down
1 change: 1 addition & 0 deletions test/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation PAGE Testing</h2>
<hr />

<dl class="sub-nav">
<dt>Go to:</dt>
<dd><a href="#basic-grid">Basic Grid</a></dd>
Expand Down

1 comment on commit c562936

@Nateowami
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zurbchris Why is Foundation changing an element's display? And !important? The previous version made a little sense (because it's understandable that perhaps Foundation can only do its "magic" on block elements), but when you change it to display: inherit !important it makes clear that any type of display works (since the parent could have any display property).

But adding display: inline-block !important to custom CSS overrides Foundation's display: none !important, so the element never gets hidden.

Edit: Wrapping the element with a parent of whatever display property is needed is one solution, though it's a bit hacky and doesn't explain the need for overriding the display property to begin with.

Please sign in to comment.