Open kbeck303 opened 4 years ago
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%; } }
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
Update mixin file with the following code, the image-cover mixin wasn't work. this gets it to work with bootstrap