Box Sass API

Variables

box-disable-everything

$box-disable-everything: false !default;

box-disable-stacked

$box-disable-stacked: false !default;

Used By

• @mixin box-styles
• @mixin label-styles
• @mixin snackbar-styles
• @mixin tabs-tab-styles
• @mixin tabs-variables

box-disable-reversed

$box-disable-reversed: false !default;

Used By

• @mixin box-styles
• @mixin label-styles
• @mixin tabs-tab-styles
• @mixin window-splitter-styles

box-disable-grid

$box-disable-grid: false !default;

Used By

• @mixin box-styles

box-disable-grid-columns

$box-disable-grid-columns: false !default;

Used By

• @mixin box-styles

box-disable-grid-auto-rows

$box-disable-grid-auto-rows: false !default;

Used By

• @mixin box-styles

box-disable-phone-columns

$box-disable-phone-columns: false !default;

box-disable-tablet-columns

$box-disable-tablet-columns: false !default;

box-disable-desktop-columns

$box-disable-desktop-columns: false !default;

box-disable-large-desktop-columns

$box-disable-large-desktop-columns: false !default;

box-disable-phone-min-item-size

$box-disable-phone-min-item-size: false !default;

box-disable-tablet-min-item-size

$box-disable-tablet-min-item-size: false !default;

box-disable-desktop-min-item-size

$box-disable-desktop-min-item-size: false !default;

box-disable-large-desktop-min-item-size

$box-disable-large-desktop-min-item-size: false !default;

box-default-align-items

$box-default-align-items: center !default;

Used By

• @mixin box-styles
• @mixin snackbar-styles

box-align-items

$box-align-items: (start end stretch) !default;

Used By

• @mixin box-styles

box-justify-content

$box-justify-content: (
  start center end stretch space-around space-between space-evenly
) !default;

Used By

• @mixin box-styles

box-gap

$box-gap: spacing.get-var(md) !default;

box-padding

$box-padding: $gap !default;

Used By

• @mixin box-use-var
• @mixin box-custom-grid
• @mixin box-custom-grid-class
• @mixin box-styles
• @mixin expansion-panel-styles
• @mixin input-toggle-styles
• @mixin list-_addon-spacing

box-item-min-size

$box-item-min-size: 8rem !default;

Used By

• @mixin box-variables

box-grids

$box-grids: () !default;

Examples

Simple Example

@use "@react-md/core" with (
  $box-grids: (
    small: (
      min: 5rem,
    ),
    medium: (
      min: 7rem,
      padding: 2rem,
      gap: 0.5rem,
    ),
  )
);

Used By

• @mixin box-styles

box-variables

$box-variables: (
  gap,
  column-gap,
  row-gap,
  padding,
  padding-v,
  padding-h,
  item-min-size,
  item-min-height,
  columns,
  row-max-height,
  auto-rows-height,
  phone-columns,
  tablet-columns,
  desktop-columns,
  large-desktop-columns,
  phone-item-min-height,
  tablet-item-min-height,
  desktop-item-min-height,
  large-desktop-item-min-height,
  phone-item-min-size,
  tablet-item-min-size,
  desktop-item-min-size,
  large-desktop-item-min-size
);

Mixins

box-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

box-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var
• $app-bar-gap
• $box-padding

box-custom-grid

@mixin custom-grid($min: null, $padding: null, $gap: null) { … }

Examples

Simple Example

@use "@react-md/core";

.container {
  @include core.box-custom-grid($min: 20rem, $padding: 0.25rem, $gap: 0.725rem);
}

Used By

• @mixin box-custom-grid-class

Requires

• @mixin app-bar-set-var
• $box-padding
• $app-bar-gap

box-custom-grid-class

@mixin custom-grid-class($selector, $min: null, $padding: null, $gap: null) { … }

Examples

Simple Example

@use "@react-md/core";

.container {
  @include core.box-custom-grid-class(
    $selector: "&--custom",
    $min: 20rem,
    $padding: 0.25rem,
    $gap: 0.725rem
  );
}

Used By

• @mixin box-styles

Requires

• @mixin box-custom-grid
• $box-padding
• $app-bar-gap

box-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $box-item-min-size

box-styles

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

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @mixin box-custom-grid-class
• @function app-bar-get-var
• @function str-replace
• $app-bar-disable-everything
• $box-default-align-items
• $box-padding
• $box-disable-stacked
• $box-disable-reversed
• $box-align-items
• $box-justify-content
• $box-disable-grid
• $box-disable-grid-columns
• $box-_breakpoints
• $box-disable-grid-auto-rows
• $box-grids
• $app-bar-gap

Functions

box-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true to disable all the styles for stacking items using flex-direction: column and flex-direction: column-reverse.

Set to true to disable all the flex-direction: row-reverse and flex-direction: column-reverse styles.

Set to true to disable the css grid behavior for the box.

Set to true to disable the styles for the auto grid columns behavior and anything related to the $item-min-size.

Set to true to disable the styles for the grid-auto-rows behavior.

Set to true to disable the styles for the phone columns variable.

Set to true to disable the styles for the tablet columns variable.

Set to true to disable the styles for the desktop columns variable.

Set to true to disable the styles for the large desktop columns variable.

Set to true to disable the styles for the phone grid min item variable.

Set to true to disable the styles for the tablet grid min item variable.

Set to true to disable the styles for the desktop grid min item size variable.

Set to true to disable the styles for the large desktop grid min item size variable

This is the default align-items property value to set if you don't like everything being centered by default. This value is always overridable using the alignItems prop on the Box component.

The additional class names to create for the align-items property. It creates classes like:

.rmd-box--align-start {
  align-items: start;
}

The additional class names to create for the justify-content property. It creates classes like:

.rmd-box--justify-start {
  justify-content: start;
}

The default flex and grid gap to apply between each item

The default padding to apply to the container.

The default minimum size for each grid item

This is used to create custom reusable grid configurations throughout the app. The custom grid can be used through the gridName prop.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Generates the styles for a custom grid by updating the css variables.

An optional item min size to override

An optional container padding to override

An optional gap between each item to override

Generates the styles for a custom grid by updating the css variables.

The selector to use to update the grid styles.

An optional item min size to override

An optional container padding to override

An optional gap between each item to override

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value