Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 11:18:39 +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 */
/* Navigation */
/* Colors */
.table.red caption {
background: #B8312F;
color: #fff; }
.table.red thead {
background: #B8312F;
color: #fff; }
.table.red {
background: none; }
.table.red caption {
background: #B8312F;
color: #fff; }
.table.red thead {
background: #B8312F;
color: #fff; }
.table.orange caption {
background: #FBA026;
color: #fff; }
.table.orange thead {
background: #FBA026;
color: #fff; }
.table.orange {
background: none; }
.table.orange caption {
background: #FBA026;
color: #fff; }
.table.orange thead {
background: #FBA026;
color: #fff; }
.table.green caption {
background: #41A85F;
color: #fff; }
.table.green thead {
background: #41A85F;
color: #fff; }
.table.green {
background: none; }
.table.green caption {
background: #41A85F;
color: #fff; }
.table.green thead {
background: #41A85F;
color: #fff; }
.table.blue caption {
background: #2C82C9;
color: #fff; }
.table.blue thead {
background: #2C82C9;
color: #fff; }
.table.blue {
background: none; }
.table.blue caption {
background: #2C82C9;
color: #fff; }
.table.blue thead {
background: #2C82C9;
color: #fff; }
.table.white caption {
background: #fff; }
.table.white thead {
background: #fff; }
.table.white {
background: none; }
.table.white caption {
background: #fff; }
.table.white thead {
background: #fff; }
table.table {
-moz-box-sizing: border-box;
@ -4870,6 +4880,43 @@ table.list th {
table.list td {
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 {
white-space: nowrap; }
@ -4882,6 +4929,7 @@ table.list td {
cursor: pointer;
border: 1px solid #b7b7b7;
padding: 5px 10px 5px 10px;
font-size: 0.7em;
font-size: 0.7rem;
color: #fff;
display: inline-block; }
display: inline-block;
line-height: 1rem; }

56
table.scss
View File

@ -1,6 +1,8 @@
@import "_mixins", "_vars";
.table.red {
background: none;
caption {
background: #B8312F;
color: #fff;
@ -13,6 +15,8 @@
}
.table.orange {
background: none;
caption {
background: #FBA026;
color: #fff;
@ -25,6 +29,8 @@
}
.table.green {
background: none;
caption {
background: #41A85F;
color: #fff;
@ -37,6 +43,8 @@
}
.table.blue {
background: none;
caption {
background: #2C82C9;
color: #fff;
@ -49,6 +57,8 @@
}
.table.white {
background: none;
caption {
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 {
white-space: nowrap;
}

3
tag.scss
View File

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