PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_table.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_table.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_table.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 7,376 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source // sass-lint:disable force-element-nesting, no-qualifying-elements //// /// @group table //// /// Default color for table background. /// @type Color $table-background: $white !default; /// Default scale for darkening the striped table rows and the table border. /// @type Number $table-color-scale: 5% !default; /// Default style for table border. /// @type List $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default; /// Default padding for table. /// @type Number $table-padding: rem-calc(8 10 10) !default; /// Default scale for darkening the table rows on hover. /// @type Number $table-hover-scale: 2% !default; /// Default color of standard rows on hover. /// @type List $table-row-hover: darken($table-background, $table-hover-scale) !default; /// Default color of striped rows on hover. /// @type List $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default; /// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created. /// @type Boolean $table-is-striped: true !default; /// Default background color for striped rows. /// @type Color $table-striped-background: smart-scale($table-background, $table-color-scale) !default; /// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping. /// @type Keyword $table-stripe: even !default; /// Default color for header background. /// @type Color $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default; /// Default color of header rows on hover. /// @type List $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default; /// Default color for footer background. /// @type Color $table-foot-background: smart-scale($table-background, $table-color-scale) !default; /// Default color of footer rows on hover. /// @type List $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default; /// Default font color for header. /// @type Color $table-head-font-color: $body-font-color !default; /// Default font color for footer. /// @type Color $table-foot-font-color: $body-font-color !default; /// Default value for showing the header when using stacked tables. /// @type Boolean $show-header-for-stacked: false !default; @mixin -zf-table-stripe($stripe: $table-stripe) { tr { // If stripe is set to even, darken the even rows. @if $stripe == even { &:nth-child(even) { border-bottom: 0; background-color: $table-striped-background; } } // If stripe is set to odd, darken the odd rows. @else if $stripe == odd { &:nth-child(odd) { background-color: $table-striped-background; } } } } @mixin -zf-table-unstripe() { tr { border-bottom: 0; border-bottom: $table-border; background-color: $table-background; } } @mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) { thead, tbody, tfoot { border: $table-border; background-color: $table-background; } // Caption caption { padding: $table-padding; font-weight: $global-weight-bold; } // Table head thead { background: $table-head-background; color: $table-head-font-color; } // Table foot tfoot { background: $table-foot-background; color: $table-foot-font-color; } // Table head and foot thead, tfoot { // Rows within head and foot tr { background: transparent; } // Cells within head and foot th, td { padding: $table-padding; font-weight: $global-weight-bold; text-align: #{$global-left}; } } // Table rows tbody { th, td { padding: $table-padding; } } // If tables are striped @if $is-striped == true { tbody { @include -zf-table-stripe($stripe); } &.unstriped { tbody { @include -zf-table-unstripe(); background-color: $table-background; } } } // If tables are not striped @else if $is-striped == false { tbody { @include -zf-table-unstripe(); } &.striped { tbody { @include -zf-table-stripe($stripe); } } } } /// Adds the general styles for tables. /// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even. @mixin table( $stripe: $table-stripe, $nest: false ) { width: 100%; margin-bottom: $global-margin; border-radius: $global-radius; @if $nest { @include -zf-table-children-styles($stripe); } @else { @at-root { @include -zf-table-children-styles($stripe); } } } /// Adds the ability to horizontally scroll the table when the content overflows horizontally. @mixin table-scroll { display: block; width: 100%; overflow-x: auto; } /// Slightly darkens the table rows on hover. @mixin table-hover { thead tr { //Darkens the table header rows on hover. &:hover { background-color: $table-head-row-hover; } } tfoot tr { //Darkens the table footer rows on hover. &:hover { background-color: $table-foot-row-hover; } } tbody tr { //Darkens the non-striped table rows on hover. &:hover { background-color: $table-row-hover; } } @if $table-is-striped == true { // Darkens the even striped table rows. @if($table-stripe == even) { &:not(.unstriped) tr:nth-of-type(even):hover { background-color: $table-row-stripe-hover; } } // Darkens the odd striped table rows. @elseif($table-stripe == odd) { &:not(.unstriped) tr:nth-of-type(odd):hover { background-color: $table-row-stripe-hover; } } } @else if $table-is-striped == false { // Darkens the even striped table rows. @if($table-stripe == even) { &.striped tr:nth-of-type(even):hover { background-color: $table-row-stripe-hover; } } // Darkens the odd striped table rows. @elseif($table-stripe == odd) { &.striped tr:nth-of-type(odd):hover { background-color: $table-row-stripe-hover; } } } } /// Adds styles for a stacked table. Useful for small-screen layouts. /// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked. @mixin table-stack($header: $show-header-for-stacked) { @if $header { thead { th:first-child { display: block; } th { display: none; } } } @else { thead { display: none; } } tfoot { display: none; } tr, th, td { display: block; } td { border-top: 0; } } @mixin foundation-table($nest: false) { table { @include table($nest: $nest); } table.stack { @include breakpoint(medium down) { @include table-stack; } } table.scroll { @include table-scroll; } table.hover { @include table-hover; } .table-scroll { overflow-x: auto; table { width: auto; } } }