Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-12 07:48:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix mobile table2

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-04-16 19:59:27 +02:00
parent 8165e4a2e0
commit e4051eca7b
3 changed files with 136 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
styles.css
View File

@ -4775,38 +4775,48 @@ section > h2 {
/* Content box */ /* Content box */
/* Navigation */ /* Navigation */
/* Colors */ /* Colors */
.table.red caption { .table.red {
background: #B8312F; background: none; }
color: #fff; } .table.red caption {
.table.red thead { background: #B8312F;
background: #B8312F; color: #fff; }
color: #fff; } .table.red thead {
background: #B8312F;
color: #fff; }
.table.orange caption { .table.orange {
background: #FBA026; background: none; }
color: #fff; } .table.orange caption {
.table.orange thead { background: #FBA026;
background: #FBA026; color: #fff; }
color: #fff; } .table.orange thead {
background: #FBA026;
color: #fff; }
.table.green caption { .table.green {
background: #41A85F; background: none; }
color: #fff; } .table.green caption {
.table.green thead { background: #41A85F;
background: #41A85F; color: #fff; }
color: #fff; } .table.green thead {
background: #41A85F;
color: #fff; }
.table.blue caption { .table.blue {
background: #2C82C9; background: none; }
color: #fff; } .table.blue caption {
.table.blue thead { background: #2C82C9;
background: #2C82C9; color: #fff; }
color: #fff; } .table.blue thead {
background: #2C82C9;
color: #fff; }
.table.white caption { .table.white {
background: #fff; } background: none; }
.table.white thead { .table.white caption {
background: #fff; } background: #fff; }
.table.white thead {
background: #fff; }
table.table { table.table {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -4870,6 +4880,43 @@ table.list th {
table.list td { table.list td {
padding: 2px 5px 2px 5px; } padding: 2px 5px 2px 5px; }
@media screen and (max-width: 600px) {
table.table {
border: 0;
width: 100%; }
table.table thead {
display: none; }
table.table tr {
display: block;
margin-bottom: .625em; }
table.table td {
border-left: 1px solid #b7b7b7;
border-right: 1px solid #b7b7b7;
display: block;
font-size: .8rem;
text-align: right;
position: relative;
height: 2rem;
line-height: 2rem; }
table.table td:before {
content: attr(data-label);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 20px;
font-weight: bold;
display: inline-block; }
table.table td:last-child {
border-bottom: 1px solid #b7b7b7; }
table.table tbody tr {
height: auto; } }
.nobreak { .nobreak {
white-space: nowrap; } white-space: nowrap; }
@ -4882,6 +4929,7 @@ table.list td {
cursor: pointer; cursor: pointer;
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 0.7em; font-size: 0.7rem;
color: #fff; color: #fff;
display: inline-block; } display: inline-block;
line-height: 1rem; }

56
table.scss
View File

@ -1,6 +1,8 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
.table.red { .table.red {
background: none;
caption { caption {
background: #B8312F; background: #B8312F;
color: #fff; color: #fff;
@ -13,6 +15,8 @@
} }
.table.orange { .table.orange {
background: none;
caption { caption {
background: #FBA026; background: #FBA026;
color: #fff; color: #fff;
@ -25,6 +29,8 @@
} }
.table.green { .table.green {
background: none;
caption { caption {
background: #41A85F; background: #41A85F;
color: #fff; color: #fff;
@ -37,6 +43,8 @@
} }
.table.blue { .table.blue {
background: none;
caption { caption {
background: #2C82C9; background: #2C82C9;
color: #fff; color: #fff;
@ -49,6 +57,8 @@
} }
.table.white { .table.white {
background: none;
caption { caption {
background: #fff; background: #fff;
} }
@ -163,6 +173,52 @@ table.list {
} }
} }
@media screen and (max-width: 600px) {
table.table {
border: 0;
width: 100%;
}
table.table thead {
display: none;
}
table.table tr {
display: block;
margin-bottom: .625em;
}
table.table td {
border-left: 1px solid $content-border-color;
border-right: 1px solid $content-border-color;
display: block;
font-size: .8rem;
text-align: right;
position: relative;
height: 2rem;
line-height: 2rem;
}
table.table td:before {
content: attr(data-label);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 20px;
font-weight: bold;
display: inline-block;
}
table.table td:last-child {
border-bottom: 1px solid $content-border-color;
}
table.table tbody tr {
height: auto;
}
}
.nobreak { .nobreak {
white-space: nowrap; white-space: nowrap;
} }

3
tag.scss
View File

@ -4,7 +4,8 @@
cursor: pointer; cursor: pointer;
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 0.7em; font-size: 0.7rem;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
line-height: 1rem;
} }