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