maintain ratio is still using bourbon framework

[kbeck303]

Update mixin file with the following code, the image-cover mixin wasn't work. this gets it to work with bootstrap

//// maintain-ratio(), proportional-container() and image-cover() =
///
/// Set a container to crop an element and maintain an aspect ratio
/// Use proportional-container() and image-cover() together:
///
/// @link https://gist.github.com/brianmcallister/2932463
///
/// @example scss - Usage
///   .container {
///     @include proportional-container(16 9);
///
///     .element {
///       @include image-cover();
///     }
///   }
///
/// @example css - Output
///   .container {
///     position: relative;
///     overflow: hidden;
///     z-index: 1;
///     width: 100%;
///     height: 0;
///     padding-bottom: 56.25%;
///   }
///   .container .element {
///    transform: translateX(-50%);
///    top: 0;
///    left: 50%;
///    width: auto;
///    max-width: none;
///    height: 100%;
///   }
////

/// maintain-ratio() =
/// Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {function} length
/// @require {function} percentage
/// @require {function} nth
///
/// @example scss - Usage
///   @include maintain-ratio(16 9)
///
/// @example css - Output
///   width: 100%;
///   height: 0;
///   padding-bottom: 56.25%;
///
@mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {
    @warn '$ratio must be a list with two values.';
  }
  width: 100%;
  height: 0;
  padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
}

/// proportional-container() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {mixin} maintain-ratio
///
/// @example scss - Usage
///   @include proportional-container(16 9)
///
/// @example css - Output
///   position: relative;
///   overflow: hidden;
///   z-index: 1;
///   height: 0;
///   padding-bottom: 56.25%;
///   width: 100%
///
@mixin proportional-container($ratio: 1 1) {
  @include maintain-ratio($ratio);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/// image-cover() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {String} $center ['100% auto']
///   Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'
///
/// @example scss - Usage
///  @include image-cover('auto 100%');
///
@mixin image-cover($center: '100% auto') {
  $allowed: ('100% auto','auto 100%','contain','cover');

  @if not index($allowed, $center) {
    @error 'Keyword `#{$center}` for mixin 'image-cover' is not allowed. `#{$allowed}` is expected.';
  }
  position: absolute;
  z-index: 2;

  @if ($center == 'contain') {
    // Keep the entire element inside the container
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-height: 100%;
  } @else if ($center == 'cover') {
    // Keep the entire element inside the container
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
  } @else if ($center == '100% auto') {
    // Fill the width, let the height be what it needs to be
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
  } @else {
    // Default: Fill the height, let the width be what it needs to be
    transform: translateX(-50%);
    top: 0;
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
  }
}

[kbeck303]

I'm in the middle of working on Saint A's and I doo't want to get side tracked. I can add this next week if someone doesn't do it before then