Merge pull request #23 from kni-labs/ratio-box-additions

ratio box niceties via @corysimmons, address #22
kni-labs · Feb 23, 2016 · d7fcfd2 · d7fcfd2
2 parents baa5d6d + e416978
commit d7fcfd2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/.pages b/.pages
diff --git a/.scss-style.yml b/.scss-style.yml
@@ -100,7 +100,7 @@ linters:
     enabled: true
     allow_single_line_rule_sets: true
   SingleLinePerSelector:
-    enabled: true
+    enabled: false
   SpaceAfterComma:
     enabled: true
   SpaceAfterPropertyColon:

diff --git a/knapsack/_layout.scss b/knapsack/_layout.scss
@@ -34,21 +34,28 @@
 /// This sets a specific width/height ratio. Useful on background images,
 /// iframes and Youtube embeds.
 ///
-/// **note**: Any content inside `ratio-box` will need to be positioned
-/// absolutely as not to change the aspect-ratio.
-///
 /// @param {variable} $ratio [1 / 1] - Aspect ratio: height / width
+/// @param {variable} $bg-color [$base-gray, .2] - placeholder background color
 /// @group layout
 /// @example
 ///   figure {
 ///     @include ratio(16 / 9);
 ///   }
 /// @link https://www.mademyday.de/css-height-equals-width-with-pure-css.html
 
-@mixin ratio-box($ratio: 1 / 1) {
+@mixin ratio-box($ratio: 1 / 1, $bg-color: rgba($base-gray, .15)) {
+  background-color: $bg-color;
   overflow: hidden;
   position: relative;
 
+  > * {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
   &:before {
     content: '';
     display: block;
@@ -78,7 +85,6 @@
 ///   }
 /// @link https://codepen.io/dbox/pen/OyzrrV
 
-
 @mixin full-page($height: 100vh, $max-height: 850px, $min-height: 600px, $breakpoint: 768px) {
   // Disable below set breakpoint
   @if ($breakpoint) {