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: Created Oct. 24, 2017, 10:32 a.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
19 ******************************************************************************/ 19 ******************************************************************************/
20 20
21 .navbar 21 .navbar
22 { 22 {
23 padding-top: $small-space;
24 padding-bottom: $small-space;
25 color: $primary-light;
26 background-color: $primary;
27 @extend .clearfix; 23 @extend .clearfix;
28 } 24 }
29 25
30 .navbar a, 26 /* .navbar .navbar-container
31 .navbar button 27 ****************************************************************************/
28
29 .navbar-container
32 { 30 {
33 color: $primary-light; 31 @if ($add-horizontal-navbar-padding)
32 {
33 @extend .container;
34 }
35 @else
36 {
37 @include container($container-width, 0px);
38 }
34 } 39 }
35 40
36 /* .navbar .navbar-branding 41 /* .navbar .navbar-branding
37 ****************************************************************************/ 42 ****************************************************************************/
38 43
39 .navbar-branding 44 .navbar-branding
40 { 45 {
41 float: left; 46 padding-top: $navbar-padding + ($navbar-padding / 4);
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 }
42 } 55 }
43 56
44 [dir="rtl"] .navbar-branding 57 .navbar-branding img
45 { 58 {
46 float: right; 59 height: $navbar-branding-height;
60 vertical-align: text-top;
47 } 61 }
48 62
49 /* .navbar .toggle-navbar-collapse 63 /* .navbar .toggle-navbar-collapse
50 ****************************************************************************/ 64 ****************************************************************************/
51 65
52 .toggle-navbar-collapse 66 .toggle-navbar-collapse
53 { 67 {
54 display: none; 68 display: none;
55 float: right; 69 padding-top: ($navbar-branding-height / 2) + ($navbar-padding / 2);
56 border: 0; 70 padding-bottom: ($navbar-branding-height / 2) + ($navbar-padding / 2);
57 background-color: transparent;
58 text-align: right;
59 cursor: pointer;
60 }
61 71
62 [dir="rtl"] .toggle-navbar-collapse 72 @if ($add-horizontal-navbar-padding != true)
63 { 73 {
64 float: left; 74 padding-right: $navbar-padding;
75 padding-left: $navbar-padding;
76 }
65 } 77 }
66 78
67 .js .toggle-navbar-collapse 79 .js .toggle-navbar-collapse
68 { 80 {
69 display: block; 81 display: block;
70 82
71 @media (min-width: $tablet-breakpoint) 83 @media (min-width: $tablet-breakpoint)
72 { 84 {
73 display: none; 85 display: none;
74 } 86 }
75 } 87 }
76 88
77 .js .toggle-navbar-collapse .close-label
78 {
79 display: none;
80 }
81
82 .expanded .toggle-navbar-collapse .open-label
83 {
84 display: none;
85 }
86
87 .expanded .toggle-navbar-collapse .close-label
88 {
89 display: inline;
90 }
91
92 /* .navbar .navbar-collapse 89 /* .navbar .navbar-collapse
93 ****************************************************************************/ 90 ****************************************************************************/
94 91
95 .navbar-collapse 92 .navbar-collapse
96 { 93 {
97 display: block;
98 clear: both; 94 clear: both;
99 width: 100%;
100 padding-top: $small-space;
101 95
102 @media (min-width: $tablet-breakpoint) 96 @media (min-width: $tablet-breakpoint)
103 { 97 {
104 float: right; 98 float: right;
105 clear: none; 99 clear: none;
106 width: auto;
107 padding-top: 0;
108 } 100 }
109 } 101 }
110 102
111 [dir="rtl"] .navbar-collapse 103 [dir="rtl"] .navbar-collapse
112 { 104 {
113 float: left; 105 float: left;
114 } 106 }
115 107
116 .js .navbar-collapse 108 .js .navbar-collapse
117 { 109 {
118 display: none; 110 display: none;
119 111
120 @media (min-width: $tablet-breakpoint) 112 @media (min-width: $tablet-breakpoint)
121 { 113 {
122 display: block; 114 display: block;
123 } 115 }
124 } 116 }
125 117
126 .expanded .navbar-collapse 118 .expanded .navbar-collapse
127 { 119 {
128 display: block; 120 display: block;
121 width: 100%;
122
123 @media (min-width: $tablet-breakpoint)
124 {
125 width: auto;
126 }
129 } 127 }
128
129 /* .navbar .navbar-nav
130 ****************************************************************************/
131
132 @if ($add-horizontal-navbar-padding)
133 {
134 .navbar .navbar-nav
135 {
136 padding-bottom: $navbar-padding / 2;
137
138 @media (min-width: $tablet-breakpoint)
139 {
140 margin-right: -($navbar-padding / 2);
141 margin-left: -($navbar-padding / 2);
142 padding-bottom: 0;
143 }
144 }
145 }
146
147 .navbar .navbar-nav li
148 {
149 @media (min-width: $tablet-breakpoint)
150 {
151 display: inline-block;
152 }
153 }
154
155 .navbar .navbar-nav a
156 {
157 display: block;
158 padding-top: $navbar-padding / 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 }
166
167 @media (min-width: $tablet-breakpoint)
168 {
169 padding-top: ($navbar-branding-height / 2) + ($navbar-padding / 2);
170 padding-right: $navbar-padding / 2;
171 padding-bottom: ($navbar-branding-height / 2) + ($navbar-padding / 2);
172 padding-left: $navbar-padding / 2;
173 }
174 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld