Responsive Item Sass API

Variables

responsive-item-disable-everything

$responsive-item-disable-everything: false !default;

responsive-item-disable-auto

$responsive-item-disable-auto: false !default;

See Also

• $responsive-item-selectors

Used By

• @mixin responsive-item-base-styles

responsive-item-disable-full-width

$responsive-item-disable-full-width: false !default;

Used By

• @mixin responsive-item-base-styles
• @mixin table-styles

responsive-item-disable-overlay

$responsive-item-disable-overlay: false !default;

Used By

• @mixin responsive-item-styles

responsive-item-disable-overlay-top

$responsive-item-disable-overlay-top: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-right

$responsive-item-disable-overlay-right: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-bottom

$responsive-item-disable-overlay-bottom: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-left

$responsive-item-disable-overlay-left: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-middle

$responsive-item-disable-overlay-middle: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-center

$responsive-item-disable-overlay-center: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-disable-overlay-absolute-center

$responsive-item-disable-overlay-absolute-center: false !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-selectors

$responsive-item-selectors: (img ">svg" iframe video embed object) !default;

Used By

• @mixin responsive-item-base-styles

responsive-item-overlay-background-color

$responsive-item-overlay-background-color: rgba(colors.$black, 0.54) !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-overlay-color

$responsive-item-overlay-color: theme.$dark-theme-text-primary-color !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-overlay-z-index

$responsive-item-overlay-z-index: 0 !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-overlay-padding

$responsive-item-overlay-padding: spacing.get-var(md) !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-overlay-horizontal-width

$responsive-item-overlay-horizontal-width: 30% !default;

Used By

• @mixin responsive-item-overlay-styles

responsive-item-aspect-ratios

$responsive-item-aspect-ratios: (
  "16-9": 16 9,
  "4-3": 4 3,
  "1-1": 1 1,
) !default;

responsive-item-disable-aspect-ratios

$responsive-item-disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;

Used By

• @mixin responsive-item-base-styles

Mixins

responsive-item-forced-aspect-ratio

@mixin forced-aspect-ratio { … }

Used By

• @mixin responsive-item-base-styles

responsive-item-aspect-ratio

@mixin aspect-ratio($width, $height) { … }

See Also

• https://css-tricks.com/aspect-ratio-boxes/

Used By

• @mixin responsive-item-base-styles

Requires

• $app-bar-height

responsive-item-base-styles

@mixin base-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin responsive-item-styles
• @mixin text-field-text-field-styles

Requires

• @mixin responsive-item-forced-aspect-ratio
• @mixin responsive-item-aspect-ratio
• $responsive-item-disable-auto
• $responsive-item-selectors
• $responsive-item-disable-full-width
• $responsive-item-disable-aspect-ratios
• $object-fit-aspect-ratios

responsive-item-overlay-styles

@mixin overlay-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin responsive-item-styles

Requires

• $responsive-item-overlay-background-color
• $responsive-item-overlay-color
• $responsive-item-overlay-padding
• $responsive-item-overlay-z-index
• $responsive-item-disable-overlay-top
• $responsive-item-disable-overlay-bottom
• $responsive-item-overlay-horizontal-width
• $responsive-item-disable-overlay-left
• $responsive-item-disable-overlay-right
• $responsive-item-disable-overlay-middle
• $responsive-item-disable-overlay-center
• $responsive-item-disable-overlay-absolute-center

responsive-item-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin responsive-item-base-styles
• @mixin responsive-item-overlay-styles
• $app-bar-disable-everything
• $responsive-item-disable-overlay

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