Contents

////////////////////////
// Fluid Images and Video
////////////////////////
img, video {
  max-width: 100%;
  height: auto;
}

////////////////////////
// Scaling Embeds WITH NO JAVASCIPT!
//
// From the outrageously awesome Scott Kellum
////////////////////////
$intrinsic-ratio: 16/9 !default;
$intrinsic-ratio-width: 100% !default;
$intrinsic-ratio-elements: '*' !default;
$intrinsic-ratio-extend: true !default;

@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
  @if not $extend {
    position: relative;
    height: 0;
  }
  @else {
    @extend %intrinsic-ratio-parent;
  }
  padding-top: (1 / $ratio) * $width;
  width: $width;
  @each $element in $elements {
    > #{$element} {
      @if not $extend {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        margin: 0;
        padding: 0;
      }
      @else {
        @extend %intrinsic-ratio-child;
      }
    }
  }
}

%intrinsic-ratio-parent {
  position: relative;
  height: 0;
}

%intrinsic-ratio-child {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin: 0;
  padding: 0;
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
toolkit-0.2.1.3	stylesheets/toolkit/_fluid-media.scss
toolkit-0.2.1.2	stylesheets/toolkit/_fluid-media.scss
toolkit-0.2.0.1	stylesheets/toolkit/_fluid-media.scss