BWA: Fix responsive layout for global navbar
[blender-web-assets.git] / styles / _navigation.sass
1 /* Top Bar: Generics */
2 .navbar-global-container
3         background-color: var(--navbar-global-bg)
4
5         +media-sm
6                 +padding(3, x)
7
8         .navbar-logo-blender
9                 +blender_logo_white
10                 background-size: 75%
11                 background-position: center left
12
13         .navbar-global
14                 align-items: center
15                 display: flex
16                 justify-content: space-between
17
18         .btn-apps
19                 background-color: var(--navbar-global-btn-bg)
20                 box-shadow: none
21                 color: hsl(213, 10%, 72%)
22                 +padding(1, y)
23                 text-shadow: none
24
25         .dropdown-menu
26                 background-color: var(--navbar-global-dropdown-bg)
27                 border-radius: var(--border-radius-lg)
28                 color: var(--navbar-global-text-color)
29                 flex-direction: column
30                 +padding(2)
31                 right: -.75rem
32                 width: 100vw
33
34                 +media-sm
35                         flex-direction: row
36                         right: 0
37                         width: 46rem
38
39                 &.show
40                         display: flex
41                         flex-wrap: wrap
42
43                 li
44                         +media-sm
45                                 width: 50%
46
47                 &::before
48                         background-color: var(--navbar-global-dropdown-bg)
49                         border-color: var(--navbar-global-dropdown-bg)
50
51                 .dropdown-item
52                         border-radius: var(--border-radius-lg)
53                         white-space: initial
54
55                 .dropdown-item-icon
56                         color: var(--text-color-tertiary)
57                         font-size: 25px
58                         margin-top: .1rem
59                         +padding(3, right)
60
61                 h4
62                         font-size: var(--font-size-large)
63                         +margin(2, top)
64                         +margin(1, bottom)
65
66                 p
67                         color: var(--text-color-secondary)
68
69 body.has-global-bar
70         .navbar-secondary
71                 top: 0
72
73 .navbar
74         align-items: center
75         background-color: var(--navbar-bg)
76         box-shadow: 0 1px 2px 0 rgba(black, .05)
77         display: flex
78         font-size: var(--font-size-navbar)
79         position: sticky
80         transition: top 250ms ease-in-out, box-shadow 1s ease-in-out, background-color 1s ease-in-out
81         z-index: var(--navbar-zindex)
82
83         /* icons in entries */
84         ul > li > a > i
85                 +padding(2, right)
86
87         ul li a:hover
88                 text-decoration: none
89
90         .navbar-btn
91                 +media-xs
92                         position: absolute
93                         right: 0
94
95         /* Mobile version of the menu */
96         &-collapse /* .navbar-collapse */
97                 +media-xs
98                         &.collapse, &.collapsing
99                                 background-color: var(--navbar-bg)
100                                 bottom: 0
101                                 max-height: initial
102                                 overflow-y: auto
103                                 position: fixed
104                                 right: 0
105                                 top: 48px
106                                 transition: none
107                                 width: 100%
108
109                                 a.nav-link
110                                         margin: 0 15px
111
112                                 .navbar-nav
113                                         flex-direction: column !important
114
115         .container
116                 +media-xs
117                         margin: 0
118                         padding: 0
119
120                 align-items: center
121                 display: flex
122                 justify-content: flex-end
123                 height: 100%
124
125         .navbar-toggler
126                 border: var(--border-width) solid var(--text-color)
127                 box-shadow: none
128                 color: var(--text-color)
129                 font-size: 1.2em
130                 margin: 5px 0
131                 position: relative
132
133                 &:focus,
134                 &:active
135                         background-color: transparent
136                         border-color: var(--primary)
137
138                         i,svg
139                                 color: var(--primary)
140                                 fill: var(--primary)
141                                 stroke: var(--primary)
142
143                 svg
144                         color: currentColor
145                         fill: currentColor
146                         stroke: currentColor
147
148                 i
149                         margin: 5px 0 0 0
150
151 .navbar-toggler-icon
152         display: flex
153
154 /* The logo. */
155 .navbar-brand
156         color: var(--text-color)
157
158         &:hover
159                 opacity: .9
160                 transition: opacity 0.1s ease
161
162
163 /* Blender logo. */
164 .navbar-logo-blender
165         background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE5OCA1OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4KICAgIDxnPgogICAgICAgIDxwYXRoIGQ9Ik0xODAuNTEzLDE2LjI3MUMxODAuNTEzLDE2LjI3MSA2My4xNzcsMTYuMjcxIDU5Ljg2OCwxNi4yNzFDNTkuNzk0LDE2LjIxNCA1OS43MjcsMTYuMTQ1IDU5LjY1NiwxNi4wOUM1OS42MzgsMTYuMDczIDQxLjkwNywyLjQ1MiA0MS4zNzQsMi4wNEM0MS4zNDMsMi4wMTcgNDEuMzEzLDEuOTk0IDQxLjMxMywxLjk5NEMzOC40NzIsLTAuMTgxIDM0LjI1MiwtMC4yMjcgMzEuMjYxLDEuODY5QzI5LjM5LDMuMTc4IDI4LjI2Niw1LjE1OCAyOC4xODIsNy4zQzI4LjE4LDcuMzg1IDI4LjE3NSw3LjQ3MSAyOC4xNzUsNy41NThDMjguMTc1LDguNjY5IDI4LjQ3LDkuNzQyIDI5LjAwMywxMC43MDZDMjMuNTEzLDEwLjcxMSAxNy45OTEsMTAuNzE3IDE3Ljk5MSwxMC43MTdDMTMuODczLDEwLjcyIDEwLjE0OSwxMy40OTggOS4yOTksMTcuMTc5QzkuMTc4LDE3LjcwNyA5LjExNywxOC4yMzkgOS4xMTcsMTguNzY3QzkuMTE3LDIwLjMwNyA5LjYyOSwyMS44IDEwLjU5OCwyMy4wMjZDMTEuNjg5LDI0LjM5NyAxMy4yNjMsMjUuMzIgMTUuMDU5LDI1LjY4QzkuODcyLDI5LjY2MyA0LjY4OSwzMy42NCA0LjY4NCwzMy42NDVDNC42NDcsMzMuNjcyIDQuNjE3LDMzLjY5NyA0LjU5MSwzMy43MTRDMi41MTEsMzUuMzEyIDEuMTQxLDM3LjYyNiAwLjgzMSw0MC4wNjJDMC43ODUsNDAuNDE5IDAuNzYzLDQwLjc3MyAwLjc2Myw0MS4xMjRDMC43NjMsNDIuODc4IDEuMzIzLDQ0LjU0NiAyLjM4NSw0NS45MDlDMy42NzgsNDcuNTYzIDUuNTg2LDQ4LjYxMyA3Ljc1OSw0OC44NkMxMC4yNDksNDkuMTQ4IDEyLjg2OSw0OC4zNSAxNC45NDIsNDYuNjc0QzE0Ljk1NSw0Ni42NjQgMTcuNTIyLDQ0LjU1OSAyMC4yMjksNDIuMzQ1QzIxLjIyMiw0NC43NDIgMjIuNjE1LDQ2Ljk2NCAyNC40MTUsNDguOTUxQzI2LjczMSw1MS41MSAyOS41NDYsNTMuNTMyIDMyLjc3Nyw1NC45NjJDMzYuMTczLDU2LjQ2NyAzOS44MTIsNTcuMjI3IDQzLjU5NCw1Ny4yMThDNDcuMzc5LDU3LjIxMSA1MS4wMTYsNTYuNDQyIDU0LjQwNyw1NC45MjhDNTcuNjQ1LDUzLjQ3OSA2MC40NTQsNTEuNDUgNjIuNzYxLDQ4Ljg5NUM2My4xLDQ4LjUxNyA2My40MTIsNDguMTE5IDYzLjcyNCw0Ny43MTlDNjguMzA0LDQ3LjcxOSAxODAuNTEzLDQ3LjcxOSAxODAuNTEzLDQ3LjcxOUMxODkuNzM5LDQ3LjcxOSAxOTcuMjM2LDQwLjY2NiAxOTcuMjM2LDMxLjk5N0MxOTcuMjM2LDIzLjMyNiAxODkuNzM5LDE2LjI3MSAxODAuNTEzLDE2LjI3MVoiIHN0eWxlPSJmaWxsOnJnYigyNTQsMjU0LDI1NCk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTM2LjEzLDMxLjI4NUMzNi4yMzYsMjkuMzk0IDM3LjE2MiwyNy43MjggMzguNTU5LDI2LjU0N0MzOS45MjksMjUuMzg3IDQxLjc3MywyNC42NzggNDMuNzg1LDI0LjY3OEM0NS43OTUsMjQuNjc4IDQ3LjYzOSwyNS4zODcgNDkuMDEsMjYuNTQ3QzUwLjQwNiwyNy43MjggNTEuMzMyLDI5LjM5NCA1MS40MzksMzEuMjgzQzUxLjU0NSwzMy4yMjYgNTAuNzY0LDM1LjAzMSA0OS4zOTQsMzYuMzY5QzQ3Ljk5NywzNy43MyA0Ni4wMSwzOC41ODQgNDMuNzg1LDM4LjU4NEM0MS41NiwzOC41ODQgMzkuNTY5LDM3LjczIDM4LjE3MywzNi4zNjlDMzYuODAyLDM1LjAzMSAzNi4wMjMsMzMuMjI2IDM2LjEzLDMxLjI4NVoiIHN0eWxlPSJmaWxsOnJnYigxNCw4NCwxMzkpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgIDxwYXRoIGQ9Ik0yMy45NCwzNS4xMDZDMjMuOTUzLDM1Ljg0NiAyNC4xODksMzcuMjg0IDI0LjU0MywzOC40MDdDMjUuMjg3LDQwLjc4NCAyNi41NDksNDIuOTgzIDI4LjMwNSw0NC45MjFDMzAuMTA3LDQ2LjkxMyAzMi4zMjYsNDguNTEzIDM0Ljg4OSw0OS42NDlDMzcuNTgzLDUwLjg0MiA0MC41MDIsNTEuNDUgNDMuNTM0LDUxLjQ0NUM0Ni41NjEsNTEuNDQxIDQ5LjQ4LDUwLjgyMSA1Mi4xNzQsNDkuNjE5QzU0LjczNyw0OC40NzIgNTYuOTU0LDQ2Ljg2NSA1OC43NTMsNDQuODcyQzYwLjUwOCw0Mi45MjYgNjEuNzY4LDQwLjcyMyA2Mi41MTQsMzguMzQ2QzYyLjg4OSwzNy4xNDUgNjMuMTI2LDM1LjkyNiA2My4yMjEsMzQuNzAzQzYzLjMxNCwzMy40OTggNjMuMjc1LDMyLjI5MSA2My4xMDQsMzEuMDg1QzYyLjc3LDI4LjczNSA2MS45NTcsMjYuNTMgNjAuNzA1LDI0LjUyQzU5LjU2LDIyLjY3MyA1OC4wODQsMjEuMDU2IDU2LjMyOSwxOS42OTVMNTYuMzMzLDE5LjY5MkwzOC42MjIsNi4wOTNDMzguNjA2LDYuMDgxIDM4LjU5Myw2LjA2OCAzOC41NzYsNi4wNTdDMzcuNDE0LDUuMTY1IDM1LjQ2LDUuMTY4IDM0LjE4Miw2LjA2MkMzMi44OSw2Ljk2NiAzMi43NDIsOC40NjEgMzMuODkyLDkuNDA0TDMzLjg4Nyw5LjQwOUw0MS4yNzQsMTUuNDE2TDE4Ljc1OSwxNS40NEMxOC43NDgsMTUuNDQgMTguNzM3LDE1LjQ0IDE4LjcyOSwxNS40NEMxNi44NjgsMTUuNDQyIDE1LjA3OSwxNi42NjMgMTQuNzI1LDE4LjIwNkMxNC4zNjEsMTkuNzc4IDE1LjYyNSwyMS4wODIgMTcuNTYsMjEuMDg5TDE3LjU1NywyMS4wOTZMMjguOTY5LDIxLjA3NEw4LjYwNSwzNi43MDVDOC41NzksMzYuNzI0IDguNTUxLDM2Ljc0NCA4LjUyNywzNi43NjNDNi42MDYsMzguMjM0IDUuOTg1LDQwLjY4IDcuMTk1LDQyLjIyOEM4LjQyMyw0My44MDIgMTEuMDM0LDQzLjgwNSAxMi45NzUsNDIuMjM3TDI0LjA4OSwzMy4xNDFDMjQuMDg5LDMzLjE0MSAyMy45MjcsMzQuMzY5IDIzLjk0LDM1LjEwNlpNNTIuNDk5LDM5LjIxOEM1MC4yMDksNDEuNTUxIDQ3LjAwMyw0Mi44NzQgNDMuNTM0LDQyLjg4MUM0MC4wNiw0Mi44ODcgMzYuODU0LDQxLjU3NiAzNC41NjQsMzkuMjQ3QzMzLjQ0NSwzOC4xMTIgMzIuNjIzLDM2LjgwNiAzMi4xMTYsMzUuNDE1QzMxLjYxOSwzNC4wNDggMzEuNDI2LDMyLjU5NyAzMS41NTQsMzEuMTMzQzMxLjY3NSwyOS43MDIgMzIuMTAxLDI4LjMzNyAzMi43ODEsMjcuMTAyQzMzLjQ0OSwyNS44ODggMzQuMzY5LDI0Ljc5MSAzNS41MDUsMjMuODYzQzM3LjczMSwyMi4wNDkgNDAuNTY1LDIxLjA2NyA0My41MjksMjEuMDYzQzQ2LjQ5NiwyMS4wNTkgNDkuMzI4LDIyLjAzMiA1MS41NTYsMjMuODRDNTIuNjksMjQuNzY0IDUzLjYwOSwyNS44NTcgNTQuMjc3LDI3LjA2OUM1NC45NiwyOC4zMDMgNTUuMzgzLDI5LjY2MyA1NS41MDksMzEuMDk4QzU1LjYzNSwzMi41NiA1NS40NDIsMzQuMDA5IDU0Ljk0NSwzNS4zNzdDNTQuNDM3LDM2Ljc3MiA1My42MTgsMzguMDc4IDUyLjQ5OSwzOS4yMThaIiBzdHlsZT0iZmlsbDpyZ2IoMjQ0LDEyMSw0Myk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTE1Ny40NjcsMzEuMjU0QzE1Ny42MzgsMjkuMzQ2IDE1OS4xMTMsMjguMTM2IDE2MS4zNjYsMjguMTM2QzE2My42MjIsMjguMTM2IDE2NS4wOTYsMjkuMzQ2IDE2NS4yNjcsMzEuMjU0TDE1Ny40NjcsMzEuMjU0Wk0xNjUuMDM2LDM1Ljk2NUMxNjQuNDU5LDM3LjM3OSAxNjMuMDk5LDM4LjIxNiAxNjEuMjUyLDM4LjIxNkMxNTguOTM5LDM4LjIxNiAxNTcuMzgyLDM2Ljc3MiAxNTcuMzE5LDM0LjQ5MUwxNzAuNjE2LDM0LjQ5MUMxNzAuNjE2LDM0LjI1NCAxNzAuNjE2LDM0LjA1NiAxNzAuNjE2LDMzLjgyQzE3MC42MTYsMjguMTA2IDE2Ny4yNjIsMjQuODk1IDE2MS4yNTIsMjQuODk1QzE1NS40MTYsMjQuODk1IDE1MS44ODcsMjguMTM2IDE1MS44ODcsMzMuMjE5QzE1MS44ODcsMzguMzMzIDE1NS40NzEsNDEuNTY5IDE2MS4yNTIsNDEuNTY5QzE2NC43MjEsNDEuNTY5IDE2Ny40MTEsNDAuMzggMTY5LjA2OSwzOC4yOUwxNjUuMDM2LDM1Ljk2NVoiIHN0eWxlPSJmaWxsOnJnYigxNCw4NCwxMzkpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgIDxwYXRoIGQ9Ik05OC40NjgsMzEuMjYzQzk4LjY0NCwyOS4zNTUgMTAwLjExOSwyOC4xNDUgMTAyLjM3NCwyOC4xNDVDMTA0LjYyNiwyOC4xNDUgMTA2LjEsMjkuMzU1IDEwNi4yNzMsMzEuMjYzTDk4LjQ2OCwzMS4yNjNaTTEwNi4wNDIsMzUuOTc0QzEwNS40NjQsMzcuMzkyIDEwNC4xMDUsMzguMjI5IDEwMi4yNTQsMzguMjI5Qzk5Ljk0NSwzOC4yMjkgOTguMzg0LDM2Ljc4MSA5OC4zMjMsMzQuNDk5TDExMS42MTcsMzQuNDk5QzExMS42MTcsMzQuMjY1IDExMS42MTcsMzQuMDY4IDExMS42MTcsMzMuODMyQzExMS42MTcsMjguMTE1IDEwOC4yNjQsMjQuOTAzIDEwMi4yNTQsMjQuOTAzQzk2LjQxNSwyNC45MDMgOTIuODkzLDI4LjE0NSA5Mi44OTMsMzMuMjI4QzkyLjg5MywzOC4zNDIgOTYuNDc1LDQxLjU3OCAxMDIuMjU0LDQxLjU3OEMxMDUuNzIyLDQxLjU3OCAxMDguNDE0LDQwLjM5MyAxMTAuMDc1LDM4LjNMMTA2LjA0MiwzNS45NzRaIiBzdHlsZT0iZmlsbDpyZ2IoMTQsODQsMTM5KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cmVjdCB4PSI4Ni45MDciIHk9IjIxLjQ0IiB3aWR0aD0iNC43OTUiIGhlaWdodD0iMTkuNjE3IiBzdHlsZT0iZmlsbDpyZ2IoMTQsODQsMTM5KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNMTEyLjgxLDI2LjY1MkwxMTcuNjMyLDI2LjY1MkwxMTcuNjMyLDI3LjgyQzExOS4zMzksMjUuOTk4IDEyMS4zODksMjUuMDc3IDEyMy43MDEsMjUuMDc3QzEyNi4zNjQsMjUuMDc3IDEyOC4zOCwyNS45OTggMTI5LjQyMSwyNy41NjZDMTMwLjI5LDI4Ljg2MSAxMzAuMzQ3LDMwLjQyNCAxMzAuMzQ3LDMyLjQ3OEwxMzAuMzQ3LDQxLjA1N0wxMjUuNTE4LDQxLjA1N0wxMjUuNTE4LDMzLjUxOUMxMjUuNTE4LDMwLjM5MSAxMjQuODg5LDI4Ljk0NyAxMjIuMTQzLDI4Ljk0N0MxMTkuMzY4LDI4Ljk0NyAxMTcuNjMyLDMwLjYgMTE3LjYzMiwzMy4zNzVMMTE3LjYzMiw0MS4wNTdMMTEyLjgxLDQxLjA1N0wxMTIuODEsMjYuNjUyWiIgc3R5bGU9ImZpbGw6cmdiKDE0LDg0LDEzOSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTE0NS44NzYsMzMuNDYyQzE0NS44NzYsMzYuMTQ3IDE0NC4wODIsMzcuOTA4IDE0MS4zMDYsMzcuOTA4QzEzOC41MjgsMzcuOTA4IDEzNi43MzQsMzYuMjA3IDEzNi43MzQsMzMuNDkzQzEzNi43MzQsMzAuNzM5IDEzOC41MDQsMjkuMDM5IDE0MS4zMDYsMjkuMDM5QzE0NC4wODIsMjkuMDM5IDE0NS44NzYsMzAuNzY5IDE0NS44NzYsMzMuNDYyWk0xNDUuODc2LDI3LjMwNUMxNDQuNjU3LDI1Ljk5OCAxNDIuODkzLDI1LjI4MSAxNDAuNDQxLDI1LjI4MUMxMzUuMTUxLDI1LjI4MSAxMzEuNTM5LDI4LjU0MyAxMzEuNTM5LDMzLjQzMkMxMzEuNTM5LDM4LjIyNSAxMzUuMTI2LDQxLjU3OCAxNDAuMzU0LDQxLjU3OEMxNDIuNzUxLDQxLjU3OCAxNDQuNTExLDQwLjk3MiAxNDUuODc2LDM5LjYxM0wxNDUuODc2LDQxLjA1N0wxNTAuNzAxLDQxLjA1N0wxNTAuNzAxLDIwLjE5NkwxNDUuODc2LDIxLjQ0TDE0NS44NzYsMjcuMzA1WiIgc3R5bGU9ImZpbGw6cmdiKDE0LDg0LDEzOSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTc1Ljk0NywyOS4wMzlDNzguNzUxLDI5LjAzOSA4MC41MTQsMzAuNzM5IDgwLjUxNCwzMy40OTNDODAuNTE0LDM2LjIwNyA3OC43MjMsMzcuOTA4IDc1Ljk0NywzNy45MDhDNzMuMTczLDM3LjkwOCA3MS4zODEsMzYuMTQ3IDcxLjM4MSwzMy40NjJDNzEuMzgxLDMwLjc2OSA3My4xNzMsMjkuMDM5IDc1Ljk0NywyOS4wMzlaTTcxLjM4MSwyMS40NEw2Ni41NTQsMjAuMTk2TDY2LjU1NCw0MS4wNTdMNzEuMzgxLDQxLjA1N0w3MS4zODEsMzkuNjEzQzcyLjczOSw0MC45NzIgNzQuNTAyLDQxLjU3OCA3Ni45MDEsNDEuNTc4QzgyLjEzMiw0MS41NzggODUuNzE0LDM4LjIyNSA4NS43MTQsMzMuNDMyQzg1LjcxNCwyOC41NDMgODIuMTAxLDI1LjI4MSA3Ni44MTQsMjUuMjgxQzc0LjM1NywyNS4yODEgNzIuNTk0LDI1Ljk5OCA3MS4zODEsMjcuMzA1TDcxLjM4MSwyMS40NFoiIHN0eWxlPSJmaWxsOnJnYigxNCw4NCwxMzkpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgIDxwYXRoIGQ9Ik0xNzEuODA2LDQxLjA1N0wxNzEuODA2LDI2LjY1MkwxNzYuNjMxLDI2LjY1MkwxNzYuNjMxLDI3LjU0MkMxNzguMDc2LDI1LjgwMiAxNzkuNjA1LDI0LjkzNiAxODEuMzQ0LDI0LjkzNkMxODEuNjg5LDI0LjkzNiAxODIuMTIzLDI0Ljk5MiAxODIuNywyNS4wNDlMMTgyLjcsMjkuMTU2QzE4Mi4yMzUsMjkuMDk1IDE4MS43MTcsMjkuMDk1IDE4MS4xNjcsMjkuMDk1QzE3OC4zNjIsMjkuMDk1IDE3Ni42MzEsMzAuOTQ1IDE3Ni42MzEsMzQuMDkxTDE3Ni42MzEsNDEuMDU3TDE3MS44MDYsNDEuMDU3WiIgc3R5bGU9ImZpbGw6cmdiKDE0LDg0LDEzOSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTE4OC45NTYsMjQuOTUyTDE4OC41ODUsMjQuOTUyTDE4OC41OTgsMjMuNjMxTDE4OC42MTgsMjMuMTk0TDE4OC41MTgsMjMuNTU0TDE4OC4wOCwyNC45NTJMMTg3Ljc0MiwyNC45NTJMMTg3LjMxMiwyMy41NTRMMTg3LjIwNCwyMy4yTDE4Ny4yMywyMy42MzFMMTg3LjI0MywyNC45NTJMMTg2Ljg4LDI0Ljk1MkwxODYuODgsMjIuODEyTDE4Ny4zODgsMjIuODEyTDE4Ny45MjMsMjQuNUwxODguNDQ2LDIyLjgxMkwxODguOTU2LDIyLjgxMkwxODguOTU2LDI0Ljk1MlpNMTg2LjAyNCwyNC45NTJMMTg1LjY1MSwyNC45NTJMMTg1LjY1MSwyMy4xMjlMMTg0Ljk2MywyMy4xMjlMMTg0Ljk2MywyMi44MTJMMTg2LjY5OSwyMi44MTJMMTg2LjY5OSwyMy4xMjlMMTg2LjAyNCwyMy4xMjlMMTg2LjAyNCwyNC45NTJaIiBzdHlsZT0iZmlsbDpyZ2IoMTQsODQsMTM5KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
166         background-repeat: no-repeat
167         background-size: 100%
168         display: inline-block
169         height: 40px
170         margin-right: auto
171         transition: opacity var(--transition-speed) ease-in-out
172         width: 132px
173
174         &:hover
175                 opacity: .8
176
177
178 /* <ul> The navigation menu (Features, Download, etc) */
179 .navbar-nav
180         flex-direction: row
181         flex-wrap: wrap
182
183         /* <li> or "nav-item". */
184         > li, .nav-item
185                 > a, .nav-link
186                         color: var(--navbar-link-color)
187                         transition: color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out
188
189                         &:visited
190                                 color: var(--navbar-link-color)
191
192                         &:focus,
193                         &:hover
194                                 box-shadow: inset 0 var(--navbar-active-indicator-width) var(--navbar-link-color-hover)
195                                 color: var(--navbar-link-color-hover)
196
197                         /* Blue mark on items that we want to highlight (e.g. a new job post in Jobs). */
198                         &[title*="[NEW]"]
199                                 position: relative
200
201                                 --new-indicator-size: 0.75rem
202                                 &:after
203                                         background: var(--primary)
204                                         border-radius: 100%
205                                         border: .1rem solid var(--navbar-bg)
206                                         content: ''
207                                         display: block
208                                         height: var(--new-indicator-size)
209                                         position: absolute
210                                         right: .25rem
211                                         top: .5rem
212                                         width: var(--new-indicator-size)
213
214                 &.active > a,
215                 &.current_page_item > a,
216                 &.current-page-ancestor > a,
217                 &.current-page-parent > a
218                         box-shadow: inset 0 var(--navbar-active-indicator-width) var(--navbar-link-color-active)
219                         color: var(--navbar-link-color-active)
220
221
222 /* Primary navigation bar (Features, Download, Get Involved...). */
223 .navbar-primary
224         .navbar-nav > li:last-child
225                 @extend .nav-cta
226
227
228 /* Second and third level navigation. */
229 .navbar-secondary
230         top: var(--navbar-primary-height)
231
232         /* Align navbar to the left. */
233         .navbar-nav
234                 margin-right: auto
235
236         .navbar-nav > li
237                 +media-xs
238                         flex-wrap: wrap
239                         flex: 1
240                         white-space: nowrap
241
242                 > a
243                         align-items: center
244                         display: flex
245                         height: 100%
246                         justify-content: center
247                         +padding(3, x)
248                         padding-bottom: 12px
249                         padding-top: 12px
250
251                         +media-xs
252                                 padding: 15px 20px
253
254         &+.navbar-secondary
255                 z-index: calc(var(--navbar-zindex) - 1)
256
257 /* <li> element inside the list (.navbar-nav). */
258 .nav-item
259         align-items: center
260         display: flex
261         justify-content: center
262
263
264 /* <a> element inside the list item (.nav-item). */
265 .nav-link
266         line-height: initial
267         +padding(3, x)
268
269
270 /* On secondary navigation, left-most item showing the parent page name. */
271 .navbar-nav .nav-parent .nav-link,
272 .navbar-nav .nav-parent .nav-link:visited
273         color: var(--text-color-secondary)
274
275         &:hover
276                 color: var(--primary)
277
278
279 /* Separator (right-angled arrow) used in second/third level navigation. */
280 .nav-separator
281         color: var(--text-color-secondary)
282
283         *
284                 position: relative
285                 top: calc(var(--border-width) / 2)
286
287 body
288         &.is-scrolled
289                 .navbar-primary, .navbar-secondary
290                         box-shadow: 0 0 25px rgba(black, .2)
291
292         &.is-navbar-expanded
293                 .navbar-hidden
294                         top: 0
295
296         &.is-navbar-hidden
297                 .navbar-primary
298                         top: calc(var(--navbar-primary-height) * -2)
299
300                 .navbar-secondary
301                         top: 0
302
303 /* Big blue call-to-action. */
304 .nav-cta
305         a
306                 +button(--primary, white, true)
307                 +padding(2, y)
308
309
310 /* Dropdown menus. */
311 .navbar-nav
312         > li
313                 @extend .nav-item
314
315 /* Dropdown. */
316 .dropdown
317         position: relative
318
319 .dropdown-menu
320         background-color: var(--background-color-primary)
321         border-radius: var(--border-radius)
322         +box-shadow-large-strong
323         display: none
324         +list-unstyled
325         +padding(1)
326         position: absolute
327         right: 0
328         top: calc(100% + 1rem)
329         z-index: var(--zindex-dropdown)
330
331         /* Triangle indicator on top of the dropdown. */
332         &::before
333                 background-color: var(--background-color-primary)
334                 border: var(--border-width) var(--background-color-primary) solid
335                 border-radius: 3px
336                 content: ''
337                 display: block
338                 height: .8rem
339                 position: absolute
340                 right: 1.7rem
341                 top: -.4rem
342                 transform: rotate(45deg)
343                 width: .8rem
344                 z-index: -1
345
346         &.show
347                 display: block
348
349         /* Remove margin from the first and last items. */
350         > li
351                 align-items:center
352                 display: flex
353                 +margin(1, y)
354
355                 &:first-child
356                         margin-top: 0
357                 &:last-child
358                         margin-bottom: 0
359
360         /* Usually added to the <a> element. */
361         .dropdown-item
362                 border-radius: var(--border-radius)
363                 display: flex
364                 flex: 1
365                 +padding(3, left)
366                 +padding(4, right)
367                 +padding(2, y)
368                 transition: background-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out
369                 text-decoration: none
370                 white-space: nowrap
371
372                 &:hover
373                         background-color: var(--background-primary-subtle)
374                         color: var(--primary)
375
376                         .dropdown-item-icon, p
377                                 color: var(--primary)
378
379         p
380                 transition: color var(--transition-speed) ease-in-out
381
382 .dropdown-divider
383         background-color: var(--background-color)
384         border-radius: 999em
385         height: var(--border-width)
386
387 .dropdown-item-icon
388         font-size: var(--font-size-large)
389         transition: color var(--transition-speed) ease-in-out
390
391 .dropdown-toggle
392         i
393                 pointer-events: none
394
395 /* Tabs navigation. */
396 .tabs
397         clear: both
398
399         .nav-tabs
400                 font-size: initial
401                 justify-content: center
402                 +margin(2, bottom)