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.