forked from foundation/foundation-sites
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'v6.3-responsive-embed' of git://github.com/andycochran/…
…foundation-sites into andycochran-v6.3-responsive-embed
- Loading branch information
Showing
16 changed files
with
173 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // Responsive Embed | ||
|
|
||
| .panorama { | ||
| @include responsive-embed(256 by 81); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| title: Responsive Embed | ||
| description: Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size. | ||
| sass: scss/components/_responsive-embed.scss | ||
| --- | ||
|
|
||
| To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the `iframe`, `object`, `embed`, or `video` in a container with the `.responsive-embed` class. | ||
|
|
||
| ```html_example | ||
| <div class="responsive-embed"> | ||
| <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe> | ||
| </div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9. | ||
|
|
||
| ```html_example | ||
| <div class="responsive-embed widescreen"> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe> | ||
| </div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| If you need to embed content with other aspect ratios, such as 256:81, the `responsive-embed()` mixin makes it easy to add your own custom classes. | ||
|
|
||
| ```scss | ||
| .panorama { | ||
| @include responsive-embed(256 by 81); | ||
| } | ||
| ``` | ||
|
|
||
| ```html_example | ||
| <div class="panorama"> | ||
| <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe> | ||
| </div> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1 @@ | ||
| // Foundation for Sites by ZURB | ||
| // foundation.zurb.com | ||
| // Licensed under MIT Open Source | ||
|
|
||
| //// | ||
| /// @group flex-video | ||
| //// | ||
|
|
||
| /// 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-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; | ||
| } | ||
| } | ||
| } | ||
| @import 'responsive-embed'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| // 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; | ||
|
|
||
| /// Padding used to create a 4:3 aspect ratio. | ||
| /// @type Number | ||
| $responsive-embed-ratio: 4 by 3 !default; | ||
|
|
||
| /// Padding used to create a 16:9 aspect ratio. | ||
| /// @type Number | ||
| $responsive-embed-ratio-widescreen: 16 by 9 !default; | ||
|
|
||
| /// Creates a percentage height that can be used as padding in a responsive embed 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 responsive embed container. | ||
| @function responsive-embed($ratio) { | ||
| $w: nth($ratio, 1); | ||
| $h: nth($ratio, 3); | ||
| @return $h / $w * 100%; | ||
| } | ||
|
|
||
| /// Creates a responsive embed container. | ||
| /// @param {List} $ratio [$responsive-embed-ratio] - Ratio to use for the container, formatted as `x by y`. | ||
| @mixin responsive-embed($ratio: $responsive-embed-ratio) { | ||
| position: relative; | ||
| height: 0; | ||
| padding-bottom: responsive-embed($ratio); | ||
| margin-bottom: $responsive-embed-margin-bottom; | ||
| 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; | ||
|
|
||
| &.widescreen { | ||
| padding-bottom: responsive-embed($responsive-embed-ratio-widescreen); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @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.'; | ||
| position: relative; | ||
| height: 0; | ||
| padding-bottom: responsive-embed($ratio); | ||
| margin-bottom: $responsive-embed-margin-bottom; | ||
| overflow: hidden; | ||
|
|
||
| iframe, | ||
| object, | ||
| embed, | ||
| video { | ||
| position: absolute; | ||
| top: 0; | ||
| #{$global-left}: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.