Left: | ||
Right: |
OLD | NEW |
---|---|
(Empty) | |
1 // This file is part of help.eyeo.com. | |
2 // Copyright (C) 2017 Eyeo GmbH | |
3 // | |
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 | |
6 // the Free Software Foundation, either version 3 of the License, or | |
7 // (at your option) any later version. | |
8 // | |
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 | |
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
12 // GNU General Public License for more details. | |
13 // | |
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/>. | |
16 | |
17 /******************************************************************************* | |
18 * Navbar component | |
19 ******************************************************************************/ | |
20 | |
21 .navbar | |
22 { | |
23 padding-top: $small-space; | |
juliandoucette
2017/10/31 15:18:38
- This doesn't apply to new abp.org
- This will pr
| |
24 padding-bottom: $small-space; | |
25 color: $primary-light; | |
juliandoucette
2017/10/31 15:18:38
Suggest: we apply a bg utility class in HTML or ex
ire
2017/11/02 11:15:27
Great idea! Done.
| |
26 background-color: $primary; | |
27 @extend .clearfix; | |
juliandoucette
2017/10/31 15:18:38
This may be overkill because the .container within
ire
2017/11/02 11:15:27
.container isn't clearfixed?
| |
28 } | |
29 | |
30 .navbar a, | |
31 .navbar button | |
juliandoucette
2017/10/31 15:18:38
See comment above about background utility classes
ire
2017/11/02 11:15:26
Links are already styled because of the default `c
| |
32 { | |
33 color: $primary-light; | |
34 } | |
35 | |
36 /* .navbar .navbar-branding | |
37 ****************************************************************************/ | |
38 | |
39 .navbar-branding | |
juliandoucette
2017/10/31 15:18:37
Perhaps a float utility class or and ID class woul
ire
2017/11/02 11:15:27
Done.
| |
40 { | |
41 float: left; | |
42 } | |
43 | |
44 [dir="rtl"] .navbar-branding | |
45 { | |
46 float: right; | |
47 } | |
48 | |
49 /* .navbar .toggle-navbar-collapse | |
50 ****************************************************************************/ | |
51 | |
52 .toggle-navbar-collapse | |
53 { | |
54 display: none; | |
55 float: right; | |
56 border: 0; | |
57 background-color: transparent; | |
58 text-align: right; | |
59 cursor: pointer; | |
60 } | |
61 | |
62 [dir="rtl"] .toggle-navbar-collapse | |
63 { | |
64 float: left; | |
juliandoucette
2017/10/31 15:18:37
What about text-align?
ire
2017/11/02 11:15:26
The other text-align isn't actually needed. So I'm
| |
65 } | |
66 | |
67 .js .toggle-navbar-collapse | |
68 { | |
69 display: block; | |
70 | |
71 @media (min-width: $tablet-breakpoint) | |
72 { | |
73 display: none; | |
74 } | |
75 } | |
76 | |
77 .js .toggle-navbar-collapse .close-label | |
juliandoucette
2017/10/31 15:18:38
I think that we will always use an icon; not a lab
ire
2017/11/02 11:15:27
We could have separate icons for open and close?
| |
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 | |
93 ****************************************************************************/ | |
94 | |
95 .navbar-collapse | |
96 { | |
97 display: block; | |
juliandoucette
2017/10/31 15:18:37
I think that this may be unnecessary because we ar
ire
2017/11/02 11:15:27
Done.
| |
98 clear: both; | |
99 width: 100%; | |
juliandoucette
2017/10/31 15:18:38
I think that this may be unnecessary because this
ire
2017/11/02 11:15:27
Done.
| |
100 padding-top: $small-space; | |
juliandoucette
2017/10/31 15:18:37
I think that this may be unnecessary because the p
ire
2017/11/02 11:15:26
Done.
| |
101 | |
102 @media (min-width: $tablet-breakpoint) | |
103 { | |
104 float: right; | |
105 clear: none; | |
106 width: auto; | |
juliandoucette
2017/10/31 15:18:38
I think that this will become unnecessary if I am
ire
2017/11/02 11:15:27
Done.
| |
107 padding-top: 0; | |
108 } | |
109 } | |
110 | |
111 [dir="rtl"] .navbar-collapse | |
112 { | |
113 float: left; | |
114 } | |
115 | |
116 .js .navbar-collapse | |
117 { | |
118 display: none; | |
119 | |
120 @media (min-width: $tablet-breakpoint) | |
121 { | |
122 display: block; | |
123 } | |
124 } | |
125 | |
126 .expanded .navbar-collapse | |
juliandoucette
2017/10/31 15:18:37
Suggest: Use aria expanded (unless you want to do
ire
2017/11/02 11:15:27
I think I will do that separately when we implemen
| |
127 { | |
128 display: block; | |
129 } | |
OLD | NEW |