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

public/less/base/type.less

@@ -240,3 +240,17 @@ a.external-link {
   color: @blue;
   text-decoration: underline;
 }
+
+
+.link {
+  color: @linkColor;
+  cursor: pointer;
+}
+
+.link:hover {
+  color: @linkColorHover;
+}
+
+.pointer {
+  cursor: pointer;
+}

public/less/bootstrap/bootstrap.less

@@ -18,9 +18,7 @@
 @import "grid.less";
 
 // Base CSS
-@import "type.less";
 @import "forms.less";
-@import "tables.less";
 
 // Components: common
 @import "dropdowns.less";
@@ -38,7 +36,6 @@
 // Components: Popovers
 @import "modals.less";
 @import "tooltip.less";
-@import "popovers.less";
 
 // Components: Misc
 @import "labels-badges.less";

public/less/bootstrap/tables.less

@@ -1,244 +0,0 @@
-//
-// Tables
-// --------------------------------------------------
-
-
-// BASE TABLES
-// -----------------
-
-table {
-  max-width: 100%;
-  background-color: @tableBackground;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-// BASELINE STYLES
-// ---------------
-
-.table {
-  width: 100%;
-  margin-bottom: @baseLineHeight;
-  // Cells
-  th,
-  td {
-    padding: 8px;
-    line-height: @baseLineHeight;
-    text-align: left;
-    vertical-align: top;
-    border-top: 1px solid @tableBorder;
-  }
-  th {
-    font-weight: bold;
-  }
-  // Bottom align for column headings
-  thead th {
-    vertical-align: bottom;
-  }
-  // Remove top border from thead by default
-  caption + thead tr:first-child th,
-  caption + thead tr:first-child td,
-  colgroup + thead tr:first-child th,
-  colgroup + thead tr:first-child td,
-  thead:first-child tr:first-child th,
-  thead:first-child tr:first-child td {
-    border-top: 0;
-  }
-  // Account for multiple tbody instances
-  tbody + tbody {
-    border-top: 2px solid @tableBorder;
-  }
-
-  // Nesting
-  .table {
-    background-color: @bodyBackground;
-  }
-}
-
-
-
-// CONDENSED TABLE W/ HALF PADDING
-// -------------------------------
-
-.table-condensed {
-  th,
-  td {
-    padding: 4px 5px;
-  }
-}
-
-
-// BORDERED VERSION
-// ----------------
-
-.table-bordered {
-  border: 1px solid @tableBorder;
-  border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; // IE7 can't round corners anyway
-  border-left: 0;
-  .border-radius(@baseBorderRadius);
-  th,
-  td {
-    border-left: 1px solid @tableBorder;
-  }
-  // Prevent a double border
-  caption + thead tr:first-child th,
-  caption + tbody tr:first-child th,
-  caption + tbody tr:first-child td,
-  colgroup + thead tr:first-child th,
-  colgroup + tbody tr:first-child th,
-  colgroup + tbody tr:first-child td,
-  thead:first-child tr:first-child th,
-  tbody:first-child tr:first-child th,
-  tbody:first-child tr:first-child td {
-    border-top: 0;
-  }
-  // For first th/td in the first row in the first thead or tbody
-  thead:first-child tr:first-child > th:first-child,
-  tbody:first-child tr:first-child > td:first-child,
-  tbody:first-child tr:first-child > th:first-child {
-    .border-top-left-radius(@baseBorderRadius);
-  }
-  // For last th/td in the first row in the first thead or tbody
-  thead:first-child tr:first-child > th:last-child,
-  tbody:first-child tr:first-child > td:last-child,
-  tbody:first-child tr:first-child > th:last-child {
-    .border-top-right-radius(@baseBorderRadius);
-  }
-  // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:first-child,
-  tbody:last-child tr:last-child > td:first-child,
-  tbody:last-child tr:last-child > th:first-child,
-  tfoot:last-child tr:last-child > td:first-child,
-  tfoot:last-child tr:last-child > th:first-child {
-    .border-bottom-left-radius(@baseBorderRadius);
-  }
-  // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:last-child,
-  tbody:last-child tr:last-child > td:last-child,
-  tbody:last-child tr:last-child > th:last-child,
-  tfoot:last-child tr:last-child > td:last-child,
-  tfoot:last-child tr:last-child > th:last-child {
-    .border-bottom-right-radius(@baseBorderRadius);
-  }
-
-  // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
-  tfoot + tbody:last-child tr:last-child td:first-child {
-    .border-bottom-left-radius(0);
-  }
-  tfoot + tbody:last-child tr:last-child td:last-child {
-    .border-bottom-right-radius(0);
-  }
-
-  // Special fixes to round the left border on the first td/th
-  caption + thead tr:first-child th:first-child,
-  caption + tbody tr:first-child td:first-child,
-  colgroup + thead tr:first-child th:first-child,
-  colgroup + tbody tr:first-child td:first-child {
-    .border-top-left-radius(@baseBorderRadius);
-  }
-  caption + thead tr:first-child th:last-child,
-  caption + tbody tr:first-child td:last-child,
-  colgroup + thead tr:first-child th:last-child,
-  colgroup + tbody tr:first-child td:last-child {
-    .border-top-right-radius(@baseBorderRadius);
-  }
-
-}
-
-
-
-
-// ZEBRA-STRIPING
-// --------------
-
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped {
-  tbody {
-    > tr:nth-child(odd) > td,
-    > tr:nth-child(odd) > th {
-      background-color: @tableBackgroundAccent;
-    }
-  }
-}
-
-
-// HOVER EFFECT
-// ------------
-// Placed here since it has to come after the potential zebra striping
-.table-hover {
-  tbody {
-    tr:hover > td,
-    tr:hover > th {
-      background-color: @tableBackgroundHover;
-    }
-  }
-}
-
-
-// TABLE CELL SIZING
-// -----------------
-
-// Reset default grid behavior
-table td[class*="span"],
-table th[class*="span"],
-.row-fluid table td[class*="span"],
-.row-fluid table th[class*="span"] {
-  display: table-cell;
-  float: none; // undo default grid column styles
-  margin-left: 0; // undo default grid column styles
-}
-
-// Change the column widths to account for td/th padding
-.table td,
-.table th {
-  &.span1     { .tableColumns(1); }
-  &.span2     { .tableColumns(2); }
-  &.span3     { .tableColumns(3); }
-  &.span4     { .tableColumns(4); }
-  &.span5     { .tableColumns(5); }
-  &.span6     { .tableColumns(6); }
-  &.span7     { .tableColumns(7); }
-  &.span8     { .tableColumns(8); }
-  &.span9     { .tableColumns(9); }
-  &.span10    { .tableColumns(10); }
-  &.span11    { .tableColumns(11); }
-  &.span12    { .tableColumns(12); }
-}
-
-
-
-// TABLE BACKGROUNDS
-// -----------------
-// Exact selectors below required to override .table-striped
-
-.table tbody tr {
-  &.success > td {
-    background-color: @successBackground;
-  }
-  &.error > td {
-    background-color: @errorBackground;
-  }
-  &.warning > td {
-    background-color: @warningBackground;
-  }
-  &.info > td {
-    background-color: @infoBackground;
-  }
-}
-
-// Hover states for .table-hover
-.table-hover tbody tr {
-  &.success:hover > td {
-    background-color: darken(@successBackground, 5%);
-  }
-  &.error:hover > td {
-    background-color: darken(@errorBackground, 5%);
-  }
-  &.warning:hover > td {
-    background-color: darken(@warningBackground, 5%);
-  }
-  &.info:hover > td {
-    background-color: darken(@infoBackground, 5%);
-  }
-}

public/less/bootstrap/type.less

@@ -1 +0,0 @@
-

public/less/bootswatch.dark.less

@@ -5,14 +5,6 @@
 // TYPOGRAPHY
 // -----------------------------------------------------
 
-html {
-	height: 100%;
-}
-
-body {
-	height: 100%;
-	background: @bodyBackground;
-}
 
 hr {
 	border-bottom: none;
@@ -253,15 +245,6 @@ a:hover {
 	.box-shadow(none);
 }
 
-.popover {
-	.border-radius(0);
-
-	&-title {
-		border-bottom: none;
-		color: @white;
-	}
-
-}
 
 .footer {
 	border-top: 1px solid @grayDark;

public/less/components/dashboard.less

@@ -1,3 +1,71 @@
+
+.grafana-row {
+  margin-bottom: 5px;
+}
+
+.row-tab {
+  .dropdown-menu-right {
+    top: 0;
+    left: 33px;
+  }
+}
+
+.row-tab-button {
+  padding: 0px;
+  cursor: pointer;
+  vertical-align: middle;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  display: inline-block;
+  line-height: 30px;
+  background: @btnSuccessBackground;
+  color: rgba(255,255,255,.90);
+}
+
+.row-button {
+  width: 30px;
+  float: left;
+  cursor: pointer;
+  line-height: 31px;
+  background-color: @blueDark;
+}
+
+.row-text {
+  white-space: nowrap;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.9em;
+  text-align: center;
+  line-height: 31px;
+  height: 31px;
+}
+
+.row-close {
+  padding: 0px;
+  margin: 0px;
+  background: @grafanaPanelBackground;
+  text-align: center;
+}
+
+.row-close-buttons {
+  position: absolute;
+  left: 0;
+}
+
+.row-open {
+  margin-top: 5px;
+  left: -28px;
+  position: absolute;
+  z-index: 100;
+  transition: .10s left;
+  transition-delay: .10s;
+
+  &:hover {
+    left: -12px;
+  }
+}
+
 .panel {
   display: inline-block;
   float: left;
@@ -144,26 +212,6 @@
   }
 }
 
-.panel-ghost{
-  width: 100%;
-  .panel-container {
-    border: none;
-    background: transparent;
-  }
-  .panel-ghost-list {
-    margin: 10px 0 10px 20px;
-  }
-
-  button {
-    text-align: left;
-    min-width: 135px;
-    .fa {
-      position: relative;
-      left: -5px;
-    }
-  }
-}
-
 .panel-time-info {
   font-weight: bold;
   float: right;

public/less/components/popovers.less

@@ -9,16 +9,13 @@
   left: 0;
   z-index: @zindexPopover;
   display: none;
-  max-width: 276px;
+  max-width: 480px;
   padding: 1px;
   text-align: left; // Reset given new insertion method
   background-color: @popoverBackground;
-  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.2);
-  .border-radius(6px);
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
   // Overrides for proper insertion
@@ -38,8 +35,6 @@
   font-weight: normal;
   line-height: 18px;
   background-color: @popoverTitleBackground;
-  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
-  .border-radius(5px 5px 0 0);
 
   &:empty {
     display: none;

public/less/grafana.less

@@ -8,6 +8,7 @@
 
 // UTILS
 @import "./utils/validation.less";
+@import "./utils/angular.less";
 
 // LAYOUTS
 @import "./layout/page.less";
@@ -21,7 +22,7 @@
 @import "./components/tagsinput.less";
 @import "./components/tables_lists.less";
 @import "./components/search.less";
-@import "./components/panel.less";
+@import "./components/dashboard.less";
 @import "./components/tightform.less";
 @import "./components/gf-form.less";
 @import "./components/sidemenu.less";
@@ -36,6 +37,7 @@
 @import "./components/scrollbar.less";
 @import "./components/old_stuff.less";
 @import "./components/navbar.less";
+@import "./components/popovers.less";
 
 // PAGES
 @import "./pages/login.less";

public/less/overrides.less

@@ -1,112 +1,7 @@
 // Backgrounds
 // ---------------------
 
-.grafana-row {
-  margin-bottom: 5px;
-}
 
-.row-tab {
-  .dropdown-menu-right {
-    top: 0;
-    left: 33px;
-  }
-}
-
-.row-tab-button {
-  padding: 0px;
-  cursor: pointer;
-  vertical-align: middle;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  display: inline-block;
-  line-height: 30px;
-  background: @btnSuccessBackground;
-  color: rgba(255,255,255,.90);
-}
-
-.row-button {
-  width: 30px;
-  float: left;
-  cursor: pointer;
-  line-height: 31px;
-  background-color: @blueDark;
-}
-
-.row-text {
-  white-space: nowrap;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.9em;
-  text-align: center;
-  line-height: 31px;
-  height: 31px;
-}
-
-.row-close {
-  padding: 0px;
-  margin: 0px;
-  background: @grafanaPanelBackground;
-  text-align: center;
-}
-
-.row-close-buttons {
-  position: absolute;
-  left: 0;
-}
-
-.row-open {
-  margin-top: 5px;
-  left:-28px;
-  position: absolute;
-  z-index: 100;
-  transition: .10s left;
-  transition-delay: .10s;
-  -webkit-transition-delay: .10s;
-}
-
-.row-open:hover {
-  left:-12px;
-}
-
-.odd {
-  background-color: @tableBackgroundAccent;
-}
-
-.nomargin {
-  margin: 0px;
-}
-
-
-[ng\:cloak], [ng-cloak], .ng-cloak {
-  display: none !important;
-}
-
-.table tbody + tbody {
-  border-top: 0px;
-}
-
-.ui-draggable-dragging {
-  display: block;
-  z-index: 9999;
-}
-
-.link {
-  color: @linkColor;
-  cursor: pointer;
-}
-
-.link:hover {
-  color: @linkColorHover;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.popover {
-  max-width: 480px;
-}
 
 .tiny {
   font-size: 50%;

public/less/utils/angular.less

@@ -0,0 +1,7 @@
+
+
+[ng\:cloak], [ng-cloak], .ng-cloak {
+  display: none !important;
+}
+
+