diff --git a/dist/mini-default.css b/dist/mini-default.css index acc0419..23356fd 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -978,8 +978,8 @@ button.large, [type="button"].large, [type="submit"].large, padding: 12px 18px; margin: 10px 8px; } -/* - Definitions for the responsive table component. +/* + Definitions for the responsive table component. */ table { border-collapse: separate; diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 47d921e..5414af8 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -765,3 +765,7 @@ - Added support for ARIA `role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB. - Highly optimized `input_control` module's buttons and button groups, by removing redundant selectors, based on specificity, bringing down the filesize to a managable 6.59KB again. - Optimized `sticky` `footer`s and `header`s a little bit. Should have no effect on filesize. + +## 20170116 + +- Added `$include-horizontal-table` flag in `table` module to conditionally enable/disable the `horizontal` `table`s. diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index 23fa09c..76c91aa 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -327,6 +327,8 @@ $table-mobile-card-spacing: 10px; // Space between cards - mobil $table-mobile-card-label: 'data-label'; // Attribute used to replace column headers // in mobile view [1] $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers +$include-horizontal-table: true; // Should horizontal elements be + // included? (`true`/`false`) [2] $table-horizontal-breakpoint: 768px; // Breakpoint for
horizontal view $table-horizontal-name: 'horizontal'; // Class name for
horizontal view $table-not-responsive-name: 'preset'; // Class name for
non-responsive view @@ -336,6 +338,8 @@ $table-striped-alt-body-back-color: // Alternate background color for // Notes: // [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table // in order for their mobile headers to display properly. +// [2] - If $include-horizontal-table is `true`, then the
horizontal biew will be included in a class defined by +// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint. // Variables for cards [1] $card-name: 'card'; // Class name for cards $card-back-color: #fafafa; // Background color for cards diff --git a/src/mini/_table.scss b/src/mini/_table.scss index 10f5a2f..fd2f736 100644 --- a/src/mini/_table.scss +++ b/src/mini/_table.scss @@ -1,9 +1,9 @@ -/* - Definitions for the responsive table component. +/* + Definitions for the responsive table component. */ // The tables use the common table elements and syntax. // Desktop view. -table { +table { border-collapse: separate; border-spacing: 0; // Apply border style by default always. Otherwise, browser default will be applied. @@ -38,7 +38,7 @@ table { } } thead th { - border-top: 0; + border-top: 0; } th { @if $table-head-back-color != $back-color { @@ -58,7 +58,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n @media (max-width: #{$table-mobile-breakpoint}) { table:not(.#{$table-not-responsive-name}) { border-collapse: collapse; - border: 0; + border: 0; width: 100%; @if $table-box-shadow != none { box-shadow: none; @@ -71,20 +71,20 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n margin: -1px; overflow: hidden; padding: 0; - position: absolute; + position: absolute; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); - clip-path: inset(100%); + clip-path: inset(100%); } tr { display: block; border: $table-border-style; @if $table-border-radius != 0 { border-radius: $table-border-radius; - } + } @if $table-box-shadow != none { box-shadow: $table-box-shadow; - } + } @if $table-body-back-color != $back-color { background: $table-body-back-color; } @@ -94,7 +94,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n display: block; border: 0; @if $table-border-style != 0 { - border-bottom: $table-border-style; + border-bottom: $table-border-style; } text-align: right; } @@ -111,32 +111,12 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n } } // Horizontal table view. +$include-horizontal-table: true !default; // Should horizontal tables be included? $table-horizontal-name: 'horizontal' !default; // Class name for table horizontal view -@media (min-width: #{$table-horizontal-breakpoint}) { - table.#{$table-horizontal-name} { - // Old syntax - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - // New syntax - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - padding: $table-row-padding; - caption { - // Old syntax - -webkit-box-flex: 1; - max-width: 100%; - // New syntax - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - thead, tbody { - // Old syntax +@if $include-horizontal-table { + @media (min-width: #{$table-horizontal-breakpoint}) { + table.#{$table-horizontal-name} { + // Old syntax display: -webkit-box; -webkit-box-flex: 0; -webkit-box-orient: horizontal; @@ -144,86 +124,87 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h // New syntax display: -webkit-flex; display: flex; - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - thead { - z-index: 999; // Fixes the visibility of the element. - } - tbody { - overflow: auto; // Allows content scrolling. - // Old syntax - -webkit-box-pack: justify; - // New syntax - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - tr { - // Old syntax - display: -webkit-box; - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - // New syntax - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - th, td { - width: 100%; - border: $table-border-style; // Apply to overwrite. - @if $table-border-style != 0 { - & + th, & + td { - border-top: 0; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + padding: $table-row-padding; + caption { + // Old syntax + -webkit-box-flex: 1; + max-width: 100%; + // New syntax + -webkit-flex: 0 0 100%; + flex: 0 0 100%; + } + thead, tbody { + // Old syntax + display: -webkit-box; + -webkit-box-flex: 0; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + // New syntax + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + thead { + z-index: 999; // Fixes the visibility of the element. + } + tbody { + overflow: auto; // Allows content scrolling. + // Old syntax + -webkit-box-pack: justify; + // New syntax + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-flex: 1 0 0; + flex: 1 0 0; + } + tr { + // Old syntax + display: -webkit-box; + -webkit-box-flex: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + // New syntax + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + } + th, td { + width: 100%; + border: $table-border-style; // Apply to overwrite. + @if $table-border-style != 0 { + & + th, & + td { + border-top: 0; + } } - } - } - th { - text-align: right; - } - thead { - tr:first-child { - padding-left: 0; - } - } - tbody { - tr:first-child > td { - padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. - } - } - + } + th { + text-align: right; + } + thead { + tr:first-child { + padding-left: 0; + } + } + tbody { + tr:first-child > td { + padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. + } + } + + } } -} -// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive. -@media (max-width: #{$table-mobile-breakpoint}) { - table.#{$table-horizontal-name}.#{$table-not-responsive-name} { - // Old syntax - display: -webkit-box; - -webkit-box-flex: 0; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - // New syntax - display: -webkit-flex; - display: flex; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-flex-flow: row wrap; - flex-flow: row wrap; - caption { - // Old syntax - -webkit-box-flex: 1; - max-width: 100%; - // New syntax - -webkit-flex: 0 0 100%; - flex: 0 0 100%; - } - thead, tbody { - // Old syntax + // Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive. + @media (max-width: #{$table-mobile-breakpoint}) { + table.#{$table-horizontal-name}.#{$table-not-responsive-name} { + // Old syntax display: -webkit-box; -webkit-box-flex: 0; -webkit-box-orient: horizontal; @@ -231,54 +212,76 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h // New syntax display: -webkit-flex; display: flex; - -webkit-flex-flow: row nowrap; - flex-flow: row nowrap; - } - thead { - z-index: 999; // Fixes the visibility of the element. - } - tbody { - overflow: auto; - // Old syntax - -webkit-box-pack: justify; - // New syntax - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-flex: 1 0 0; - flex: 1 0 0; - } - tr { - // Old syntax - display: -webkit-box; - -webkit-box-flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - // New syntax - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; - } - th, td { - width: 100%; - border: $table-border-style; // Apply to overwrite. - @if $table-border-style != 0 { - & + th, & + td { - border-top: 0; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + caption { + // Old syntax + -webkit-box-flex: 1; + max-width: 100%; + // New syntax + -webkit-flex: 0 0 100%; + flex: 0 0 100%; + } + thead, tbody { + // Old syntax + display: -webkit-box; + -webkit-box-flex: 0; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + // New syntax + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + thead { + z-index: 999; // Fixes the visibility of the element. + } + tbody { + overflow: auto; + // Old syntax + -webkit-box-pack: justify; + // New syntax + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-flex: 1 0 0; + flex: 1 0 0; + } + tr { + // Old syntax + display: -webkit-box; + -webkit-box-flex: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + // New syntax + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + } + th, td { + width: 100%; + border: $table-border-style; // Apply to overwrite. + @if $table-border-style != 0 { + & + th, & + td { + border-top: 0; + } } - } - } - th { - text-align: right; - } - tbody { - tr:first-child > td { - padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. - } - } - + } + th { + text-align: right; + } + tbody { + tr:first-child > td { + padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. + } + } + + } } } // Striped tables.