IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(less): less cleanup of unused styles, restructuring and consolidating

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-14 20:44:41 +01:00
parent f888716d81
commit 50c79df70f
16 changed files with 155 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/app/core/components/navbar/navbar.html
View File

@ -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 ng-if="ctrl.title">
<nav-button title="{{ctrl.title}}" title-url="{{ctrl.titleUrl}}" icon="{{ctrl.icon}}">
</nav-button>
</div>
<div ng-transclude></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>
</div>

2
public/app/features/panel/partials/soloPanel.html
View File

@ -1,4 +1,4 @@
<div class="container-fluid main">
<div class="main">
<div class="row-fluid">
<div class="span12">
<div class="panel nospace" ng-if="panel" style="width: 100%">

4
public/app/partials/dashboard.html
View File

@ -16,14 +16,14 @@
<div class="row-control-inner">
<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
<div class="row-close-buttons">
<span class="row-button bgPrimary" ng-click="toggleRow(row)">
<span class="row-button" ng-click="toggleRow(row)">
<i bs-tooltip="'Expand row'" data-placement="right" class="fa fa-caret-left pointer" ></i>
</span>
</div>
<div class="row-text pointer" ng-click="toggleRow(row)" ng-bind="row.title | interpolateTemplateVars:this"></div>
</div>
<div class="row-open" ng-show="!row.collapse">
<div class='row-tab bgSuccess dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</span>

8
public/less/base/base.less Normal file
View File

@ -0,0 +1,8 @@
html {
height: 100%;
}
body {
height: 100%;
background: @bodyBackground;
}

7
public/less/bootstrap/code.less → public/less/base/code.less
View File

@ -10,6 +10,7 @@ pre {
#font > #family > .monospace;
font-size: @baseFontSize - 2;
color: @grayDark;
background-color: @codeTagBackground;
.border-radius(3px);
}
@ -34,7 +35,6 @@ pre {
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
.border-radius(@baseBorderRadius);
@ -54,8 +54,3 @@ pre {
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

3
public/less/bootstrap/bootstrap.less vendored
View File

@ -16,7 +16,6 @@
// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";
// Base CSS
@import "type.less";
@ -35,7 +34,6 @@
// Components: Nav
@import "navs.less";
@import "navbar.less";
// Components: Popovers
@import "modals.less";
@ -43,7 +41,6 @@
@import "popovers.less";
// Components: Misc
@import "media.less";
@import "labels-badges.less";
// Utility classes

16
public/less/bootstrap/layouts.less
View File

@ -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();
}

55
public/less/bootstrap/media.less
View File

@ -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;
}

205
public/less/bootstrap/navbar.less
View File

@ -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);
}
}

55
public/less/bootswatch.dark.less
View File

@ -21,61 +21,6 @@ hr {
// NAVBAR
// -----------------------------------------------------
.navbar {
.navbar-inner {
.border-radius(0);
.box-shadow(none);
}
.brand {
padding: 0px 15px;
color: @navbarBrandColor;
font-weight: normal;
text-shadow: none;
}
.nav > li > a {
padding: 15px 15px 14px;
border-bottom: 1px solid transparent;
}
.nav > li > a:hover,
.nav > .active > a,
.nav > .active > a:hover {
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
.box-shadow(none);
}
.navbar-text {
margin-bottom: 1px;
padding: 15px 15px 14px;
line-height: inherit;
}
.divider-vertical {
margin: 0;
border-left: 1px solid @grayDark;
border-right-width: 0;
}
.search-query,
.search-query:focus,
.search-query.focused {
.border-radius(1px);
background-color: @grayDark;
line-height: normal;
color: @grayLight;
text-shadow: none;
.placeholder(@gray);
}
}
// NAV
// -----------------------------------------------------

57
public/less/components/navbar.less
View File

@ -1,19 +1,68 @@
.navbar {
overflow: visible;
position: relative;
z-index: 110;
margin-bottom: 0;
}
.navbar .navbar-inner {
padding-left: 0px;
.navbar-inner {
min-height: @navbarHeight;
padding-right: 20px;
background-color: @navbarBackground;
border-bottom: @navbarBorder;
.clearfix();
}
.navbar .nav>li>a {
.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;
padding: 17px 13px 13px;
color: @navbarLinkColor;
text-decoration: none;
.fa { font-size: 115%; }
}
// 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;
}
.fa.top-nav-breadcrumb-icon {
margin: 18px 0 6px 5px;
float: left;

20
public/less/components/old_stuff.less Normal file
View File

@ -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;
}

41
public/less/components/scrollbar.less Normal file
View File

@ -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;
}

46
public/less/grafana.less
View File

@ -1,8 +1,10 @@
// BASE
@import "./base/base.less";
@import "./base/type.less";
@import "./base/forms.less";
@import "./base/fonts.less";
@import "./base/code.less";
// UTILS
@import "./utils/validation.less";
@ -31,6 +33,9 @@
@import "./components/filter-controls.less";
@import "./components/filter-list.less";
@import "./components/filter-table.less";
@import "./components/scrollbar.less";
@import "./components/old_stuff.less";
@import "./components/navbar.less";
// PAGES
@import "./pages/login.less";
@ -92,47 +97,6 @@
}
//
// 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;
}
// SPECTRUM CSS overrides

131
public/less/overrides.less
View File

@ -1,134 +1,6 @@
// Containers
// ---------------------
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
// Backgrounds
// ---------------------
.bgNav {
background: @navbarBackground;
}
.bgPrimary {
background: @btnPrimaryBackground;
color: rgba(255,255,255,.90);
}
.bgInfo {
background: @btnInfoBackground;
color: rgba(255,255,255,.90);
}
.bgSuccess {
background: @btnSuccessBackground;
color: rgba(255,255,255,.90);
}
.bgWarning {
background: @btnWarningBackground;
color: rgba(255,255,255,.90);
}
.bgDanger {
background: @btnDangerBackground;
color: rgba(255,255,255,.90);
}
.bgInverse {
background: @btnInverseBackground;
color: rgba(255,255,255,.90);
}
code, pre {
background-color: @codeTagBackground;
}
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;
}
#events {
font-size: 12px;
}
.version {
font-size: 85%;
}
.legend {
color: @black;
}
div.fake-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
.border-radius(@inputBorderRadius @inputBorderRadius @inputBorderRadius @inputBorderRadius);
}
hr.small {
margin: 5px 0px;
}
form input.ng-invalid {
color: @errorText;
}
.editor-title {
margin-right: 10px;
font-size: 1.7em;
font-weight: bold;
text-transform:capitalize;
}
.editor-title small {
opacity: 0.5;
font-size: 0.7em;
font-weight: normal;
}
.bordered {
border: 1px solid @tableBorder;
}
.table-unpadded {
th,
td {
padding: 0px 2px;
}
}
.spy {
position:absolute;
right:0px;
top:0px;
}
.navbar-inner {
border-width: 0 0 0px;
}
.grafana-row {
margin-bottom: 5px;
}
@ -149,6 +21,8 @@ form input.ng-invalid {
text-align: center;
display: inline-block;
line-height: 30px;
background: @btnSuccessBackground;
color: rgba(255,255,255,.90);
}
.row-button {
@ -156,6 +30,7 @@ form input.ng-invalid {
float: left;
cursor: pointer;
line-height: 31px;
background-color: @blueDark;
}
.row-text {

4
public/less/utils/validation.less
View File

@ -1,3 +1,7 @@
input[type=text].ng-dirty.ng-invalid {
box-shadow: inset 0 0px 7px @red;
}
form input.ng-invalid {
color: @errorText;
}