combo preview wip
This commit is contained in:
@@ -32,55 +32,64 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
margin: 0 0 0 1em;
|
||||
margin-left: 1em;
|
||||
grid-area: info;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 13em min-content;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 20em 1fr;
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"combos";
|
||||
"combos item";
|
||||
|
||||
.combos {
|
||||
|
||||
margin-right: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-content: center;
|
||||
grid-area: combos;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
"comboHeader"
|
||||
"comboList";
|
||||
.combo-header {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
.combo-list {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-bottom: 2px solid #222;
|
||||
grid-template-rows: min-content min-content min-content;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 1em;
|
||||
.table-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"ingr";
|
||||
grid-template-areas:
|
||||
"item"
|
||||
"ingr";
|
||||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
background-color: @gray;
|
||||
}
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: whitesmoke;
|
||||
background-color: @gray;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-top: 2px solid #222;
|
||||
border-bottom: 2px solid #222;
|
||||
flex: 1;
|
||||
grid-area: item;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div {
|
||||
border-right: 2px solid #222;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
.item {
|
||||
border-top: 2px solid #222;
|
||||
border-bottom: 2px solid #222;
|
||||
flex: 1;
|
||||
grid-area: item;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
div {
|
||||
border-left: 2px solid #222;
|
||||
border-right: 2px solid #222;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 2px solid #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user