The background color for a media overlay.
$rmd-media-overlay-background-color: rgba($rmd-black-base, 0.54) !default;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;The default aspect ratio for the media component when an aspect ratio is enforced.
$rmd-media-default-aspect-ratio: percentage(math.div(9, 16)) !default;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;The default padding for the media overlay component.
$rmd-media-overlay-padding: 1rem !default;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;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;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.
| Name | Description | Type | Default Value |
|---|---|---|---|
$width | The width to enforce for the responsive media | Number | — |
$height | The height to enforce for the responsive media | Number | — |
.container {
@include rmd-media-aspect-ratio-container;
&--16-9 {
@include rmd-media-aspect-ratio(16, 9);
}
}
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.
| Name | Description | Type | Default Value |
|---|---|---|---|
$width | The width to enforce for the responsive media | Number | — |
$height | The height to enforce for the responsive media | Number | — |
.container {
@include rmd-media-aspect-ratio-container;
&--16-9 {
@include rmd-media-aspect-ratio(16, 9);
}
}
.container {
@include rmd-media-aspect-ratio-container(16, 9);
}
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.
.container {
@include rmd-media-aspect-ratio-container;
@include rmd-media-aspect-ratio(16, 9);
&__media {
@include rmd-media-forced-aspect-ratio-item;
}
}
Creates the styles for a responsive media item that will update its height and width based on the parent element.
.container {
height: 20rem;
width: 30rem;
&__media {
@include rmd-media-responsive-item;
}
}
Creates the base positioning styles for the media overlay element.
| Name | Description | Type | Default Value |
|---|---|---|---|
$position | One of the | String | — |
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.
| Name | Description | Type | Default 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 | Color | null |
Creates the styles for a responsive media container. This probably won't be used by users of this library.
Creates all the styles for the media package.