Boolean
$responsive-item-disable-everything: false !default;
Boolean
$responsive-item-disable-auto: false !default;
Boolean
$responsive-item-disable-full-width: false !default;
Boolean
$responsive-item-disable-overlay: false !default;
Boolean
$responsive-item-disable-overlay-top: false !default;
Boolean
$responsive-item-disable-overlay-right: false !default;
Boolean
$responsive-item-disable-overlay-bottom: false !default;
Boolean
$responsive-item-disable-overlay-left: false !default;
Boolean
$responsive-item-disable-overlay-middle: false !default;
Boolean
$responsive-item-disable-overlay-center: false !default;
Boolean
$responsive-item-disable-overlay-absolute-center: false !default;
List
$responsive-item-selectors: (img ">svg" iframe video embed object) !default;
Color
$responsive-item-overlay-background-color: rgba(colors.$black, 0.54) !default;
Color
$responsive-item-overlay-color: theme.$dark-theme-text-primary-color !default;
Number
$responsive-item-overlay-z-index: 0 !default;
Number
$responsive-item-overlay-padding: spacing.get-var(md) !default;
Number
$responsive-item-overlay-horizontal-width: 30% !default;
Map
$responsive-item-aspect-ratios: (
"16-9": 16 9,
"4-3": 4 3,
"1-1": 1 1,
) !default;
Boolean
$responsive-item-disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
mixin
@mixin forced-aspect-ratio { … }
mixin
@mixin aspect-ratio($width, $height) { … }
mixin
@mixin base-styles { … }
mixin
@mixin overlay-styles { … }
mixin
@mixin styles($disable-layer: false) { … }
Set to true
to disable all the styles.
NOTE: You most likely want to disable these styles and use the
object-fit
styles instead.
Set to true
to disable automatically adding the height: auto
and
width: 100%
to each selector in the $selectors
list.
Set to true
to disable the full width styles.
Set to true
to disable the ResponsiveItemOverlay
styles.
Set to true
to disable the ResponsiveItemOverlay
position="top"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="right"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="bottom"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="left"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="middle"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="center"
styles.
Set to true
to disable the ResponsiveItemOverlay
position="absolute-center"
styles.
The default selectors to automatically apply the responsive item styles.
The default ResponsiveItemOverlay
background color.
The default ResponsiveItemOverlay
text color.
The default ResponsiveItemOverlay
z-index.
The default ResponsiveItemOverlay
padding.
The default width to apply to the position="left"
, "position="right"
,
position="center"
, or position="absolute-center"
ResponsiveItemOverlay
.
The default aspect ratios to support which will be available on the
ResponsiveItem
component.
Set to true
to disable the custom aspect ratios.
This mixin should really only be used if the $disable-aspect-ratios
is
true
Create a custom aspect ratio using padding-bottom
.
This should only be used if not using the responsive-item-styles
mixin.
This should only be used if not using the responsive-item-styles
mixin.
Generates all the styles based on feature flags.
Set this to true
to disable the layer behavior