mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-15 09:51:51 +02:00
Flag for horizontal tables added
This commit is contained in:
Angelos Chalaris
parent
03a9a8175b
commit
8b370db038
4
dist/mini-default.css
vendored
4
dist/mini-default.css
vendored
@ -978,8 +978,8 @@ button.large, [type="button"].large, [type="submit"].large,
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
table {
|
||||
border-collapse: separate;
|
||||
|
||||
@ -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.
|
||||
- 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.
|
||||
|
||||
## 20170116
|
||||
|
||||
- Added `$include-horizontal-table` flag in `table` module to conditionally enable/disable the `horizontal` `table`s.
|
||||
|
||||
@ -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
|
||||
// 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
|
||||
@ -336,6 +338,8 @@ $table-striped-alt-body-back-color: // Alternate background color for
|
||||
// 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
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
|
||||
@ -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.
|
||||
// Desktop view.
|
||||
table {
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
// Apply border style by default always. Otherwise, browser default will be applied.
|
||||
@ -38,7 +38,7 @@ table {
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
th {
|
||||
@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}) {
|
||||
table:not(.#{$table-not-responsive-name}) {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
@if $table-box-shadow != none {
|
||||
box-shadow: none;
|
||||
@ -71,20 +71,20 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $table-border-style;
|
||||
@if $table-border-radius != 0 {
|
||||
border-radius: $table-border-radius;
|
||||
}
|
||||
}
|
||||
@if $table-box-shadow != none {
|
||||
box-shadow: $table-box-shadow;
|
||||
}
|
||||
}
|
||||
@if $table-body-back-color != $back-color {
|
||||
background: $table-body-back-color;
|
||||
}
|
||||
@ -94,7 +94,7 @@ $table-not-responsive-name: 'preset' !default; // Class name for table n
|
||||
display: block;
|
||||
border: 0;
|
||||
@if $table-border-style != 0 {
|
||||
border-bottom: $table-border-style;
|
||||
border-bottom: $table-border-style;
|
||||
}
|
||||
text-align: right;
|
||||
}
|
||||
@ -111,32 +111,12 @@ $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
|
||||
@media (min-width: #{$table-horizontal-breakpoint}) {
|
||||
table.#{$table-horizontal-name} {
|
||||
// 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;
|
||||
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
|
||||
@if $include-horizontal-table {
|
||||
@media (min-width: #{$table-horizontal-breakpoint}) {
|
||||
table.#{$table-horizontal-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
@ -144,86 +124,87 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto; // Allows content scrolling.
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-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;
|
||||
-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;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto; // Allows content scrolling.
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-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 {
|
||||
text-align: right;
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
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.
|
||||
@media (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
|
||||
// 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
|
||||
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
|
||||
@media (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
@ -231,54 +212,76 @@ $table-horizontal-name: 'horizontal' !default; // Class name for table h
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-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;
|
||||
-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;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-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 {
|
||||
text-align: right;
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// Striped tables.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user