Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/scss/components/_groups.scss

Issue 29453600: Issue 4961 - Fix card group field alignment on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Rebase Created July 5, 2017, 9:19 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « static/scss/components/_cards.scss ('k') | static/scss/layout/_navbar.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // This file is part of acceptableads.org. 1 // This file is part of acceptableads.org.
2 // Copyright (C) 2016 Eyeo GmbH 2 // Copyright (C) 2016 Eyeo GmbH
3 // 3 //
4 // acceptableads.org is free software: you can redistribute it and/or modify 4 // acceptableads.org is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by 5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // acceptableads.org is distributed in the hope that it will be useful, 9 // acceptableads.org is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details. 12 // GNU General Public License for more details.
13 // 13 //
14 // You should have received a copy of the GNU General Public License 14 // You should have received a copy of the GNU General Public License
15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>. 15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.
16 16
17 // display like a table (even grid) 17 // display like a table (even grid)
18 18
19 .group-container 19 .group-container
20 { 20 {
21 width: 100%; 21 width: 100%;
22 max-width: $max-width; 22 max-width: $max-width;
23 margin: 0 auto; 23 margin: 0 auto;
24 padding: $md 0; 24 padding: $xl 0;
25 } 25 }
26 26
27 .group-container > %headings, 27 .group-container > %headings,
28 .group-container > p 28 .group-container > p
29 { 29 {
30 margin: $md auto; 30 margin: $xl auto;
31 padding: 0 $sm; 31 padding: 0 $sm;
32 } 32 }
33 33
34 .group 34 .group
35 { 35 {
36 display: table; 36 display: table;
37 width: 100%; 37 width: 100%;
38 table-layout: fixed; 38 table-layout: fixed;
39 } 39 }
40 40
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
274 width: 100%; 274 width: 100%;
275 } 275 }
276 // un-center all cards 276 // un-center all cards
277 .group > div:nth-child(4), 277 .group > div:nth-child(4),
278 .group > div:nth-child(3), 278 .group > div:nth-child(3),
279 .group > div:nth-child(5) 279 .group > div:nth-child(5)
280 { 280 {
281 margin-left: 0; 281 margin-left: 0;
282 } 282 }
283 } 283 }
284
285 @supports (display: grid)
286 {
287
288 .group.cards
289 {
290 display: grid;
291 grid-template-columns: repeat(1, 1fr);
292
293 @media (min-width: $card-min-width)
294 {
295 // Each card should be a minimum width of the $card-min-width. Otherwise, take up available space
296 grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr));
297 }
298 }
299
300 .group.cards .card
301 {
302 display: inline-grid;
303 width: 100%;
304 grid-template-rows: auto 1fr auto;
305 }
306
307 .group.cards .card-summary
308 {
309 @media all
310 {
311 height: auto;
312 }
313 }
314
315 .group-4.cards
316 {
317 @media (min-width: $desktop-breakpoint)
318 {
319 // Each card should take a minimum of 25% width of the group
320 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
321 }
322 }
323
324 .group-5.cards
325 {
326 @media (min-width: $tablet-breakpoint)
327 {
328 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
329 }
330 @media (min-width: $desktop-breakpoint)
331 {
332 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
333 }
334 }
335
336 .group-5.cards > div:nth-child(4),
337 .group-5.cards > div:nth-child(5)
338 {
339 @media all
340 {
341 margin-left: 0;
342 }
343 }
344
345 .group-5.cards > div:nth-child(4)
346 {
347 @media (min-width: $tablet-breakpoint) and (max-width: $desktop-breakpoint)
348 {
349 margin-left: 50%;
350 }
351 }
352
353 .group-5.cards > div:nth-child(5)
354 {
355 @media (min-width: 700px) and (max-width: $desktop-breakpoint)
356 {
357 margin-left: 50%;
358 }
359 }
360
361 }
OLDNEW
« no previous file with comments | « static/scss/components/_cards.scss ('k') | static/scss/layout/_navbar.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld