ui-modules/utils/br-core/style/navbar.less (112 lines of code) (raw):
/*
* 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.
*/
@navbar-text-color: @primary-400;
@navbar-text-color-darkened: @primary-500;
@navbar-bg-color: white;
@navbar-default-brand-color: @navbar-text-color;
@navbar-default-brand-hover-color: @navbar-text-color-darkened;
@navbar-default-link-color: @navbar-text-color;
@navbar-default-link-hover-color: @navbar-text-color-darkened;
@navbar-default-link-active-color: @navbar-text-color;
@navbar-default-link-active-bg: fade(@navbar-text-color-darkened,10%);
@navbar-default-border: #D9DEE2; /* based on single-pattern-bg-color */
@nav-link-hover-bg: rgba(0,0,0,0.07); //@gray-lighter;
.navbar-default .navbar-nav.secondary-links {
> li > a {
color: fade(@navbar-text-color-darkened,50%);
&:hover,
&:focus {
color: @navbar-text-color-darkened;
background-color: @navbar-default-link-hover-bg;
}
}
}
/* Navbar Inverse (old) */
@navbar-inverse-bg: @accent-500;
@navbar-inverse-brand-color: white;
.navbar-inverse {
-webkit-font-smoothing: antialiased;
}
@navbar-inverse-link-color : white;
@navbar-inverse-link-hover-bg : rgba(255,255,255,0.07);
@navbar-inverse-link-active-color : white;
@navbar-inverse-link-active-bg : rgba(255,255,255,0.17);
.big-header .navbar {
position: absolute;
width: 100%;
}
.navbar-default {
background: @navbar-bg-color;
border: none;
border-radius: 0;
border-top: 4px solid @accent-500;
border-bottom: 1px solid @card-border-color;
.logo {
display: block;
float: left;
height: 20px;
margin-left: 15px;
margin-right: 10px;
}
.navbar-brand {
span { /* title */
padding-left: 10px;
display: inline-block;
}
img + span, svg + span {
border-left: 1px solid fade(@primary-500,50%);
}
}
}
.big-header {
.navbar-default {
background: none;
padding: 10px 20px;
border-bottom: none;
}
.navbar-brand {
color: white;
&:hover {
color: white;
text-decoration: underline;
}
}
.navbar-nav > li > a {
color: white;
/*padding: 6px 12px;*/
border: 2px solid rgba(0,0,0,0.0);
padding: 8px 10px 9px;
font-weight: 400;
line-height: 1;
margin: 9px;
border-radius: 8px;
&:hover {
background: rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
color: white;
}
}
.navbar-nav > li > a.primary {
color: white;
border: 2px solid white;
&:hover {
}
}
.navbar-nav > .active > a {
color: white;
background: none;
&:hover {
background: rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
color: white;
}
}
.navbar-brand {
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 10px;
height: auto;
}
.navbar-brand {
img + span, svg + span {
border-left: 1px solid fade(white,50%);
}
}
}