Media

Placeholders

md-media-embedded
%md-media-embedded {}
Sass (Scss)
Click to expand

Description

A placeholder for making a class or html element use the embedded styles. This class or element will need to be contained in a class containing .md-media to get the correct styles.

Used by

Variables

md-media-aspect-ratios
$md-media-aspect-ratios: ('16:9', '4:3', '1:1') !default;
Sass (Scss)

Description

The default aspect ratios to include.

Type

List

Used by

md-media-include-overlay
$md-media-include-overlay: true !default;
Sass (Scss)

Description

A boolean if the overlay styles should be included.

Type

Boolean
md-media-include-embedded
$md-media-include-embedded: false !default;
Sass (Scss)

Description

Boolean if the .md-media-embedded class name should be included.

Type

Boolean
md-media-embedded-selectors
$md-media-embedded-selectors: ('img' 'iframe' 'svg' 'video' 'embed' 'object') !default;
Sass (Scss)

Description

A list of class name or html tags that will get the embedded media styles applied by default in the .md-media container.

Type

List
md-media-overlay-color
$md-media-overlay-color: rgba($md-black-base, .54) !default;
Sass (Scss)

Description

The color to use for the media overlay's background color.

Type

Color

Used by

Mixins

react-md-media
@mixin react-md-media($include-overlay: $md-media-include-overlay, $include-embedded: $md-media-include-embedded, $embedded-selectors: $md-media-embedded-selectors) {}
Sass (Scss)
Click to expand

Description

Creates the styles for media.

Parameters

NameDescriptionTypeDefault value
$include-overlay

Boolean if the overlay styles should be included.

Boolean
$md-media-include-overlay
$include-embedded

Boolean if the embedded class name should be included. This does not affect the $embedded-selectors param.

Boolean
$md-media-include-embedded
$embedded-selectors

A list of class name or html tags to apply the embedded styles to by default within a .md-media container.

List
$md-media-embedded-selectors

Examples

Example Usage SCSS

@include react-md-media;
Sass (Scss)

Requires

Used by

react-md-media-aspect-ratio
@mixin react-md-media-aspect-ratio($width, $height) {}
Sass (Scss)
Click to expand

Description

Creates a media aspect ratio that will make the .md-media-embedded\ or any of the $md-media-embedded-selectors children keep the aspect ratio.

Parameters

NameDescriptionTypeDefault value
$width

The width to enforce.

Number
$height

The height to enforce.

Number

Examples

Example Usage SCSS

@include react-md-media-aspect-ratio(16, 9);
Sass (Scss)

Used by

react-md-media-embedded
@mixin react-md-media-embedded {}
Sass (Scss)
Click to expand

Description

Very simple mixin to only include the .md-media-embedded class.

Parameters

None

Requires

Used by

react-md-media-overlay
@mixin react-md-media-overlay {}
Sass (Scss)
Click to expand

Description

Creates the styles for the media overlay.

Parameters

None

Requires

Used by