mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00
Code Issues Releases Wiki Activity

Flag for horizontal tables added

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-16 23:18:55 +02:00
parent 03a9a8175b
commit 8b370db038
4 changed files with 173 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/mini-default.css vendored
View File

@@ -978,8 +978,8 @@ button.large, [type="button"].large, [type="submit"].large,
padding: 12px 18px; padding: 12px 18px;
margin: 10px 8px; } margin: 10px 8px; }
/* /*
Definitions for the responsive table component. Definitions for the responsive table component.
*/ */
table { table {
border-collapse: separate; border-collapse: separate;

4
docs/v2/DEVLOG.md
View File

@@ -765,3 +765,7 @@
- Added support for ARIA `role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB. - Added support for ARIA `role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB.
- Highly optimized `input_control` module's buttons and button groups, by removing redundant selectors, based on specificity, bringing down the filesize to a managable 6.59KB again. - Highly optimized `input_control` module's buttons and button groups, by removing redundant selectors, based on specificity, bringing down the filesize to a managable 6.59KB again.
- Optimized `sticky` `footer`s and `header`s a little bit. Should have no effect on filesize. - Optimized `sticky` `footer`s and `header`s a little bit. Should have no effect on filesize.
## 20170116
- Added `$include-horizontal-table` flag in `table` module to conditionally enable/disable the `horizontal` `table`s.

4
src/flavors/mini-default.scss
View File

@@ -327,6 +327,8 @@ $table-mobile-card-spacing: 10px; // Space between <tr> cards - mobil
$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
// 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
@@ -336,6 +338,8 @@ $table-striped-alt-body-back-color: // Alternate background color for
// 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
// $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
$card-back-color: #fafafa; // Background color for cards $card-back-color: #fafafa; // Background color for cards

323
src/mini/_table.scss
View File

@@ -1,9 +1,9 @@
/* /*
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.
// Desktop view. // Desktop view.
table { table {
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
// Apply border style by default always. Otherwise, browser default will be applied. // Apply border style by default always. Otherwise, browser default will be applied.
@@ -38,7 +38,7 @@ table {
} }
} }
thead th { thead th {
border-top: 0; border-top: 0;
} }
th { th {
@if $table-head-back-color != $back-color { @if $table-head-back-color != $back-color {
@@ -58,7 +58,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
@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;
border: 0; border: 0;
width: 100%; width: 100%;
@if $table-box-shadow != none { @if $table-box-shadow != none {
box-shadow: none; box-shadow: none;
@@ -71,20 +71,20 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
} }
tr { tr {
display: block; display: block;
border: $table-border-style; border: $table-border-style;
@if $table-border-radius != 0 { @if $table-border-radius != 0 {
border-radius: $table-border-radius; border-radius: $table-border-radius;
} }
@if $table-box-shadow != none { @if $table-box-shadow != none {
box-shadow: $table-box-shadow; box-shadow: $table-box-shadow;
} }
@if $table-body-back-color != $back-color { @if $table-body-back-color != $back-color {
background: $table-body-back-color; background: $table-body-back-color;
} }
@@ -94,7 +94,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
display: block; display: block;
border: 0; border: 0;
@if $table-border-style != 0 { @if $table-border-style != 0 {
border-bottom: $table-border-style; border-bottom: $table-border-style;
} }
text-align: right; text-align: right;
} }
@@ -111,32 +111,12 @@ $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 $table-horizontal-name: 'horizontal' !default; // Class name for table horizontal view
@media (min-width: #{$table-horizontal-breakpoint}) { @if $include-horizontal-table {
table.#{$table-horizontal-name} { @media (min-width: #{$table-horizontal-breakpoint}) {
// Old syntax table.#{$table-horizontal-name} {
display: -webkit-box; // Old syntax
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: $table-row-padding;
caption {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
}
thead, tbody {
// Old syntax
display: -webkit-box; display: -webkit-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
@@ -144,86 +124,87 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: row nowrap; -webkit-flex: 0 1 auto;
flex-flow: row nowrap; flex: 0 1 auto;
} -webkit-flex-flow: row wrap;
thead { flex-flow: row wrap;
z-index: 999; // Fixes the visibility of the element. padding: $table-row-padding;
} caption {
tbody { // Old syntax
overflow: auto; // Allows content scrolling. -webkit-box-flex: 1;
// Old syntax max-width: 100%;
-webkit-box-pack: justify; // New syntax
// New syntax -webkit-flex: 0 0 100%;
-webkit-justify-content: space-between; flex: 0 0 100%;
justify-content: space-between; }
-webkit-flex: 1 0 0; thead, tbody {
flex: 1 0 0; // Old syntax
} display: -webkit-box;
tr { -webkit-box-flex: 0;
// Old syntax -webkit-box-orient: horizontal;
display: -webkit-box; -webkit-box-direction: normal;
-webkit-box-flex: 1; // New syntax
-webkit-box-orient: vertical; display: -webkit-flex;
-webkit-box-direction: normal; display: flex;
// New syntax -webkit-flex-flow: row nowrap;
display: -webkit-flex; flex-flow: row nowrap;
display: flex; }
-webkit-flex-direction: column; thead {
flex-direction: column; z-index: 999; // Fixes the visibility of the element.
-webkit-flex: 1 0 auto; }
flex: 1 0 auto; tbody {
} overflow: auto; // Allows content scrolling.
th, td { // Old syntax
width: 100%; -webkit-box-pack: justify;
border: $table-border-style; // Apply to overwrite. // New syntax
@if $table-border-style != 0 { -webkit-justify-content: space-between;
& + th, & + td { justify-content: space-between;
border-top: 0; -webkit-flex: 1 0 0;
flex: 1 0 0;
}
tr {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: $table-border-style; // Apply to overwrite.
@if $table-border-style != 0 {
& + th, & + td {
border-top: 0;
}
} }
} }
} th {
th { text-align: right;
text-align: right; }
} thead {
thead { tr:first-child {
tr:first-child { padding-left: 0;
padding-left: 0; }
} }
} tbody {
tbody { tr:first-child > td {
tr:first-child > td { padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. }
} }
}
}
} }
} // Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive. @media (max-width: #{$table-mobile-breakpoint}) {
@media (max-width: #{$table-mobile-breakpoint}) { table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
table.#{$table-horizontal-name}.#{$table-not-responsive-name} { // Old syntax
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-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%;
}
thead, tbody {
// Old syntax
display: -webkit-box; display: -webkit-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
@@ -231,54 +212,76 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: row nowrap; -webkit-flex: 0 1 auto;
flex-flow: row nowrap; flex: 0 1 auto;
} -webkit-flex-flow: row wrap;
thead { flex-flow: row wrap;
z-index: 999; // Fixes the visibility of the element. caption {
} // Old syntax
tbody { -webkit-box-flex: 1;
overflow: auto; max-width: 100%;
// Old syntax // New syntax
-webkit-box-pack: justify; -webkit-flex: 0 0 100%;
// New syntax flex: 0 0 100%;
-webkit-justify-content: space-between; }
justify-content: space-between; thead, tbody {
-webkit-flex: 1 0 0; // Old syntax
flex: 1 0 0; display: -webkit-box;
} -webkit-box-flex: 0;
tr { -webkit-box-orient: horizontal;
// Old syntax -webkit-box-direction: normal;
display: -webkit-box; // New syntax
-webkit-box-flex: 1; display: -webkit-flex;
-webkit-box-orient: vertical; display: flex;
-webkit-box-direction: normal; -webkit-flex-flow: row nowrap;
// New syntax flex-flow: row nowrap;
display: -webkit-flex; }
display: flex; thead {
-webkit-flex-direction: column; z-index: 999; // Fixes the visibility of the element.
flex-direction: column; }
-webkit-flex: 1 0 auto; tbody {
flex: 1 0 auto; overflow: auto;
} // Old syntax
th, td { -webkit-box-pack: justify;
width: 100%; // New syntax
border: $table-border-style; // Apply to overwrite. -webkit-justify-content: space-between;
@if $table-border-style != 0 { justify-content: space-between;
& + th, & + td { -webkit-flex: 1 0 0;
border-top: 0; flex: 1 0 0;
}
tr {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: $table-border-style; // Apply to overwrite.
@if $table-border-style != 0 {
& + th, & + td {
border-top: 0;
}
} }
} }
} th {
th { text-align: right;
text-align: right; }
} tbody {
tbody { tr:first-child > td {
tr:first-child > td { padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data. }
} }
}
}
} }
} }
// Striped tables. // Striped tables.