mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 06:46:29 +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 {
border-left: 0; }
@media only screen and (max-width: 768px) {
@media (max-width: 768px) {
table {
border-collapse: collapse;
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.
- 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 `table`. Media query conversions applied. Optimization.

33
src/mini/_table.scss
View File

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