diff options
Diffstat (limited to 'app/Resources/static/themes/material/css/cards.scss')
-rw-r--r-- | app/Resources/static/themes/material/css/cards.scss | 64 |
1 files changed, 49 insertions, 15 deletions
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 4f67e038..9ae1be82 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -18,6 +18,24 @@ main { | |||
18 | overflow: hidden; | 18 | overflow: hidden; |
19 | } | 19 | } |
20 | 20 | ||
21 | @mixin mixin-reading-time { | ||
22 | .reading-time { | ||
23 | display: inline-flex; | ||
24 | vertical-align: middle; | ||
25 | |||
26 | .card-reading-time, | ||
27 | .card-created-at { | ||
28 | display: inline-flex; | ||
29 | } | ||
30 | |||
31 | span { | ||
32 | margin-right: 5px; | ||
33 | } | ||
34 | |||
35 | @content; | ||
36 | } | ||
37 | } | ||
38 | |||
21 | .card { | 39 | .card { |
22 | .card-content .card-title, | 40 | .card-content .card-title, |
23 | .card-reveal .card-title { | 41 | .card-reveal .card-title { |
@@ -98,14 +116,7 @@ main { | |||
98 | margin-right: 5px !important; | 116 | margin-right: 5px !important; |
99 | } | 117 | } |
100 | 118 | ||
101 | .reading-time { | 119 | @include mixin-reading-time; |
102 | display: inline-flex; | ||
103 | vertical-align: middle; | ||
104 | |||
105 | span { | ||
106 | margin-right: 5px; | ||
107 | } | ||
108 | } | ||
109 | } | 120 | } |
110 | 121 | ||
111 | .card-image { | 122 | .card-image { |
@@ -186,6 +197,17 @@ a.original:not(.waves-effect) { | |||
186 | flex-grow: 1; | 197 | flex-grow: 1; |
187 | } | 198 | } |
188 | 199 | ||
200 | .card-tag-form { | ||
201 | display: flex; | ||
202 | min-width: 100px; | ||
203 | flex-grow: 1; | ||
204 | } | ||
205 | |||
206 | .card-tag-form input { | ||
207 | margin-bottom: 0; | ||
208 | height: 2rem; | ||
209 | } | ||
210 | |||
189 | .card-tag-rss { | 211 | .card-tag-rss { |
190 | display: flex; | 212 | display: flex; |
191 | } | 213 | } |
@@ -219,10 +241,18 @@ a.original:not(.waves-effect) { | |||
219 | } | 241 | } |
220 | 242 | ||
221 | div.metadata { | 243 | div.metadata { |
244 | overflow: hidden; | ||
245 | height: 1.5em; | ||
246 | display: flex; | ||
247 | |||
248 | ul.tags { | ||
249 | margin-left: 4px; | ||
250 | } | ||
251 | |||
222 | .chip { | 252 | .chip { |
223 | background-color: $blueAccentColor; | 253 | background-color: $blueAccentColor; |
224 | padding: 0 7px; | 254 | padding: 0 7px; |
225 | margin: auto 2px; | 255 | margin: auto 1px; |
226 | border-radius: 6px; | 256 | border-radius: 6px; |
227 | line-height: 22px; | 257 | line-height: 22px; |
228 | height: 22px; | 258 | height: 22px; |
@@ -239,6 +269,16 @@ a.original:not(.waves-effect) { | |||
239 | padding-left: 8px; | 269 | padding-left: 8px; |
240 | } | 270 | } |
241 | } | 271 | } |
272 | |||
273 | @include mixin-reading-time { | ||
274 | padding: 0 5px; | ||
275 | flex-wrap: wrap; | ||
276 | margin-left: auto; | ||
277 | |||
278 | i.material-icons { | ||
279 | font-size: 20px; | ||
280 | } | ||
281 | } | ||
242 | } | 282 | } |
243 | 283 | ||
244 | div.card-content { | 284 | div.card-content { |
@@ -272,9 +312,3 @@ a.original:not(.waves-effect) { | |||
272 | .settings .div_tabs { | 312 | .settings .div_tabs { |
273 | padding-bottom: 15px; | 313 | padding-bottom: 15px; |
274 | } | 314 | } |
275 | |||
276 | @media only screen and (min-width: 992px) { | ||
277 | .card-tag-labels li { | ||
278 | max-width: 50%; | ||
279 | } | ||
280 | } | ||