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