beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Housekeeping for table module

Browse source 
Updated variables and flavors, added a hidden flag
This commit is contained in:
Angelos Chalaris 2017-03-30 14:48:02 +03:00
parent 94a912b768
commit 61f06f209f
4 changed files with 106 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View file

@ -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`). - 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`. - 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. - *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.

9
src/flavors/mini-default.scss
View file

@ -313,17 +313,14 @@ $table-body-back-color: #fafafa; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td> $table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view $table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 10px; // Space between <tr> cards - 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 $table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
// in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: true; // Should horizontal <table> elements be $include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
// included? (`true`/`false`) [2]
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view $table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
$table-horizontal-name: 'horizontal'; // Class name 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-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table> $table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: // Alternate background color for <td> in $table-striped-alt-body-back-color: #eeeeee; // Alternate background color for <td> in striped <table>
#eeeeee; // striped <table>
// Notes: // Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table // [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. // in order for their mobile headers to display properly.

15
src/flavors/mini-sucroa.scss
View file

@ -278,8 +278,8 @@ $button-style2-border-radius: 4px; // Border radius for button style 2
$button-style2-padding: 12px 18px; // Padding for button style 2 $button-style2-padding: 12px 18px; // Padding for button style 2
$button-style2-margin: 10px 8px; // Margin for button style 2 $button-style2-margin: 10px 8px; // Margin for button style 2
$checkbox-size: 16px; // Size for checkbox/radio [2] $checkbox-size: 16px; // Size for checkbox/radio [2]
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio $checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
$checkbox-fore-color: $input-fore-color;// Text/mark color 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-thickness: 1px; // Border thickness for checkbox/radio
$checkbox-border-color: #a9a2ba; // Border color for checkbox/radio $checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
@ -310,19 +310,16 @@ $table-body-back-color: #f2edff; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td> $table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view $table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 12px; // Space between <tr> cards - 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 $table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
// in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: false; // Should horizontal <table> elements be $include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
// included? (`true`/`false`) [2]
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view $table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table> $table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: // Alternate background color for <td> in $table-striped-alt-body-back-color: #ece4ff; // Alternate background color for <td> in striped <table>
#ece4ff; // striped <table>
// Notes: // Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table // [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. // 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. // $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
// Variables for cards [1] // Variables for cards [1]
$card-name: 'card'; // Class name for cards $card-name: 'card'; // Class name for cards

21
src/mini/_table.scss
View file

@ -2,6 +2,12 @@
Definitions for the responsive table component. Definitions for the responsive table component.
*/ */
// The tables use the common table elements and syntax. // 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. // Desktop view.
table { table {
border-collapse: separate; border-collapse: separate;
@ -53,8 +59,6 @@ table {
} }
} }
// Mobile view for responsive tables. // 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}) { @media (max-width: #{$table-mobile-breakpoint}) {
table:not(.#{$table-not-responsive-name}) { table:not(.#{$table-not-responsive-name}) {
border-collapse: collapse; border-collapse: collapse;
@ -111,8 +115,6 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
} }
} }
// Horizontal table view. // 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 { @if $include-horizontal-table {
@media (min-width: #{$table-horizontal-breakpoint}) { @media (min-width: #{$table-horizontal-breakpoint}) {
table.#{$table-horizontal-name} { table.#{$table-horizontal-name} {
@ -285,17 +287,18 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
} }
} }
// Striped tables. // 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} { table.#{$table-striped-name} {
tr:nth-of-type(2n) > td { tr:nth-of-type(2n) > td {
background: $table-striped-alt-body-back-color; background: $table-striped-alt-body-back-color;
} }
} }
// Responsiveness for striped tables. // Responsiveness for striped tables.
@media (max-width: #{$table-mobile-breakpoint}) { @media (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) { table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) {
tr:nth-of-type(2n) { tr:nth-of-type(2n) {
background: $table-striped-alt-body-back-color; background: $table-striped-alt-body-back-color;
} }
} }
}
} }