diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-20 16:11:50 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-20 16:15:08 +0100 |
| commit | 73a5c7fae9ffbe9ada721148c8c454a643aceebe (patch) | |
| tree | c8fad013ed9b5dd589add87f8d45cf02bbfc6e91 /public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss | |
| parent | b01239fbdcc5bbc5921f73ec0e8fee7bedd5c8e8 (diff) | |
chore!: restructure repo
I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
Diffstat (limited to 'public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss')
| -rw-r--r-- | public/projects/angular-small-apps/apps/recipes/src/app/components/recipe/recipe.component.scss | 54 |
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; +} |
