Boolean if scroll momentum should be added by default for iOS. This can probably be removed one day when iOS natively supports scroll momentum on anything except the main document.
$rmd-utils-ios-scroll-momentum: true !default;Boolean if the dense spec should automatically be applied based on media queries once the app has reached a "desktop" size.
$rmd-utils-auto-dense: false !default;Boolean if the rtl fixes should be included by default. You can save a few bytes in your bundle size by disabling this if you don't need to worry about right-to-left languages in your app.
$rmd-utils-enable-rtl: true !default;The default z-index to use for temporary elements like dialogs and menus. It is recommended to keep all of these the same since it makes portalling work much better. If the z-indexes are different, you might need to update the portal container to be a parent temporary element instead.
$rmd-utils-temporary-element-z-index: 30 !default;A list of the supported swappable variables for rmd-utils-swap-position.
$rmd-utils-swappable-positions: top right bottom left;A list of the supported swappable variables prefixes for rmd-utils-swap-position.
$rmd-utils-swappable-position-prefixes: border margin padding;Boolean if the validation for valid themes and other things should occur. It is recommended to keep this enabled, but you might see a build speed perf by setting this to true.
$rmd-utils-skip-validation: false !default;Boolean if the moz focusring and inner-focus styles should be removed for the rmd-utils-hide-focus-outline mixin by default. This is generally recommended since custom focus styles will be added instead.
$rmd-utils-fix-moz-focus: true !default;The max width for a phone when in portrait or landscape mode.
$rmd-utils-phone-max-width: 47.9375em !default;The min width for a tablet in portrait or landscape mode.
$rmd-utils-tablet-min-width: 48em !default;The max width for a tablet in portrait or landscape mode.
$rmd-utils-tablet-max-width: 64em !default;The min width for a desktop screen.
$rmd-utils-desktop-min-width: 64.0625em !default;The min width for a large desktop screen.
$rmd-utils-large-desktop-min-width: 80em !default;The css variable that is used to track how many columns there are within the Grid component.
$rmd-grid-columns-var: --rmd-grid-cols;The css variable that is used to apply a gutter between each cell in the Grid component.
$rmd-grid-gutter-var: --rmd-grid-gutter;The css variable that is used to apply margin to cells within the grid components.
$rmd-grid-cell-margin-var: --rmd-cell-margin;The css variable that is used to apply size to cells within the GridList component.
$rmd-grid-cell-size-var: --rmd-cell-size;The default amount of padding to apply to the Grid component. This is a bit different than the flex grid since the cells within this grid will not have outer margin.
$rmd-grid-padding: 1rem !default;The default amount of margin to apply between each cell within the Grid component.
$rmd-grid-cell-margin: 1rem !default;The material design grid system is a bit weird and does a 4 -> 8 -> 12 column layout for phone -> tablet -> desktop. This is really nice when your grid only uses even numbers, but the second you add an odd number in there, it breaks down and becomes confusing.
This variable is a quick way to opt-out of this grid system and have a static number of columns for each media type.
$rmd-grid-columns: null !default;The default number of columns to render on mobile devices in the Grid component.
$rmd-grid-phone-columns: if($rmd-grid-columns, $rmd-grid-columns, 4) !default;The default number of columns to render on tablet devices in the Grid component.
$rmd-grid-tablet-columns: if($rmd-grid-columns, $rmd-grid-columns, 8) !default;The default number of columns to render on desktop screens in the Grid component.
$rmd-grid-desktop-columns: if(
$rmd-grid-columns,
$rmd-grid-columns,
12
) !default;The default number of columns to render on large desktop screens in the Grid component.
$rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default;The default amount of padding to apply to the GridList component.
$rmd-grid-list-padding: 0.5rem !default;The default amount of margin to apply to each cell within the GridList component.
$rmd-grid-list-cell-margin: 0.5rem !default;The default max size that each cell can be within the GridList component.
$rmd-grid-list-cell-max-size: 9.375rem !default;This is a simple mixin that will create styles from a Map of properties with values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style-map | The map of styles that should be applied. If this is | Map | — |
A simple mixin that allows you to update styles when the [dir="rtl"] is present for languages that read right to light. This is mostly used to update spacing with margins or padding and a more "verbose" method of declaring rtl styles.
@use "react-md" as *;
.my-class {
margin-right: 1rem;
@include rmd-utils-rtl {
margin-left: 1rem;
margin-right: auto;
}
}
This mixin will try to automatically swap the positioning styles for rtl languages. If the swapped style should have something other than auto as the new style, that style should be included in the $swapped-styles map with the correct value.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property that should be reversed for rtl languages. | String | — |
$value | The value that should be used for the original property value or the inversed property value when in rtl mode. | String|Number | — |
$swapped-value | The value to use when in rtl languages for the original property. When this is set to | String|Number | null |
This mixin will try to automatically swap the positioning styles for rtl languages. If the swapped style should have something other than auto as the new style, that style should be included in the $swapped-styles map with the correct value.
| Name | Description | Type | Default Value |
|---|---|---|---|
$styles | The styles that should be swapped for rtl languages.
Right now react-md only supports the | Map | — |
$swapped-styles | Any optional swapped style overrides that should be applied. | Map | () |
A very simple mixin that will center an element within the page for you when you aren't using flexbox or grid for the part of the layout.
A very simple mixin that is used to position an element in the center of another element by using some transforms and position: absolute. You will need to make sure that the parent element has position: relative to work.
An extremely simple util that is used to add scrolling to an element with a "patch" for adding scroll momentum to iOS.
| Name | Description | Type | Default Value |
|---|---|---|---|
$position | This should either be "x", "y", or null. This will just change the style between overflow, overflow-x, and overflow-y. | String | null |
$type | The scroll type to apply. It is recommended to use the default of | String | auto |
$enable-momentum | Boolean if iOS scroll momentum should be "patched". | Boolean | $rmd-utils-ios-scroll-momentum |
A helper mixin that will hide the outline style when a user focuses any element / on the page. All this really does is create an outline-style: none when the element is focused.
| Name | Description | Type | Default Value |
|---|---|---|---|
$fix-moz-focus | Boolean if the Firefox focus inner styles should also be removed. | Boolean | $rmd-utils-fox-moz-focus |
An extremely simple mixin that will allow any element to be fixed to the entire viewport size.
| Name | Description | Type | Default Value |
|---|---|---|---|
$position | The positioning that should be applied.
This should be one of the values for the | String | fixed |
Creates the styles to apply to a pseudo element (::before or ::after) so that it spans the entire size of the container element. This is really useful for focus effects or other interaction states. This relies on the parent to have position: relative; to work.
| Name | Description | Type | Default Value |
|---|---|---|---|
$z-index | The z-index to use. | Number | 0 |
$position | CSS position to apply to the pseudo element. This should normally be | String | absolute |
Creates styles to make a screenreader only class visible while focused.
Creates styles so that an element is visible only for screen readers.
| Name | Description | Type | Default Value |
|---|---|---|---|
$focusable | Boolean if the element should still be focusable and then be visible when focused. | Boolean | false |
$focus-suffix | The suffix to use for an element that can be focusable. This will be used alongside | String | '&--focusable' |
This mixin will hide the scrollbar for an element but still allow scrolling by using the scrollbar-width property along with the -webkit-scrollbar pseudo selector. If on a non-MacOS and the horizontal scrollbars were hidden, the user can still scroll by holding shift while scrolling.
Note: This only works due to the limited browser support of this library. If you need to support older browsers, don't use this.
Creates a media query so that only phones will be targeted with the styles.
This media query will stop at the phone's max width instead of being a min-width query since it would be better to just apply the phone styles as a base and use the tablet or desktop min-width queries for additional overrides.
Creates a media query so devices targeted at the min-width of a tablet and above will gain these styles.
Creates a media query so that screen sizes between the min and max width of a tablet will only gain these styles.
Creates a media query so that screen sizes matching at least the min width for a desktop will gain these styles.
Creates a media query so that screen sizes matching at least the min width for a large desktop will gain these styles.
Since v2.1.0
This mixin should mostally be used internally within react-md so that react-md mixins that use a rmd- prefixed class work correctly if included from a css module file. This basically prefixes the react-md class with :global and suffixes with :local &.
| Name | Description | Type | Default Value |
|---|---|---|---|
$class-name | The class name that should be optionally prefixed with | String | — |
$css-modules | Boolean if the class name should be updated to be used with css modules. | Boolean | false |
$parent-selector | Boolean if the selector should end with the parent selector | Boolean | true |
This mixin allows you to add styles to an element only when the user is interacting with your app on a touch device.
| Name | Description | Type | Default Value |
|---|---|---|---|
$css-modules | Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with | Boolean | false |
@use "react-md" as *;
.my-class-name {
@include rmd-utils-touch-only {
&:hover {
background-color: transparent;
}
}
}
@use "react-md" as *;
.container {
@include rmd-utils-touch-only(true) {
&:hover {
background-color: transparent;
}
}
}
This mixin allows you to add styles to an element only when the user is interacting with your app with a keyboard.
| Name | Description | Type | Default Value |
|---|---|---|---|
$css-modules | Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with | Boolean | false |
@use "react-md" as *;
.my-class-name {
@include rmd-utils-keyboard-only {
&:focus {
box-shadow: inset 0 0 0 1px blue;
}
}
}
@use "react-md" as *;
.container {
@include rmd-utils-keyboard-only(true) {
&:focus {
box-shadow: inset 0 0 0 1px blue;
}
}
}
This mixin allows you to add styles to an element only when the user is interacting with your app with a mouse.
| Name | Description | Type | Default Value |
|---|---|---|---|
$css-modules | Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with | Boolean | false |
@use "react-md" as *;
.my-class-name {
@include rmd-utils-mouse-only {
&:hover {
background-color: yellow;
}
}
}
@use "react-md" as *;
.container {
@include rmd-utils-mouse-only(true) {
&:hover {
background-color: yellow;
}
}
}
Generates a new grid based on the provided padding, margin, and columns.
| Name | Description | Type | Default Value |
|---|---|---|---|
$padding | The amount of padding to apply to the base grid element. | Number | $rmd-grid-padding |
$gutter | The amount of margin to apply between each cell within the grid. Unlike flex grids, this will only be applied between cells instead of to the | Number | $rmd-grid-cell-margin |
$phone-columns | The number of columns that should appear per-row on phones. | Number | $rmd-grid-phone-columns |
$tablet-columns | The number of columns that should appear per-row on tablets. If this is not greater than the | Number | $rmd-grid-tablet-columns |
$desktop-columns | The number of columns that should appear per-row on desktop screens. If this is not greater than the | Number | $rmd-grid-desktop-columns |
$large-desktop-columns | The number of columns that should appear per-row on large desktop screens. If this is not greater than the | Number | $rmd-grid-large-desktop-columns |
This mixin is just a nice way to quickly make a cell span the entire width of the grid.
Note: if you set the number of columns for phone or tablet to 1, you'll need to also wrap this in the @include rmd-utils-tablet-media or @include rmd-utils-desktop-media mixins respectively.
A mixin that allows you to override the size of a cell within the Grid component manually. This is useful if you want to specify sizing without using the GridCell component wrapper.
| Name | Description | Type | Default Value |
|---|---|---|---|
$size | The number of columns the element should span. This should normally be a number greater than 1 since using 1 is the default cell size. | Number | — |
$phone-columns | The number of columns that should appear per-row on phones. | Number | $rmd-grid-phone-columns |
$tablet-columns | The number of columns that should appear per-row on tablets. If this is not greater than the | Number | $rmd-grid-tablet-columns |
$desktop-columns | The number of columns that should appear per-row on desktop screens. If this is not greater than the | Number | $rmd-grid-desktop-columns |
Creates the styles for all the cell column spans and "fixes" for smaller media types if the media types doesn't support the same number of columns.
A simple mixin that will allow you to add the current grid list cell size to any property.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The css property to apply the size to. | String | — |
$max-size | The max size that each cell can be. This is really just a fallback value if the | Number | $rmd-grid-list-cell-max-size |
$margin | The amount of margin that should be placed between each cell. This will be used with the current | Number | $rmd-grid-list-cell-margin |
Adds the current grid list cell's size to any element if you don't want to use the GridListCell component for sizing. This will always apply the margin and width, but the height can be opted-out if desired.
| Name | Description | Type | Default Value |
|---|---|---|---|
$margin | The amount of margin to apply to each cell for top, right, bottom and left. | Number | $rmd-grid-list-cell-margin |
$max-size | The max size that each cell can be. This is really just a fallback if the | Number | $rmd-grid-list-cell-max-size |
$include-height | Boolean if the cell's height should be restricted to the current cell size as well so it can be perfectly square. | Boolean | true |
Creates the styles for the GridList component
Generates all the styles for the grid systems in react-md.
This is a small utility function that helps set up your react-md app.
This will:
box-sizing to be border-box (helpful for calculation positions and sizing)html and bodyhtml tag if the @react-md/theme package
has been correctly includedhtml element if the @react-md/typography package
has been correctly includedThis mixin will attempt to apply all the available dense theme mixins that have been imported. This should normally be used within a :root selector and a media query.
@use "react-md" as *;
:root {
@include rmd-utils-desktop-media {
@include rmd-utils-dense;
}
}
This mixin will include the styles for all packages that have been imported in your scss files. If there are missing styles, you need to make sure to correctly import that package before calling this function.
Replace $search with $replace in $string
StringUpdated string
| Name | Description | Type | Default Value |
|---|---|---|---|
$string | Initial string | String | — |
$search | Substring to replace | String | — |
$replace | New value | String | — |
This function is used to validate a list or map to make sure they contain the provided key or value. This should mostly really only be internal use.
String|NullEither the map's value for the provided key or the provided value for a list when there is no error.
| Name | Description | Type | Default Value |
|---|---|---|---|
$list-or-map | The list or map to validate | List|Map | — |
$key-or-value | Either the value to check for in a list or a Map's key. | Color|String|Number | — |
$error-message | The prop name that was being used for the validation. This is mostly for a more helpful error message when a developer/user provided the wrong input. | String | — |
A utility function that can swap the position of different css styles. This is useful for RTL switching.
Stringa swapped style attribute string.
| Name | Description | Type | Default Value |
|---|---|---|---|
$style | The style to swap. This should be one of | String | — |
This function can be used to negate the value of a css variable. It just really wraps the variable with calc(-1 * #{$variable}).
Stringa calc string that negates a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$css-variable | The css variable string to negate. | String | — |