_clearing.scss in zurb-foundation-4.1.6

- old
+ new

@@ -1,8 +1,9 @@
 //
 // Clearing Variables
 //
+$include-html-clearing-classes: $include-html-classes !default;
 
 // We use these to set the background colors for parts of Clearing.
 $clearing-bg:                           #111 !default;
 $clearing-caption-bg:                   $clearing-bg !default;
 $clearing-carousel-bg:                  #111 !default;
@@ -24,194 +25,196 @@
 $clearing-active-img-height:            75% !default;
 $clearing-carousel-height:              150px !default;
 $clearing-carousel-thumb-width:         175px !default;
 $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 
+@if $include-html-clearing-classes {
+  // We decided to not create a mixin for Clearing because it relies
+  // on predefined classes and structure to work properly.
+  // The variables above should give enough control.
 
-// We decided to not create a mixin for Clearing because it relies
-// on predefined classes and structure to work properly.
-// The variables above should give enough control.
+  /* Clearing Styles */
+  [data-clearing] {
+    @include clearfix;
+    margin-bottom: 0;
+    list-style: none;
 
-/* Clearing Styles */
-[data-clearing] {
-  @include clearfix;
-  margin-bottom: 0;
-  list-style: none;
-
-  li {
-    float: $default-float;
-    margin-#{$opposite-direction}: 10px;
+    li {
+      float: $default-float;
+      margin-#{$opposite-direction}: 10px;
+    }
   }
-}
 
-.clearing-blackout {
-  background: $clearing-bg;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  #{$default-float}: 0;
-  z-index: 998;
+  .clearing-blackout {
+    background: $clearing-bg;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    #{$default-float}: 0;
+    z-index: 998;
 
-  .clearing-close { display: block; }
-}
+    .clearing-close { display: block; }
+  }
 
-.clearing-container {
-  position: relative;
-  z-index: 998;
-  height: 100%;
-  overflow: hidden;
-  margin: 0;
-}
+  .clearing-container {
+    position: relative;
+    z-index: 998;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+  }
 
-.visible-img {
-  height: 95%;
-  position: relative;
+  .visible-img {
+    height: 95%;
+    position: relative;
 
-  img {
+    img {
+      position: absolute;
+      #{$default-float}: 50%;
+      top: 50%;
+      margin-#{$default-float}: -50%;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  .clearing-caption {
+    color: $clearing-caption-font-color;
+    line-height: 1.3;
+    margin-bottom: 0;
+    text-align: center;
+    bottom: 0;
+    background: $clearing-caption-bg;
+    width: 100%;
+    padding: $clearing-caption-padding;
     position: absolute;
-    #{$default-float}: 50%;
-    top: 50%;
-    margin-#{$default-float}: -50%;
-    max-height: 100%;
-    max-width: 100%;
+    #{$default-float}: 0;
   }
-}
 
-.clearing-caption {
-  color: $clearing-caption-font-color;
-  line-height: 1.3;
-  margin-bottom: 0;
-  text-align: center;
-  bottom: 0;
-  background: $clearing-caption-bg;
-  width: 100%;
-  padding: $clearing-caption-padding;
-  position: absolute;
-  #{$default-float}: 0;
-}
+  .clearing-close {
+    z-index: 999;
+    padding-#{$default-float}: 20px;
+    padding-top: 10px;
+    font-size: $clearing-close-size;
+    line-height: 1;
+    color: $clearing-close-color;
+    display: none;
 
-.clearing-close {
-  z-index: 999;
-  padding-#{$default-float}: 20px;
-  padding-top: 10px;
-  font-size: $clearing-close-size;
-  line-height: 1;
-  color: $clearing-close-color;
-  display: none;
+    &:hover,
+    &:focus { color: #ccc; }
+  }
 
-  &:hover,
-  &:focus { color: #ccc; }
-}
+  .clearing-assembled .clearing-container { height: 100%;
+    .carousel > ul { display: none; }
+  }
 
-.clearing-assembled .clearing-container { height: 100%;
-  .carousel > ul { display: none; }
-}
 
-
-// Large screen overrides
-@media #{$small} {
-  .clearing-main-prev,
-  .clearing-main-next {
-    position: absolute;
-    height: 100%;
-    width: 40px;
-    top: 0;
-    & > span {
+  // Large screen overrides
+  @media #{$small} {
+    .clearing-main-prev,
+    .clearing-main-next {
       position: absolute;
-      top: 50%;
-      display: block;
-      width: 0;
-      height: 0;
-      border: solid $clearing-arrow-size;
+      height: 100%;
+      width: 40px;
+      top: 0;
+      & > span {
+        position: absolute;
+        top: 50%;
+        display: block;
+        width: 0;
+        height: 0;
+        border: solid $clearing-arrow-size;
+      }
     }
-  }
-  .clearing-main-prev {
-    #{$default-float}: 0;
-    & > span {
-      #{$default-float}: 5px;
-      border-color: transparent;
-      border-#{$opposite-direction}-color: $clearing-arrow-color;
+    .clearing-main-prev {
+      #{$default-float}: 0;
+      & > span {
+        #{$default-float}: 5px;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $clearing-arrow-color;
+      }
     }
-  }
-  .clearing-main-next {
-    #{$opposite-direction}: 0;
-    & > span {
-      border-color: transparent;
-      border-#{$default-float}-color: $clearing-arrow-color;
+    .clearing-main-next {
+      #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-color: $clearing-arrow-color;
+      }
     }
-  }
 
-  .clearing-main-prev.disabled,
-  .clearing-main-next.disabled { opacity: 0.5; }
+    .clearing-main-prev.disabled,
+    .clearing-main-next.disabled { opacity: 0.5; }
 
-  // If you want to show a lightbox, but only have a single image come through as the thumbnail
-  .clearing-feature ~ li { display: none; }
+    // If you want to show a lightbox, but only have a single image come through as the thumbnail
+    .clearing-feature ~ li { display: none; }
 
-  .clearing-assembled .clearing-container {
+    .clearing-assembled .clearing-container {
 
-    .carousel {
-      background: $clearing-carousel-bg;
-      height: $clearing-carousel-height;
-      margin-top: 5px;
+      .carousel {
+        background: $clearing-carousel-bg;
+        height: $clearing-carousel-height;
+        margin-top: 5px;
 
-      & > ul {
-        display: block;
-        z-index: 999;
-        width: 200%;
-        height: 100%;
-        margin-#{$default-float}: 0;
-        position: relative;
-        #{$default-float}: 0;
-
-        li {
+        & > ul {
           display: block;
-          width: $clearing-carousel-thumb-width;
-          height: inherit;
-          padding: 0;
-          float: $default-float;
-          overflow: hidden;
-          margin-#{$opposite-direction}: 1px;
+          z-index: 999;
+          width: 200%;
+          height: 100%;
+          margin-#{$default-float}: 0;
           position: relative;
-          cursor: pointer;
-          opacity: 0.4;
+          #{$default-float}: 0;
 
-          &.fix-height {
-            img {
-              min-height: 100%;
-              height: 100%;
-              max-width: none;
+          li {
+            display: block;
+            width: $clearing-carousel-thumb-width;
+            height: inherit;
+            padding: 0;
+            float: $default-float;
+            overflow: hidden;
+            margin-#{$opposite-direction}: 1px;
+            position: relative;
+            cursor: pointer;
+            opacity: 0.4;
+
+            &.fix-height {
+              img {
+                min-height: 100%;
+                height: 100%;
+                max-width: none;
+              }
             }
-          }
 
-          a.th {
-            border: none;
-            -webkit-box-shadow: none;
-                    box-shadow: none;
-            display: block;
-          }
+            a.th {
+              border: none;
+              -webkit-box-shadow: none;
+                      box-shadow: none;
+              display: block;
+            }
 
-          img {
-            cursor: pointer !important;
-            min-width: 100% !important;
-          }
+            img {
+              cursor: pointer !important;
+              min-width: 100% !important;
+            }
 
-          &.visible { opacity: 1; }
+            &.visible { opacity: 1; }
+          }
         }
       }
+
+      .visible-img {
+        background: $clearing-img-bg;
+        overflow: hidden;
+        height: $clearing-active-img-height;
+      }
     }
 
-    .visible-img {
-      background: $clearing-img-bg;
-      overflow: hidden;
-      height: $clearing-active-img-height;
+    .clearing-close {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 20px;
+      padding-#{$default-float}: 0;
+      padding-top: 0;
     }
   }
 
-  .clearing-close {
-    position: absolute;
-    top: 10px;
-    #{$opposite-direction}: 20px;
-    padding-#{$default-float}: 0;
-    padding-top: 0;
-  }
 }