Housekeeping for table module
Updated variables and flavors, added a hidden flag
This commit is contained in:
Angelos Chalaris
parent
94a912b768
commit
61f06f209f
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -313,17 +313,14 @@ $table-body-back-color: #fafafa; // Background color for <td>
|
|||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
|
||||
// in mobile view [1]
|
||||
$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 <table> elements be
|
||||
// included? (`true`/`false`) [2]
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: // Alternate background color for <td> in
|
||||
#eeeeee; // striped <table>
|
||||
$table-striped-alt-body-back-color: #eeeeee; // Alternate background color for <td> in striped <table>
|
||||
// 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.
|
||||
|
|
|
|||
|
|
@ -310,19 +310,16 @@ $table-body-back-color: #f2edff; // Background color for <td>
|
|||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 12px; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
|
||||
// in mobile view [1]
|
||||
$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 <table> elements be
|
||||
// included? (`true`/`false`) [2]
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: // Alternate background color for <td> in
|
||||
#ece4ff; // striped <table>
|
||||
$table-striped-alt-body-back-color: #ece4ff; // Alternate background color for <td> in striped <table>
|
||||
// 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 <table> horizontal biew will be included in a class defined by
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> 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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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} {
|
||||
|
|
@ -285,7 +287,7 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
|
|||
}
|
||||
}
|
||||
// Striped tables.
|
||||
$table-striped-name: 'striped' !default; // Class name for striped table
|
||||
@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;
|
||||
|
|
@ -299,3 +301,4 @@ table.#{$table-striped-name} {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue