From 61f06f209f737a6ce746adeb2caf4d4f6633a9cc Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 30 Mar 2017 14:48:02 +0300 Subject: [PATCH] Housekeeping for table module Updated variables and flavors, added a hidden flag --- docs/v2/DEVLOG.md | 2 + src/flavors/mini-default.scss | 45 +++++++++--------- src/flavors/mini-sucroa.scss | 79 +++++++++++++++---------------- src/mini/_table.scss | 87 ++++++++++++++++++----------------- 4 files changed, 106 insertions(+), 107 deletions(-) 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 - both views -$table-column-padding: 10px; // Padding for
-$table-caption-margin: 6px 8px 12px; // Margin for -$table-row-padding: 8px; // 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 - both views +$table-column-padding: 10px; // Padding for
+$table-caption-margin: 6px 8px 12px; // Margin for +$table-row-padding: 8px; // 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 - both views -$table-column-padding: 10px; // Padding for
-$table-caption-margin: 6px 10px 12px; // Margin for -$table-row-padding: 10x; // 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 - both views +$table-column-padding: 10px; // Padding for
+$table-caption-margin: 6px 10px 12px; // Margin for +$table-row-padding: 10x; // 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; + } + } + } }