Skip to content
This repository
Browse code

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

…Also tweaked background color for Reveal print styles. Fixes #1098
  • Loading branch information...
commit 7968c5d337a01193a98fdd2a7d696fd6b3574d1a 1 parent 01cce45
zurbchris authored
21 scss/foundation/components/modules/_clearing.scss
@@ -39,4 +39,23 @@ ul[data-clearing] li { cursor: pointer; display: block;
39 39 &.visible { border-top: $clearingCarouselThumbActiveBorder; }
40 40 }
41 41 }
42   -}
  42 +}
  43 +
  44 +/* Overrides clear:both; when using block-grid with Clearing. Also overrided .th styling when Clearing is open */
  45 +ul.block-grid[data-clearing] { overflow: visible; }
  46 +.clearing-blackout {
  47 + ul.block-grid[data-clearing] {
  48 + @for $i from 1 through $blockGridElements {
  49 + &.#{convert-number-to-word($i)}-up {
  50 + &>li {
  51 + @if $i > 1 { &:nth-child(#{$i}n+1) { clear: none; } }
  52 + }
  53 + }
  54 + }
  55 + }
  56 + .th img { border: none; @include box-shadow(0 0 0 0 rgba(#000,0)); @include border-radius(0); }
  57 + &:hover {
  58 + img { @include box-shadow(0 0 0 0 rgba(0,0,0,0)); }
  59 + }
  60 +}
  61 +
7 scss/foundation/components/modules/_reveal.scss
@@ -8,7 +8,7 @@
8 8
9 9 .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; #{$defaultFloat}: 0; }
10 10
11   - .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));
  11 + .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));
12 12 .close-reveal-modal {
13 13 @include font-size(22);
14 14 line-height: .5;
@@ -29,4 +29,7 @@
29 29 > :first-child { margin-top: 0; }
30 30 > :last-child { margin-bottom: 0; }
31 31 }
32   - @media print { .reveal-modal { border: solid 1px #000; background: rgba(255,255,255,1) !important; } }
  32 + @media print {
  33 + div:not(.reveal-modal) { display: none; }
  34 + .reveal-modal { border: solid 1px #000; background: #fff; }
  35 + }
15 test/clearing.html
@@ -33,13 +33,22 @@
33 33
34 34 <div class="row">
35 35 <div class="eight columns">
36   - <div data-magellan-expedition="fixed">
  36 + <div>
37 37 <h4>Clearing Show</h4>
38 38 <p>Click on an image to open it.</p>
  39 +
  40 + <ul class="block-grid three-up" data-clearing>
  41 + <li><a class="th" href="http://placekitten.com/1000/700"><img src="http://placekitten.com/200/200"></a></li>
  42 + <li><a class="th" href="http://placekitten.com/1000/800"><img src="http://placekitten.com/300/300"></a></li>
  43 + <li><a class="th" href="http://placekitten.com/1000/900"><img src="http://placekitten.com/400/400"></a></li>
  44 + <li><a class="th" href="http://placekitten.com/1000/1000"><img src="http://placekitten.com/500/500"></a></li>
  45 + <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
  46 + <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
  47 + </ul>
39 48 </div>
40 49 </div>
41 50 <div class="four columns">
42   - <h4>Photo Gallery</h4>
  51 + <!-- <h4>Photo Gallery</h4>
43 52
44 53 <ul class="block-grid three-up" data-clearing>
45 54 <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 @@
48 57 <li><img data-caption="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1200/800"></li>
49 58 <li><img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1200/1000"></li>
50 59 <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>
51   - </ul>
  60 + </ul> -->
52 61 </div>
53 62 </div>
54 63 </div>
2  test/reveal.html
@@ -33,7 +33,7 @@
33 33 <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>
34 34
35 35 <p>
36   - <a href="#" class="radius button">
  36 + <a href="#" data-reveal-id="exampleModal" class="radius button">
37 37 Example Modal&hellip;
38 38 </a>
39 39 </p>

0 comments on commit 7968c5d

Please sign in to comment.
Something went wrong with that request. Please try again.