diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 0ba5639..bae4e63 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -900,3 +900,5 @@
- Updated `input_control`, splitting into main file and mixins file. Added **hidden flag** `$hide-check-and-radio` and standardized existing one (`$input-high-specificity-selectors`).
- Cleanup and housekeeping for readability in flavor files for updated `input_control`.
- *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.
+- Updated `table` module's definitions and variables, added **hidden flag** `$include-striped-table` in order to make sure `.striped` `table`s can be turned on and off.
+- Cleanup of relevant variables and comments in flavor files.
diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss
index b43c57a..c4d31a7 100644
--- a/src/flavors/mini-default.scss
+++ b/src/flavors/mini-default.scss
@@ -298,32 +298,29 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
// If the value is `false`, some fixes will be applied to the element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for responsive tables
-$table-border-style: 1px solid #bdbdbd; // Border style for
and children
+$table-border-style: 1px solid #bdbdbd; // Border style for
and children
$table-border-radius: 0; // Border radius for
and children
-$table-margin: 0 auto; // Margin for
-$table-box-shadow: // Box shadow for
+$table-margin: 0 auto; // Margin for
+$table-box-shadow: // Box shadow for
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$table-caption-font-size: 1.5em; // Font size for
-$table-caption-margin: 6px 8px 12px; // Margin for
-$table-row-padding: 8px; // Padding for
- both views
-$table-column-padding: 10px; // Padding for
and
- desktop view
-$table-head-back-color: #e0e0e0; // Background color for
-$table-head-fore-color: $fore-color; // Tex color for
-$table-body-back-color: #fafafa; // Background color for
-$table-body-fore-color: $fore-color; // Text color for
-$table-mobile-breakpoint: 767px; // Breakpoint for
mobile view
-$table-mobile-card-spacing: 10px; // Space between
cards - mobile view
-$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
-$table-striped-name: 'striped'; // Class name for striped
-$table-striped-alt-body-back-color: // Alternate background color for
in
- #eeeeee; // striped
+$table-caption-font-size: 1.5em; // Font size for
+$table-caption-margin: 6px 8px 12px; // Margin for
+$table-row-padding: 8px; // Padding for
- both views
+$table-column-padding: 10px; // Padding for
and
- desktop view
+$table-head-back-color: #e0e0e0; // Background color for
+$table-head-fore-color: $fore-color; // Tex color for
+$table-body-back-color: #fafafa; // Background color for
+$table-body-fore-color: $fore-color; // Text color for
+$table-mobile-breakpoint: 767px; // Breakpoint for
mobile view
+$table-mobile-card-spacing: 10px; // Space between
cards - mobile view
+$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
+$table-striped-name: 'striped'; // Class name for striped
+$table-striped-alt-body-back-color: #eeeeee; // Alternate background color for
in striped
// 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.
diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss
index f97f072..41384da 100644
--- a/src/flavors/mini-sucroa.scss
+++ b/src/flavors/mini-sucroa.scss
@@ -266,25 +266,25 @@ $button-variant4-name: 'inverse'; // Class name for button variant 4
$button-variant4-back-color: #331e36; // Background color for button variant 4
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
$button-variant4-hover-back-opacity: 0.75; // Background opacity for button variant 4 on hover or focus
-$button-variant4-fore-color: #fffddc; // Text color for button variant 4
-$button-style1-name: 'small'; // Class name for button style 1
-$button-style1-border-style: 0; // Border style for button style 1
-$button-style1-border-radius: 2px; // Border radius for button style 1
-$button-style1-padding: 4px 6px; // Padding for button style 1
-$button-style1-margin: 6px 8px; // Margin for button style 1
-$button-style2-name: 'large'; // Class name for button style 2
-$button-style2-border-style: 0; // Border style for button style 2
-$button-style2-border-radius: 4px; // Border radius for button style 2
-$button-style2-padding: 12px 18px; // Padding for button style 2
-$button-style2-margin: 10px 8px; // Margin for button style 2
-$checkbox-size: 16px; // Size for checkbox/radio [2]
-$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
-$checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
-$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
-$checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
-$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
+$button-variant4-fore-color: #fffddc; // Text color for button variant 4
+$button-style1-name: 'small'; // Class name for button style 1
+$button-style1-border-style: 0; // Border style for button style 1
+$button-style1-border-radius: 2px; // Border radius for button style 1
+$button-style1-padding: 4px 6px; // Padding for button style 1
+$button-style1-margin: 6px 8px; // Margin for button style 1
+$button-style2-name: 'large'; // Class name for button style 2
+$button-style2-border-style: 0; // Border style for button style 2
+$button-style2-border-radius: 4px; // Border radius for button style 2
+$button-style2-padding: 12px 18px; // Padding for button style 2
+$button-style2-margin: 10px 8px; // Margin for button style 2
+$checkbox-size: 16px; // Size for checkbox/radio [2]
+$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
+$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
+$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
+$checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
+$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
-$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
+$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
// Notes:
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
@@ -295,34 +295,31 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled
// If the value is `false`, some fixes will be applied to the element.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for responsive tables
-$table-border-style: 1px solid #a9a2ba; // Border style for
and children
+$table-border-style: 1px solid #a9a2ba; // Border style for
and children
$table-border-radius: 2px; // Border radius for
and children
-$table-margin: 0 auto; // Margin for
-$table-box-shadow: // Box shadow for
+$table-margin: 0 auto; // Margin for
+$table-box-shadow: // Box shadow for
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
-$table-caption-font-size: 1.5em; // Font size for
-$table-caption-margin: 6px 10px 12px; // Margin for
-$table-row-padding: 10x; // Padding for
- both views
-$table-column-padding: 10px; // Padding for
and
- desktop view
-$table-head-back-color: #d3cae8; // Background color for
-$table-head-fore-color: $fore-color; // Tex color for
-$table-body-back-color: #f2edff; // Background color for
-$table-body-fore-color: $fore-color; // Text color for
-$table-mobile-breakpoint: 767px; // Breakpoint for
mobile view
-$table-mobile-card-spacing: 12px; // Space between
cards - mobile view
-$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: false; // Should horizontal
elements be
- // included? (`true`/`false`) [2]
-$table-not-responsive-name: 'preset'; // Class name for
non-responsive view
-$table-striped-name: 'striped'; // Class name for striped
-$table-striped-alt-body-back-color: // Alternate background color for
in
- #ece4ff; // striped
+$table-caption-font-size: 1.5em; // Font size for
+$table-caption-margin: 6px 10px 12px; // Margin for
+$table-row-padding: 10x; // Padding for
- both views
+$table-column-padding: 10px; // Padding for
and
- desktop view
+$table-head-back-color: #d3cae8; // Background color for
+$table-head-fore-color: $fore-color; // Tex color for
+$table-body-back-color: #f2edff; // Background color for
+$table-body-fore-color: $fore-color; // Text color for
+$table-mobile-breakpoint: 767px; // Breakpoint for
mobile view
+$table-mobile-card-spacing: 12px; // Space between
cards - mobile view
+$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: false; // Should horizontal
elements be included? (`true`/`false`) [2]
+$table-not-responsive-name: 'preset'; // Class name for
non-responsive view
+$table-striped-name: 'striped'; // Class name for striped
+$table-striped-alt-body-back-color: #ece4ff; // Alternate background color for
in striped
// 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
+// [2] - If $include-horizontal-table is `true`, then the
horizontal view 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
diff --git a/src/mini/_table.scss b/src/mini/_table.scss
index 8db0542..4ee835b 100644
--- a/src/mini/_table.scss
+++ b/src/mini/_table.scss
@@ -2,6 +2,12 @@
Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax.
+$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
+$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
+$include-horizontal-table: true !default; // Should horizontal tables be included?
+$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view
+$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
+$table-striped-name: 'striped' !default; // Class name for striped table
// Desktop view.
table {
border-collapse: separate;
@@ -53,8 +59,6 @@ table {
}
}
// Mobile view for responsive tables.
-$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view
-$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view
@media (max-width: #{$table-mobile-breakpoint}) {
table:not(.#{$table-not-responsive-name}) {
border-collapse: collapse;
@@ -74,7 +78,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
- clip-path: inset(100%);
+ clip-path: inset(100%);
}
tr {
display: block;
@@ -111,8 +115,6 @@ $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
@if $include-horizontal-table {
@media (min-width: #{$table-horizontal-breakpoint}) {
table.#{$table-horizontal-name} {
@@ -122,12 +124,12 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
- display: -webkit-flex;
- display: flex;
+ display: -webkit-flex;
+ display: flex;
-webkit-flex: 0 1 auto;
- flex: 0 1 auto;
+ flex: 0 1 auto;
-webkit-flex-flow: row wrap;
- flex-flow: row wrap;
+ flex-flow: row wrap;
padding: $table-row-padding;
caption {
// Old syntax
@@ -135,7 +137,7 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
max-width: 100%;
// New syntax
-webkit-flex: 0 0 100%;
- flex: 0 0 100%;
+ flex: 0 0 100%;
}
thead, tbody {
// Old syntax
@@ -144,10 +146,10 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
- display: -webkit-flex;
- display: flex;
+ display: -webkit-flex;
+ display: flex;
-webkit-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
thead {
z-index: 999; // Fixes the visibility of the element.
@@ -158,9 +160,9 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-pack: justify;
// New syntax
-webkit-justify-content: space-between;
- justify-content: space-between;
+ justify-content: space-between;
-webkit-flex: 1 0 0;
- flex: 1 0 0;
+ flex: 1 0 0;
}
tr {
// Old syntax
@@ -169,12 +171,12 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
// New syntax
- display: -webkit-flex;
- display: flex;
+ display: -webkit-flex;
+ display: flex;
-webkit-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
-webkit-flex: 1 0 auto;
- flex: 1 0 auto;
+ flex: 1 0 auto;
}
th, td {
width: 100%;
@@ -210,19 +212,19 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
- display: -webkit-flex;
- display: flex;
+ display: -webkit-flex;
+ display: flex;
-webkit-flex: 0 1 auto;
- flex: 0 1 auto;
+ flex: 0 1 auto;
-webkit-flex-flow: row wrap;
- 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%;
+ flex: 0 0 100%;
}
thead, tbody {
// Old syntax
@@ -231,10 +233,10 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
- display: -webkit-flex;
- display: flex;
+ display: -webkit-flex;
+ display: flex;
-webkit-flex-flow: row nowrap;
- flex-flow: row nowrap;
+ flex-flow: row nowrap;
}
thead {
z-index: 999; // Fixes the visibility of the element.
@@ -245,9 +247,9 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-pack: justify;
// New syntax
-webkit-justify-content: space-between;
- justify-content: space-between;
+ justify-content: space-between;
-webkit-flex: 1 0 0;
- flex: 1 0 0;
+ flex: 1 0 0;
}
tr {
// Old syntax
@@ -257,11 +259,11 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
- display: flex;
+ display: flex;
-webkit-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
-webkit-flex: 1 0 auto;
- flex: 1 0 auto;
+ flex: 1 0 auto;
}
th, td {
width: 100%;
@@ -285,17 +287,18 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
}
}
// Striped tables.
-$table-striped-name: 'striped' !default; // Class name for striped table
-table.#{$table-striped-name} {
- tr:nth-of-type(2n) > td {
- background: $table-striped-alt-body-back-color;
- }
-}
-// Responsiveness for striped tables.
-@media (max-width: #{$table-mobile-breakpoint}) {
- table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) {
- tr:nth-of-type(2n) {
+@if $include-striped-table { // Striped tables can be turned on or off.
+ table.#{$table-striped-name} {
+ tr:nth-of-type(2n) > td {
background: $table-striped-alt-body-back-color;
}
}
+ // Responsiveness for striped tables.
+ @media (max-width: #{$table-mobile-breakpoint}) {
+ table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) {
+ tr:nth-of-type(2n) {
+ background: $table-striped-alt-body-back-color;
+ }
+ }
+ }
}