Skip to content

N
nexpie-grafana-theme
Commit f00e5936 by Torkel Ödegaard
Options

New design work

parent 3da90e09
Showing with 203 additions and 182 deletions
src/app/controllers/sidemenuCtrl.js
...@@ -17,17 +17,16 @@ function (angular, _, $, config) { ...@@ -17,17 +17,16 @@ function (angular, _, $, config) {
$scope.menu = []; $scope.menu = [];
$scope.menu.push({ $scope.menu.push({
text: "Dashbord", text: "Dashbords",
icon: "fa fa-th-large",
href: $scope.getUrl("/"), href: $scope.getUrl("/"),
startsWith: config.appSubUrl + '/dashboard/', startsWith: config.appSubUrl + '/dashboard/',
icon: "fa fa-th-large", });
links: [
{ text: 'Settings', editview: 'settings'}, $scope.menu.push({
{ text: 'Templating', editview: 'templating'}, text: "Data Sources",
{ text: 'Annotations', editview: 'annotations'}, icon: "fa fa-database",
{ text: 'Export', href:""}, href: $scope.getUrl("/account/datasources"),
{ text: 'JSON', href:""},
]
}); });
if ($scope.grafana.user.accountRole === 'Admin') { if ($scope.grafana.user.accountRole === 'Admin') {
...@@ -48,11 +47,13 @@ function (angular, _, $, config) { ...@@ -48,11 +47,13 @@ function (angular, _, $, config) {
$scope.menu.push({ $scope.menu.push({
text: "Profile", href: $scope.getUrl("/profile"), text: "Profile", href: $scope.getUrl("/profile"),
icon: "fa fa-user", icon: "fa fa-user",
requireSignedIn: true, });
links: [ }
{ text: 'Info', href: $scope.getUrl("/profile"), icon: "fa fa-sitemap" },
{ text: 'Password', href:"", icon: "fa fa-lock" }, if ($scope.grafana.user.isSignedIn) {
] $scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"),
icon: "fa fa-sign-out",
}); });
} }
...@@ -80,18 +81,21 @@ function (angular, _, $, config) { ...@@ -80,18 +81,21 @@ function (angular, _, $, config) {
$scope.updateState = function() { $scope.updateState = function() {
var currentPath = config.appSubUrl + $location.path(); var currentPath = config.appSubUrl + $location.path();
var search = $location.search(); var search = $location.search();
var activeIndex;
_.each($scope.menu, function(item) { _.each($scope.menu, function(item, index) {
item.active = false; item.active = false;
if (item.href === currentPath) { if (item.href === currentPath) {
item.active = true; item.active = true;
activeIndex = index;
} }
if (item.startsWith) { if (item.startsWith) {
if (currentPath.indexOf(item.startsWith) === 0) { if (currentPath.indexOf(item.startsWith) === 0) {
item.active = true; item.active = true;
item.href = currentPath; item.href = currentPath;
activeIndex = index;
} }
} }
...@@ -114,6 +118,8 @@ function (angular, _, $, config) { ...@@ -114,6 +118,8 @@ function (angular, _, $, config) {
} }
}); });
}); });
//$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
}; };
$scope.init = function() { $scope.init = function() {
......
src/app/directives/topnav.js
...@@ -24,13 +24,12 @@ function (angular) { ...@@ -24,13 +24,12 @@ function (angular) {
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' + '<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
'<a class="pointer" ng-click="toggle()">' + '<a class="pointer" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img>' + '<img class="logo-icon" src="img/fav32.png"></img>' +
'<span>menu</span>' + '<i class="fa fa-chevron-down"></i>' +
'</a>' + '</a>' +
'</span>' + '</span>' +
'<span class="top-nav-breadcrumb">' + '<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' + '<i class="top-nav-icon" ng-class="icon"></i>' +
'<i class="fa fa-angle-right"></i>' +
'</span>' + '</span>' +
'<span class="top-nav-section" ng-show="section">' + '<span class="top-nav-section" ng-show="section">' +
...@@ -69,13 +68,12 @@ function (angular) { ...@@ -69,13 +68,12 @@ function (angular) {
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' + '<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
'<a class="pointer" ng-click="toggle()">' + '<a class="pointer" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img>' + '<img class="logo-icon" src="img/fav32.png"></img>' +
'<span>menu</span>' + '<i class="fa fa-angle-right"></i>' +
'</a>' + '</a>' +
'</span>' + '</span>' +
'<span class="top-nav-breadcrumb">' + '<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' + '<i class="top-nav-icon" ng-class="icon"></i>' +
'<i class="fa fa-angle-right"></i>' +
'</span>' + '</span>' +
'<span class="top-nav-section" ng-show="section">' + '<span class="top-nav-section" ng-show="section">' +
...@@ -85,9 +83,6 @@ function (angular) { ...@@ -85,9 +83,6 @@ function (angular) {
'<a ng-click="titleAction()" class="top-nav-title">' + '<a ng-click="titleAction()" class="top-nav-title">' +
'{{title}}' + '{{title}}' +
'<span class="small" ng-show="titleAction">' +
'<i class="fa fa-angle-down"></i>' +
'</span>' +
'</a>' + '</a>' +
'</div>', '</div>',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
......
src/app/features/annotations/partials/editor.html
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()"> <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="dashboard-editor-header"> <div class="gf-box-header">
<div class="dashboard-editor-title">
<i class="fa fa-bolt"></i>
Annotations
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}"> <div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div> </div>
</div> </div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div> </div>
<div class="dashboard-editor-body"> <div class="gf-box-body">
<div class="editor-row row" ng-if="editor.index == 0"> <div class="editor-row row" ng-if="editor.index == 0">
<div class="span6"> <div class="span6">
<div ng-if="annotations.length === 0"> <div ng-if="annotations.length === 0">
...@@ -71,12 +68,10 @@ ...@@ -71,12 +68,10 @@
<div ng-include src="currentDatasource.editorSrc"> <div ng-include src="currentDatasource.editorSrc">
</div> </div>
<div class="dashboard-editor-footer">
<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
</div>
</div> </div>
</div> </div>
<div class="dashboard-editor-footer">
<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
</div> </div>
src/app/features/profile/partials/profile.html
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
</topnav> </topnav>
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
......
src/app/partials/dashboard_topnav.html
...@@ -18,6 +18,21 @@ ...@@ -18,6 +18,21 @@
show-menu-btn="!grafana.sidemenu"> show-menu-btn="!grafana.sidemenu">
</topnav-dash> </topnav-dash>
<ul class="nav pull-left" style="font-size: 130%">
<li>
<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-share-square-o"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-save"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-cog"></i></a>
</li>
</ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen"> <li ng-show="dashboardViewState.fullscreen">
<a ng-click="exitFullscreen()"> <a ng-click="exitFullscreen()">
...@@ -30,12 +45,12 @@ ...@@ -30,12 +45,12 @@
</grafana-simple-panel> </grafana-simple-panel>
</li> </li>
<li class="dropdown grafana-menu-save"> <!-- <li class="dropdown grafana&#45;menu&#45;save"> -->
<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()"> <!-- <a bs&#45;tooltip="'Save'" data&#45;placement="bottom" class="dropdown&#45;toggle" data&#45;toggle="dropdown" ng&#45;click="saveDashboard()"> -->
<i class='fa fa-save'></i> <!-- <i class='fa fa&#45;save'></i> -->
</a> <!-- </a> -->
</li> <!-- </li> -->
<!-- -->
<li class="grafana-menu-stop-playlist hide"> <li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'> <a class='small' ng-click='stopPlaylist(2)'>
Stop playlist Stop playlist
......
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()"> <div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu"> <ul class="sidemenu">
<li class="sidemenu-logo-container"> <li>
<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png"> <a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle"> <img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-angle-right"></i> <i class="pull-right fa fa-angle-left"></i>
</a> </a>
</li> </li>
<li ng-if="!grafana.user.isSignedIn"> <li ng-if="!grafana.user.isSignedIn">
<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a> <a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
</li> </li>
<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
</li>
<li ng-repeat-end ng-if="item.active">
<ul class="sidemenu-links">
<li ng-repeat="link in item.links">
<a href="{{link.href}}" class="sidemenu-link" ng-class="{active: link.active}"><i class="fa fa-angle-right"></i>{{link.text}}</a>
</li>
</ul>
</li>
<li class="dropdown" ng-if="grafana.user.isSignedIn"> <li ng-repeat="item in menu" ng-class="{'active': item.active}">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}"> <a href="{{item.href}}" class="sidemenu-item">
<span class="gravatar-missing">f</span> <span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35"> <span class="sidemenu-item-text">{{item.text}}</span>
<span class="gravatar-email small">{{grafana.user.login}}</span> </a>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/logout">Logout</a></li>
</ul>
</li> </li>
<!-- <li ng&#45;repeat&#45;end ng&#45;if="item.active"> -->
<!-- <ul class="sidemenu&#45;links"> -->
<!-- <li ng&#45;repeat="link in item.links"> -->
<!-- <a href="{{link.href}}" class="sidemenu&#45;link" ng&#45;class="{active: link.active}"><i class="fa fa&#45;angle&#45;right"></i>{{link.text}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li class="dropdown" ng&#45;if="grafana.user.isSignedIn"> -->
<!-- <a class="sidemenu&#45;user pointer" data&#45;toggle="dropdown" title="{{grafana.user.email}}"> -->
<!-- <span class="gravatar&#45;missing">f</span> -->
<!-- <img ng&#45;src="{{grafana.user.gravatarUrl}}" width="35"> -->
<!-- <span class="gravatar&#45;email small">{{grafana.user.login}}</span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a href="{{appSubUrl}}/?logout">Logout</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul> </ul>
</div> </div>
src/app/partials/templating_editor.html
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header"> <div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="dashboard-editor-title"> <div class="gf-box-header">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}"> <div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div> </div>
</div> </div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div> </div>
<div class="dashboard-editor-body"> <div class="gf-box-body">
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 0">
...@@ -50,104 +50,97 @@ ...@@ -50,104 +50,97 @@
</div> </div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)"> <div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="row"> <div class="editor-option">
<div class="editor-option"> <div class="editor-row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
model="current.refresh"></editor-opt-bool>
</div>
<div ng-show="current.type === 'interval'">
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option">
<label class="small">Variable name</label> <label class="small">Values</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input> <input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div> </div>
<div class="editor-option" ng-show="current.type === 'query'"> </div>
<label class="small">Datasource</label> <div class="editor-row">
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select> <editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.auto">
<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div> </div>
<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
model="current.refresh"></editor-opt-bool>
</div> </div>
</div>
<div ng-show="current.type === 'interval'"> <div ng-show="current.type === 'custom'">
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option">
<label class="small">Values</label> <label class="small">Values seperated by comma</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input> <input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
</div>
<div class="editor-row">
<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.auto">
<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div>
</div> </div>
</div> </div>
</div>
<div ng-show="current.type === 'custom'"> <div ng-show="current.type === 'query'">
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option form-inline">
<label class="small">Values seperated by comma</label> <label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input> <input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
</div> <button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div> </div>
</div> </div>
<div ng-show="current.type === 'query'"> <div class="editor-row" style="margin: 15px 0">
<div class="editor-row"> <div class="editor-option form-inline">
<div class="editor-option form-inline"> <label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
<label class="small">Variable values query</label> <input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input> <button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
</div> </div>
</div>
<div class="editor-row" style="margin: 15px 0"> <div class="editor-row" style="margin: 15px 0">
<div class="editor-option form-inline"> <editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label> <div class="editor-option" ng-show="current.includeAll">
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input> <label class="small">All format</label>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button> <select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</div>
</div> </div>
<div class="editor-option" ng-show="current.includeAll">
<div class="editor-row" style="margin: 15px 0"> <label class="small">All value</label>
<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool> <input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="editor-option"> </div>
<div class="editor-row"> <div class="editor-option">
<div class="editor-option" > <div class="editor-row">
<label class="small">Variable values (showing 20/{{current.options.length}})</label> <div class="editor-option" >
<ul class="grafana-options-list"> <label class="small">Variable values (showing 20/{{current.options.length}})</label>
<li ng-repeat="option in current.options | limitTo: 20"> <ul class="grafana-options-list">
{{option.text}} <li ng-repeat="option in current.options | limitTo: 20">
</li> {{option.text}}
</ul> </li>
</div> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
</div> </div>
</div> </div>
src/css/less/grafana.less
...@@ -55,6 +55,10 @@ ...@@ -55,6 +55,10 @@
padding-left: 0px; padding-left: 0px;
} }
.navbar .nav>li>a {
padding: 19px 15px 8px;
}
.top-nav { .top-nav {
float: left; float: left;
} }
...@@ -62,15 +66,17 @@ ...@@ -62,15 +66,17 @@
.top-nav-menu-btn { .top-nav-menu-btn {
display: block; display: block;
float: left; float: left;
padding: 15px 13px 13px 14px;; padding: 11px 6px 12px 14px;
position: relative; position: relative;
border-right: 2px solid black; border-right: 1px solid @black;
font-weight: bold; font-weight: bold;
font-size: 90%; font-size: 90%;
span { i {
padding-left: 4px; font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
position: relative; position: relative;
top: 2px; top: 4px;
} }
} }
......
src/css/less/sidemenu.less
...@@ -34,35 +34,10 @@ ...@@ -34,35 +34,10 @@
.sidemenu { .sidemenu {
list-style: none; list-style: none;
background: @grafanaPanelBackground;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.sidemenu-links {
margin: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
display: block;
}
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
color: @gray;
i {
padding-right: 15px;
}
&.active {
color: white;
font-weight: bold;
}
}
.sidemenu-user { .sidemenu-user {
padding: 8px 10px 7px 15px; padding: 8px 10px 7px 15px;
display: block; display: block;
...@@ -83,14 +58,44 @@ ...@@ -83,14 +58,44 @@
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.sidemenu-top-btn {
padding: 14px 0px 12px 20px;
background: @grafanaPanelBackground;
display: block;
i {
padding-right: 5px;
font-size: 170%;
color: @gray;
}
border-bottom: 10px solid @bodyBackground;
}
.sidemenu-icon {
border-radius: 50%;
background: black;
box-shadow: 0 0 10px 6px #2E2E2E;
width: 35px;
height: 35px;
display: inline-block;
i {
color: @textColor;
position: relative;
left: 9px;
top: 2px;
font-size: 120%;
}
}
.sidemenu-item { .sidemenu-item {
font-size: 17px; color: @orange;
line-height: 34px;
font-weight: bold;
padding: 14px 10px 14px 20px; padding: 14px 10px 14px 20px;
display: block; display: block;
i {
padding-right: 15px; .sidemenu-item-text {
padding-left: 15px;
} }
border-bottom: 1px solid black;
} }
.sidemenu-logo-container { .sidemenu-logo-container {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment