ux(less): more less refactoring and cleanup, consolidating alerts

public/app/features/datasources/edit_ctrl.js

@@ -105,8 +105,6 @@ function (angular, _, config) {
           $scope.updateFrontendSettings().then(function() {
             if (test) {
               $scope.testDatasource();
-            } else {
-              $location.path('datasources');
             }
           });
         });

public/less/base/base.less

@@ -6,3 +6,4 @@ body {
 	height: 100%;
 	background: @bodyBackground;
 }
+

public/less/base/type.less

@@ -21,7 +21,8 @@ p {
 // -------------------------
 
 // Ex: 14px base font * 85% = about 12px
-small   { font-size: 85%; }
+.small, small   { font-size: 85%; }
+.large { font-size: 120%; }
 
 strong  { font-weight: bold; }
 em      { font-style: italic; color: @headingsColor; }

public/less/bootstrap/alerts.less

@@ -1,79 +0,0 @@
-//
-// Alerts
-// --------------------------------------------------
-
-
-// Base styles
-// -------------------------
-
-.alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: @baseLineHeight;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: @warningBackground;
-  border: 1px solid @warningBorder;
-  .border-radius(@baseBorderRadius);
-}
-.alert,
-.alert h4 {
-  // Specified for the h4 to prevent conflicts of changing @headingsColor
-  color: @warningText;
-}
-.alert h4 {
-  margin: 0;
-}
-
-// Adjust close link position
-.alert .close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  line-height: @baseLineHeight;
-}
-
-
-// Alternate styles
-// -------------------------
-
-.alert-success {
-  background-color: @successBackground;
-  border-color: @successBorder;
-  color: @successText;
-}
-.alert-success h4 {
-  color: @successText;
-}
-.alert-danger,
-.alert-error {
-  background-color: @errorBackground;
-  border-color: @errorBorder;
-  color: @errorText;
-}
-.alert-danger h4,
-.alert-error h4 {
-  color: @errorText;
-}
-.alert-info {
-  background-color: @infoBackground;
-  border-color: @infoBorder;
-  color: @infoText;
-}
-.alert-info h4 {
-  color: @infoText;
-}
-
-
-// Block alerts
-// -------------------------
-
-.alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
-}
-.alert-block > p,
-.alert-block > ul {
-  margin-bottom: 0;
-}
-.alert-block p + p {
-  margin-top: 5px;
-}

public/less/bootstrap/bootstrap.less

@@ -28,7 +28,6 @@
 // Components: Buttons & Alerts
 @import "buttons.less";
 @import "button-groups.less";
-@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
 
 // Components: Nav
 @import "navs.less";

public/less/bootswatch.dark.less

@@ -49,11 +49,11 @@ hr {
 
 .btn {
 	padding: 8px 12px;
-	margin-right:10px;
+	margin-right: 10px;
 	background-image: none;
 	border: none;
 	.border-radius(0px);
-	text-shadow: none;
+  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);
@@ -155,24 +155,6 @@ legend, label {
 	}
 }
 
-// ALERTS, LABELS, BADGES
-// -----------------------------------------------------
-
-.alert,
-.alert .alert-heading,
-.alert-success,
-.alert-success .alert-heading,
-.alert-danger,
-.alert-error,
-.alert-danger .alert-heading,
-.alert-error .alert-heading,
-.alert-info,
-.alert-info .alert-heading {
-  color: @white;
-  text-shadow: none;
-  border: none;
-}
-
 .label {
 	color: @white;
 }

public/less/bootswatch.light.less

@@ -140,12 +140,12 @@ a.text-success:hover { color: darken(@green, 10%); }
 // -----------------------------------------------------
 
 .btn {
-	padding: 5px 12px;
+	padding: 8px 12px;
 	background-image: none;
 	.box-shadow(none);
 	border: none;
 	.border-radius(3px);
-	text-shadow: none;
+  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);
@@ -289,17 +289,6 @@ legend {
 // -----------------------------------------------------
 
 
-// ALERTS, LABELS, BADGES
-// -----------------------------------------------------
-
-.alert {
-	text-shadow: none;
-
-	&-heading, h1, h2, h3, h4, h5, h6 {
-		color: @white;
-	}
-}
-
 .label {
 
 	&-success {

public/less/components/alerts.less

@@ -0,0 +1,68 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 8px 35px 13px 14px;
+  margin-bottom: @baseLineHeight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: @warningBackground;
+  position: relative;
+  color: @white;
+  text-shadow: 0 1px 0 rgba(0,0,0,.5);
+  border-radius: 2px;
+}
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background-color: @successBackground;
+}
+
+.alert-danger,
+.alert-error {
+  background-color: @errorBackground;
+}
+.alert-info {
+  background-color: @infoBackground;
+}
+.alert-warning {
+  background-color: @warningBackground;
+}
+
+.page-alert-list {
+  z-index: 8000;
+  min-width: 300px;
+  max-width: 300px;
+  position: fixed;
+  right: 20px;
+  top: 56px;
+}
+
+.alert-close {
+  position: absolute;
+  top: -4px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: @white;
+  border-radius: 50%;
+  border: none;
+  font-size: 1.1rem;
+  color: @grayDarker;
+  .fa {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.alert-title {
+  font-weight: @fontWeightSemi;
+  padding-bottom: 2px;
+}

public/less/components/dashboard.less

@@ -66,6 +66,10 @@
   }
 }
 
+div.flot-text {
+  color: @textColor !important;
+}
+
 .panel {
   display: inline-block;
   float: left;

public/less/grafana.less

@@ -38,6 +38,7 @@
 @import "./components/old_stuff.less";
 @import "./components/navbar.less";
 @import "./components/popovers.less";
+@import "./components/alerts.less";
 
 // PAGES
 @import "./pages/login.less";

public/less/overrides.less

@@ -2,107 +2,6 @@
 // ---------------------
 
 
-
-.tiny {
-  font-size: 50%;
-}
-
-.smaller {
-  font-size: 70%;
-}
-
-.small {
-  font-size: 85%;
-}
-
-.large {
-  font-size: 120%;
-}
-
-.strong {
-  font-weight: bold;
-}
-
-a {
-  cursor: pointer;
-}
-
-.normal {
-  font-weight: normal;
-}
-
-.light {
-  font-weight: 200;
-}
-
-.input-smaller {
-  width: 75px;
-}
-
-.string {color:lighten(@textColor, 5%)}
-.number {color:lighten(@infoText, 5%)}
-.boolean {color:lighten(@warningText, 5%)}
-.key {color:lighten(@errorText, 5%)}
-
-.btn-active {
-  background-color: #E6E6E6;
-  background-image: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
-  outline: 0 none
-}
-
-.remove:hover {
-  background-color: @btnDangerBackgroundHighlight;
-}
-
-.faded {
-  opacity: 0.2;
-}
-
-div.flot-text {
-  color: @textColor !important;
-}
-
-.page-alert-list {
-  z-index:8000;
-  min-width: 300px;
-  max-width: 300px;
-  position: fixed;
-  right: 20px;
-  top: 56px;
-}
-
-.alert {
-  color: @white;
-  padding-bottom: 13px;
-  position: relative;
-}
-
-.alert-close {
-  position: absolute;
-  top: -4px;
-  right: -2px;
-  width: 19px;
-  height: 19px;
-  padding: 0;
-  background: @grayLighter;
-  border-radius: 50%;
-  border: none;
-  font-size: 1.1rem;
-  color: @grayDarker;
-}
-
-.alert-title {
-  font-weight: bold;
-  padding-bottom: 2px;
-}
-
-
-.alert-warning {
-  background-color: @warningBackground;
-  border-color: @warningBorder;
-}
-
 /* ===================================================
  * popover-extra-placements.css v0.1
  * http://twitter.github.com/bootstrap-popover-extra-placements

public/less/variables.dark.less

@@ -76,6 +76,7 @@
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
+@fontWeightSemi:		    600;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
 @headingsFontWeight:    400;    // instead of browser default, bold
@@ -273,20 +274,15 @@
 // -------------------------
 @warningText:             darken(#c09853, 10%);
 @warningBackground:       @orange;
-@warningBorder:           transparent;
 
 @errorText:               #b94a48;
-@errorBackground:         @grayLighter;
-@errorBorder:             darken(spin(@errorBackground, -10), 3%);
+@errorBackground:         @btnDangerBackground;
 
 @successText:             #468847;
-@successBackground:       @grayLighter;
-@successBorder:           darken(spin(@successBackground, -10), 5%);
+@successBackground:       @btnSuccessBackground;
 
 @infoText:                @blueDark;
-@infoBackground:          @grayLighter;
-@infoBorder:              darken(spin(@infoBackground, -10), 7%);
-
+@infoBackground:          @btnInfoBackground;
 
 // Tooltips and popovers
 // -------------------------

public/less/variables.light.less

@@ -85,6 +85,7 @@
 
 @baseFontSize:          14px;
 @baseFontWeight:		    400;
+@fontWeightSemi:		    600;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;