combo styles

2019-11-12 19:49:07 +11:00
parent 9bcea878ec
commit d3a4f3e615
3 changed files with 55 additions and 27 deletions
@@ -11,7 +11,7 @@

@media (max-width: 1920px) {
    .instance .info table td svg {
-        height: 50%;
+        // height: 50%;
        stroke-width: 8px;
    }

@@ -33,22 +33,53 @@
 }

 .instance .info {
+    margin: 0 0 0 1em;
    grid-area: info;
-    font-size: 85%;

    display: grid;
-    font-size: 85%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "item"
        "combos";
-    // flex-flow: column;
-    // white-space: pre-wrap;

-    flex-direction: column;
    .info-item {
        flex: 1;
-        margin: 0 0 0 1em;
+        font-size: 90%;
+    }
+
+    .combos {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+
+        .table-button {
+            display: grid;
+            text-align: center;
+
+            grid-template-areas:
+                "item"
+                "ingr";
+
+            .item {
+                border-bottom: 2px solid #222;
+                flex: 1;
+                grid-area: item;
+                font-weight: bold;
+            }
+
+            div {
+                border-right: 2px solid #222;
+
+                svg {
+                    vertical-align: bottom;
+                }
+            }
+
+            &:last-child {
+                div {
+                    border-right: 0;
+                }
+            }
+        }
    }
 }