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

Side by Side Diff: static/scss/layout/_sidebar.scss

Issue 29401619: Issue 4963 - Wrong size used for text logo on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Addressed comments Created May 22, 2017, 7:08 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 19 matching lines...) Expand all
30 margin: 0; 30 margin: 0;
31 padding: 0; 31 padding: 0;
32 text-align: inherit; 32 text-align: inherit;
33 } 33 }
34 34
35 li::before 35 li::before
36 { 36 {
37 @extend .unstyle-list; 37 @extend .unstyle-list;
38 } 38 }
39 39
40 a,
41 a%active
42 {
43 display: block;
44 text-decoration: none;
45 color: inherit;
46 }
47
48 // #sidebar-brank blocks 40 // #sidebar-brank blocks
49 // #sidebar-logo is visible on desktop 41 // #sidebar-logo is visible on desktop
50 // #sidebar-open, #sidebar-close, and #sidebar-tittle are visible on mobile 42 // #sidebar-open, #sidebar-close, and #sidebar-tittle are visible on mobile
51 43
52 #sidebar-brand 44 #sidebar-brand
53 { 45 {
54 height: $lg; 46 height: $lg;
55 line-height: $lg; 47 line-height: $lg;
56 } 48 }
57 49
58 #sidebar-logo 50 #sidebar-logo
59 { 51 {
60 display: block; 52 display: block;
61 padding: 0 $md; 53 padding: 0 $md;
62 text-align: inherit; 54 text-align: inherit;
63 background-color: $accent; 55 background-color: $accent;
64 56
65 img 57 img
66 { 58 {
67 width: $md; 59 width: $md;
68 height: $md; 60 height: $md;
69 vertical-align: middle; 61 vertical-align: middle;
70 } 62 }
71 } 63 }
72 64
73 #sidebar-open, 65 #sidebar-open,
74 #sidebar-close, 66 #sidebar-close,
75 #sidebar-title 67 .site-title
76 { 68 {
77 display: none; 69 display: none;
78 } 70 }
79 71
80 #sidebar-close img 72 #sidebar-close img
81 { 73 {
82 width: 20px; 74 width: 20px;
83 height: 20px; 75 height: 20px;
84 } 76 }
85 77
86 #sidebar-open img 78 #sidebar-open img
87 { 79 {
88 width: 36px; 80 width: 36px;
89 height: 18px; 81 height: 18px;
90 } 82 }
91 } 83 }
92 84
85 #sidebar-menus
juliandoucette 2017/05/22 19:18:33 I moved this from #sidebar to #sidebar-menus to av
86 {
87 a,
88 a%active
89 {
90 display: block;
91 text-decoration: none;
92 color: inherit;
93 }
94 }
95
93 // Positioning the sidebar on desktop 96 // Positioning the sidebar on desktop
94 @media(min-width: $sidebar-breakpoint-x) 97 @media(min-width: $sidebar-breakpoint-x)
95 { 98 {
96 // since the primary navigation collapses only when javascript is enabled 99 // since the primary navigation collapses only when javascript is enabled
97 // we must position this absolute by default so that it can scroll 100 // we must position this absolute by default so that it can scroll
98 #sidebar 101 #sidebar
99 { 102 {
100 position: absolute; 103 position: absolute;
101 top: 0; 104 top: 0;
102 width: $sidebar-width; 105 width: $sidebar-width;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
156 } 159 }
157 160
158 html[dir="rtl"].js #sidebar 161 html[dir="rtl"].js #sidebar
159 { 162 {
160 text-align: right; 163 text-align: right;
161 } 164 }
162 165
163 #sidebar 166 #sidebar
164 { 167 {
165 // show sidebar navbar title and open button by default 168 // show sidebar navbar title and open button by default
166 #sidebar-title, 169 .site-title,
167 #sidebar-open 170 #sidebar-open
168 { 171 {
169 display: block; 172 display: block;
170 } 173 }
171 174
172 // Toggle open/close buttons 175 // Toggle open/close buttons
173 &.open 176 &.open
174 { 177 {
175 #sidebar-open 178 #sidebar-open
176 { 179 {
177 display: none; 180 display: none;
178 } 181 }
179 #sidebar-close 182 #sidebar-close
180 { 183 {
181 display: block; 184 display: block;
182 } 185 }
183 } 186 }
184 187
185 // Style sidebar navbar blocks 188 // Style sidebar navbar blocks
186 189
187 #sidebar-brand 190 #sidebar-brand
188 { 191 {
189 background-color: $inverted-fg; 192 background-color: $inverted-fg;
190 } 193 }
191 194
192 #sidebar-open, 195 #sidebar-open,
193 #sidebar-close, 196 #sidebar-close,
194 #sidebar-logo, 197 #sidebar-logo,
195 #sidebar-title 198 .site-title
196 { 199 {
197 padding: 0 $sm; 200 padding: 0 $sm;
198 } 201 }
199 202
200 #sidebar-open, 203 #sidebar-open,
201 #sidebar-close, 204 #sidebar-close,
202 #sidebar-title 205 .site-title
saroyanm 2017/06/01 13:09:54 Seems like we are not referring to the item by it'
juliandoucette 2017/06/07 15:42:52 Done. Good find.
203 { 206 {
204 height: $lg; 207 height: $lg;
205 line-height: $lg; 208 line-height: $lg;
206 } 209 }
207 210
208 #sidebar-open, 211 #sidebar-open,
209 #sidebar-close 212 #sidebar-close
210 { 213 {
211 width: $lg; 214 width: $lg;
212 min-width: $lg; 215 min-width: $lg;
213 margin: 0; 216 margin: 0;
214 color: $inverted-fg; 217 color: $inverted-fg;
215 border: none; 218 border: none;
216 background-color: $inverted-bg; 219 background-color: $inverted-bg;
217 font-size: $md; 220 font-size: $md;
218 } 221 }
219
220 #sidebar-title img
221 {
222 display: inline-block;
223 height: $sm;
224 vertical-align: middle;
225 }
226 } 222 }
227 223
228 // align blocks left/right ltr/rtl in navbar 224 // align blocks left/right ltr/rtl in navbar
229 225
230 html[dir="ltr"] #sidebar-open, 226 html[dir="ltr"] #sidebar-open,
231 html[dir="ltr"] #sidebar-close, 227 html[dir="ltr"] #sidebar-close,
232 html[dir="ltr"] #sidebar-logo, 228 html[dir="ltr"] #sidebar-logo,
233 html[dir="ltr"] #sidebar-title 229 html[dir="ltr"] #sidebar .site-title
234 { 230 {
235 float: left; 231 float: left;
236 } 232 }
237 233
238 html[dir="rtl"] #sidebar-open, 234 html[dir="rtl"] #sidebar-open,
239 html[dir="rtl"] #sidebar-close, 235 html[dir="rtl"] #sidebar-close,
240 html[dir="rtl"] #sidebar-logo, 236 html[dir="rtl"] #sidebar-logo,
241 html[dir="rtl"] #sidebar-title 237 html[dir="rtl"] #sidebar .site-title
242 { 238 {
243 float: right; 239 float: right;
244 } 240 }
245 } 241 }
246 242
247 // Primary navigation ////////////////////////////////////////////////////////// 243 // Primary navigation //////////////////////////////////////////////////////////
248 244
249 #primary-navigation 245 #primary-navigation
250 { 246 {
251 li 247 li
(...skipping 201 matching lines...) Expand 10 before | Expand all | Expand 10 after
453 } 449 }
454 .js #secondary-navigation 450 .js #secondary-navigation
455 { 451 {
456 display: none; 452 display: none;
457 } 453 }
458 .js #sidebar.open #secondary-navigation 454 .js #sidebar.open #secondary-navigation
459 { 455 {
460 display: block; 456 display: block;
461 } 457 }
462 } 458 }
OLDNEW
« static/scss/layout/_navbar.scss ('K') | « static/scss/layout/_navbar.scss ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld