group colours together in table, fix the vertical spacing issue

This commit is contained in:
Mashy
2019-11-12 22:01:56 +10:00
parent 50b427d012
commit e31acf96c6
4 changed files with 28 additions and 46 deletions
+8 -28
View File
@@ -2,7 +2,7 @@
overflow: hidden;
display: grid;
grid-template-columns: 1fr minmax(min-content, 1fr);
grid-template-rows: minmax(min-content, 0.75fr) 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox info"
@@ -37,7 +37,7 @@
grid-area: info;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-rows: 12em min-content;
grid-template-areas:
"item"
"combos";
@@ -50,16 +50,20 @@
.combos {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-content: center;
.table-button {
display: grid;
text-align: center;
align-content: center;
border-bottom: 2px solid #222;
grid-template-areas:
"item"
"ingr";
.item {
border-top: 2px solid #222;
border-bottom: 2px solid #222;
flex: 1;
grid-area: item;
@@ -68,15 +72,14 @@
div {
border-right: 2px solid #222;
svg {
vertical-align: middle;
}
}
&:last-child {
&:first-child {
div {
border-right: 0;
border-left: 2px solid #222;
}
}
}
@@ -101,29 +104,6 @@
}
}
.instance .combos {
margin: 0 0 1em 1em;
table {
tr {
svg {
height: 1em;
}
}
}
td.table-button {
padding:5px;
cursor: pointer;
animation: border-co 0.75s ease-in-out 0s infinite alternate;
&:hover {
color: whitesmoke;
background-color: @gray-hover;
}
}
}
.instance .info figcaption {
font-size: 1em;
display: inline-block;