Chart-adder control - style revision

chart-adder widget reacts to height of preceding chart +
other style improvements

Change-Id: I83344416fa1de61e7760bb848b8457a2efdcf825
Reviewed-on: http://review.couchbase.org/106138
Reviewed-by: Pavel Blagodov <[email protected]>
Tested-by: Pavel Blagodov <[email protected]>

Author: robashcom

priv/public/ui/app/css/cbui-components.css

@@ -2334,3 +2334,35 @@ nav.nav-sidebar-hidden {
   font-size: .8125rem!important;
   text-align: center;
 }
+
+/* chart styles ------------------------------------------------------------- */
+.chart-adder {
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  font-family: FontAwesome;
+  color: #d1d1d1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  cursor: pointer;
+  margin: 1rem;
+}
+.chart-adder:hover {
+  color: #a1a1a1;
+}
+.chart-adder:before {
+  content: "\f055";
+}
+.statistics-small + .chart-adder {
+  width: calc(25% - 2rem);
+  height: 180px;
+}
+.statistics-medium + .chart-adder {
+  width: calc(50% - 2rem);
+  height: 240px;
+}
+.statistics-large + .chart-adder {
+  width: calc(25% - 2rem);
+  height: 180px;
+}

priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html

@@ -95,9 +95,8 @@
           class="panel"
           rbac="rbac"
           config="config"></div>
-        <div style="width:3rem;height:3rem;text-align:center;line-height:3rem;border:1px solid #000;cursor:pointer;"
+        <div class="chart-adder"
              ng-click="statisticsNewCtl.openChartBuilderDialog(group)">
-          +
         </div>
       </div>
     </div>