mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
f888716d81
commit
50c79df70f
@ -1,24 +1,22 @@ |
||||
<div class="navbar"> |
||||
<div class="navbar-inner"><div class="container-fluid"> |
||||
|
||||
<div class="top-nav-btn top-nav-menu-btn"> |
||||
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> |
||||
<span class="top-nav-logo-background"> |
||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img> |
||||
</span> |
||||
<i class="icon-gf icon-gf-grafana_wordmark"></i> |
||||
<i class="fa fa-caret-down"></i> |
||||
</a> |
||||
</div> |
||||
|
||||
<div class="navbar-inner"> |
||||
<div class="top-nav-btn top-nav-menu-btn"> |
||||
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()"> |
||||
<span class="top-nav-logo-background"> |
||||
<img class="logo-icon" src="public/img/grafana_icon.svg"></img> |
||||
</span> |
||||
<i class="icon-gf icon-gf-grafana_wordmark"></i> |
||||
<i class="fa fa-caret-down"></i> |
||||
</a> |
||||
</div> |
||||
|
||||
<div ng-if="ctrl.title"> |
||||
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}"> |
||||
</nav-button> |
||||
</div> |
||||
|
||||
<div ng-transclude></div> |
||||
<div ng-if="ctrl.title"> |
||||
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}"> |
||||
</nav-button> |
||||
</div> |
||||
|
||||
<div ng-transclude></div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
@ -0,0 +1,8 @@ |
||||
html { |
||||
height: 100%; |
||||
} |
||||
|
||||
body { |
||||
height: 100%; |
||||
background: @bodyBackground; |
||||
} |
||||
@ -1,16 +0,0 @@ |
||||
// |
||||
// Layouts |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Container (centered, fixed-width layouts) |
||||
.container { |
||||
.container-fixed(); |
||||
} |
||||
|
||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content) |
||||
.container-fluid { |
||||
padding-right: @gridGutterWidth; |
||||
padding-left: @gridGutterWidth; |
||||
.clearfix(); |
||||
} |
||||
@ -1,55 +0,0 @@ |
||||
// Media objects |
||||
// Source: http://stubbornella.org/content/?p=497 |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Common styles |
||||
// ------------------------- |
||||
|
||||
// Clear the floats |
||||
.media, |
||||
.media-body { |
||||
overflow: hidden; |
||||
*overflow: visible; |
||||
zoom: 1; |
||||
} |
||||
|
||||
// Proper spacing between instances of .media |
||||
.media, |
||||
.media .media { |
||||
margin-top: 15px; |
||||
} |
||||
.media:first-child { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
// For images and videos, set to block |
||||
.media-object { |
||||
display: block; |
||||
} |
||||
|
||||
// Reset margins on headings for tighter default spacing |
||||
.media-heading { |
||||
margin: 0 0 5px; |
||||
} |
||||
|
||||
|
||||
// Media image alignment |
||||
// ------------------------- |
||||
|
||||
.media > .pull-left { |
||||
margin-right: 10px; |
||||
} |
||||
.media > .pull-right { |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
|
||||
// Media list variation |
||||
// ------------------------- |
||||
|
||||
// Undo default ul/ol styles |
||||
.media-list { |
||||
margin-left: 0; |
||||
list-style: none; |
||||
} |
||||
@ -1,205 +0,0 @@ |
||||
// |
||||
// Navbars (Redux) |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// COMMON STYLES |
||||
// ------------- |
||||
|
||||
// Base class and wrapper |
||||
.navbar { |
||||
overflow: visible; |
||||
margin-bottom: @baseLineHeight; |
||||
|
||||
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar |
||||
*position: relative; |
||||
*z-index: 2; |
||||
} |
||||
|
||||
// Inner for background effects |
||||
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present |
||||
.navbar-inner { |
||||
min-height: @navbarHeight; |
||||
padding-left: 20px; |
||||
padding-right: 20px; |
||||
background-color: @navbarBackground; |
||||
border: 1px solid @navbarBorder; |
||||
|
||||
// Prevent floats from breaking the navbar |
||||
.clearfix(); |
||||
} |
||||
|
||||
// Set width to auto for default container |
||||
// We then reset it for fixed navbars in the #gridSystem mixin |
||||
.navbar .container { |
||||
width: auto; |
||||
} |
||||
|
||||
// NAVIGATION |
||||
// ---------- |
||||
|
||||
.navbar .nav { |
||||
position: relative; |
||||
left: 0; |
||||
float: left; |
||||
margin: 0 10px 0 0; |
||||
} |
||||
|
||||
.nav { |
||||
display: block; |
||||
} |
||||
|
||||
.navbar .nav.pull-right { |
||||
float: right; // redeclare due to specificity |
||||
margin-right: 0; // remove margin on float right nav |
||||
} |
||||
.navbar .nav > li { |
||||
float: left; |
||||
} |
||||
|
||||
// Links |
||||
.navbar .nav > li > a { |
||||
float: none; |
||||
// Vertically center the text given @navbarHeight |
||||
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); |
||||
color: @navbarLinkColor; |
||||
text-decoration: none; |
||||
text-shadow: 0 1px 0 @navbarBackgroundHighlight; |
||||
} |
||||
.navbar .nav .dropdown-toggle .caret { |
||||
margin-top: 8px; |
||||
} |
||||
|
||||
// Hover/focus |
||||
.navbar .nav > li > a:focus, |
||||
.navbar .nav > li > a:hover { |
||||
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active |
||||
color: @navbarLinkColorHover; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
// Active nav items |
||||
.navbar .nav > .active > a, |
||||
.navbar .nav > .active > a:hover, |
||||
.navbar .nav > .active > a:focus { |
||||
color: @navbarLinkColorActive; |
||||
text-decoration: none; |
||||
background-color: @navbarLinkBackgroundActive; |
||||
.box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); |
||||
} |
||||
|
||||
// Navbar button for toggling navbar items in responsive layouts |
||||
// These definitions need to come after '.navbar .btn' |
||||
.navbar .btn-navbar { |
||||
display: none; |
||||
float: right; |
||||
padding: 7px 10px; |
||||
margin-left: 5px; |
||||
margin-right: 5px; |
||||
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); |
||||
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); |
||||
} |
||||
.navbar .btn-navbar .icon-bar { |
||||
display: block; |
||||
width: 18px; |
||||
height: 2px; |
||||
background-color: #f5f5f5; |
||||
.border-radius(1px); |
||||
.box-shadow(0 1px 0 rgba(0,0,0,.25)); |
||||
} |
||||
.btn-navbar .icon-bar + .icon-bar { |
||||
margin-top: 3px; |
||||
} |
||||
|
||||
|
||||
|
||||
// Dropdown menus |
||||
// -------------- |
||||
|
||||
// Menu position and menu carets |
||||
.navbar .nav > li > .dropdown-menu { |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
border-left: 7px solid transparent; |
||||
border-right: 7px solid transparent; |
||||
border-bottom: 7px solid #ccc; |
||||
border-bottom-color: @dropdownBorder; |
||||
position: absolute; |
||||
top: -7px; |
||||
left: 9px; |
||||
} |
||||
&:after { |
||||
content: ''; |
||||
display: inline-block; |
||||
border-left: 6px solid transparent; |
||||
border-right: 6px solid transparent; |
||||
border-bottom: 6px solid @dropdownBackground; |
||||
position: absolute; |
||||
top: -6px; |
||||
left: 10px; |
||||
} |
||||
} |
||||
// Menu position and menu caret support for dropups via extra dropup class |
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu { |
||||
&:before { |
||||
border-top: 7px solid #ccc; |
||||
border-top-color: @dropdownBorder; |
||||
border-bottom: 0; |
||||
bottom: -7px; |
||||
top: auto; |
||||
} |
||||
&:after { |
||||
border-top: 6px solid @dropdownBackground; |
||||
border-bottom: 0; |
||||
bottom: -6px; |
||||
top: auto; |
||||
} |
||||
} |
||||
|
||||
// Caret should match text color on hover/focus |
||||
.navbar .nav li.dropdown > a:hover .caret, |
||||
.navbar .nav li.dropdown > a:focus .caret { |
||||
border-top-color: @navbarLinkColorHover; |
||||
border-bottom-color: @navbarLinkColorHover; |
||||
} |
||||
|
||||
// Remove background color from open dropdown |
||||
.navbar .nav li.dropdown.open > .dropdown-toggle, |
||||
.navbar .nav li.dropdown.active > .dropdown-toggle, |
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle { |
||||
background-color: @navbarLinkBackgroundActive; |
||||
color: @navbarLinkColorActive; |
||||
} |
||||
.navbar .nav li.dropdown > .dropdown-toggle .caret { |
||||
border-top-color: @navbarLinkColor; |
||||
border-bottom-color: @navbarLinkColor; |
||||
} |
||||
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, |
||||
.navbar .nav li.dropdown.active > .dropdown-toggle .caret, |
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { |
||||
border-top-color: @navbarLinkColorActive; |
||||
border-bottom-color: @navbarLinkColorActive; |
||||
} |
||||
|
||||
// Right aligned menus need alt position |
||||
.navbar .pull-right > li > .dropdown-menu, |
||||
.navbar .nav > li > .dropdown-menu.pull-right { |
||||
left: auto; |
||||
right: 0; |
||||
&:before { |
||||
left: auto; |
||||
right: 12px; |
||||
} |
||||
&:after { |
||||
left: auto; |
||||
right: 13px; |
||||
} |
||||
.dropdown-menu { |
||||
left: auto; |
||||
right: 100%; |
||||
margin-left: 0; |
||||
margin-right: -1px; |
||||
.border-radius(6px 0 6px 6px); |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
|
||||
div.editor-row { |
||||
vertical-align: top; |
||||
} |
||||
|
||||
div.editor-row div.section { |
||||
margin-right: 20px; |
||||
vertical-align: top; |
||||
display: inline-block; |
||||
} |
||||
|
||||
div.editor-option { |
||||
vertical-align: top; |
||||
display: inline-block; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
div.editor-option label { |
||||
display: block; |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
// |
||||
// Srollbars |
||||
// |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
|
||||
::-webkit-scrollbar:hover { |
||||
height: 8px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:start:decrement, |
||||
::-webkit-scrollbar-button:end:increment { display: none; } |
||||
::-webkit-scrollbar-button:horizontal:decrement { display: none; } |
||||
::-webkit-scrollbar-button:horizontal:increment { display: none; } |
||||
::-webkit-scrollbar-button:vertical:decrement { display: none; } |
||||
::-webkit-scrollbar-button:vertical:increment { display: none; } |
||||
::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } |
||||
::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } |
||||
::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } |
||||
::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } |
||||
::-webkit-scrollbar-track-piece { background-color: transparent; } |
||||
|
||||
::-webkit-scrollbar-thumb:vertical { |
||||
height: 50px; |
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); |
||||
border: 1px solid @scrollbarBorder; |
||||
border-top: 1px solid @scrollbarBorder; |
||||
border-left: 1px solid @scrollbarBorder; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:horizontal { |
||||
width: 50px; |
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); |
||||
border: 1px solid @scrollbarBorder; |
||||
border-top: 1px solid @scrollbarBorder; |
||||
border-left: 1px solid @scrollbarBorder; |
||||
} |
||||
|
||||
@ -1,3 +1,7 @@ |
||||
input[type=text].ng-dirty.ng-invalid { |
||||
box-shadow: inset 0 0px 7px @red; |
||||
} |
||||
|
||||
form input.ng-invalid { |
||||
color: @errorText; |
||||
} |
||||
|
||||
Loading…
Reference in new issue