ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved combiner wip

Browse Source
This commit is contained in:
Mashy
2019-11-23 17:03:04 +10:00
parent cfeac949e0
commit 34f790caa3
6 changed files with 252 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/instance.less
+2 -99
View File
@@ -5,114 +5,17 @@
.instance {
overflow: hidden;
display: grid;
grid-template-columns: 1fr minmax(min-content, 1fr);
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox info"
"constructs constructs";
.info {
h2 {
text-transform: uppercase;
}
svg {
display: inline;
height: 1em;
}
figure {
display: inline;
height: 0.5em;
svg {
margin-right: 0.5em;
}
}
figcaption {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
margin-left: 1em;
grid-area: info;
display: grid;
grid-template-columns: 1fr min-content;
grid-template-areas:
"item combos";
.info-item {
grid-area: item;
}
.combos {
display: grid;
grid-area: combos;
margin-left: 0.5em;
grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
text-align: center;
}
.combo-list {
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.table-button {
display: grid;
text-align: center;
align-content: center;
grid-template-areas:
"item"
"ingr";
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 {
width: 5em;
}
}
div {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
}
}
}
}
}
"vbox"
"constructs";
.constructs {
grid-area: constructs;
}
}
@keyframes action {
0% {
color: palegoldenrod;
client/assets/styles/vbox.less
+123 -35
View File
@@ -3,10 +3,10 @@
grid-area: vbox;
display: grid;
grid-template-rows: 3fr 2fr;
grid-template-columns: 1fr 4fr 1fr;
grid-template-columns: 1fr 4fr 6fr;
grid-template-areas:
"store-hdr store combiner"
"stash-hdr stash combiner";
"store-hdr store info"
"stash-hdr stash info";
margin-bottom: 1em;
line-height: 0;
@@ -46,38 +46,6 @@
}
}
.combiner {
grid-area: combiner;
display: flex;
flex-direction: column;
line-height: 1.3;
padding: 0;
.vbox-padding {
margin-right: 0em;
margin-bottom: 0em;
}
button {
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
background-color: @yellow;
color: black;
border-radius: 0;
border: 0;
&[disabled] {
border: 0.1em solid @gray;
border-left: 0;
color: @gray-exists;
};
transition-property: 0;
}
}
.stash {
grid-area: stash;
display: grid;
@@ -210,6 +178,126 @@
line-height: initial;
}
}
.info {
line-height: 1.6;
h2 {
text-transform: uppercase;
}
svg {
display: inline;
height: 1em;
}
figure {
display: inline;
height: 0.5em;
svg {
margin-right: 0.5em;
}
}
figcaption {
font-size: 1em;
display: inline-block;
vertical-align: middle;
}
margin-left: 1em;
grid-area: info;
display: grid;
grid-template-rows: min-content min-content;
grid-template-columns: 1fr min-content;
grid-template-areas:
"item combos"
"combiner combos";
.combiner {
grid-area: combiner;
button {
margin-top: 1em;
line-height: 1.3;
font-size: 1.25em;
letter-spacing: 0.1em;
background-color: @yellow;
color: black;
border-radius: 0;
border: 0;
&[disabled] {
border: 0.1em solid @gray;
border-left: 0;
color: @gray-exists;
};
transition-property: 0;
}
}
.info-item {
grid-area: item;
}
.combos {
display: grid;
grid-area: combos;
margin-left: 0.5em;
grid-template-rows: min-content min-content;
grid-template-areas:
"comboHeader"
"comboList";
.combo-header {
text-align: center;
}
.combo-list {
display: grid;
grid-template-rows: min-content min-content min-content;
grid-template-columns: min-content min-content;
grid-gap: 0.5em;
margin-top: 0.5em;
width: 15.5em;
.table-button {
display: grid;
text-align: center;
align-content: center;
grid-template-areas:
"item"
"ingr";
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 {
width: 5em;
}
}
div {
border-left: 2px solid #222;
border-right: 2px solid #222;
height: 1.75em;
width: 7.5em;
svg {
vertical-align: middle;
}
&:last-child {
border-bottom: 2px solid #222;
}
}
}
}
}
}
}
@media (min-width: 2000px) {