Box Sass API

Variables

box-disable-everything

$box-disable-everything: false !default;

Set to true to disable all the styles

box-disable-stacked

$box-disable-stacked: false !default;

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

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;

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

Used By

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

box-disable-grid

$box-disable-grid: false !default;

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

Used By

• @mixin box-styles

box-disable-grid-columns

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

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

Used By

• @mixin box-styles

box-disable-grid-auto-rows

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

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

Used By

• @mixin box-styles

box-disable-phone-columns

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

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

box-disable-tablet-columns

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

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

box-disable-desktop-columns

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

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

box-disable-large-desktop-columns

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

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

box-disable-phone-min-item-size

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

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

box-disable-tablet-min-item-size

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

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

box-disable-desktop-min-item-size

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

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

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

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

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

box-default-align-items

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

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.

Used By

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

box-align-items

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

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

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

Used By

• @mixin box-styles

box-justify-content

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

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

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

Used By

• @mixin box-styles

box-gap

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

The default flex and grid gap to apply between each item

box-padding

$box-padding: $gap !default;

The default padding to apply to the container.

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;

The default minimum size for each grid item

Used By

• @mixin box-variables

box-grids

$box-grids: () !default;

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

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,
  fallback-media-columns,
  phone-columns,
  phone-item-min-size,
  phone-item-min-height,
  tablet-columns,
  tablet-item-min-size,
  tablet-item-min-height,
  desktop-columns,
  desktop-item-min-size,
  desktop-item-min-height,
  large-desktop-columns,
  large-desktop-item-min-size,
  large-desktop-item-min-height
);

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

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) { … }

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

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) { … }

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

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 { … }

Conditionally applies the css variables based on feature flags

Requires

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

box-styles

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

Generates all the styles based on feature flags.

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-media-queries
• $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

a var() statement

Requires

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