Add mobile touch steppers

2026-06-22 14:48:23 +02:00
parent fb82c16233
commit 7ce97443b1
3 changed files with 96 additions and 4 deletions
@@ -114,6 +114,44 @@ button.primary {
  gap: 8px;
 }

+.stepper {
+  display: grid;
+  grid-template-columns: 48px minmax(64px, 1fr) 48px;
+  align-items: stretch;
+  min-height: 46px;
+  border: 1px solid #555;
+  border-radius: 7px;
+  overflow: hidden;
+  background: #303030;
+}
+
+.stepper button {
+  min-height: 46px;
+  border: 0;
+  border-radius: 0;
+  background: #3a3a3a;
+  font-size: 22px;
+  line-height: 1;
+  padding: 0;
+}
+
+.stepper button:first-child {
+  border-right: 1px solid #555;
+}
+
+.stepper button:last-child {
+  border-left: 1px solid #555;
+}
+
+.stepper output {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  padding: 0 8px;
+  color: #fff;
+  font-weight: 800;
+}
+
 .toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;