Skip to main content
react-md
react-md - Media - SassDoc

Variables

rmd-media-overlay-background-color

Color

The background color for a media overlay.

$rmd-media-overlay-background-color: rgba($rmd-black-base, 0.54) !default;

rmd-media-selectors

List

A list of selectors or html elements that should be considered responsive media by default. This will make it so that when using the MediaContainer component, the following elements will be responsive automatically.

$rmd-media-selectors: (img '>svg' iframe video embed object) !default;

rmd-media-default-aspect-ratio

Number

The default aspect ratio for the media component when an aspect ratio is enforced.

$rmd-media-default-aspect-ratio: math.percentage(math.div(9, 16)) !default;

rmd-media-default-aspect-ratios

Map

A Map including the default aspect ratios to create for responsive media with a forced aspect ratio. Each key must be a string for a class name suffix and each value should be a list in the form of (width height).

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

rmd-media-overlay-padding

Number

The default padding for the media overlay component.

$rmd-media-overlay-padding: 1rem !default;

rmd-media-overlay-horizontal-width

Number

This is the default width for the media overlay component when the position is set to left, right, or center. This is really just added since these positions might cause overflow issues since their width will change based on the content size. Setting it to a width will prevent this.

So if you'd like to add the default behavior back, you can set this to 100% or null.

$rmd-media-overlay-horizontal-width: 30% !default;

rmd-media-overlay-positions

List

The positions for the media overlay. This can be set to an empty list or null if you'd like to save a few bytes by not generating the styles for some positions.

$rmd-media-overlay-positions: (
  top right bottom left middle center absolute-center
) !default;

Mixins

rmd-media-aspect-ratio

mixin

Used to enforce a specific aspect ratio for a media item by using the padding-bottom trick/hack. This should normally be used with the rmd-media-aspect-ratio-container mixin.

Note: You can just use the rmd-media-aspect-ratio mixin if you only need to support a single aspect ratio.

Parameters
NameDescriptionTypeDefault Value
$width

The width to enforce for the responsive media

Number
$height

The height to enforce for the responsive media

Number

Examples

Simple Example
@use 'react-md' as *;

.container {
  @include rmd-media-aspect-ratio-container;

  &--16-9 {
    @include rmd-media-aspect-ratio(16, 9);
  }
}

rmd-media-aspect-ratio-container

mixin

Creates the styles for a media container that should enforce a specific aspect ratio. If the $width and $height parameters are provide, the container will be updated to also enforce that specific aspect ratio.

Parameters
NameDescriptionTypeDefault Value
$width

The width to enforce for the responsive media

Number
$height

The height to enforce for the responsive media

Number

Examples

Example Usage with `rmd-media-aspect-ratio`
@use 'react-md' as *;

.container {
  @include rmd-media-aspect-ratio-container;

  &--16-9 {
    @include rmd-media-aspect-ratio(16, 9);
  }
}
Example Usage for single aspect ratio
@use 'react-md' as *;

.container {
  @include rmd-media-aspect-ratio-container(16, 9);
}

rmd-media-forced-aspect-ratio-item

mixin

Creates the styles for a responsive media item that should have a specific aspect ratio. This should be applied to the child of the aspect ratio container.

Examples

Example Usage
@use 'react-md' as *;

.container {
  @include rmd-media-aspect-ratio-container;
  @include rmd-media-aspect-ratio(16, 9);

  &__media {
    @include rmd-media-forced-aspect-ratio-item;
  }
}

rmd-media-responsive-item

mixin

Creates the styles for a responsive media item that will update its height and width based on the parent element.

Examples

Example Usage
@use 'react-md' as *;

.container {
  height: 20rem;
  width: 30rem;

  &__media {
    @include rmd-media-responsive-item;
  }
}

rmd-media-overlay-position

mixin

Creates the base positioning styles for the media overlay element.

Parameters
NameDescriptionTypeDefault Value
$position

One of the rmd-media-overlay-positions values

String

rmd-media-overlay

mixin

Creates the media overlay styles. All this really does is update the theme background and text colors based on the provided background color for the overlay element.

Parameters
NameDescriptionTypeDefault Value
$background-color

The background color for the media overlay.

Color$rmd-media-overlay-background-color
$color

An optional color to use for the overlay. If this is null, it will determine the contrast tone of the background color and use either the light or dark theme variables instead.

Colornull

rmd-media-container

mixin

Creates the styles for a responsive media container. This probably won't be used by users of this library.

react-md-media

mixin

Creates all the styles for the media package.