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