Permalink
Browse files

Updated styles for Clearing that override block-grid and .th styles. …

…Also tweaked background color for Reveal print styles. Fixes #1098
  • Loading branch information...
1 parent 01cce45 commit 7968c5d337a01193a98fdd2a7d696fd6b3574d1a @zurbchris zurbchris committed Nov 15, 2012
@@ -39,4 +39,23 @@ ul[data-clearing] li { cursor: pointer; display: block;
&.visible { border-top: $clearingCarouselThumbActiveBorder; }
}
}
-}
+}
+
+/* Overrides clear:both; when using block-grid with Clearing. Also overrided .th styling when Clearing is open */
+ul.block-grid[data-clearing] { overflow: visible; }
+.clearing-blackout {
+ ul.block-grid[data-clearing] {
+ @for $i from 1 through $blockGridElements {
+ &.#{convert-number-to-word($i)}-up {
+ &>li {
+ @if $i > 1 { &:nth-child(#{$i}n+1) { clear: none; } }
+ }
+ }
+ }
+ }
+ .th img { border: none; @include box-shadow(0 0 0 0 rgba(#000,0)); @include border-radius(0); }
+ &:hover {
+ img { @include box-shadow(0 0 0 0 rgba(0,0,0,0)); }
+ }
+}
+
@@ -8,7 +8,7 @@
.reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; #{$defaultFloat}: 0; }
- .reveal-modal { background: $white; visibility: hidden; display: none; top: 100px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
+ .reveal-modal { background: #fff; visibility: hidden; display: none; top: 100px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
.close-reveal-modal {
@include font-size(22);
line-height: .5;
@@ -29,4 +29,7 @@
> :first-child { margin-top: 0; }
> :last-child { margin-bottom: 0; }
}
- @media print { .reveal-modal { border: solid 1px #000; background: rgba(255,255,255,1) !important; } }
+ @media print {
+ div:not(.reveal-modal) { display: none; }
+ .reveal-modal { border: solid 1px #000; background: #fff; }
+ }
View
@@ -33,13 +33,22 @@
<div class="row">
<div class="eight columns">
- <div data-magellan-expedition="fixed">
+ <div>
<h4>Clearing Show</h4>
<p>Click on an image to open it.</p>
+
+ <ul class="block-grid three-up" data-clearing>
+ <li><a class="th" href="http://placekitten.com/1000/700"><img src="http://placekitten.com/200/200"></a></li>
+ <li><a class="th" href="http://placekitten.com/1000/800"><img src="http://placekitten.com/300/300"></a></li>
+ <li><a class="th" href="http://placekitten.com/1000/900"><img src="http://placekitten.com/400/400"></a></li>
+ <li><a class="th" href="http://placekitten.com/1000/1000"><img src="http://placekitten.com/500/500"></a></li>
+ <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
+ <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
+ </ul>
</div>
</div>
<div class="four columns">
- <h4>Photo Gallery</h4>
+ <!-- <h4>Photo Gallery</h4>
<ul class="block-grid three-up" data-clearing>
<li class="clearing-feature"><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
@@ -48,7 +57,7 @@
<li><img data-caption="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1200/800"></li>
<li><img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1200/1000"></li>
<li><img data-caption="WDuis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit." src="http://placekitten.com/g/1400/800"></li>
- </ul>
+ </ul> -->
</div>
</div>
</div>
View
@@ -33,7 +33,7 @@
<h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
<p>
- <a href="#" class="radius button">
+ <a href="#" data-reveal-id="exampleModal" class="radius button">
Example Modal&hellip;
</a>
</p>

0 comments on commit 7968c5d

Please sign in to comment.