Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 03:08:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Media for nav & table

Browse Source
This commit is contained in:
Dennis Eichhorn 2016-05-05 21:47:23 +02:00
parent 31434c0614
commit 17b3d2ada9
4 changed files with 138 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
main.scss
View File

@ -1,3 +1,5 @@
@import "mixin", "color";
main {
height: 100%;
width: 100%;
@ -15,9 +17,9 @@ main {
.flex-container {
display: flex;
flex-directoion: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-center;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
}

16
nav.scss
View File

@ -163,3 +163,19 @@ label[for="nav-trigger"] {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 600px) {
.nav-trigger:checked ~ main {
width: 100%;
left: 0;
}
.nav-trigger:not(:checked) ~ main {
width: 0;
padding-right: 0;
}
#nav-side {
width: 100%;
}
}

86
styles.css
View File

@ -4061,6 +4061,62 @@ label[for="nav-trigger"] {
opacity: 1;
visibility: visible; }
@media screen and (max-width: 600px) {
.nav-trigger:checked ~ main {
width: 100%;
left: 0; }
.nav-trigger:not(:checked) ~ main {
width: 0;
padding-right: 0; }
#nav-side {
width: 100%; } }
.ok {
color: #5cff56; }
.warning {
color: #ff4b41; }
.favorite {
color: #d16059; }
.green {
background: #c0ffb4; }
.red {
background: #ff7c70; }
.blue {
background: #c1c8ff; }
.orange {
background: #ffbf7c; }
.lightblue {
background: #b5ffff; }
.yellow {
background: #fffe97; }
.purple {
background: #bfa5ff; }
.pink {
background: #ffa6e3; }
.grey {
background: #dcdcdc; }
.darkred {
background: #d16059; }
.darkgreen {
background: #77d17c; }
.darkblue {
background: #7ba9d1; }
main {
height: 100%;
width: 100%;
@ -4075,9 +4131,9 @@ main {
.flex-container {
display: flex;
flex-directoion: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-center;
justify-content: center;
align-items: flex-start;
align-content: flex-start; }
@ -4634,6 +4690,32 @@ table.list th {
table.list td {
padding: 2px 5px 2px 5px; }
@media screen and (max-width: 600px) {
table.table {
border: 0; }
table.table thead {
display: none; }
table.table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em; }
table.table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right; }
table.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase; }
table.table td:last-child {
border-bottom: 0; } }
.ok {
color: #5cff56; }

34
table.scss
View File

@ -110,4 +110,38 @@ table.list {
td {
padding: 2px 5px 2px 5px;
}
}
@media screen and (max-width: 600px) {
table.table {
border: 0;
}
table.table thead {
display: none;
}
table.table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.table td:last-child {
border-bottom: 0;
}
}