mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 14:56:28 +02:00
Code Issues Releases Wiki Activity

Table cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-10 09:45:36 +02:00
parent 93320701c5
commit af604fc48c
4 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mini-default.css vendored
View File

@@ -509,7 +509,7 @@ th {
th:first-child, td:first-child { th:first-child, td:first-child {
border-left: 0; } border-left: 0; }
@media only screen and (max-width: 768px) { @media (max-width: 768px) {
table { table {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View File

@@ -382,4 +382,5 @@
- Code cleanup in `core`, indentation change to tabs for consistency, indentation fixes etc. - Code cleanup in `core`, indentation change to tabs for consistency, indentation fixes etc.
- Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module. - Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module.
- Code cleanup in `grid`, indentation etc. - Code cleanup in `grid`, indentation etc.
- Code cleanup in `table`. Media query conversions applied. Optimization.

33
src/mini/_table.scss
View File

@@ -4,19 +4,24 @@
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.
border: $table-border-style; border: $table-border-style;
border-radius: $table-border-radius; @if $table-border-radius != 0 {
margin: $table-margin; border-radius: $table-border-radius;
}
@if $table-margin != 0 {
margin: $table-margin;
}
} }
caption { caption {
font-size: $table-caption-font-size; font-size: $table-caption-font-size;
margin: $table-caption-margin; margin: $table-caption-margin;
} }
tr { tr {
padding: $table-row-padding; padding: $table-row-padding; // Apply always to overwrite default.
} }
th, td { th, td {
padding: $table-column-padding; padding: $table-column-padding; // Apply always to overwrite default.
border-left: $table-border-style; border-left: $table-border-style;
border-top: $table-border-style; border-top: $table-border-style;
} }
@@ -24,16 +29,17 @@ th {
border-top: 0; border-top: 0;
background: $table-head-back-color; background: $table-head-back-color;
} }
th:first-child, td:first-child{ th:first-child, td:first-child {
border-left: 0; border-left: 0;
} }
// Mobile view. // Mobile view.
@media only screen and (max-width: #{$table-mobile-breakpoint}) { @media (max-width: #{$table-mobile-breakpoint}) {
table { table {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
width: 100%; width: 100%;
} }
// Accessibility (element is not visible, but screen readers read it normally)
thead { thead {
border: 0; border: 0;
height: 1px; height: 1px;
@@ -42,21 +48,24 @@ th:first-child, td:first-child{
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
// Accessibility (element is not visible, but screen readers read it normally)
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;
border-radius: $table-border-radius; @if $table-border-radius != 0 {
border-radius: $table-border-radius;
}
margin-bottom: $table-mobile-card-spacing; margin-bottom: $table-mobile-card-spacing;
} }
td { td {
display: block; display: block;
border: 0; border: 0;
border-bottom: $table-border-style; @if $table-border-style != 0 {
border-bottom: $table-border-style;
}
text-align: right; text-align: right;
} }
td:before { td:before {
@@ -65,6 +74,8 @@ th:first-child, td:first-child{
font-weight: $table-mobile-label-font-weight; font-weight: $table-mobile-label-font-weight;
} }
td:last-child { td:last-child {
border-bottom: 0; @if $table-border-style != 0 {
border-bottom: 0;
}
} }
} }