Merge pull request #2904 from rashidkpc/feature/logo-in-header
New navbar styling
This commit is contained in:
Spencer
commit
85bae8880c
BIN
src/kibana/images/no_border.png
Normal file
BIN
src/kibana/images/no_border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
|
|
@ -1,51 +1,49 @@
|
|||
<div dashboard-app class="app-container dashboard-container">
|
||||
<nav ng-show="!appEmbedded" class="navbar navbar-default navbar-static-top">
|
||||
<navbar>
|
||||
<span class="name" ng-if="dash.id" bindonce bo-bind="dash.title" tooltip="{{dash.title}}"></span>
|
||||
<navbar ng-show="!appEmbedded">
|
||||
<span class="name" ng-if="dash.id" bindonce bo-bind="dash.title" tooltip="{{dash.title}}"></span>
|
||||
|
||||
<form name="queryInput"
|
||||
class="fill inline-form"
|
||||
ng-submit="filterResults()">
|
||||
<form name="queryInput"
|
||||
class="fill inline-form"
|
||||
ng-submit="filterResults()">
|
||||
|
||||
<div class="typeahead" kbn-typeahead="dashboard">
|
||||
<div class="input-group"
|
||||
ng-class="queryInput.$invalid ? 'has-error' : ''">
|
||||
<div class="typeahead" kbn-typeahead="dashboard">
|
||||
<div class="input-group"
|
||||
ng-class="queryInput.$invalid ? 'has-error' : ''">
|
||||
|
||||
<input type="text" input-focus
|
||||
placeholder="Filter..."
|
||||
class="form-control"
|
||||
ng-model="state.query"
|
||||
kbn-typeahead-input
|
||||
validate-query>
|
||||
<button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid">
|
||||
<span class="fa fa-search"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<kbn-typeahead-items></kbn-typeahead-items>
|
||||
<input type="text" input-focus
|
||||
placeholder="Filter..."
|
||||
class="form-control"
|
||||
ng-model="state.query"
|
||||
kbn-typeahead-input
|
||||
validate-query>
|
||||
<button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid">
|
||||
<span class="fa fa-search"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="button-group">
|
||||
<kbn-tooltip text="New Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="newDashboard()"><i class="fa fa-file-new-o"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Save Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('save')"><i class="fa fa-save"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Load Saved Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('load')"><i class="fa fa-folder-open-o"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Share" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('share')"><i class="fa fa-external-link"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Add Visualization" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('pickVis')"><i class="fa fa-plus-circle"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-typeahead-items></kbn-typeahead-items>
|
||||
</div>
|
||||
</navbar>
|
||||
</nav>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="button-group">
|
||||
<kbn-tooltip text="New Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="newDashboard()"><i class="fa fa-file-new-o"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Save Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('save')"><i class="fa fa-save"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Load Saved Dashboard" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('load')"><i class="fa fa-folder-open-o"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Share" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('share')"><i class="fa fa-external-link"></i></button>
|
||||
</kbn-tooltip>
|
||||
<kbn-tooltip text="Add Visualization" placement="bottom" append-to-body="1">
|
||||
<button ng-click="configTemplate.toggle('pickVis')"><i class="fa fa-plus-circle"></i></button>
|
||||
</kbn-tooltip>
|
||||
</div>
|
||||
</navbar>
|
||||
|
||||
<config config-template="configTemplate" config-object="opts"></config>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
<!-- Full navbar -->
|
||||
<div collapse="!showCollapsed" class="navbar-collapse" id="kibana-primary-navbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="logo hidden-xs"></li>
|
||||
<li class="navbar-brand hidden-xs">Kibana</li>
|
||||
<li ng-repeat="app in apps.inOrder | filter:{show: true}" ng-class="{active: activeApp === app}">
|
||||
<a ng-href="#{{app.lastPath}}" bo-text="app.name"></a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -9,24 +9,88 @@
|
|||
.navbar {
|
||||
border-width: 0;
|
||||
|
||||
box-shadow: inset 0 -10px 10px -12px #333;
|
||||
-moz-box-shadow: inset 0 -10px 10px -12px #333;
|
||||
-webkit-box-shadow: inset 0 -10px 10px -12px #333;
|
||||
|
||||
&-default {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-default-bg;
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a {
|
||||
|
||||
@media (max-width: @screen-sm-min) {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
border:@navbar-arrow-size solid @body-bg;
|
||||
border-color:transparent transparent @body-bg transparent;
|
||||
top:(@navbar-height - @navbar-arrow-size*2);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
|
||||
.logo {
|
||||
background-image: url('../images/no_border.png');
|
||||
height: @navbar-height;
|
||||
width: @navbar-height;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
color: lighten(@navbar-inverse-bg, 10%);
|
||||
}
|
||||
|
||||
.navbar-nav > .active > a {
|
||||
|
||||
@media (max-width: @screen-sm-min) {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
border:@navbar-arrow-size solid @navbar-default-bg;
|
||||
border-color:transparent transparent @navbar-default-bg transparent;
|
||||
top:(@navbar-height - @navbar-arrow-size*2);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-brand {
|
||||
padding: 12px 15px 30px;
|
||||
|
||||
font-size: 1.8em;
|
||||
background-color: lighten(@navbar-inverse-bg, 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(@navbar-inverse-bg, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-nav {
|
||||
|
|
|
|||
|
|
@ -355,16 +355,18 @@
|
|||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 35px;
|
||||
@navbar-height: 45px;
|
||||
@navbar-margin-bottom: 0px;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-arrow-size: 7px;
|
||||
|
||||
// Default theme
|
||||
@navbar-default-color: #fff;
|
||||
@navbar-default-bg: #3D636B;
|
||||
@navbar-default-bg: #656A76;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-color: @gray-lighter;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
|
|
@ -388,15 +390,15 @@
|
|||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: #294247;
|
||||
@navbar-inverse-bg: @gray-darker;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: @gray-lighter;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: lighten(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-link-hover-bg: lighten(@navbar-inverse-bg, 20%);
|
||||
@navbar-inverse-link-active-color: #fff;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-link-active-bg: #41454c;
|
||||
@navbar-inverse-link-disabled-color: @gray-light;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue