website/www/site/assets/scss/_navbar-desktop.scss

/*!
 *  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;
   // TODO - revert margin-bottom to 30px after summit is over when removing banner
   margin-bottom: 0;
   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;
   }
 }