Add recipe mockup

2026-03-20 21:29:38 +01:00
parent 6e0d650f54
commit c4d2e74703
9 changed files with 1062 additions and 0 deletions
--- a/stacks/recipe/css/styles.css
+++ b/stacks/recipe/css/styles.css
@@ -0,0 +1,53 @@
+/* Slider styling */
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #111827;
+    cursor: pointer;
+    margin-top: -8px;
+}
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: #e5e7eb;
+    border-radius: 2px;
+}
+
+/* View Transitions */
+.view-transition {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.slide-in {
+    transform: translateX(0);
+    opacity: 1;
+}
+.slide-out {
+    transform: translateX(100%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Ingredient Active States */
+.ingredient-active .check-box {
+    background-color: #111827;
+    border-color: #111827;
+}
+.ingredient-active .check-icon {
+    display: block;
+}
+.ingredient-active .ingredient-text {
+    text-decoration: line-through;
+    color: #9ca3af;
+}
+
+/* Utilities */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}