responsive-table-fluxbox/scss/styles.scss

108 lines
2.5 KiB
SCSS
Raw Normal View History

2021-05-17 07:26:09 +00:00
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;
}
}