diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/styles/recipes.scss | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/styles/recipes.scss')
-rw-r--r-- | src/styles/recipes.scss | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss new file mode 100644 index 000000000..017aa4fe2 --- /dev/null +++ b/src/styles/recipes.scss | |||
@@ -0,0 +1,72 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .recipes { | ||
4 | .recipes__list { | ||
5 | display: flex; | ||
6 | flex-flow: row wrap; | ||
7 | align-content: flex-start; | ||
8 | min-height: 70%; | ||
9 | height: auto; | ||
10 | |||
11 | &.recipes__list--disabled { | ||
12 | opacity: 0.3; | ||
13 | filter: grayscale(100%); | ||
14 | pointer-events: none; | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .recipes__navigation { | ||
19 | height: auto; | ||
20 | margin-bottom: 35px; | ||
21 | |||
22 | .badge { | ||
23 | margin-right: 10px; | ||
24 | } | ||
25 | |||
26 | &.recipes__navigation--disabled { | ||
27 | opacity: 0.3; | ||
28 | filter: grayscale(100%); | ||
29 | pointer-events: none; | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | |||
34 | .recipe-teaser { | ||
35 | position: relative; | ||
36 | width: calc(25% - 20px); | ||
37 | height: 120px; | ||
38 | margin: 0 20px 20px 0; | ||
39 | border-radius: $theme-border-radius; | ||
40 | background-color: $theme-gray-lightest; | ||
41 | transition: background $theme-transition-time; | ||
42 | overflow: hidden; | ||
43 | |||
44 | &:hover { | ||
45 | background-color: $theme-gray-lighter; | ||
46 | } | ||
47 | |||
48 | .recipe-teaser__icon { | ||
49 | width: 50px; | ||
50 | margin-bottom: 10px; | ||
51 | } | ||
52 | |||
53 | .recipe-teaser__label { | ||
54 | display: block; | ||
55 | } | ||
56 | |||
57 | h2 { | ||
58 | z-index: 10; | ||
59 | } | ||
60 | |||
61 | &__dev-badge { | ||
62 | position: absolute; | ||
63 | top: 5px; | ||
64 | right: -13px; | ||
65 | width: 50px; | ||
66 | background: $theme-brand-warning; | ||
67 | color: #FFF; | ||
68 | font-size: 10px; | ||
69 | transform: rotateZ(45deg); | ||
70 | box-shadow: 0 0 4px rgba(black, 0.2); | ||
71 | } | ||
72 | } | ||