add shortcuts to user list to purchase items without scanning

slight mirgation, i.e. sorting products by user is necessary

1 files changed, 49 insertions, 3 deletions

diff --git a/style.css b/style.css
index e1f7a74..bcb9ca8 100644
--- a/style.css
+++ b/style.css
@@ -220,7 +220,7 @@ h1 {
     list-style-type: none;
 }
 
-input.button {
+.button {
     place-content: center;
     padding: 0.8em 0.5em;
     border: none;
@@ -257,7 +257,7 @@ input.amount-neg {
     color: #00e1ff;
 }
 
-input.amount-ntr {
+.amount-ntr {
     background-color: #0e646f;
 }
 
@@ -291,6 +291,53 @@ ul.userforms > li {
     width: 36em;
 }
 
+/* shortcuts */
+.shortcuts > label {
+	display: inline-flex;
+	/* dunno why, but will otherwise clip the headline ¯\_(ツ)_/¯ */
+}
+
+.shortcuts > label > div > span {
+	display: block;
+	margin: .25em;
+	user-select: none;
+}
+
+.shortcuts > label > div > ul {
+	display: none;
+}
+
+.shortcuts > label > input:checked + div > span {
+	border: none;
+	text-decoration: underline;
+	font-weight: bold;
+}
+
+.shortcuts > label > input:checked + div > ul {
+	display: inherit;
+}
+
+.shortcuts input.button {
+	font-size: 1.2rem;
+	margin: .5rem;
+}
+
+.shortcuts ul {
+    content: '';
+    display: table;
+    clear: both;
+    list-style: none;
+    margin-left: 0.5rem;
+    padding: 0;
+}
+
+.shortcuts li {
+	width: fit-content;
+	float: left;
+	padding: 0.1rem;
+}
+
+
 /* create transaction box */
 .box {
     display: grid;
@@ -350,7 +397,6 @@ form.disabled input {
 }
 
 @media print {
-
     nav,
     .container {
         display: none;