/*! | |
* Licensed to the Apache Software Foundation (ASF) under one or more | |
* contributor license agreements. See the NOTICE file distributed with | |
* this work for additional information regarding copyright ownership. | |
* The ASF licenses this file to You under the Apache License, Version 2.0 | |
* (the "License"); you may not use this file except in compliance with | |
* the License. You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, | |
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
* See the License for the specific language governing permissions and | |
* limitations under the License. | |
*/ | |
@import "media"; | |
.navigation-bar-mobile { | |
display: none; | |
.arrow-icon { | |
display: flex; | |
align-items: baseline; | |
margin-left: 10px; | |
} | |
} | |
.nav-tabs { | |
border-bottom: none; | |
} | |
.navigation-bar-desktop { | |
display: flex; | |
height: 96px; | |
width: 100%; | |
align-items: center; | |
margin-bottom: 30px; | |
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); | |
background-color: $color-white; | |
z-index: 10000; // just to make sure that navbar always on top of other elements | |
#iconsBar { | |
display: flex; | |
} | |
a { | |
@extend .component-text; | |
font-weight: 500; | |
color: $color-dark-gray; | |
letter-spacing: 0.2px; | |
line-height: 1.63; | |
margin-right: 37px; | |
text-decoration: none; | |
cursor: pointer; | |
@media(max-width: 1273px){ | |
font-size: 14px; | |
margin-right: 18px; | |
} | |
} | |
.navbar-logo { | |
margin-left: 58px; | |
margin-bottom: 4px; | |
img { | |
width: 88px; | |
} | |
} | |
.navbar-bar-left { | |
display: flex; | |
justify-content: space-between; | |
width: 100%; | |
} | |
.navbar-links { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
z-index: 10000; | |
:last-child { | |
margin-right: 0; | |
} | |
.navbar-link { | |
display: inline-block; | |
position: relative; | |
margin-bottom: 2px; | |
} | |
.navbar-link::before { | |
transition: 0.3; | |
content: ""; | |
position: absolute; | |
background-color: $color-sun; | |
height: 0%; | |
width: 100%; | |
bottom: 0px; | |
border-radius: 5px; | |
} | |
.navbar-link:hover::before { | |
height: 2px; | |
} | |
.navbar-dropdown-documentation { | |
list-style-type: none; | |
ul { | |
width: 209px; | |
left: -25%; | |
text-align: center; | |
border: none; | |
box-shadow: none; | |
padding-top: 34px; | |
padding-bottom: 0; | |
border-radius: 0; | |
li { | |
height: 36px; | |
} | |
a { | |
@extend .component-text; | |
line-height: 1.63; | |
letter-spacing: 0.2px; | |
@media(max-width: 1273px){ | |
font-size: 14px; | |
margin-right: 5px; | |
} | |
} | |
} | |
} | |
} | |
.navbar-dropdown-apache { | |
margin-right: 90px; | |
list-style-type: none; | |
.dropdown-toggle { | |
margin: 0; | |
} | |
ul { | |
width: 209px; | |
left: 70%; | |
transform: translateX(-50%); | |
text-align: center; | |
border: none; | |
box-shadow: none; | |
padding-top: 35px; | |
padding-bottom: 0; | |
border-radius: 0; | |
li { | |
height: 36px; | |
} | |
a { | |
@extend .component-text; | |
margin-right: 0 !important; | |
} | |
} | |
.arrow-icon { | |
position: absolute; | |
top: 3px; | |
right: -30px; | |
} | |
} | |
.navbar-dropdown-apache:hover { | |
.arrow-icon { | |
opacity: 0.84; | |
} | |
} | |
.dropdown-menu{ | |
@media(max-width: 1273px){ | |
width: 132px !important; | |
left: -14% !important; | |
} | |
} | |
.navbar-dropdown { | |
.dropdown-menu > li > a { | |
&:hover, | |
&:focus { | |
text-decoration: none; | |
color: $color-dropdown-link-hover-text; | |
background-color: $color-dropdown-link-hover-bg; | |
} | |
} | |
} | |
.dropdown:hover .dropdown-menu { | |
display: block; | |
margin-top: 0; | |
} | |
} | |
@media (max-width: $tablet) { | |
.navigation-bar-desktop { | |
display: none; | |
} | |
.navigation-bar-mobile { | |
display: block; | |
} | |
.page-nav { | |
margin-top: 30px; | |
} | |
} |