LEFT | RIGHT |
(no file at all) | |
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 Loading... |
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; |
| 82 } |
| 83 } |
| 84 |
| 85 #sidebar-menus |
| 86 { |
| 87 a, |
| 88 a%active |
| 89 { |
| 90 display: block; |
| 91 text-decoration: none; |
| 92 color: inherit; |
90 } | 93 } |
91 } | 94 } |
92 | 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 { |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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 |
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 Loading... |
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 } |
LEFT | RIGHT |