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

public/app/core/components/navbar/navbar.html

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

public/app/features/panel/partials/soloPanel.html

@@ -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%">

public/app/partials/dashboard.html

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

public/less/base/base.less

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

public/less/bootstrap/code.less → public/less/base/code.less

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

public/less/bootstrap/bootstrap.less

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

public/less/bootstrap/layouts.less

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

public/less/bootstrap/media.less

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

public/less/bootstrap/navbar.less

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

public/less/bootswatch.dark.less

@@ -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
 // -----------------------------------------------------
 

public/less/components/navbar.less

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

public/less/components/old_stuff.less

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

public/less/components/scrollbar.less

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

public/less/grafana.less

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

public/less/overrides.less

@@ -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 {

public/less/utils/validation.less

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