Sha256: d2f4017a7807d80631f7c7a7b7d545b29cf9fa1ad88b597f07cfd73ee2dd9ac3
Contents?: true
Size: 1.82 KB
Versions: 29
Compression:
Stored size: 1.82 KB
Contents
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group responsive-embed
////
/// Margin below a responsive embed container.
/// @type Number
$responsive-embed-margin-bottom: rem-calc(16) !default;
/// Aspect ratios used to determine padding-bottom of responsive embed containers.
/// @type Map
$responsive-embed-ratios: (
default: 4 by 3,
widescreen: 16 by 9,
) !default;
// WARNING: Will be removed in version 6.4
$responsive-embed-ratio: default;
/// Creates a responsive embed container.
/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
@mixin responsive-embed($ratio: default) {
@if type-of($ratio) == 'string' {
$ratio: map-get($responsive-embed-ratios, $ratio);
}
position: relative;
height: 0;
margin-bottom: $responsive-embed-margin-bottom;
padding-bottom: ratio-to-percentage($ratio);
overflow: hidden;
iframe,
object,
embed,
video {
position: absolute;
top: 0;
#{$global-left}: 0;
width: 100%;
height: 100%;
}
}
@mixin foundation-responsive-embed {
.responsive-embed,
.flex-video {
@include responsive-embed($ratio: default);
$ratios: map-remove($responsive-embed-ratios,default);
@each $name, $ratio in $ratios {
&.#{$name} {
padding-bottom: ratio-to-percentage($ratio);
}
}
}
}
@mixin foundation-flex-video {
@warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
@include foundation-responsive-embed;
}
@mixin flex-video($ratio: $responsive-embed-ratio) {
@warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
@include responsive-embed($ratio);
}
Version data entries
29 entries across 29 versions & 6 rubygems