talos

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-flex-properties {
29
    display: flex;
30
    flex-wrap: wrap;
31
    align-items: center;
32
    justify-content: space-between;
33
  }
34

35
  .container,
36
  .container-fluid {
37
    @extend %container-flex-properties;
38
  }
39

40
  @each $breakpoint, $container-max-width in $container-max-widths {
41
    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
42
      @extend %container-flex-properties;
43
    }
44
  }
45
}
46

47

48
// Navbar brand
49
//
50
// Used for brand, project, or site names.
51

52
.navbar-brand {
53
  display: inline-block;
54
  padding-top: $navbar-brand-padding-y;
55
  padding-bottom: $navbar-brand-padding-y;
56
  margin-right: $navbar-padding-x;
57
  @include font-size($navbar-brand-font-size);
58
  line-height: inherit;
59
  white-space: nowrap;
60

61
  @include hover-focus() {
62
    text-decoration: none;
63
  }
64
}
65

66

67
// Navbar nav
68
//
69
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
70

71
.navbar-nav {
72
  display: flex;
73
  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
74
  padding-left: 0;
75
  margin-bottom: 0;
76
  list-style: none;
77

78
  .nav-link {
79
    padding-right: 0;
80
    padding-left: 0;
81
  }
82

83
  .dropdown-menu {
84
    position: static;
85
    float: none;
86
  }
87
}
88

89

90
// Navbar text
91
//
92
//
93

94
.navbar-text {
95
  display: inline-block;
96
  padding-top: $nav-link-padding-y;
97
  padding-bottom: $nav-link-padding-y;
98
}
99

100

101
// Responsive navbar
102
//
103
// Custom styles for responsive collapsing and toggling of navbar contents.
104
// Powered by the collapse Bootstrap JavaScript plugin.
105

106
// When collapsed, prevent the toggleable navbar contents from appearing in
107
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
108
// on the `.navbar` parent.
109
.navbar-collapse {
110
  flex-basis: 100%;
111
  flex-grow: 1;
112
  // For always expanded or extra full navbars, ensure content aligns itself
113
  // properly vertically. Can be easily overridden with flex utilities.
114
  align-items: center;
115
}
116

117
// Button for toggling the navbar when in its collapsed state
118
.navbar-toggler {
119
  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
120
  @include font-size($navbar-toggler-font-size);
121
  line-height: 1;
122
  background-color: transparent; // remove default button style
123
  border: $border-width solid transparent; // remove default button style
124
  @include border-radius($navbar-toggler-border-radius);
125

126
  @include hover-focus() {
127
    text-decoration: none;
128
  }
129
}
130

131
// Keep as a separate element so folks can easily override it with another icon
132
// or image file as needed.
133
.navbar-toggler-icon {
134
  display: inline-block;
135
  width: 1.5em;
136
  height: 1.5em;
137
  vertical-align: middle;
138
  content: "";
139
  background: 50% / 100% 100% no-repeat;
140
}
141

142
.navbar-nav-scroll {
143
  max-height: $navbar-nav-scroll-max-height;
144
  overflow-y: auto;
145
}
146

147
// Generate series of `.navbar-expand-*` responsive classes for configuring
148
// where your navbar collapses.
149
.navbar-expand {
150
  @each $breakpoint in map-keys($grid-breakpoints) {
151
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
152
    $infix: breakpoint-infix($next, $grid-breakpoints);
153

154
    &#{$infix} {
155
      @include media-breakpoint-down($breakpoint) {
156
        %container-navbar-expand-#{$breakpoint} {
157
          padding-right: 0;
158
          padding-left: 0;
159
        }
160

161
        > .container,
162
        > .container-fluid {
163
          @extend %container-navbar-expand-#{$breakpoint};
164
        }
165

166
        @each $size, $container-max-width in $container-max-widths {
167
          > .container#{breakpoint-infix($size, $container-max-widths)} {
168
            @extend %container-navbar-expand-#{$breakpoint};
169
          }
170
        }
171
      }
172

173
      @include media-breakpoint-up($next) {
174
        flex-flow: row nowrap;
175
        justify-content: flex-start;
176

177
        .navbar-nav {
178
          flex-direction: row;
179

180
          .dropdown-menu {
181
            position: absolute;
182
          }
183

184
          .nav-link {
185
            padding-right: $navbar-nav-link-padding-x;
186
            padding-left: $navbar-nav-link-padding-x;
187
          }
188
        }
189

190
        // For nesting containers, have to redeclare for alignment purposes
191
        %container-nesting-#{$breakpoint} {
192
          flex-wrap: nowrap;
193
        }
194

195
        > .container,
196
        > .container-fluid {
197
          @extend %container-nesting-#{$breakpoint};
198
        }
199

200
        @each $size, $container-max-width in $container-max-widths {
201
          > .container#{breakpoint-infix($size, $container-max-widths)} {
202
            @extend %container-nesting-#{$breakpoint};
203
          }
204
        }
205

206
        .navbar-nav-scroll {
207
          overflow: visible;
208
        }
209

210
        .navbar-collapse {
211
          display: flex !important; // stylelint-disable-line declaration-no-important
212

213
          // Changes flex-bases to auto because of an IE10 bug
214
          flex-basis: auto;
215
        }
216

217
        .navbar-toggler {
218
          display: none;
219
        }
220
      }
221
    }
222
  }
223
}
224

225

226
// Navbar themes
227
//
228
// Styles for switching between navbars with light or dark background.
229

230
// Dark links against a light background
231
.navbar-light {
232
  .navbar-brand {
233
    color: $navbar-light-brand-color;
234

235
    @include hover-focus() {
236
      color: $navbar-light-brand-hover-color;
237
    }
238
  }
239

240
  .navbar-nav {
241
    .nav-link {
242
      color: $navbar-light-color;
243

244
      @include hover-focus() {
245
        color: $navbar-light-hover-color;
246
      }
247

248
      &.disabled {
249
        color: $navbar-light-disabled-color;
250
      }
251
    }
252

253
    .show > .nav-link,
254
    .active > .nav-link,
255
    .nav-link.show,
256
    .nav-link.active {
257
      color: $navbar-light-active-color;
258
    }
259
  }
260

261
  .navbar-toggler {
262
    color: $navbar-light-color;
263
    border-color: $navbar-light-toggler-border-color;
264
  }
265

266
  .navbar-toggler-icon {
267
    background-image: escape-svg($navbar-light-toggler-icon-bg);
268
  }
269

270
  .navbar-text {
271
    color: $navbar-light-color;
272
    a {
273
      color: $navbar-light-active-color;
274

275
      @include hover-focus() {
276
        color: $navbar-light-active-color;
277
      }
278
    }
279
  }
280
}
281

282
// White links against a dark background
283
.navbar-dark {
284
  .navbar-brand {
285
    color: $navbar-dark-brand-color;
286

287
    @include hover-focus() {
288
      color: $navbar-dark-brand-hover-color;
289
    }
290
  }
291

292
  .navbar-nav {
293
    .nav-link {
294
      color: $navbar-dark-color;
295

296
      @include hover-focus() {
297
        color: $navbar-dark-hover-color;
298
      }
299

300
      &.disabled {
301
        color: $navbar-dark-disabled-color;
302
      }
303
    }
304

305
    .show > .nav-link,
306
    .active > .nav-link,
307
    .nav-link.show,
308
    .nav-link.active {
309
      color: $navbar-dark-active-color;
310
    }
311
  }
312

313
  .navbar-toggler {
314
    color: $navbar-dark-color;
315
    border-color: $navbar-dark-toggler-border-color;
316
  }
317

318
  .navbar-toggler-icon {
319
    background-image: escape-svg($navbar-dark-toggler-icon-bg);
320
  }
321

322
  .navbar-text {
323
    color: $navbar-dark-color;
324
    a {
325
      color: $navbar-dark-active-color;
326

327
      @include hover-focus() {
328
        color: $navbar-dark-active-color;
329
      }
330
    }
331
  }
332
}
333