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

Delta Between Two Patch Sets: static/scss/_navbar.scss

Issue 29587584: Issue 5635 - Implement website-default navbar component (Closed) Base URL: https://hg.adblockplus.org/website-defaults
Left Patch Set: Use padding on navbar link, optimise svg Created Nov. 30, 2017, 2 p.m.
Right Patch Set: Rebase Created Jan. 4, 2018, 7:40 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/js/navbar.js ('k') | static/scss/_variables.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 // This file is part of help.eyeo.com. 1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH 2 // Copyright (C) 2017 Eyeo GmbH
3 // 3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify 4 // help.eyeo.com 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 // help.eyeo.com is distributed in the hope that it will be useful, 9 // help.eyeo.com 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 help.eyeo.com. If not, see <http://www.gnu.org/licenses/>. 15 // along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
16 16
17 /******************************************************************************* 17 /*******************************************************************************
18 * Navbar component 18 * Navbar component
juliandoucette 2017/12/01 16:30:43 I think that all paddings in this file should be s
ire 2017/12/08 10:42:22 (When you're free let's discuss how this would wor
19 ******************************************************************************/ 19 ******************************************************************************/
20 20
21 .navbar 21 .navbar
22 { 22 {
23 @extend .clearfix; 23 @extend .clearfix;
24 } 24 }
25 25
26 /* .navbar .navbar-container
27 ****************************************************************************/
28
29 .navbar-container
30 {
31 @if ($add-horizontal-navbar-padding)
32 {
33 @extend .container;
34 }
35 @else
36 {
37 @include container($container-width, 0px);
38 }
39 }
40
26 /* .navbar .navbar-branding 41 /* .navbar .navbar-branding
27 ****************************************************************************/ 42 ****************************************************************************/
28 43
29 .navbar-branding 44 .navbar-branding
30 { 45 {
31 padding-top: $navbar-padding-v; 46 padding-top: $navbar-padding + ($navbar-padding / 4);
32 padding-bottom: $navbar-padding-v; 47 padding-bottom: $navbar-padding + ($navbar-padding / 4);
48 line-height: 1;
49
50 @if ($add-horizontal-navbar-padding != true)
51 {
52 padding-right: $navbar-padding;
53 padding-left: $navbar-padding;
54 }
33 } 55 }
34 56
35 .navbar-branding img 57 .navbar-branding img
36 { 58 {
37 height: $navbar-branding-height; 59 height: $navbar-branding-height;
38 vertical-align: text-top; 60 vertical-align: text-top;
39 } 61 }
40 62
41 /* .navbar .toggle-navbar-collapse 63 /* .navbar .toggle-navbar-collapse
42 ****************************************************************************/ 64 ****************************************************************************/
43 65
44 .toggle-navbar-collapse 66 .toggle-navbar-collapse
45 { 67 {
46 @extend .unstyled;
47 display: none; 68 display: none;
48 padding-top: $navbar-padding-v + ($navbar-padding-v / 2); 69 padding-top: ($navbar-branding-height / 2) + ($navbar-padding / 2);
49 padding-bottom: $navbar-padding-v + ($navbar-padding-v / 2); 70 padding-bottom: ($navbar-branding-height / 2) + ($navbar-padding / 2);
50 cursor: pointer; 71
72 @if ($add-horizontal-navbar-padding != true)
73 {
74 padding-right: $navbar-padding;
75 padding-left: $navbar-padding;
76 }
51 } 77 }
52 78
53 .js .toggle-navbar-collapse 79 .js .toggle-navbar-collapse
54 { 80 {
55 display: block; 81 display: block;
56 82
57 @media (min-width: $tablet-breakpoint) 83 @media (min-width: $tablet-breakpoint)
58 { 84 {
59 display: none; 85 display: none;
60 } 86 }
61 } 87 }
62 88
63 .js .toggle-navbar-collapse .close-label
64 {
65 display: none;
66 }
67
68 .expanded .toggle-navbar-collapse .open-label
69 {
70 display: none;
71 }
72
73 .expanded .toggle-navbar-collapse .close-label
74 {
75 display: inline;
76 }
77
78 /* .navbar .navbar-collapse 89 /* .navbar .navbar-collapse
79 ****************************************************************************/ 90 ****************************************************************************/
80 91
81 .navbar-collapse 92 .navbar-collapse
82 { 93 {
83 clear: both; 94 clear: both;
84 padding-top: 0;
85 95
86 @media (min-width: $tablet-breakpoint) 96 @media (min-width: $tablet-breakpoint)
87 { 97 {
88 float: right; 98 float: right;
89 clear: none; 99 clear: none;
90 } 100 }
91 } 101 }
92 102
93 [dir="rtl"] .navbar-collapse 103 [dir="rtl"] .navbar-collapse
94 { 104 {
(...skipping 17 matching lines...) Expand all
112 122
113 @media (min-width: $tablet-breakpoint) 123 @media (min-width: $tablet-breakpoint)
114 { 124 {
115 width: auto; 125 width: auto;
116 } 126 }
117 } 127 }
118 128
119 /* .navbar .navbar-nav 129 /* .navbar .navbar-nav
120 ****************************************************************************/ 130 ****************************************************************************/
121 131
122 .navbar .navbar-nav 132 @if ($add-horizontal-navbar-padding)
123 { 133 {
124 padding-bottom: $navbar-padding-v / 2; 134 .navbar .navbar-nav
135 {
136 padding-bottom: $navbar-padding / 2;
125 137
126 @media (min-width: $tablet-breakpoint) 138 @media (min-width: $tablet-breakpoint)
127 { 139 {
128 margin-right: -($navbar-padding-v / 2); 140 margin-right: -($navbar-padding / 2);
129 margin-left: -($navbar-padding-v / 2); 141 margin-left: -($navbar-padding / 2);
130 padding-bottom: 0; 142 padding-bottom: 0;
143 }
131 } 144 }
132 } 145 }
133 146
134 .navbar .navbar-nav li 147 .navbar .navbar-nav li
135 { 148 {
136 @media (min-width: $tablet-breakpoint) 149 @media (min-width: $tablet-breakpoint)
137 { 150 {
138 display: inline-block; 151 display: inline-block;
139 } 152 }
140 } 153 }
141 154
142 .navbar .navbar-nav a 155 .navbar .navbar-nav a
143 { 156 {
144 display: block; 157 display: block;
145 padding-top: $navbar-padding-v / 2; 158 padding-top: $navbar-padding / 2;
146 padding-bottom: $navbar-padding-v / 2; 159 padding-bottom: $navbar-padding / 2;
160
161 @if ($add-horizontal-navbar-padding != true)
162 {
163 padding-right: $navbar-padding;
164 padding-left: $navbar-padding;
165 }
147 166
148 @media (min-width: $tablet-breakpoint) 167 @media (min-width: $tablet-breakpoint)
149 { 168 {
150 padding-top: $navbar-padding-v + ($navbar-padding-v / 2); 169 padding-top: ($navbar-branding-height / 2) + ($navbar-padding / 2);
151 padding-right: $navbar-padding-v / 2; 170 padding-right: $navbar-padding / 2;
152 padding-bottom: $navbar-padding-v + ($navbar-padding-v / 2); 171 padding-bottom: ($navbar-branding-height / 2) + ($navbar-padding / 2);
153 padding-left: $navbar-padding-v / 2; 172 padding-left: $navbar-padding / 2;
154 } 173 }
155 } 174 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld