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.
|
||||
|
|
|
|||
|
|
@ -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 <input type="file"> 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 <table> and children
|
||||
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
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 <caption>
|
||||
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e0e0e0; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$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-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$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-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e0e0e0; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$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-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$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: #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.
|
||||
|
|
|
|||
|
|
@ -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 <input type="file"> 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 <table> and children
|
||||
$table-border-style: 1px solid #a9a2ba; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
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 <caption>
|
||||
$table-caption-margin: 6px 10px 12px; // Margin for <caption>
|
||||
$table-row-padding: 10x; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #d3cae8; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$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-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$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-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 10px 12px; // Margin for <caption>
|
||||
$table-row-padding: 10x; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #d3cae8; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$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-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$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: #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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue