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

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

Issue 29438582: Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Handle responsive styling Created June 22, 2017, 3:27 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
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
(...skipping 11 matching lines...) Expand all
22 color: $primary-fg; 22 color: $primary-fg;
23 border: 1px solid $primary-fg; 23 border: 1px solid $primary-fg;
24 background-color: $primary-bg; 24 background-color: $primary-bg;
25 } 25 }
26 26
27 .card %headings 27 .card %headings
28 { 28 {
29 @extend h3; 29 @extend h3;
30 height: $md + $sm; 30 height: $md + $sm;
31 margin: $sm 0 $sm 0; 31 margin: $sm 0 $sm 0;
32
33 @media (max-width: $mobile-breakpoint)
34 {
35 height: auto;
36 }
32 } 37 }
33 38
34 .card-icon 39 .card-icon
35 { 40 {
36 margin: $sm 0; 41 margin: $sm 0;
37 } 42 }
38 43
39 .center .card-icon 44 .center .card-icon
40 { 45 {
41 margin: $lg - $sm 0 $md 0; 46 margin: $lg - $sm 0 $md 0;
47
48 @media (max-width: $tablet-breakpoint)
49 {
50 margin-top: $md;
51 }
52 @media (max-width: $mobile-breakpoint)
53 {
54 margin-top: $sm;
55 }
42 } 56 }
43 57
44 img.card-icon, 58 img.card-icon,
45 .card-icon img 59 .card-icon img
46 { 60 {
47 height: 48px; 61 height: 48px;
48 } 62 }
49 63
50 .card img.block 64 .card img.block
51 { 65 {
52 margin: 0; 66 margin: 0;
53 } 67 }
54 68
55 .card-summary { 69 .card-summary {
56 margin: $md 0; 70 margin: $md 0;
57 height: $lg; 71 height: $lg;
72
73 @media (max-width: $mobile-breakpoint)
74 {
75 margin: $sm;
76 height: auto;
77 }
58 } 78 }
59 79
60 // negative margin shrinks containing paragraph margin 80 // negative margin shrinks containing paragraph margin
61 .card %buttons 81 .card %buttons
62 { 82 {
63 display: block; 83 display: block;
64 width: 100%; 84 width: 100%;
65 margin-bottom: -$xs; 85 margin-bottom: -$xs;
66 } 86 }
67 87
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
129 .card.list a 149 .card.list a
130 { 150 {
131 text-decoration: none; 151 text-decoration: none;
132 color: $primary-fg; 152 color: $primary-fg;
133 } 153 }
134 154
135 .card.list a%active 155 .card.list a%active
136 { 156 {
137 color: $accent; 157 color: $accent;
138 } 158 }
OLDNEW

Powered by Google App Engine
This is Rietveld