public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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;
}