Sha256: 96cee26a877333074f4b4f6139cc37ca1b5d722009d11057f2a57f63de0bf119
Contents?: true
Size: 1.62 KB
Versions: 8
Compression:
Stored size: 1.62 KB
Contents
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group flex-video
////
/// Padding above a flex video container.
/// @type Number
$flexvideo-padding-top: rem-calc(25) !default;
/// Margin below a flex video container.
/// @type Number
$flexvideo-margin-bottom: rem-calc(16) !default;
/// Padding used to create a 4:3 aspect ratio.
/// @type Number
$flexvideo-ratio: 4 by 3 !default;
/// Padding used to create a 16:9 aspect ratio.
/// @type Number
$flexvideo-ratio-widescreen: 16 by 9 !default;
/// Creates a percentage height that can be used as padding in a flex video container.
/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
@function flex-video($ratio) {
$w: nth($ratio, 1);
$h: nth($ratio, 3);
@return $h / $w * 100%;
}
/// Creates a flex video container.
/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
@mixin flex-video($ratio: $flexvideo-ratio) {
position: relative;
height: 0;
padding-top: $flexvideo-padding-top;
padding-bottom: flex-video($ratio);
margin-bottom: $flexvideo-margin-bottom;
overflow: hidden;
iframe,
object,
embed,
video {
position: absolute;
top: 0;
#{$global-left}: 0;
width: 100%;
height: 100%;
}
}
@mixin foundation-flex-video {
.flex-video {
@include flex-video;
&.widescreen {
padding-bottom: flex-video($flexvideo-ratio-widescreen);
}
&.vimeo {
padding-top: 0;
}
}
}
Version data entries
8 entries across 8 versions & 1 rubygems