• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1.header {
2  background: $header-background;
3  a {
4    font-weight: map-get($base, font-weight);
5    text-decoration: none !important;
6    @include link-colors($header-text-color, $main-color-1);
7  }
8  .main {
9    @include flexbox();
10    @include media-breakpoint-down(md) {
11      @include flex-direction(column);
12    }
13  }
14}
15
16.header--dark {
17  @extend .text--dark;
18  background: rgba(#000, .15);
19  .navigation__item--active {
20    &::after {
21      @include split-line(bottom, 4px, $text-color-theme-dark);
22    }
23  }
24}
25
26.header--light {
27  @extend .text--light;
28  background: rgba(#fff, .15);
29  .navigation__item--active {
30    &::after {
31      @include split-line(bottom, 4px, $text-color-theme-light);
32    }
33  }
34}
35
36.header__title {
37  @include menu(3, 0);
38  @include align-items(center);
39  @include flex-wrap(nowrap);
40  @include flex(1);
41  height: map-get($layout, header-height);
42  margin-right: map-get($spacers, 3);
43  white-space: nowrap;
44  @include media-breakpoint-down(md) {
45    height: map-get($layout, header-height-sm);
46    margin-right: 0;
47  }
48  & > .header__brand {
49    @include flex(1);
50  }
51  & > .search-button {
52    display: none;
53    margin-left: map-get($spacers, 2);
54    @include media-breakpoint-down(md) {
55      @include flexbox();
56    }
57  }
58}
59
60.header__brand {
61  @include flexbox();
62  @include align-items(center);
63  & > svg {
64    width: map-get($base, font-size-h4) * 1.6;
65    height: map-get($base, font-size-h4) * 1.6;
66    margin-right: map-get($spacers, 3);
67    vertical-align: middle;
68    @include media-breakpoint-down(md) {
69      width: map-get($base, font-size-h4) * 1.2;
70      height: map-get($base, font-size-h4) * 1.2;
71    }
72  }
73  & > a {
74    display: inline-block;
75    font-size: map-get($base, font-size-h4);
76    @include media-breakpoint-down(md) {
77      font-size: map-get($base, font-size-h4-small);
78    }
79  }
80}
81
82.navigation {
83  @include overflow(auto, "x");
84  & > ul {
85    height: map-get($layout, header-height);
86    padding-bottom: 0;
87    margin: 0;
88    @include media-breakpoint-down(md) {
89      padding-bottom: 4px;
90      margin: -4px 0 0 0;
91    }
92    @include menu(3, 2, nowrap);
93    @include align-items(center);
94    @include media-breakpoint-down(md) {
95      height: auto;
96    }
97    .search-button {
98      @include media-breakpoint-down(md) {
99        display: none;
100      }
101    }
102  }
103}
104
105.navigation__item {
106  &::after {
107    display: block;
108    margin-bottom: -4px;
109    content: "";
110    @include split-line(bottom, 4px, transparent);
111  }
112}
113.navigation__item--active {
114  a {
115    @include link-colors($main-color-1, $main-color-1);
116  }
117  &::after {
118    @include split-line(bottom, 4px, $main-color-1);
119  }
120}