From 8493dfc99447dd7f9c2441c1a055a4ff2aef0e80 Mon Sep 17 00:00:00 2001
From: Vladimir Lugovsky <lugovsky.v@gmail.com>
Date: Thu, 24 Dec 2015 15:17:25 +0300
Subject: [PATCH] feat(blurPanel): refactor blurpanel

---
 src/app/pages/alerts/alerts.html              | 122 +++++++++---------
 src/app/pages/buttons/buttons.html            |  45 ++++---
 .../buttons/widgets/progressButtons.html      |   2 +-
 src/app/pages/charts/amCharts/charts.html     |  60 +++++----
 src/app/pages/charts/chartJs/chartJs.html     |  32 ++---
 src/app/pages/charts/chartist/chartist.html   |  12 +-
 src/app/pages/charts/morris/morris.html       |  16 +--
 src/app/pages/dashboard/dashboard.html        |  46 ++++---
 .../dashboardPieChart/dashboardPieChart.html  |   4 +-
 src/app/pages/form/inputs/inputs.html         |  46 +++++--
 src/app/pages/form/layouts/layouts.html       |  37 ++++--
 src/app/pages/grid/grid.html                  |   9 +-
 src/app/pages/icons/icons.html                |  35 +++--
 src/app/pages/mail/mail.html                  |   8 +-
 .../pages/maps/google-maps/google-maps.html   |   4 +-
 src/app/pages/maps/leaflet/leaflet.html       |   4 +-
 .../pages/maps/map-bubbles/map-bubbles.html   |   4 +-
 src/app/pages/maps/map-lines/map-lines.html   |   4 +-
 src/app/pages/modals/modals.html              |  40 +++---
 .../pages/notifications/notifications.html    |   4 +-
 src/app/pages/progressBars/progressBars.html  |  37 ++++--
 src/app/pages/slider/slider.html              |   4 +-
 src/app/pages/tables/tables.html              |  38 ++++--
 src/app/pages/tree/tree.html                  |  10 +-
 src/app/pages/typography/typography.html      |  26 ++--
 src/app/theme/components/widgets/widgets.html |   4 +-
 26 files changed, 383 insertions(+), 270 deletions(-)

diff --git a/src/app/pages/alerts/alerts.html b/src/app/pages/alerts/alerts.html
index f8be032..c07c945 100644
--- a/src/app/pages/alerts/alerts.html
+++ b/src/app/pages/alerts/alerts.html
@@ -1,80 +1,84 @@
 <div class="widgets">
   <div class="row">
 
-    <div class="col-md-6">
-      <blur-panel title="Basic" class-container="with-scroll">
-        <div>
-          <div class="alert bg-success">
-            <strong>Well done!</strong> You successfully read this important alert message.
-          </div>
-          <div class="alert bg-info">
-            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-          </div>
-          <div class="alert bg-warning">
-            <strong>Warning!</strong> Better check yourself, you're not looking too good.
-          </div>
-          <div class="alert bg-danger">
-            <strong>Oh snap!</strong> Change a few things up and try submitting again.
-          </div>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Basic"
+         ba-panel-class="with-scroll">
+      <div>
+        <div class="alert bg-success">
+          <strong>Well done!</strong> You successfully read this important alert message.
         </div>
-      </blur-panel>
+        <div class="alert bg-info">
+          <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+        </div>
+        <div class="alert bg-warning">
+          <strong>Warning!</strong> Better check yourself, you're not looking too good.
+        </div>
+        <div class="alert bg-danger">
+          <strong>Oh snap!</strong> Change a few things up and try submitting again.
+        </div>
+      </div>
     </div>
 
-    <div class="col-md-6">
-      <blur-panel title="Dismissible alerts" class-container="with-scroll">
-        <div>
-          <div class="alert bg-success closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <strong>Well done!</strong> You successfully read this important alert message.
-          </div>
-          <div class="alert bg-info closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-          </div>
-          <div class="alert bg-warning closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <strong>Warning!</strong> Better check yourself, you're not looking too good.
-          </div>
-          <div class="alert bg-danger closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <strong>Oh snap!</strong> Change a few things up and try submitting again.
-          </div>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Dismissible alerts"
+         ba-panel-class="with-scroll">
+      <div>
+        <div class="alert bg-success closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <strong>Well done!</strong> You successfully read this important alert message.
         </div>
-      </blur-panel>
+        <div class="alert bg-info closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+        </div>
+        <div class="alert bg-warning closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <strong>Warning!</strong> Better check yourself, you're not looking too good.
+        </div>
+        <div class="alert bg-danger closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <strong>Oh snap!</strong> Change a few things up and try submitting again.
+        </div>
+      </div>
     </div>
 
   </div>
 
   <div class="row">
 
-    <div class="col-md-6">
-      <blur-panel title="Links in alerts" class-container="with-scroll">
-        <div>
-          <div class="alert bg-success">
-            <strong>Well done!</strong> You successfully read <a href class="alert-link">this important alert message</a>.
-          </div>
-          <div class="alert bg-info">
-            <strong>Heads up!</strong> This <a href class="alert-link">alert needs your attention</a>, but it's not super important.
-          </div>
-          <div class="alert bg-warning">
-            <strong>Warning!</strong> Better check yourself, you're <a href class="alert-link">not looking too good</a>.
-          </div>
-          <div class="alert bg-danger">
-            <strong>Oh snap!</strong> <a href class="alert-link">Change a few things up</a> and try submitting again.
-          </div>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Links in alerts"
+         ba-panel-class="with-scroll">
+      <div>
+        <div class="alert bg-success">
+          <strong>Well done!</strong> You successfully read <a href class="alert-link">this important alert message</a>.
         </div>
-      </blur-panel>
+        <div class="alert bg-info">
+          <strong>Heads up!</strong> This <a href class="alert-link">alert needs your attention</a>, but it's not super important.
+        </div>
+        <div class="alert bg-warning">
+          <strong>Warning!</strong> Better check yourself, you're <a href class="alert-link">not looking too good</a>.
+        </div>
+        <div class="alert bg-danger">
+          <strong>Oh snap!</strong> <a href class="alert-link">Change a few things up</a> and try submitting again.
+        </div>
+      </div>
     </div>
 
-    <div class="col-md-6">
-      <blur-panel title="Composite alerts" class-container="with-scroll">
-        <div>
-          <div class="alert bg-danger">
-            <h5>Unhandled error!</h5>
-            <strong>Oh snap!</strong> Change a few things up and try submitting again.
-            <div class="control-alert">
-              <button type="button" class="btn btn-danger ">Agree</button>
-              <button type="button" class="btn btn-default ">Ignore</button>
-            </div>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Composite alerts"
+         ba-panel-class="with-scroll">
+      <div>
+        <div class="alert bg-danger">
+          <h5>Unhandled error!</h5>
+          <strong>Oh snap!</strong> Change a few things up and try submitting again.
+          <div class="control-alert">
+            <button type="button" class="btn btn-danger ">Agree</button>
+            <button type="button" class="btn btn-default ">Ignore</button>
           </div>
         </div>
-      </blur-panel>
+      </div>
     </div>
 
   </div>
diff --git a/src/app/pages/buttons/buttons.html b/src/app/pages/buttons/buttons.html
index 99137bc..f23f29a 100644
--- a/src/app/pages/buttons/buttons.html
+++ b/src/app/pages/buttons/buttons.html
@@ -1,36 +1,49 @@
 <div class="widgets">
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel class-container="with-scroll" >
-        <div ng-include="'app/pages/buttons/widgets/buttons.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/buttons/widgets/buttons.html'"></div>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Icon Buttons" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Icon Buttons"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/buttons/widgets/iconButtons.html'"></div>
-      </blur-panel>
-      <blur-panel title="Large Buttons" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Large Buttons"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/buttons/widgets/largeButtons.html'"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="Button Dropdowns" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="Button Dropdowns"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/buttons/widgets/dropdowns.html'"></div>
-      </blur-panel>
-      <blur-panel title="Button Groups" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Button Groups"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/buttons/widgets/buttonGroups.html'"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Progress Buttons" class-container="with-scroll">
-        <div ng-include="'app/pages/buttons/widgets/progressButtons.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Progress Buttons"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/buttons/widgets/progressButtons.html'"></div>
     </div>
   </div>
 
diff --git a/src/app/pages/buttons/widgets/progressButtons.html b/src/app/pages/buttons/widgets/progressButtons.html
index f53e95e..88c018a 100644
--- a/src/app/pages/buttons/widgets/progressButtons.html
+++ b/src/app/pages/buttons/widgets/progressButtons.html
@@ -1,4 +1,4 @@
-<div class="progress-buttons-container text-center" ng-controller="buttonsPageCtrl">
+<div class="progress-buttons-container text-center">
   <div class="row">
     <section class="col-md-6 col-lg-3">
       <span class="button-title">fill horizontal</span>
diff --git a/src/app/pages/charts/amCharts/charts.html b/src/app/pages/charts/amCharts/charts.html
index 991a2ee..f0aceed 100644
--- a/src/app/pages/charts/amCharts/charts.html
+++ b/src/app/pages/charts/amCharts/charts.html
@@ -1,46 +1,52 @@
 <div class="widgets">
 
   <div class="row">
-    <div class="col-lg-4 col-md-6">
-      <blur-panel title="Bar Chart" class-container="with-scroll">
-        <div ng-include="'app/pages/charts/amCharts/barChart/barChart.html'"></div>
-      </blur-panel>
+    <div class="col-lg-4 col-md-6"
+         ba-panel
+         ba-panel-title="Bar Chart"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/barChart/barChart.html'"></div>
     </div>
-    <div class="col-lg-4 col-md-6">
-      <blur-panel title="Area Chart" class-container="with-scroll" >
-        <div ng-include="'app/pages/charts/amCharts/areaChart/areaChart.html'"></div>
-      </blur-panel>
+    <div class="col-lg-4 col-md-6"
+         ba-panel
+         ba-panel-title="Area Chart"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/areaChart/areaChart.html'"></div>
     </div>
-    <div class="col-lg-4 col-md-12">
-      <blur-panel title="Line Chart" class-container="with-scroll">
-        <div ng-include="'app/pages/charts/amCharts/lineChart/lineChart.html'"></div>
-      </blur-panel>
+    <div class="col-lg-4 col-md-12"
+         ba-panel
+         ba-panel-title="Line Chart"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/lineChart/lineChart.html'"></div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-md-6">
-      <blur-panel title="Pie Chart" class-container="with-scroll">
-        <div ng-include="'app/pages/charts/amCharts/pieChart/pieChart.html'"></div>
-      </blur-panel>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Pie Chart"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/pieChart/pieChart.html'"></div>
     </div>
-    <div class="col-md-6">
-      <blur-panel title="Funnel Chart" class-container="with-scroll">
-        <div ng-include="'app/pages/charts/amCharts/funnelChart/funnelChart.html'"></div>
-      </blur-panel>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Funnel Chart"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/funnelChart/funnelChart.html'"></div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Combined bullet/column and line graphs with multiple value axes" class-container="with-scroll">
-        <div ng-include="'app/pages/charts/amCharts/combinedChart/combinedChart.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Combined bullet/column and line graphs with multiple value axes"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/charts/amCharts/combinedChart/combinedChart.html'"></div>
     </div>
     <!--<div class="col-md-6">-->
-      <!--<blur-panel title="Gantt chart" class-container="with-scroll">-->
-        <!--<div ng-include="'app/pages/charts/amCharts/ganttChart/ganttChart.html'"></div>-->
-      <!--</blur-panel>-->
+    <!--<div ba-panel ba-panel-title="Gantt chart" ba-panel-class="with-scroll">-->
+    <!--<div ng-include="'app/pages/charts/amCharts/ganttChart/ganttChart.html'"></div>-->
+    <!--</div>-->
     <!--</div>-->
   </div>
 
diff --git a/src/app/pages/charts/chartJs/chartJs.html b/src/app/pages/charts/chartJs/chartJs.html
index 006a818..9a744be 100644
--- a/src/app/pages/charts/chartJs/chartJs.html
+++ b/src/app/pages/charts/chartJs/chartJs.html
@@ -1,64 +1,64 @@
 <div class="row">
   <div class="col-md-4" ng-controller="chartJs1DCtrl">
-    <blur-panel title="Pie" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
       <canvas id="pie" class="chart chart-pie"
               chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
       </canvas>
-    </blur-panel>
+    </div>
   </div>
   <div class="col-md-4" ng-controller="chartJs1DCtrl">
-    <blur-panel title="Doughnut" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
       <canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
               chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
       </canvas>
-    </blur-panel>
+    </div>
   </div>
   <div class="col-md-4" ng-controller="chartJs1DCtrl">
-    <blur-panel title="Polar" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
       <canvas id="polar-area" class="chart chart-polar-area"
               chart-data="data" chart-labels="labels" chart-legend="true" chart-click="changeData">
       </canvas>
-    </blur-panel>
+    </div>
   </div>
 </div>
 
 <div class="row ">
   <div class="col-md-6" ng-controller="chartJsWaveCtrl">
-    <blur-panel title="Animated Radar" class-container="with-scroll col-eq-height">
+    <div ba-panel ba-panel-title="Animated Radar" ba-panel-class="with-scroll col-eq-height">
       <canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
               chart-legend="false"></canvas>
-    </blur-panel>
+    </div>
   </div>
   <div class="col-md-6" ng-controller="chartJsWaveCtrl">
-    <blur-panel title="Animated Bars" class-container="with-scroll col-eq-height">
+    <div ba-panel ba-panel-title="Animated Bars" ba-panel-class="with-scroll col-eq-height">
       <canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
               chart-legend="false"></canvas>
-    </blur-panel>
+    </div>
   </div>
 </div>
 
 
 <div class="row ">
   <div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
-    <blur-panel title="Radar" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
       <canvas id="radar" class="chart chart-radar"
               chart-legend="false" chart-series="series" chart-data="data" chart-labels="labels"
               chart-click="changeData">
       </canvas>
-    </blur-panel>
+    </div>
   </div>
   <div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
-    <blur-panel title="Line" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
       <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
               chart-legend="false" chart-series="series" chart-click="changeData"></canvas>
-    </blur-panel>
+    </div>
   </div>
   <div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
-    <blur-panel title="Bars" class-container="with-scroll ">
+    <div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
       <canvas id="bar" class="chart chart-bar"
               chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
       </canvas>
-    </blur-panel>
+    </div>
   </div>
 </div>
 
diff --git a/src/app/pages/charts/chartist/chartist.html b/src/app/pages/charts/chartist/chartist.html
index fe976a1..c6b6c49 100644
--- a/src/app/pages/charts/chartist/chartist.html
+++ b/src/app/pages/charts/chartist/chartist.html
@@ -1,7 +1,7 @@
 <section ng-controller="chartistCtrl">
   <div class="row">
     <div class="col-md-6 ">
-      <blur-panel title="Lines" class-container="with-scroll ">
+      <div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">
         <h5>Simple line chart</h5>
         <chartist class="ct-chart" chartist-data="simpleLineData" chartist-chart-type="Line"
                   chartist-chart-options="simpleLineOptions"></chartist>
@@ -11,11 +11,11 @@
         <h5>Bi-polar line chart with area only</h5>
         <chartist class="ct-chart" chartist-data="biLineData" chartist-chart-type="Line"
                   chartist-chart-options="biLineOptions"></chartist>
-      </blur-panel>
+      </div>
     </div>
 
     <div class="col-md-6 ">
-      <blur-panel title="Bars" class-container="with-scroll ">
+      <div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
         <h5>Simple bar chart</h5>
         <chartist class="ct-chart" chartist-data="simpleBarData" chartist-chart-type="Bar"
                   chartist-chart-options="simpleBarOptions"></chartist>
@@ -25,13 +25,13 @@
         <h5>Stacked bar chart</h5>
         <chartist class="ct-chart stacked-bar" chartist-data="stackedBarData" chartist-chart-type="Bar"
                   chartist-chart-options="stackedBarOptions"></chartist>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-12">
-      <blur-panel title="Pies & Donuts" class-container="with-scroll ">
+      <div ba-panel ba-panel-title="Pies & Donuts" ba-panel-class="with-scroll ">
         <div class="row">
           <div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
             <chartist class="ct-chart" chartist-data="simplePieData" chartist-chart-type="Pie"
@@ -46,7 +46,7 @@
                       chartist-chart-options="simpleDonutOptions" chartist-responsive-options="donutResponsive"></chartist>
           </div>
         </div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/src/app/pages/charts/morris/morris.html b/src/app/pages/charts/morris/morris.html
index febc831..569d051 100644
--- a/src/app/pages/charts/morris/morris.html
+++ b/src/app/pages/charts/morris/morris.html
@@ -1,7 +1,7 @@
 <section ng-controller="morrisCtrl">
   <div class="row">
     <div class="col-md-12">
-      <blur-panel title="Line Chart" class-container="with-scroll">
+      <div ba-panel ba-panel-title="Line Chart" ba-panel-class="with-scroll">
         <div
             line-chart
             line-data='lineData'
@@ -10,22 +10,22 @@
             line-labels='["Serie A", "Serie B"]'
             line-colors='colors'>
         </div>
-      </blur-panel>
+      </div>
     </div>
   </div>
   <div class="row">
     <div class="col-md-4">
-      <blur-panel title="Donut" class-container="with-scroll">
+      <div ba-panel ba-panel-title="Donut" ba-panel-class="with-scroll">
         <div
             donut-chart
             donut-data='donutData'
             donut-colors='colors'
             donut-formatter='"currency"'>
         </div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-8">
-      <blur-panel title="Bar Chart" class-container="with-scroll ">
+      <div ba-panel ba-panel-title="Bar Chart" ba-panel-class="with-scroll ">
         <div
             bar-chart
             bar-data='barData'
@@ -34,12 +34,12 @@
             bar-labels='["Series A", "Series B"]'
             bar-colors='colors'>
         </div>
-      </blur-panel>
+      </div>
     </div>
   </div>
   <div class="row">
     <div class="col-md-12">
-      <blur-panel title="Area Chart" class-container="with-scroll">
+      <div ba-panel ba-panel-title="Area Chart" ba-panel-class="with-scroll">
         <div
             area-chart
             area-data='areaData'
@@ -48,7 +48,7 @@
             area-labels='["Serie A", "Serie B"]'
             line-colors='colors'>
         </div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index 316a178..9ac8457 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -2,11 +2,15 @@
 
 <div class="row">
   <div class="col-md-7 col-sm-12"
-       ba-panel ba-panel-title="Acquisition Channels" ba-panel-class="medium-panel">
+       ba-panel
+       ba-panel-title="Acquisition Channels"
+       ba-panel-class="medium-panel">
     <traffic-chart></traffic-chart>
   </div>
   <div class="col-md-5 col-sm-12"
-       ba-panel ba-panel-title="Users by Country" ba-panel-class="medium-panel">
+       ba-panel
+       ba-panel-title="Users by Country"
+       ba-panel-class="medium-panel">
     <dashboard-map></dashboard-map>
   </div>
 </div>
@@ -15,39 +19,45 @@
   <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
     <div class="row">
       <div class="col-lg-7 col-md-12 col-sm-7 col-xs-12"
-           ba-panel ba-panel-title="Revenue" ba-panel-class="medium-panel">
+           ba-panel
+           ba-panel-title="Revenue"
+           ba-panel-class="medium-panel">
         <dashboard-line-chart></dashboard-line-chart>
       </div>
       <div class="col-lg-5 col-md-12 col-sm-5 col-xs-12"
-           ba-panel ba-panel-class="popular-app medium-panel">
+           ba-panel
+           ba-panel-class="popular-app medium-panel">
         <popular-app></popular-app>
       </div>
     </div>
   </div>
-  <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
-    <blur-panel title="Feed" class-container="large-panel with-scroll feed-panel">
-      <blur-feed></blur-feed>
-    </blur-panel>
+  <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12"
+       ba-panel
+       ba-panel-title="Feed"
+       ba-panel-class="large-panel with-scroll feed-panel">
+    <blur-feed></blur-feed>
   </div>
 </div>
 
 <div class="row shift-up">
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <blur-panel title="To Do List" class-container="xmedium-panel feed-comply-panel with-scroll">
-      <dashboard-todo></dashboard-todo>
-    </blur-panel>
+  <div class="col-lg-3 col-md-6 col-xs-12"
+       ba-panel
+       ba-panel-title="To Do List"
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll">
+    <dashboard-todo></dashboard-todo>
   </div>
-  <div class="col-lg-5 col-md-6 col-xs-12">
-    <blur-panel title="Calendar" class-container="xmedium-panel feed-comply-panel with-scroll">
-      <dashboard-calendar></dashboard-calendar>
-    </blur-panel>
+  <div class="col-lg-5 col-md-6 col-xs-12"
+       ba-panel
+       ba-panel-title="Calendar"
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll">
+    <dashboard-calendar></dashboard-calendar>
   </div>
 </div>
 
 <!--<div class="row">
   <div class="col-lg-4 col-sm-6 col-xs-12">
-    <blur-panel title="Weather" class-container="medium-panel with-scroll">
+    <div ba-panel ba-panel-title="Weather" ba-panel-class="medium-panel with-scroll">
       <blur-weather forecast="5"></blur-weather>
-    </blur-panel>
+    </div>
   </div>
 </div>-->
diff --git a/src/app/pages/dashboard/dashboardPieChart/dashboardPieChart.html b/src/app/pages/dashboard/dashboardPieChart/dashboardPieChart.html
index abbfe4d..9594317 100644
--- a/src/app/pages/dashboard/dashboardPieChart/dashboardPieChart.html
+++ b/src/app/pages/dashboard/dashboardPieChart/dashboardPieChart.html
@@ -1,6 +1,6 @@
 <div class="row pie-charts">
   <div class="pie-chart-item-container" ng-repeat="chart in charts">
-    <blur-panel>
+    <div ba-panel>
       <div class="pie-chart-item">
         <div class="chart" rel="{{ ::chart.color }}" data-percent="60"> <span class="percent"></span> </div>
         <div class="description">
@@ -9,6 +9,6 @@
         </div>
         <i class="chart-icon i-{{ ::chart.icon }}"></i>
       </div>
-    </blur-panel>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/form/inputs/inputs.html b/src/app/pages/form/inputs/inputs.html
index c3521b7..7d881ac 100644
--- a/src/app/pages/form/inputs/inputs.html
+++ b/src/app/pages/form/inputs/inputs.html
@@ -2,29 +2,47 @@
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Standard Fields" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Standard Fields"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/standardFields.html'"></div>
-      </blur-panel>
-      <blur-panel title="Tags Input" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Tags Input"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/tagsInput/tagsInput.html'"></div>
-      </blur-panel>
-      <blur-panel title="Input Groups" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Input Groups"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/inputGroups.html'"></div>
-      </blur-panel>
-      <blur-panel title="Checkboxes & Radios" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Checkboxes & Radios"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/checkboxesRadios.html'"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="Validation States" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="Validation States"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/validationStates.html'"></div>
-      </blur-panel>
-      <blur-panel title="Selects" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Selects"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/select/select.html'"></div>
-      </blur-panel>
-      <blur-panel title="On/Off Switches" class-container="with-scroll" >
+      </div>
+      <div ba-panel ba-panel-title="On/Off Switches" ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/pages/form/layouts/layouts.html b/src/app/pages/form/layouts/layouts.html
index 072e4fe..8aa8fbf 100644
--- a/src/app/pages/form/layouts/layouts.html
+++ b/src/app/pages/form/layouts/layouts.html
@@ -1,29 +1,42 @@
 <div class="widgets">
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Inline Form" class-container="with-scroll">
-        <div ng-include="'app/pages/form/layouts/widgets/inlineForm.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Inline Form"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/form/layouts/widgets/inlineForm.html'"></div>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Basic Form" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Basic Form"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/layouts/widgets/basicForm.html'"></div>
-      </blur-panel>
-      <blur-panel title="Block Form" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Block Form"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/layouts/widgets/blockForm.html'"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="Horizontal Form" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="Horizontal Form"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/layouts/widgets/horizontalForm.html'"></div>
-      </blur-panel>
-      <blur-panel title="Form Without Labels" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Form Without Labels"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/layouts/widgets/formWithoutLabels.html'"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/pages/grid/grid.html b/src/app/pages/grid/grid.html
index b03e57f..0d2aeb4 100644
--- a/src/app/pages/grid/grid.html
+++ b/src/app/pages/grid/grid.html
@@ -1,10 +1,11 @@
 <div class="widgets">
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Inline Form" class-container="with-scroll">
-        <div ng-include="'app/pages/grid/baseGrid.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Inline Form"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/grid/baseGrid.html'"></div>
     </div>
   </div>
 
diff --git a/src/app/pages/icons/icons.html b/src/app/pages/icons/icons.html
index 1c2729e..2c760b2 100644
--- a/src/app/pages/icons/icons.html
+++ b/src/app/pages/icons/icons.html
@@ -2,23 +2,38 @@
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Kameleon SVG Icons" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Kameleon SVG Icons"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/icons/widgets/kameleon.html"></div>
-      </blur-panel>
-      <blur-panel title="Socicon" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Socicon"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/icons/widgets/socicon.html"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="Icons With Rounded Background" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="Icons With Rounded Background"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/icons/widgets/kameleonRounded.html"></div>
-      </blur-panel>
-      <blur-panel title="ionicons" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="ionicons"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/icons/widgets/ionicons.html"></div>
-      </blur-panel>
-      <blur-panel title="Font Awesome Icons" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Font Awesome Icons"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/icons/widgets/fontAwesomeIcons.html"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
diff --git a/src/app/pages/mail/mail.html b/src/app/pages/mail/mail.html
index 0f52567..2466dde 100644
--- a/src/app/pages/mail/mail.html
+++ b/src/app/pages/mail/mail.html
@@ -1,7 +1,7 @@
 <div class="row">
-  <div class="col-md-12 col-sm-12">
-    <blur-panel class-container="with-scroll">
-      <blur-email></blur-email>
-    </blur-panel>
+  <div class="col-md-12 col-sm-12"
+       ba-panel
+       ba-panel-class="with-scroll">
+    <blur-email></blur-email>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/maps/google-maps/google-maps.html b/src/app/pages/maps/google-maps/google-maps.html
index 810765a..c2507ef 100644
--- a/src/app/pages/maps/google-maps/google-maps.html
+++ b/src/app/pages/maps/google-maps/google-maps.html
@@ -1,3 +1,3 @@
-<blur-panel title="Google Maps" class="viewport100">
+<div ba-panel ba-panel-title="Google Maps" class="viewport100">
   <div id="google-maps"></div>
-</blur-panel>
+</div>
diff --git a/src/app/pages/maps/leaflet/leaflet.html b/src/app/pages/maps/leaflet/leaflet.html
index 91bc62e..4c41a92 100644
--- a/src/app/pages/maps/leaflet/leaflet.html
+++ b/src/app/pages/maps/leaflet/leaflet.html
@@ -1,3 +1,3 @@
-<blur-panel title="Leaflet" class="viewport100">
+<div ba-panel ba-panel-title="Leaflet" class="viewport100">
   <div id="leaflet-map"></div>
-</blur-panel>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/pages/maps/map-bubbles/map-bubbles.html b/src/app/pages/maps/map-bubbles/map-bubbles.html
index 8f349fd..87e1cc2 100644
--- a/src/app/pages/maps/map-bubbles/map-bubbles.html
+++ b/src/app/pages/maps/map-bubbles/map-bubbles.html
@@ -1,3 +1,3 @@
-<blur-panel title="Map with Bubbles" class="viewport100">
+<div ba-panel ba-panel-title="Map with Bubbles" class="viewport100">
   <div id="map-bubbles"></div>
-</blur-panel>
+</div>
diff --git a/src/app/pages/maps/map-lines/map-lines.html b/src/app/pages/maps/map-lines/map-lines.html
index 58438bd..7bce7e7 100644
--- a/src/app/pages/maps/map-lines/map-lines.html
+++ b/src/app/pages/maps/map-lines/map-lines.html
@@ -1,5 +1,5 @@
-<blur-panel title="Map with Bubbles" class="viewport100">
+<div ba-panel ba-panel-title="Map with Bubbles" class="viewport100">
   <div id="map-lines"></div>
-</blur-panel>
+</div>
 
 
diff --git a/src/app/pages/modals/modals.html b/src/app/pages/modals/modals.html
index faac308..ee480e9 100644
--- a/src/app/pages/modals/modals.html
+++ b/src/app/pages/modals/modals.html
@@ -1,30 +1,32 @@
 <div class="widgets">
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Modals" class-container="with-scroll">
-        <div ng-include="'app/pages/modals/modalsPanel.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Modals"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/modals/modalsPanel.html'"></div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-md-6">
-      <blur-panel title="Message Modals" class-container="with-scroll">
-        <div ng-include="'app/pages/modals/message-modals.html'"></div>
-      </blur-panel>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Message Modals"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/modals/message-modals.html'"></div>
     </div>
-    <div class="col-md-6">
-      <blur-panel title="Notifications" class-container="with-scroll" >
-        <div ng-include="'app/pages/modals/notifications/notifications.html'"></div>
-      </blur-panel>
+    <div class="col-md-6"
+         ba-panel
+         ba-panel-title="Notifications"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/modals/notifications/notifications.html'"></div>
     </div>
   </div>
 
 </div>
 
 
-
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
@@ -92,7 +94,8 @@
 </div>
 
 <!-- Success modal -->
-<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog"
+     aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
@@ -108,7 +111,8 @@
 </div>
 
 <!-- Info modal -->
-<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog"
+     aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
@@ -124,7 +128,8 @@
 </div>
 
 <!-- Warning modal -->
-<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog"
+     aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
@@ -140,7 +145,8 @@
 </div>
 
 <!-- Danger modal -->
-<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
+<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog"
+     aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
diff --git a/src/app/pages/notifications/notifications.html b/src/app/pages/notifications/notifications.html
index d0e285c..72982a2 100644
--- a/src/app/pages/notifications/notifications.html
+++ b/src/app/pages/notifications/notifications.html
@@ -1,4 +1,4 @@
-<blur-panel class-container="with-scroll">
+<div ba-panel ba-panel-class="with-scroll">
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <div class="control">
@@ -149,4 +149,4 @@
     </div>
   </div>
 
-</blur-panel>
+</div>
diff --git a/src/app/pages/progressBars/progressBars.html b/src/app/pages/progressBars/progressBars.html
index d7aafe6..594b2a0 100644
--- a/src/app/pages/progressBars/progressBars.html
+++ b/src/app/pages/progressBars/progressBars.html
@@ -2,28 +2,41 @@
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Basic" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Basic"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/progressBars/widgets/basic.html'"></div>
-      </blur-panel>
-      <blur-panel title="Striped" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Striped"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/progressBars/widgets/striped.html'"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="With label" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="With label"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/progressBars/widgets/label.html'"></div>
-      </blur-panel>
-      <blur-panel title="Animated" class-container="with-scroll" >
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Animated"
+          ba-panel-class="with-scroll">
         <div ng-include="'app/pages/progressBars/widgets/animated.html'"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Stacked" class-container="with-scroll">
-        <div ng-include="'app/pages/progressBars/widgets/stacked.html'"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Stacked"
+         ba-panel-class="with-scroll">
+      <div ng-include="'app/pages/progressBars/widgets/stacked.html'"></div>
     </div>
   </div>
 
diff --git a/src/app/pages/slider/slider.html b/src/app/pages/slider/slider.html
index 10fda91..6b4b937 100644
--- a/src/app/pages/slider/slider.html
+++ b/src/app/pages/slider/slider.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-12">
-    <blur-panel title="Ion Range Slider" class-container="with-scroll">
+    <div ba-panel ba-panel-title="Ion Range Slider" ba-panel-class="with-scroll">
       <div>
         <h5>Basic</h5>
         <ion-slider type="single"
@@ -91,6 +91,6 @@
                     disable="true">
         </ion-slider>
       </div>
-    </blur-panel>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/tables/tables.html b/src/app/pages/tables/tables.html
index cf98397..db58c7b 100644
--- a/src/app/pages/tables/tables.html
+++ b/src/app/pages/tables/tables.html
@@ -1,32 +1,44 @@
 <div class="widgets">
 
   <div class="row">
-    <div class="col-md-12">
-      <blur-panel title="Smart Table" class-container="with-scroll">
-        <div include-with-scope="app/pages/tables/widgets/smartTable.html"></div>
-      </blur-panel>
+    <div class="col-md-12"
+         ba-panel
+         ba-panel-title="Smart Table"
+         ba-panel-class="with-scroll">
+      <div include-with-scope="app/pages/tables/widgets/smartTable.html"></div>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel title="Hover Tows and Fix Headers" class-container="with-scroll">
+      <div
+          ba-panel
+          ba-panel-title="Hover Tows and Fix Headers"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/tables/widgets/hoverRows.html"></div>
-      </blur-panel>
-      <blur-panel title="Condensed Table" class-container="with-scroll">
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Condensed Table"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/tables/widgets/condensedTable.html"></div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel title="Striped Rows" class-container="with-scroll" >
+      <div
+          ba-panel
+          ba-panel-title="Striped Rows"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/tables/widgets/stripedRows.html"></div>
-      </blur-panel>
-      <blur-panel title="Bordered Table" class-container="with-scroll" >
+      </div>
+      <div
+          ba-panel
+          ba-panel-title="Bordered Table"
+          ba-panel-class="with-scroll">
         <div include-with-scope="app/pages/tables/widgets/borderedTable.html"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 
 
-
 </div>
\ No newline at end of file
diff --git a/src/app/pages/tree/tree.html b/src/app/pages/tree/tree.html
index 76ceaf8..9e99418 100644
--- a/src/app/pages/tree/tree.html
+++ b/src/app/pages/tree/tree.html
@@ -19,7 +19,7 @@
 
   <div class="row">
     <div class="col-md-6">
-      <blur-panel class-container="with-scroll tree-panel" title="Basic Action">
+      <div ba-panel ba-panel-title="Basic Action" ba-panel-class="with-scroll tree-panel">
         <div class="row" ng-controller="treeCtrl">
           <div class="col-sm-4">
             <div class="control-side text-center">
@@ -55,18 +55,18 @@
             </div>
           </div>
         </div>
-      </blur-panel>
+      </div>
     </div>
     <div class="col-md-6">
-      <blur-panel class-container="with-scroll tree-panel" title="Drag & Drop">
+      <div ba-panel ba-panel-title="Drag & Drop" ba-panel-class="with-scroll tree-panel">
         <div data-ui-tree="treeOptions" data-drag-enabled="true" id="tree-root-drag" ng-controller="treeCtrl">
           <ol data-ui-tree-nodes ng-model="dragData">
             <li data-ng-repeat="node in dragData" data-ui-tree-node ng-include="'nodes_renderer.html'"></li>
           </ol>
         </div>
-      </blur-panel>
+      </div>
     </div>
   </div>
-  </blur-panel>
+  </div>
 
 </div>
\ No newline at end of file
diff --git a/src/app/pages/typography/typography.html b/src/app/pages/typography/typography.html
index 076587b..ff43184 100644
--- a/src/app/pages/typography/typography.html
+++ b/src/app/pages/typography/typography.html
@@ -1,6 +1,6 @@
 <div class="typography-document-samples row-fluid">
   <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
-    <blur-panel class-container="with-scroll heading-widget">
+    <div ba-panel ba-panel-class="with-scroll heading-widget">
       <div class="section-block">
         <h2 class="typography-widget-header">Text Size</h2>
       </div>
@@ -32,11 +32,11 @@
 
         <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
       </div>
-    </blur-panel>
+    </div>
   </div>
 
   <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
-    <blur-panel class-container="with-scroll more-text-widget">
+    <div ba-panel ba-panel-class="with-scroll more-text-widget">
       <div class="section-block">
         <h2 class="typography-widget-header">Some more text</h2>
       </div>
@@ -76,11 +76,11 @@
 
         <p> pellentesque, mi nam.</p>
       </div>
-    </blur-panel>
+    </div>
   </div>
 
   <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
-    <blur-panel class-container="with-scroll lists-widget">
+    <div ba-panel ba-panel-class="with-scroll lists-widget">
       <div class="section-block">
         <h2 class="typography-widget-header">Lists</h2>
       </div>
@@ -122,11 +122,11 @@
           lacinia scelerisque pharetra.
         </div>
       </div>
-    </blur-panel>
+    </div>
   </div>
 
   <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
-    <blur-panel class-container="with-scroll color-widget">
+    <div ba-panel ba-panel-class="with-scroll color-widget">
       <div class="section-block">
         <h2 class="typography-widget-header">Text Color</h2>
       </div>
@@ -160,13 +160,13 @@
 
         <p class="hovered"><a href>Hover link — #9d498c</a></p>
       </div>
-    </blur-panel>
+    </div>
   </div>
 </div>
 
 <div class="row-fluid">
   <div class="col-lg-12 col-sm-12 col-xs-12">
-    <blur-panel class-container="banner-column-panel">
+    <div ba-panel ba-panel-class="banner-column-panel">
       <div class="banner">
         <div class="large-banner-wrapper">
           <img ng-src="{{::( 'app/typography/banner.png' | appImage )}}" alt=""/>
@@ -186,7 +186,8 @@
 
         <div class="row">
           <div class="col-sm-6">
-            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo03.png' | appImage )}}" alt="" title=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo03.png' | appImage )}}" alt="" title=""/>
+            </div>
             <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
                 href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
                 href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
@@ -196,7 +197,8 @@
               arcu nulla.</p>
           </div>
           <div class="col-sm-6">
-            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo01.png' | appImage )}}" alt="" title=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo01.png' | appImage )}}" alt="" title=""/>
+            </div>
             <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
               fermentum
               lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
@@ -240,6 +242,6 @@
         </div>
         <div class="separator"></div>
       </div>
-    </blur-panel>
+    </div>
   </div>
 </div>
diff --git a/src/app/theme/components/widgets/widgets.html b/src/app/theme/components/widgets/widgets.html
index 99efde8..57d1ff3 100644
--- a/src/app/theme/components/widgets/widgets.html
+++ b/src/app/theme/components/widgets/widgets.html
@@ -1,9 +1,9 @@
 <div class="widgets">
   <div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
     <div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
-      <blur-panel title="{{::widget.title}}" ng-repeat="widget in widgetCol" class-container="with-scroll {{widget.panelClass}}">
+      <div ba-panel ba-panel-title="{{::widget.title}}" ng-repeat="widget in widgetCol" ba-panel-class="with-scroll {{widget.panelClass}}">
         <div ng-include="widget.url"></div>
-      </blur-panel>
+      </div>
     </div>
   </div>
 </div>