Lists

Placeholders

md-list-unstyled
%md-list-unstyled {}
Sass (Scss)
Click to expand

Description

A placeholder for removing the default margin, padding and list styles

Used by

Variables

md-list-include-icon
$md-list-include-icon: true !default;
Sass (Scss)

Description

Boolean if the styles for lists with icons should be included.

Type

Boolean
md-list-include-avatar
$md-list-include-avatar: true !default;
Sass (Scss)

Description

Boolean if the styles for lists with avatars should be included.

Type

Boolean
md-list-include-two-lines
$md-list-include-two-lines: true !default;
Sass (Scss)

Description

Boolean if the styles for lists with two lines of text should be included.

Type

Boolean
md-list-include-three-lines
$md-list-include-three-lines: true !default;
Sass (Scss)

Description

Boolean if the styles for lists with three lines of text should be included.

Type

Boolean
md-list-include-controls
$md-list-include-controls: true !default;
Sass (Scss)

Description

Boolean if the styles for lists with controls should be included.

Type

Boolean
md-list-include-inline
$md-list-include-inline: true !default;
Sass (Scss)

Description

Boolean if inline lists should be included. This will display a list horizontally instead of vertically.

Type

Boolean
md-list-include-unstyled-class-name
$md-list-include-unstyled-class-name: true !default;
Sass (Scss)

Description

Boolean if the .md-list-unstyled should be included by default.

Type

Boolean
md-list-inline-padding
$md-list-inline-padding: 0 !default;
Sass (Scss)

Description

The amount of padding to apply to the List component when displayed inline.

Type

Number

Used by

md-list-left-padding
$md-list-left-padding: 72px !default;
Sass (Scss)

Description

This is really the keyline to use for lists. When a list item is inset, this will be applied to the tile.

Type

Number

Used by

md-list-divider-margin
$md-list-divider-margin: 8px !default;
Sass (Scss)

Description

The additional margin top and bottom to apply to a divider in a list.

Type

Number

Used by

md-list-nested-items-depth
$md-list-nested-items-depth: 2 !default;
Sass (Scss)

Description

The max depth for nested items in lists. This is used to generate some additional padding on nested lists.

Type

Number
md-list-nested-items-increment
$md-list-nested-items-increment: .5 !default;
Sass (Scss)

Description

A number for how much to increment the nested depth multiplier

Type

Number
md-list-nested-items-initial-padding
$md-list-nested-items-initial-padding: $md-list-left-padding !default;
Sass (Scss)

Description

The initial padding to start the nested items at.

Type

Number
md-list-mobile-padding
$md-list-mobile-padding: 8px !default;
Sass (Scss)

Description

The top and bottom padding to apply to a list on mobile devices.

Type

Number

Used by

See

md-list-mobile-primary-font-size
$md-list-mobile-primary-font-size: 16px !default;
Sass (Scss)

Description

The font size to apply to the primary text in a list item on mobile devices.

Type

Number

Used by

See

md-list-mobile-secondary-font-size
$md-list-mobile-secondary-font-size: 14px !default;
Sass (Scss)

Description

The font size to apply to the secondary text in a list item on mobile devices.

Type

Number

Used by

See

md-list-mobile-height
$md-list-mobile-height: 48px !default;
Sass (Scss)

Description

The height for a single line list item on mobile devices.

Type

Number

Used by

See

md-list-mobile-avatar-height
$md-list-mobile-avatar-height: 56px !default;
Sass (Scss)

Description

The height for a list item that has an avatar on mobile devices.

Type

Number

Used by

See

md-list-mobile-two-lines-height
$md-list-mobile-two-lines-height: 72px !default;
Sass (Scss)

Description

The height for a list item that has two lines of text on mobile devices.

Type

Number

Used by

See

md-list-mobile-three-lines-height
$md-list-mobile-three-lines-height: 88px !default;
Sass (Scss)

Description

The height for a list item that has three lines of text on mobile devices.

Type

Number

Used by

See

md-list-mobile-three-lines-addon-margin-top
$md-list-mobile-three-lines-addon-margin-top: 14px !default;
Sass (Scss)

Description

The margin top for icons or avatars in a three line list item on mobile devices.

Type

Number

Used by

See

md-list-desktop-padding
$md-list-desktop-padding: 4px !default;
Sass (Scss)

Description

The top and bottom padding for a list on desktop screens.

Type

Number

Used by

See

md-list-desktop-font-size
$md-list-desktop-font-size: 13px !default;
Sass (Scss)

Description

The font size to apply to a list item's primary and secondary text on desktop screens.

Type

Number

Used by

See

md-list-desktop-height
$md-list-desktop-height: 40px !default;
Sass (Scss)

Description

The height for a single line list item on desktop screens.

Type

Number

Used by

See

md-list-desktop-avatar-height
$md-list-desktop-avatar-height: 48px !default;
Sass (Scss)

Description

The height for a list item that has an avatar on desktop screens.

Type

Number

Used by

See

md-list-desktop-two-lines-height
$md-list-desktop-two-lines-height: 60px !default;
Sass (Scss)

Description

The height for a list item that has two lines of text on desktop screens.

Type

Number

Used by

See

md-list-desktop-three-lines-height
$md-list-desktop-three-lines-height: 76px !default;
Sass (Scss)

Description

The height for a list item that has three lines of text on desktop screens.

Type

Number

Used by

See

md-list-desktop-three-lines-addon-margin-top
$md-list-desktop-three-lines-addon-margin-top: 12px !default;
Sass (Scss)

Description

The margin top to use for an icon or an avatar in a three list list item on desktop screens.

Type

Number

Used by

See

md-list-padding
$md-list-padding: null !default;
Sass (Scss)

Description

The amount of padding to apply to a list. This value will take precedence over the mobile and desktop variables so that this padding will be applied on all devices instead of switching based on media queries.

Type

Number

Used by

See

md-list-primary-font-size
$md-list-primary-font-size: null !default;
Sass (Scss)

Description

The font size to use for the primary text in a list item. This value will take precedence over the mobile and desktop variables so the font size is applied on all devices instead of switching based on media queries.

Type

Number

Used by

See

md-list-secondary-font-size
$md-list-secondary-font-size: null !default;
Sass (Scss)

Description

The font size to use for the secondary text in a list item. This value will take precedence over the mobile and desktop variables so the font size is applied on all devices instead of switching based on media queries.

Type

Number

Used by

See

md-list-height
$md-list-height: null !default;
Sass (Scss)

Description

The height to use for a list item. This value will take precedence over the mobile and desktop values so that the height is applied on all devices instead of based on media queries.

Type

Number

Used by

See

md-list-avatar-height
$md-list-avatar-height: null !default;
Sass (Scss)

Description

The height to use for a list item that has an avatar. This value will take precedence over the mobile and desktop values so the height is applied on all devices instead of based on media queries.

Type

Number

Used by

See

md-list-two-lines-height
$md-list-two-lines-height: null !default;
Sass (Scss)

Description

The height to use for a list item that has two lines of text. This value will take precedence over the mobile and desktop values so the height is applied on all devices instead of based on media queries.

Type

Number

Used by

See

md-list-three-lines-height
$md-list-three-lines-height: null !default;
Sass (Scss)

Description

The height to use for a list item that has three lines of text. This value will take precedence over the mobile and desktop values so the height is applied on all devices instead of based on media queries.

Type

Number

Used by

See

md-list-three-lines-addon-margin-top
$md-list-three-lines-addon-margin-top: null !default;
Sass (Scss)

Description

The margin top apply to icons or avatars that appear in a list with three lines of text. This value will take precedence over the mobile and desktop values so the margin is applied on all devices instead of based on media queries.

Type

Number

See

md-list-addon-line-height
$md-list-addon-line-height: $md-line-height !default;
Sass (Scss)

Description

The line-height to apply any icons or avatars that are placed to the left or right of the text in a list item. This is really only applied if the line-height is altered in a parent element.

Type

Number

Used by

Mixins

react-md-lists
@mixin react-md-lists($light-theme: $md-light-theme, $nested-items-depth: $md-list-nested-items-depth, $nested-items-increment: $md-list-nested-items-increment, $include-media: $md-media-included, $include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines, $include-controls: $md-list-include-controls, $include-unstyled: $md-list-include-unstyled-class-name, $include-inline: $md-list-include-inline, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for lists.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the lists should be styled for the light theme.

Boolean
$md-light-theme
$nested-items-depth

The maximum depth for nested items.

Number
$md-list-nested-items-depth
$nested-items-increment

The amount the nested item's padding should be incremented by.

Number
$md-list-nested-items-increment
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines
$include-controls

Boolean if the styles for lists with controls to be included.

Boolean
$md-list-include-controls
$include-unstyled

Boolean if the .md-list-unstyled class name should also be generated.

Boolean
$md-list-include-unstyled-class-name
$include-inline

Boolean if inline lists should also be created.

Boolean
$md-list-include-inline
$include-dense-icons

Boolean if the dense styles for icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-lists;
Sass (Scss)

Requires

Used by

react-md-lists-nested
@mixin react-md-lists-nested($nested-items-depth: $md-list-nested-items-depth, $nested-items-increment: $md-list-nested-items-increment) {}
Sass (Scss)
Click to expand

Description

Creates the styles for nested lists. It basically loops over the $nested-items-depth param and adds padding-left to each nested list equal to the $md-list-left-padding * (1 + $depth * $nested-items-increment).

Parameters

NameDescriptionTypeDefault value
$nested-items-depth

The maximum depth for nested lists.

Number
$md-list-nested-items-depth
$nested-items-increment

The amount that the nested list's padding should be incremented at each step.

Number
$md-list-nested-items-increment

Examples

Example Usage SCSS

@include react-md-lists-nested;
Sass (Scss)

Requires

Used by

react-md-lists-mobile
@mixin react-md-lists-mobile($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines) {}
Sass (Scss)
Click to expand

Description

Includes the styles for lists on mobile devices. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-lists-mobile;
}
Sass (Scss)

Requires

Used by

react-md-lists-desktop
@mixin react-md-lists-desktop($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for lists on desktop screens. This should normally be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines
$include-dense-icons

Boolean if the dense styles for icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-lists-mobile;
}
Sass (Scss)

Requires

Used by

react-md-lists-media
@mixin react-md-lists-media($include-icon: $md-list-include-icon, $include-avatar: $md-list-include-avatar, $include-two-lines: $md-list-include-two-lines, $include-three-lines: $md-list-include-three-lines, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the media queries and styles for lists on mobile devices and desktop screens.

Parameters

NameDescriptionTypeDefault value
$include-icon

Boolean if the styles for lists with icons should be included.

Boolean
$md-list-include-icon
$include-avatar

Boolean if the styles for lists with avatars should be included.

Boolean
$md-list-include-avatar
$include-two-lines

Boolean if the styles for lists with two lines of text should be included.

Boolean
$md-list-include-two-lines
$include-three-lines

Boolean if the styles for lists with three lines of text should be included.

Boolean
$md-list-include-three-lines
$include-dense-icons

Boolean if the dense styles for icons should be included.

Boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-lists-media;
Sass (Scss)

Requires

Used by

react-md-theme-lists
@mixin react-md-theme-lists($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Updates the theme for lists ONLY if the $light-theme does not equal the $md-light-theme.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the lists should be themed by the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-theme-lists(!$md-light-theme);
Sass (Scss)

Requires

Used by