108 lines
2.5 KiB
SCSS
108 lines
2.5 KiB
SCSS
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
div.test {
|
||
|
|
border: 1px solid grey;
|
||
|
|
padding: 1em;
|
||
|
|
margin: 0 2em 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div#t1 {
|
||
|
|
table,
|
||
|
|
td,
|
||
|
|
th {
|
||
|
|
border: 1px solid lightgrey;
|
||
|
|
padding: 0.5em;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div#t2 {
|
||
|
|
div.table {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
div.row {
|
||
|
|
display: flex;
|
||
|
|
min-height: 50px;
|
||
|
|
}
|
||
|
|
div.cell {
|
||
|
|
flex: 4;
|
||
|
|
border: 1px solid lightgrey;
|
||
|
|
}
|
||
|
|
div.cell:nth-child(1) {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
div.cell:nth-child(2) {
|
||
|
|
flex: 2;
|
||
|
|
}
|
||
|
|
div.cell.span4-5 {
|
||
|
|
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
|
||
|
|
}
|
||
|
|
div.cell.span3-4 {
|
||
|
|
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
|
||
|
|
}
|
||
|
|
div.cell.span3-5 {
|
||
|
|
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
|
||
|
|
}
|
||
|
|
div.row:first-child div.cell {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center; /* center horiz. */
|
||
|
|
align-items: center; /* center vert. */
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
div.row div.cell {
|
||
|
|
padding: 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div#t3 {
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap; /* allow items to wrap */
|
||
|
|
justify-content: space-between; /* vertical */
|
||
|
|
align-items: stretch; /* horizontal, is default and can be omitted */
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
flex-basis: 25%; /* give each item a width */
|
||
|
|
border: 1px solid lightgrey;
|
||
|
|
box-sizing: border-box;
|
||
|
|
flex-shrink: 0; /* prevent from "shrink to fit" */
|
||
|
|
min-width: 0; /* allow to shrink past content width */
|
||
|
|
overflow: hidden; /* hide overflowed content */
|
||
|
|
}
|
||
|
|
.item:nth-child(n+5) {
|
||
|
|
margin-top: 10px; /* from 5th item, add top margin */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div#t4 {
|
||
|
|
/* (A1) CONTAINER - BIG SCREEN */
|
||
|
|
.thegrid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto auto auto auto;
|
||
|
|
/* OR SPECIFY WIDTH
|
||
|
|
*/
|
||
|
|
grid-template-columns: 40% 20% 20% 20%;
|
||
|
|
grid-gap: 5px;
|
||
|
|
}
|
||
|
|
/* (A2) CONTAINER - SMOL SCREEN */
|
||
|
|
@media screen and (max-width:768px) {
|
||
|
|
.thegrid { grid-template-columns: auto auto; }
|
||
|
|
}
|
||
|
|
/* (B) CELLS */
|
||
|
|
.thegrid .head, .thegrid .cell {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
/* (C) HEADER CELLS */
|
||
|
|
.thegrid .head {
|
||
|
|
font-weight: bold;
|
||
|
|
background: #ffe4d1;
|
||
|
|
}
|
||
|
|
/* (D) DATA CELLS */
|
||
|
|
.thegrid .cell {
|
||
|
|
background: #d1f2ff;
|
||
|
|
}
|
||
|
|
}
|