Foundation - Table Sass Reference

Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No. Name & Description Type Default Value
1

$table-background

Applies the background color for the table.

 Color $white
2

$table-color-scale

It specifies the scale for darkening the striped table rows and border.

 Number 5%
3

$table-border

It defines the style for the table border.

 List 1px solid smart-scale($table-background, $table-color-scale)
4

$table-padding

It provides padding of the table.

 Number rem-calc(8 10 10)
5

$table-hover-scale

It specifies the scale for darkening the striped table rows on hover.

 Number 2%
6

$table-row-hover

Applies the color for standard rows on hover.

 List darken($table-background, $table-hover-scale)
7

$table-row-stripe-hover

Applies the color for striped rows on hover.

 List darken($table-background, $table-color-scale + $table-hover-scale)
8

$table-striped-background

It provides the background color for striped rows.

 Color smart-scale($table-background, $table-color-scale)
9

$table-stripe

It shows the stripe on table rows. If a row is even, then even rows will have a background color and if a row is odd, then odd rows will have a background color. If row is empty or anyother value, then the table rows will have no stripes.

 Keyoword even
10

$table-head-background

It specifies the color of header background.

 Color smart-scale($table-background, $table-color-scale / 2)
11

$table-foot-background

It specifies the color of footer background.

 Color smart-scale($table-background, $table-color-scale)
12

$table-head-font-color

It defines the font color of a header.

 Color $body-font-color
13

$show-header-for-stacked

It shows the defualt value for the header when using stacked tables.

 Boolean false

Mixins

You can use the mixins to build the CSS class structure for your components as described below −

table

It adds styles for tables and styles can be included using the following mixin −

@include table($stripe);

It uses the parameter as defined in the following table −

Sr.No. Parameter & Description Type Default Value
1

$stripe

It shows the stripe on table rows using even, odd or none value. Even is the default value.

 Keyword $table-stripe

table-scroll

It scrolls the table horizontally by using the following mixin −

@include table-scroll;

table-hover

It hovers on the table rows by using the following mixin −

@include table-hover;

table-stack

It adds styles for the stacked table.

@include table-stack($header);

It uses the parameter as defined in the following table −

Sr.No. Parameter & Description Type Default Value
1

$header

It shows the header when table is stacked.

 Boolean $show-header-for-stacked
foundation_containers.htm
Advertisements