corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 1 // Contents
2 //
3 // Navbar
4 // Navbar brand
5 // Navbar nav
6 // Navbar text
7 // Navbar divider
8 // Responsive navbar
9 // Navbar position
10 // Navbar themes
11  
12  
13 // Navbar
14 //
15 // Provide a static navbar from which we expand to create full-width, fixed, and
16 // other navbar variations.
17  
18 .navbar {
19 position: relative;
20 display: flex;
21 flex-wrap: wrap; // allow us to do the line break for collapsing content
22 align-items: center;
23 justify-content: space-between; // space out brand from logo
24 padding: $navbar-padding-y $navbar-padding-x;
25  
26 // Because flex properties aren't inherited, we need to redeclare these first
27 // few properties so that content nested within behave properly.
28 > .container,
29 > .container-fluid {
30 display: flex;
31 flex-wrap: wrap;
32 align-items: center;
33 justify-content: space-between;
34 }
35 }
36  
37  
38 // Navbar brand
39 //
40 // Used for brand, project, or site names.
41  
42 .navbar-brand {
43 display: inline-block;
44 padding-top: $navbar-brand-padding-y;
45 padding-bottom: $navbar-brand-padding-y;
46 margin-right: $navbar-padding-x;
47 font-size: $navbar-brand-font-size;
48 line-height: inherit;
49 white-space: nowrap;
50  
51 @include hover-focus {
52 text-decoration: none;
53 }
54 }
55  
56  
57 // Navbar nav
58 //
59 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
60  
61 .navbar-nav {
62 display: flex;
63 flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
64 padding-left: 0;
65 margin-bottom: 0;
66 list-style: none;
67  
68 .nav-link {
69 padding-right: 0;
70 padding-left: 0;
71 }
72  
73 .dropdown-menu {
74 position: static;
75 float: none;
76 }
77 }
78  
79  
80 // Navbar text
81 //
82 //
83  
84 .navbar-text {
85 display: inline-block;
86 padding-top: $nav-link-padding-y;
87 padding-bottom: $nav-link-padding-y;
88 }
89  
90  
91 // Responsive navbar
92 //
93 // Custom styles for responsive collapsing and toggling of navbar contents.
94 // Powered by the collapse Bootstrap JavaScript plugin.
95  
96 // When collapsed, prevent the toggleable navbar contents from appearing in
97 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
98 // on the `.navbar` parent.
99 .navbar-collapse {
100 flex-basis: 100%;
101 flex-grow: 1;
102 // For always expanded or extra full navbars, ensure content aligns itself
103 // properly vertically. Can be easily overridden with flex utilities.
104 align-items: center;
105 }
106  
107 // Button for toggling the navbar when in its collapsed state
108 .navbar-toggler {
109 padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
110 font-size: $navbar-toggler-font-size;
111 line-height: 1;
112 background-color: transparent; // remove default button style
113 border: $border-width solid transparent; // remove default button style
114 @include border-radius($navbar-toggler-border-radius);
115  
116 @include hover-focus {
117 text-decoration: none;
118 }
119  
120 // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
121 &:not(:disabled):not(.disabled) {
122 cursor: pointer;
123 }
124 }
125  
126 // Keep as a separate element so folks can easily override it with another icon
127 // or image file as needed.
128 .navbar-toggler-icon {
129 display: inline-block;
130 width: 1.5em;
131 height: 1.5em;
132 vertical-align: middle;
133 content: "";
134 background: no-repeat center center;
135 background-size: 100% 100%;
136 }
137  
138 // Generate series of `.navbar-expand-*` responsive classes for configuring
139 // where your navbar collapses.
140 .navbar-expand {
141 @each $breakpoint in map-keys($grid-breakpoints) {
142 $next: breakpoint-next($breakpoint, $grid-breakpoints);
143 $infix: breakpoint-infix($next, $grid-breakpoints);
144  
145 &#{$infix} {
146 @include media-breakpoint-down($breakpoint) {
147 > .container,
148 > .container-fluid {
149 padding-right: 0;
150 padding-left: 0;
151 }
152 }
153  
154 @include media-breakpoint-up($next) {
155 flex-flow: row nowrap;
156 justify-content: flex-start;
157  
158 .navbar-nav {
159 flex-direction: row;
160  
161 .dropdown-menu {
162 position: absolute;
163 }
164  
165 .nav-link {
166 padding-right: $navbar-nav-link-padding-x;
167 padding-left: $navbar-nav-link-padding-x;
168 }
169 }
170  
171 // For nesting containers, have to redeclare for alignment purposes
172 > .container,
173 > .container-fluid {
174 flex-wrap: nowrap;
175 }
176  
177 .navbar-collapse {
178 display: flex !important; // stylelint-disable-line declaration-no-important
179  
180 // Changes flex-bases to auto because of an IE10 bug
181 flex-basis: auto;
182 }
183  
184 .navbar-toggler {
185 display: none;
186 }
187 }
188 }
189 }
190 }
191  
192  
193 // Navbar themes
194 //
195 // Styles for switching between navbars with light or dark background.
196  
197 // Dark links against a light background
198 .navbar-light {
199 .navbar-brand {
200 color: $navbar-light-active-color;
201  
202 @include hover-focus {
203 color: $navbar-light-active-color;
204 }
205 }
206  
207 .navbar-nav {
208 .nav-link {
209 color: $navbar-light-color;
210  
211 @include hover-focus {
212 color: $navbar-light-hover-color;
213 }
214  
215 &.disabled {
216 color: $navbar-light-disabled-color;
217 }
218 }
219  
220 .show > .nav-link,
221 .active > .nav-link,
222 .nav-link.show,
223 .nav-link.active {
224 color: $navbar-light-active-color;
225 }
226 }
227  
228 .navbar-toggler {
229 color: $navbar-light-color;
230 border-color: $navbar-light-toggler-border-color;
231 }
232  
233 .navbar-toggler-icon {
234 background-image: $navbar-light-toggler-icon-bg;
235 }
236  
237 .navbar-text {
238 color: $navbar-light-color;
239 a {
240 color: $navbar-light-active-color;
241  
242 @include hover-focus {
243 color: $navbar-light-active-color;
244 }
245 }
246 }
247 }
248  
249 // White links against a dark background
250 .navbar-dark {
251 .navbar-brand {
252 color: $navbar-dark-active-color;
253  
254 @include hover-focus {
255 color: $navbar-dark-active-color;
256 }
257 }
258  
259 .navbar-nav {
260 .nav-link {
261 color: $navbar-dark-color;
262  
263 @include hover-focus {
264 color: $navbar-dark-hover-color;
265 }
266  
267 &.disabled {
268 color: $navbar-dark-disabled-color;
269 }
270 }
271  
272 .show > .nav-link,
273 .active > .nav-link,
274 .nav-link.show,
275 .nav-link.active {
276 color: $navbar-dark-active-color;
277 }
278 }
279  
280 .navbar-toggler {
281 color: $navbar-dark-color;
282 border-color: $navbar-dark-toggler-border-color;
283 }
284  
285 .navbar-toggler-icon {
286 background-image: $navbar-dark-toggler-icon-bg;
287 }
288  
289 .navbar-text {
290 color: $navbar-dark-color;
291 a {
292 color: $navbar-dark-active-color;
293  
294 @include hover-focus {
295 color: $navbar-dark-active-color;
296 }
297 }
298 }
299 }