1 files changed, 54 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss
new file mode 100644
index 0000000..82294b8
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss
@@ -0,0 +1,54 @@
+.recipe {
+  background: #fff;
+  border: 1px solid #d7d7d7;
+  border-radius: 5px;
+  box-shadow: 0 0 5px -3px #000000a5;
+  padding: clamp(4rem, 3vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 3vw, 4rem);
+  position: relative;
+
+  &__body {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    gap: clamp(1rem, 3vw, 2rem);
+    margin: 1rem 0;
+  }
+
+  &__thumb {
+    max-width: min(100vw - 4rem, 300px);
+  }
+
+  &__instructions {
+    flex: 0 0 100%;
+    white-space: pre-line;
+  }
+
+  &__footer {
+    margin: 2rem 0 0;
+  }
+
+  &__field {
+    all: inherit;
+    width: 100%;
+
+    &--textarea {
+      width: 100%;
+      min-height: 10rem;
+    }
+
+    &--file {
+      display: none;
+    }
+  }
+
+  &__label {
+    display: block;
+    cursor: pointer;
+    width: max-content;
+    margin: auto;
+  }
+}
+
+.ingredients-list {
+  padding: 0 1rem;
+}