ux(buttons): began work on buttons consolidation and cleanup / refactor

.bra.toml

@@ -3,7 +3,7 @@ init_cmds = [
   ["go", "build", "-o", "./bin/grafana-server"],
 	["./bin/grafana-server"]
 ]
-watch_all = false
+watch_all = true
 watch_dirs = [
 	"$WORKDIR/pkg",
 	"$WORKDIR/public/views",

public/less/bootstrap/bootstrap.less

@@ -19,13 +19,7 @@
 // Components: common
 @import "close.less";
 
-// Components: Buttons & Alerts
-@import "buttons.less";
-@import "button-groups.less";
-
-// Components: Nav
 @import "navs.less";
-
 @import "labels-badges.less";
 
 // Utility classes

public/less/bootstrap/button-groups.less

@@ -1,229 +0,0 @@
-//
-// Button groups
-// --------------------------------------------------
-
-
-// Make the div behave like a button
-.btn-group {
-  position: relative;
-  display: inline-block;
-  .ie7-inline-block();
-  font-size: 0; // remove as part 1 of font-size inline-block hack
-  vertical-align: middle; // match .btn alignment given font-size hack above
-  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
-  .ie7-restore-left-whitespace();
-}
-
-// Space out series of button groups
-.btn-group + .btn-group {
-  margin-left: 5px;
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
-  font-size: 0; // Hack to remove whitespace that results from using inline-block
-  margin-top: @baseLineHeight / 2;
-  margin-bottom: @baseLineHeight / 2;
-  > .btn + .btn,
-  > .btn-group + .btn,
-  > .btn + .btn-group {
-    margin-left: 5px;
-  }
-}
-
-// Float them, remove border radius, then re-add to first and last elements
-.btn-group > .btn {
-  position: relative;
-  .border-radius(0);
-}
-.btn-group > .btn + .btn {
-  margin-left: -1px;
-}
-.btn-group > .btn,
-.btn-group > .dropdown-menu,
-.btn-group > .popover {
-  font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
-}
-
-// Reset fonts for other sizes
-.btn-group > .btn-mini {
-  font-size: @fontSizeMini;
-}
-.btn-group > .btn-small {
-  font-size: @fontSizeSmall;
-}
-.btn-group > .btn-large {
-  font-size: @fontSizeLarge;
-}
-
-// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
-.btn-group > .btn:first-child {
-  margin-left: 0;
-  .border-top-left-radius(@baseBorderRadius);
-  .border-bottom-left-radius(@baseBorderRadius);
-}
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
-.btn-group > .btn:last-child,
-.btn-group > .dropdown-toggle {
-  .border-top-right-radius(@baseBorderRadius);
-  .border-bottom-right-radius(@baseBorderRadius);
-}
-// Reset corners for large buttons
-.btn-group > .btn.large:first-child {
-  margin-left: 0;
-  .border-top-left-radius(@borderRadiusLarge);
-  .border-bottom-left-radius(@borderRadiusLarge);
-}
-.btn-group > .btn.large:last-child,
-.btn-group > .large.dropdown-toggle {
-  .border-top-right-radius(@borderRadiusLarge);
-  .border-bottom-right-radius(@borderRadiusLarge);
-}
-
-// On hover/focus/active, bring the proper btn to front
-.btn-group > .btn:hover,
-.btn-group > .btn:focus,
-.btn-group > .btn:active,
-.btn-group > .btn.active {
-  z-index: 2;
-}
-
-// On active and open, don't show outline
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
-
-
-// Split button dropdowns
-// ----------------------
-
-// Give the line between buttons some depth
-.btn-group > .btn + .dropdown-toggle {
-  padding-left: 8px;
-  padding-right: 8px;
-  .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-  *padding-top: 5px;
-  *padding-bottom: 5px;
-}
-.btn-group > .btn-mini + .dropdown-toggle {
-  padding-left: 5px;
-  padding-right: 5px;
-  *padding-top: 2px;
-  *padding-bottom: 2px;
-}
-.btn-group > .btn-small + .dropdown-toggle {
-  *padding-top: 5px;
-  *padding-bottom: 4px;
-}
-.btn-group > .btn-large + .dropdown-toggle {
-  padding-left: 12px;
-  padding-right: 12px;
-  *padding-top: 7px;
-  *padding-bottom: 7px;
-}
-
-.btn-group.open {
-
-  // The clickable button for toggling the menu
-  // Remove the gradient and set the same inset shadow as the :active state
-  .dropdown-toggle {
-    background-image: none;
-    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
-  }
-
-  // Keep the hover's background when dropdown is open
-  .btn.dropdown-toggle {
-    background-color: @btnBackgroundHighlight;
-  }
-  .btn-primary.dropdown-toggle {
-    background-color: @btnPrimaryBackgroundHighlight;
-  }
-  .btn-warning.dropdown-toggle {
-    background-color: @btnWarningBackgroundHighlight;
-  }
-  .btn-danger.dropdown-toggle {
-    background-color: @btnDangerBackgroundHighlight;
-  }
-  .btn-success.dropdown-toggle {
-    background-color: @btnSuccessBackgroundHighlight;
-  }
-  .btn-info.dropdown-toggle {
-    background-color: @btnInfoBackgroundHighlight;
-  }
-  .btn-inverse.dropdown-toggle {
-    background-color: @btnInverseBackgroundHighlight;
-  }
-}
-
-
-// Reposition the caret
-.btn .caret {
-  margin-top: 8px;
-  margin-left: 0;
-}
-// Carets in other button sizes
-.btn-large .caret {
-  margin-top: 6px;
-}
-.btn-large .caret {
-  border-left-width:  5px;
-  border-right-width: 5px;
-  border-top-width:   5px;
-}
-.btn-mini .caret,
-.btn-small .caret {
-  margin-top: 8px;
-}
-// Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
-}
-
-
-
-// Account for other colors
-.btn-primary,
-.btn-warning,
-.btn-danger,
-.btn-info,
-.btn-success,
-.btn-inverse {
-  .caret {
-    border-top-color: @white;
-    border-bottom-color: @white;
-  }
-}
-
-
-
-// Vertical button groups
-// ----------------------
-
-.btn-group-vertical {
-  display: inline-block; // makes buttons only take up the width they need
-  .ie7-inline-block();
-}
-.btn-group-vertical > .btn {
-  display: block;
-  float: none;
-  max-width: 100%;
-  .border-radius(0);
-}
-.btn-group-vertical > .btn + .btn {
-  margin-left: 0;
-  margin-top: -1px;
-}
-.btn-group-vertical > .btn:first-child {
-  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
-}
-.btn-group-vertical > .btn:last-child {
-  .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
-}
-.btn-group-vertical > .btn-large:first-child {
-  .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
-}
-.btn-group-vertical > .btn-large:last-child {
-  .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
-}

public/less/bootstrap/forms.less

@@ -1,243 +1 @@
-//
-// Forms
-// --------------------------------------------------
-
-
-// GENERAL STYLES
-// --------------
-
-// Make all forms have space below them
-form {
-  margin: 0 0 @baseLineHeight;
-}
-
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-// Groups of fields with labels on top (legends)
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize * 1.5;
-  line-height: @baseLineHeight * 2;
-  color: @grayDark;
-  border: 0;
-  border-bottom: 1px solid #e5e5e5;
-
-  // Small
-  small {
-    font-size: @baseLineHeight * .75;
-    color: @grayLight;
-  }
-}
-
-// Set font for forms
-label,
-input,
-button,
-select,
-textarea {
-  #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
-}
-input,
-button,
-select,
-textarea {
-  font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
-}
-
-// Identify controls by their labels
-label {
-  display: block;
-  margin-bottom: 5px;
-}
-
-// Form controls
-// -------------------------
-
-// Shared size and type resets
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-.uneditable-input {
-  display: inline-block;
-  height: @baseLineHeight;
-  padding: 4px 6px;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-  color: @inputText;
-  vertical-align: middle;
-}
-
-// Reset appearance properties for textual inputs and textarea
-// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
-input,
-textarea,
-.uneditable-input {
-  width: 206px; // plus 12px padding and 2px border
-}
-// Reset height since textareas have rows
-textarea {
-  height: auto;
-}
-
-// Everything else
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-.uneditable-input {
-  background-color: @inputBackground;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border linear .2s, box-shadow linear .2s");
-
-  // Focus state
-  &:focus {
-    border-color: rgba(82,168,236, .8);
-    outline: 0;
-    outline: thin dotted \9; /* IE6-9 */
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
-}
-
-// Position radios and checkboxes better
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  line-height: normal;
-}
-
-// Reset width of input images, buttons, radios, checkboxes
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto; // Override of generic input selector
-}
-
-// Set the height of select and file controls to match text inputs
-select,
-input[type="file"] {
-  height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
-  line-height: @inputHeight;
-}
-
-// Make select elements obey height by applying a border
-select {
-  width: 220px; // default input width + 10px of padding that doesn't get applied
-  border: 1px solid @inputBorder;
-  background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
-}
-
-// Make multiple select elements height not fixed
-select[multiple],
-select[size] {
-  height: auto;
-}
-
-// Focus for select, file, radio, and checkbox
-select:focus,
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  .tab-focus();
-}
-
-// Placeholder
-// -------------------------
-
-// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
-input,
-textarea {
-  .placeholder();
-}
-
-
-// INPUT SIZES
-// -----------
-
-// General classes for quick sizes
-.input-mini       { width: 60px; }
-.input-small      { width: 90px; }
-.input-medium     { width: 150px; }
-.input-large      { width: 210px; }
-.input-xlarge     { width: 270px; }
-.input-xxlarge    { width: 530px; }
-
-// GRID SIZING FOR INPUTS
-// ----------------------
-
-// Grid sizes
-#grid > .input(@gridColumnWidth, @gridGutterWidth);
-
-// DISABLED STATE
-// --------------
-
-// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-  cursor: not-allowed;
-  background-color: @inputDisabledBackground;
-}
-// Explicitly reset the colors here
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
-  background-color: transparent;
-}
-
-
-// HTML5 invalid states
-// Shares styles with the .control-group.error above
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
-    .box-shadow(@shadow);
-  }
-}
-
-
-
 

public/less/bootstrap/mixins.less

@@ -508,30 +508,6 @@
   border-bottom: 1px solid @bottom;
 }
 
-// Button backgrounds
-// ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
-  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
-  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
-  box-shadow: inset 0 -3px rgba(0,0,0,0.3);
-  .reset-filter();
-
-  // in these cases the gradient won't cover the background, so we override
-  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
-    color: @textColor;
-    background-color: @endColor;
-    *background-color: darken(@endColor, 5%);
-    box-shadow: inset 0 -3px rgba(0,0,0,0.3);
-  }
-
-  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
-  &:active,
-  &.active {
-    background-color: darken(@endColor, 10%) e("\9");
-  }
-}
-
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.

public/less/bootswatch.dark.less

@@ -1,87 +0,0 @@
-// Cyborg 2.3.2
-// Bootswatch
-// -----------------------------------------------------
-
-// TYPOGRAPHY
-// -----------------------------------------------------
-
-
-hr {
-	border-bottom: none;
-}
-
-// NAVBAR
-// -----------------------------------------------------
-
-// NAV
-// -----------------------------------------------------
-
-.nav-tabs {
-
-	border-bottom: none;
-
-	& > li > a {
-		.border-radius(0);
-	}
-
-	li > a:hover,
-	li.active > a,
-	li.active > a:focus,
-	li.active > a:hover {
-	  border-color: transparent;
-	  background-color: transparent;
-		border-bottom: 2px solid @blue;
-		color: @white;
-	}
-
-	li.disabled > a {
-		color: @textColor;
-	}
-
-	.open .dropdown-toggle {
-		background-color: #060606;
-		border-color: transparent;
-	}
-}
-
-// BUTTONS
-// -----------------------------------------------------
-
-.btn {
-	padding: 8px 12px;
-	margin-right: 10px;
-	background-image: none;
-	border: none;
-	.border-radius(0px);
-  text-shadow: 0 1px 0 rgba(0,0,0,.5);
-
-	&.disabled {
-		box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
-	}
-}
-
-.btn-inverse {
-  border: 1px solid #444;
-  box-shadow: none;
-}
-
-.btn-large {
-  padding: 6px 20px;
-}
-
-.btn-small {
-	padding: 2px 10px;
-}
-
-.btn-mini {
-	padding: 2px 6px;
-	margin-right: 0;
-	margin-right: 0;
-}
-
-.btn-group {
-	& > .btn + .dropdown-toggle {
-		.box-shadow(none);
-	}
-}
-

public/less/bootswatch.light.less

@@ -1,359 +0,0 @@
-// Cosmo 2.3.2
-// Bootswatch
-// -----------------------------------------------------
-
-
-// TYPOGRAPHY
-// -----------------------------------------------------
-
-body {
-	font-weight: 300;
-	background: @bodyBackground;
-	//url('../img/light.png') repeat right top;
-}
-
-blockquote {
-
-	padding: 10px 15px;
-	background-color: @grayLighter;
-	border-left-color: @gray;
-
-	&.pull-right {
-		padding: 10px 15px;
-		border-right-color: @gray;
-	}
-
-	small {
-		color: @gray;
-	}
-}
-
-.muted {
-	color: @gray;
-}
-
-.text-warning        { color: @orange; }
-a.text-warning:hover { color: darken(@orange, 10%); }
-
-.text-error          { color: @red; }
-a.text-error:hover   { color: darken(@red, 10%); }
-
-.text-info           { color: @purple; }
-a.text-info:hover    { color: darken(@purple, 10%); }
-
-.text-success        { color: @green; }
-a.text-success:hover { color: darken(@green, 10%); }
-
-// SCAFFOLDING
-// -----------------------------------------------------
-
-// NAVBAR
-// -----------------------------------------------------
-
-.navbar {
-
-	.navbar-inner {
-		background-image: none;
-		.box-shadow(none);
-		.border-radius(0);
-	}
-
-	.brand {
-		padding: 0px 15px;
-
-		&:hover {
-			color: @navbarLinkColorHover;
-		}
-	}
-
-	.nav > .active > a,
-	.nav > .active > a:hover,
-	.nav > .active > a:focus {
-		.box-shadow(none);
-    border-bottom: 1px solid @blue;
-		background-color: @navbarLinkBackgroundHover;
-	}
-
-	.nav li.dropdown.open > .dropdown-toggle,
-	.nav li.dropdown.active > .dropdown-toggle,
-	.nav li.dropdown.open.active > .dropdown-toggle {
-		color: @navbarLinkColorActive;
-
-		&:hover {
-			color: @grayLighter;
-		}
-	}
-
-	.navbar-search .search-query {
-		line-height: normal;
-	}
-}
-
-// NAV
-// -----------------------------------------------------
-
-.nav {
-	.open .dropdown-toggle,
-	& > li.dropdown.open.active > a:hover {
-		color: @blue;
-	}
-}
-
-.nav-tabs {
-
-	& > li > a {
-		.border-radius(0);
-	}
-
-	li > a:hover,
-	li.active > a,
-	li.active > a:focus,
-	li.active > a:hover {
-		border-color: transparent;
-	  background-color: transparent;
-		border-bottom: 2px solid @blue;
-		color: @blue
-	}
-
-	li.disabled > a {
-		color: @textColor;
-	}
-
-	.open .dropdown-toggle {
-		background-color: #060606;
-		border-color: transparent;
-	}
-}
-
-.tabs-below,
-.tabs-left,
-.tabs-right {
-
-	& > .nav-tabs > li > a{
-		.border-radius(0);
-		border: 0px;
-	}
-}
-
-
-// BUTTONS
-// -----------------------------------------------------
-
-.btn {
-	padding: 8px 12px;
-	background-image: none;
-	.box-shadow(none);
-	border: none;
-	.border-radius(3px);
-  text-shadow: 0 1px 0 rgba(0,0,0,.5);
-
-	&.disabled {
-		box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05);
-	}
-}
-
-.btn-large {
-  padding: 14px 23px;
-}
-
-.btn-small {
-	padding: 2px 10px;
-}
-
-.btn-mini {
-	padding: 2px 6px;
-}
-
-.btn-group {
-	& > .btn:first-child,
-	& > .btn:last-child,
-	& > .dropdown-toggle {
-		.border-radius(0);
-	}
-
-	& > .btn + .dropdown-toggle {
-		.box-shadow(none);
-	}
-}
-
-legend, label {
-	color: @textColor;
-	border-bottom: 0px solid #222;
-}
-
-// TABLES
-// -----------------------------------------------------
-
-.table {
-
-	tbody tr.success td {
-		color: @white;
-	}
-
-	tbody tr.error td {
-		color: @white;
-	}
-
-	tbody tr.info td {
-		color: @white;
-	}
-
-	&-bordered {
-		.border-radius(0);
-
-		thead:first-child tr:first-child th:first-child,
-		tbody:first-child tr:first-child td:first-child {
-			.border-radius(0);
-		}
-
-		thead:last-child tr:last-child th:first-child,
-		tbody:last-child tr:last-child td:first-child,
-		tfoot:last-child tr:last-child td:first-child {
-			.border-radius(0);
-		}
-	}
-}
-
-// FORMS
-// -----------------------------------------------------
-
-select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
-input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
-input[type="week"], input[type="number"], input[type="email"], input[type="url"],
-input[type="search"], input[type="tel"], input[type="color"] {
-	color: @grayDarker;
-}
-
-.control-group {
-
-	&.warning {
-
-		.control-label,
-		.help-block,
-		.help-inline {
-			color: @orange;
-		}
-
-		input,
-		select,
-		textarea {
-			border-color: @orange;
-			color: @grayDarker;
-		}
-	}
-
-	&.error {
-
-		.control-label,
-		.help-block,
-		.help-inline {
-			color: @red;
-		}
-
-		input,
-		select,
-		textarea {
-			border-color: @red;
-			color: @grayDarker;
-		}
-	}
-
-	&.success {
-
-		.control-label,
-		.help-block,
-		.help-inline {
-			color: @green;
-		}
-
-		input,
-		select,
-		textarea {
-			border-color: @green;
-			color: @grayDarker;
-		}
-	}
-}
-
-legend {
-	border-bottom: none;
-	color: @grayDarker;
-}
-
-.form-actions {
-	border-top: none;
-	background-color: @grayLighter;
-}
-
-// DROPDOWNS
-// -----------------------------------------------------
-
-
-.label {
-
-	&-success {
-		background-color: @green;
-	}
-
-	&-important {
-		background-color: @red;
-	}
-
-	&-info {
-		background-color: @purple;
-	}
-
-	&-inverse {
-		background-color: @black;
-	}
-}
-
-.badge {
-	border-radius: 0;
-	font-weight: 200;
-}
-
-// MISC
-// -----------------------------------------------------
-
-a:hover {
-	text-decoration: none;
-}
-
-.hero-unit {
-	border: none;
-	.border-radius(0);
-	.box-shadow(none);
-}
-
-.well {
-	border: none;
-	.border-radius(0);
-	.box-shadow(none);
-}
-
-a.thumbnail {
-	background-color: @grayLight;
-
-	&:hover {
-		background-color: @gray;
-		border-color: transparent;
-	}
-}
-
-.progress {
-	background-color: @grayLighter;
-	background-image: none;
-	.border-radius(0);
-}
-
-.popover {
-	.border-radius(0);
-
-	&-title {
-		border-bottom: none;
-		color: @white;
-	}
-
-}
-

public/less/bootstrap/buttons.less → public/less/components/buttons.less

@@ -2,39 +2,28 @@
 // Buttons
 // --------------------------------------------------
 
-
 // Base styles
 // --------------------------------------------------
 
 // Core
 .btn {
   display: inline-block;
-  .ie7-inline-block();
-  padding: 4px 12px;
-  margin-bottom: 0; // For input.btn
+	padding: 8px 12px;
+	margin-right: 10px;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btnBackground, @btnBackgroundHighlight,  @grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: none;
-  *border: 0; // Remove the border to prevent IE7's black border on input:focus
-  border-bottom-color: darken(@btnBorder, 10%);
-  .border-radius(@baseBorderRadius);
-  .ie7-restore-left-whitespace(); // Give IE7 some love
+
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight,  @grayDark, 0 1px 1px rgba(255,255,255,.75));
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 
   // Hover/focus state
   &:hover,
   &:focus {
-    color: @grayDark;
     text-decoration: none;
-    background-position: 0 -15px;
-
-    // transition is only when going to hover/focus, otherwise the background
-    // behind the gradient (there for IE<=9 fallback) gets mismatched
-    .transition(background-position .1s linear);
   }
 
   // Focus state for keyboard and accessibility
@@ -47,7 +36,6 @@
   &:active {
     background-image: none;
     outline: 0;
-    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
   }
 
   // Disabled state
@@ -56,88 +44,28 @@
     cursor: default;
     background-image: none;
     .opacity(65);
-    .box-shadow(none);
   }
-
 }
 
-
-
 // Button Sizes
 // --------------------------------------------------
 
 // Large
 .btn-large {
-  padding: @paddingLarge;
+  padding: 6px 20px;
   font-size: @fontSizeLarge;
-  .border-radius(@borderRadiusLarge);
-}
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
-  margin-top: 4px;
 }
 
-// Small
 .btn-small {
-  padding: @paddingSmall;
+	padding: 2px 10px;
   font-size: @fontSizeSmall;
-  .border-radius(@borderRadiusSmall);
-}
-.btn-small [class^="icon-"],
-.btn-small [class*=" icon-"] {
-  margin-top: 0;
-}
-.btn-mini [class^="icon-"],
-.btn-mini [class*=" icon-"] {
-  margin-top: -1px;
 }
 
-// Mini
 .btn-mini {
-  padding: @paddingMini;
+	padding: 2px 6px;
+	margin-right: 0;
+	margin-right: 0;
   font-size: @fontSizeMini;
-  .border-radius(@borderRadiusSmall);
-}
-
-
-// Block button
-// -------------------------
-
-.btn-block {
-  display: block;
-  width: 100%;
-  padding-left: 0;
-  padding-right: 0;
-  .box-sizing(border-box);
-}
-
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
-
-
-
-// Alternate buttons
-// --------------------------------------------------
-
-// Provide *some* extra contrast for those who can get it
-.btn-primary.active,
-.btn-warning.active,
-.btn-danger.active,
-.btn-success.active,
-.btn-info.active,
-.btn-inverse.active {
-  color: rgba(255,255,255,.75);
 }
 
 // Set the backgrounds
@@ -163,7 +91,9 @@ input[type="button"] {
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
+  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText);
+  box-shadow: none;
+  border: 1px solid @grafanaTargetFuncHightlight;
 }
 
 
@@ -231,4 +161,4 @@ input[type="submit"].btn {
   color: @btnText;
   margin: 0;
   vertical-align: middle;
-}
+}

public/less/components/navbar.less

@@ -100,7 +100,7 @@
 
 .top-nav-menu-btn {
   a {
-     padding: 6px 20px 6px 13px;
+     padding: 7px 20px 6px 13px;
   }
   img {
     width: 30px;

public/less/grafana.dark.less

@@ -1,4 +1,3 @@
 @import "variables.dark.less";
 @import "bootstrap/bootstrap.less";
-@import "bootswatch.dark.less";
 @import "grafana.less";

public/less/grafana.less

@@ -10,6 +10,9 @@
 @import "./utils/validation.less";
 @import "./utils/angular.less";
 
+// MIXINS
+@import "./mixins/buttons.less";
+
 // LAYOUTS
 @import "./layout/page.less";
 
@@ -45,6 +48,7 @@
 @import "./components/dropdown.less";
 @import "./components/color_picker.less";
 @import "./components/tooltip.less";
+@import "./components/buttons.less";
 
 // PAGES
 @import "./pages/login.less";

public/less/grafana.light.less

@@ -1,4 +1,3 @@
 @import "variables.light.less";
 @import "bootstrap/bootstrap.less";
-@import "bootswatch.light.less";
 @import "grafana.less";

public/less/mixins/buttons.less

@@ -0,0 +1,18 @@
+
+// Button backgrounds
+// ------------------
+.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
+
+  box-shadow: inset 0 -4px rgba(0,0,0,0.3);
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
+    color: @textColor;
+    background-image: none;
+    background-color: darken(@endColor, 2%);
+  }
+}
+
+

public/less/variables.dark.less

@@ -129,22 +129,25 @@
 @btnBorder:                         #bbb;
 
 @btnPrimaryBackground:              @blueDark;
-@btnPrimaryBackgroundHighlight:     lighten(@blueDark, 10%);
+@btnPrimaryBackgroundHighlight:     lighten(@blueDark, 5%);
 
-@btnInfoBackground:                 lighten(@purple, 5%);
-@btnInfoBackgroundHighlight:        darken(@purple, 5%);
+@btnInfoBackground:                 lighten(@purple, 3%);
+@btnInfoBackgroundHighlight:        darken(@purple, 3%);
 
-@btnSuccessBackground:              lighten(@green, 5%);
-@btnSuccessBackgroundHighlight:     darken(@green, 5%);
+@btnSuccessBackground:              lighten(@green, 3%);
+@btnSuccessBackgroundHighlight:     darken(@green, 3%);
 
-@btnWarningBackground:              lighten(@orange, 5%);
-@btnWarningBackgroundHighlight:     darken(@orange, 5%);
+@btnWarningBackground:              lighten(@orange, 3%);
+@btnWarningBackgroundHighlight:     darken(@orange, 3%);
 
-@btnDangerBackground:               lighten(@red, 5%);
-@btnDangerBackgroundHighlight:      darken(@red, 5%);
+@btnDangerBackground:               lighten(@red, 3%);
+@btnDangerBackgroundHighlight:      darken(@red, 3%);
 
 @btnInverseBackground:              @grayDark;
-@btnInverseBackgroundHighlight:     lighten(@grayDark, 5%);
+@btnInverseBackgroundHighlight:     lighten(@grayDark, 1%);
+@btnInverseText:                    @textColor;
+@btnInverseBorder:                  #333;
+
 
 @btnText:              				@gray;
 
@@ -242,7 +245,7 @@
 @navbarHeight:                    52px;
 @navbarBackgroundHighlight:       @grayDark;
 @navbarBackground:                @grayDark;
-@navbarBorder:                    1px solid @grayDark;
+@navbarBorder:                    1px solid @bodyBackground;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;

public/less/variables.light.less

@@ -140,23 +140,25 @@
 @btnBackgroundHighlight:            darken(@grayLighter, 15%);
 @btnBorder:                         #bbb;
 
-@btnPrimaryBackground:              lighten(@blue, 5%);
-@btnPrimaryBackgroundHighlight:     darken(@blue, 5%);
+@btnPrimaryBackground:              lighten(@blue, 3%);
+@btnPrimaryBackgroundHighlight:     darken(@blue, 3%);
 
-@btnInfoBackground:                 lighten(@purple, 5%);
-@btnInfoBackgroundHighlight:        darken(@purple, 5%);
+@btnInfoBackground:                 lighten(@purple, 3%);
+@btnInfoBackgroundHighlight:        darken(@purple, 3%);
 
-@btnSuccessBackground:              lighten(@green, 5%);
-@btnSuccessBackgroundHighlight:     darken(@green, 5%);
+@btnSuccessBackground:              lighten(@green, 3%);
+@btnSuccessBackgroundHighlight:     darken(@green, 3%);
 
-@btnWarningBackground:              lighten(@orange, 5%);
-@btnWarningBackgroundHighlight:     darken(@orange, 5%);
+@btnWarningBackground:              lighten(@orange, 3%);
+@btnWarningBackgroundHighlight:     darken(@orange, 3%);
 
-@btnDangerBackground:               lighten(@red, 5%);
-@btnDangerBackgroundHighlight:      darken(@red, 5%);
+@btnDangerBackground:               lighten(@red, 3%);
+@btnDangerBackgroundHighlight:      darken(@red, 3%);
 
-@btnInverseBackground:              @white;
-@btnInverseBackgroundHighlight:     darken(@grayLight, 15%);
+@btnInverseBackground:              @grayLighter;
+@btnInverseBackgroundHighlight:     darken(@grayLighter, 5%);
+@btnInverseText:                    @black;
+@btnInverseBorder:                  @grayLight;
 
 @btnText:              				@grayLighter;