From 659473b931d4cb867a3994c832b2a581f49684e1 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 16 May 2019 19:31:28 +0200
Subject: [PATCH] feat: change styles of dashboard, widgets and charts to
 version 3

---
 src/views/Charts.vue                  |   4 +-
 src/views/Dashboard.vue               | 462 ++++++++++++++++----------
 src/views/widgets/Widgets.vue         | 310 +++++++++++++----
 src/views/widgets/WidgetsDropdown.vue |  20 +-
 4 files changed, 534 insertions(+), 262 deletions(-)

diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index 79436d11..fdcf70c9 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="animated fadeIn">
-    <CCardGroup columns class="card-columns cols-2">
+  <div class="c-animated c-fadeIn">
+    <CCardGroup columns class="c-card-columns c-cols-2">
       <CCard headerHtml="Line Chart" bodyWrapper>
         <CChartLineExample/>
       </CCard>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d5ef1805..f365fe81 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -5,18 +5,21 @@
       <CCardBody>
         <CRow>
           <CCol sm="5">
-            <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-            <div class="small text-muted">November 2017</div>
+            <h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
+            <div class="c-small c-text-muted">November 2017</div>
           </CCol>
-          <CCol sm="7" class="d-none d-md-block">
-            <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
-            <CButtonGroup class="float-right mr-3">
-              <CButton variant="outline-secondary"
-                       v-for="(value, key) in ['Day', 'Month', 'Year']"
-                       :key="key"
-                       class="mx-0"
-                       :pressed="value === selected ? true : false"
-                       @click="selected = value"
+          <CCol sm="7" class="c-d-none c-d-md-block">
+            <CButton variant="primary" class="c-float-right">
+              <i class="icon-cloud-download"></i>
+            </CButton>
+            <CButtonGroup class="c-float-right c-mr-3">
+              <CButton
+                variant="outline-secondary"
+                v-for="(value, key) in ['Day', 'Month', 'Year']"
+                :key="key"
+                class="c-mx-0"
+                :pressed="value === selected ? true : false"
+                @click="selected = value"
               >
                 {{value}}
               </CButton>
@@ -26,31 +29,55 @@
         <MainChartExample style="height:300px;margin-top:40px;"/>
       </CCardBody>
       <CCardFooter>
-        <CRow class="text-center">
-          <CCol md sm="12" class="mb-sm-2 mb-0">
-            <div class="text-muted">Visits</div>
+        <CRow class="c-text-center">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
+            <div class="c-text-muted">Visits</div>
             <strong>29.703 Users (40%)</strong>
-            <CProgress  class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
+            <CProgress
+              class="c-progress-xs c-mt-2"
+              :precision="1"
+              variant="success"
+              :value="40"
+            />
           </CCol>
-          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
-            <div class="text-muted">Unique</div>
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
+            <div class="c-text-muted">Unique</div>
             <strong>24.093 Users (20%)</strong>
-            <CProgress  class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
+            <CProgress
+              class="c-progress-xs c-mt-2"
+              :precision="1"
+              variant="info"
+              :value="20"
+            />
           </CCol>
-          <CCol md sm="12" class="mb-sm-2 mb-0">
-            <div class="text-muted">Pageviews</div>
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
+            <div class="c-text-muted">Pageviews</div>
             <strong>78.706 Views (60%)</strong>
-            <CProgress  class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
+            <CProgress
+              class="c-progress-xs c-mt-2"
+              :precision="1"
+              variant="warning"
+              :value="60"
+            />
           </CCol>
-          <CCol md sm="12" class="mb-sm-2 mb-0">
-            <div class="text-muted">New Users</div>
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
+            <div class="c-text-muted">New Users</div>
             <strong>22.123 Users (80%)</strong>
-            <CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
+            <CProgress
+              class="c-progress-xs c-mt-2"
+              :precision="1"
+              variant="danger"
+              :value="80"
+            />
           </CCol>
-          <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
-            <div class="text-muted">Bounce Rate</div>
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
+            <div class="c-text-muted">Bounce Rate</div>
             <strong>Average Rate (40.15%)</strong>
-            <CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
+            <CProgress
+              class="c-progress-xs c-mt-2"
+              :precision="1"
+              :value="40"
+            />
           </CCol>
         </CRow>
       </CCardFooter>
@@ -64,113 +91,152 @@
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="info">
-                    <small class="text-muted">New Clients</small><br>
-                    <strong class="h4">9,123</strong>
+                    <small class="c-text-muted">New Clients</small><br>
+                    <strong class="c-h4">9,123</strong>
                   </CCallout>
-                  <!-- <CCallout variant="info" class="d-inline">
-                    <div  class="d-inline">
-                      <small class="text-muted">New Clients</small><br>
-                      <strong class="h4">9,123</strong>
-                    </div>
-                    <div class="d-inline">
-                      <CChartLineSimple
-                        :data="[35, 23, 56, 22, 97, 23, 64]"
-                        borderColor="info"
-                        style="width:80px !important"
-                        :options="{ maintainAspectRatio: true, aspectRatio: 3 }"
-                      />
-                    </div>
-                  </CCallout> -->
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="danger">
-                    <small class="text-muted">Recurring Clients</small><br>
-                    <strong class="h4">22,643</strong>
-                    <!-- <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
-                    </div> -->
+                    <small class="c-text-muted">Recurring Clients</small><br>
+                    <strong class="c-h4">22,643</strong>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="mt-0">
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <hr class="c-mt-0">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Monday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress class="progress-xs" variant="info" :value="34"  />
-                  <CProgress class="progress-xs" variant="danger" :value="78"  />
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    variant="info"
+                    :value="34"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    variant="danger"
+                    :value="78"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Tuesday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="56" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="94" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="56"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="94"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Wednesday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="12" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="67" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="12"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="67"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Thursday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="43" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="91" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="43"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="91"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Friday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="22" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="73" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="22"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="73"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Saturday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="53" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="82" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="53"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="82"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
+              <div class="c-progress-group c-mb-4">
+                <div class="c-progress-group-prepend">
+                  <span class="c-progress-group-text">
                     Sunday
                   </span>
                 </div>
-                <div class="progress-group-bars">
-                  <CProgress  class="progress-xs" :value="9" variant="info"></CProgress>
-                  <CProgress  class="progress-xs" :value="69" variant="danger"></CProgress>
+                <div class="c-progress-group-bars">
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="9"
+                    variant="info"
+                  />
+                  <CProgress
+                    class="c-progress-xs"
+                    :value="69"
+                    variant="danger"
+                  />
                 </div>
               </div>
-              <div class="legend text-center">
+              <div class="c-legend c-text-center">
                 <small>
                   <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
                   New clients
@@ -184,155 +250,185 @@
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="warning">
-                    <small class="text-muted">Pageviews</small><br>
-                    <strong class="h4">78,623</strong>
-                    <!-- <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
-                    </div> -->
+                    <small class="c-text-muted">Pageviews</small><br>
+                    <strong class="c-h4">78,623</strong>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="success">
-                    <small class="text-muted">Organic</small><br>
-                    <strong class="h4">49,123</strong>
-                    <!-- <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
-                    </div> -->
+                    <small class="c-text-muted">Organic</small><br>
+                    <strong class="c-h4">49,123</strong>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="mt-0">
-              <ul class="horizontal-bars type-2">
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="icon-user progress-group-icon"></i>
-                    <span class="title">Male</span>
-                    <span class="ml-auto font-weight-bold">43%</span>
+              <hr class="c-mt-0">
+              <ul class="c-horizontal-bars c-type-2">
+                <div class="c-progress-group">
+                  <div class="c-progress-group-header">
+                    <i class="icon-user c-progress-group-icon"></i>
+                    <span class="c-title">Male</span>
+                    <span class="c-ml-auto c-font-weight-bold">43%</span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="43" variant="warning"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="43"
+                      variant="warning"
+                    />
                   </div>
                 </div>
-                <div class="progress-group mb-5">
-                  <div class="progress-group-header">
-                    <i class="icon-user-female progress-group-icon"></i>
-                    <span class="title">Female</span>
-                    <span class="ml-auto font-weight-bold">37%</span>
+                <div class="c-progress-group c-mb-5">
+                  <div class="c-progress-group-header">
+                    <i class="icon-user-female c-progress-group-icon"></i>
+                    <span class="c-title">Female</span>
+                    <span class="c-ml-auto c-font-weight-bold">37%</span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="37" variant="warning"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="37"
+                      variant="warning"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="icon-globe progress-group-icon"></i>
-                    <span class="title">Organic Search</span>
-                    <span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
+                <div class="c-progress-group">
+                  <div class="c-progress-group-header">
+                    <i class="icon-globe c-progress-group-icon"></i>
+                    <span class="c-title">Organic Search</span>
+                    <span class="c-ml-auto c-font-weight-bold">
+                      191,235<span class="text-muted small">(56%)</span>
+                    </span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="56" variant="success"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="56"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="icon-social-facebook progress-group-icon"></i>
-                    <span class="title">Facebook</span>
-                    <span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
+                <div class="c-progress-group">
+                  <div class="c-progress-group-header">
+                    <i class="icon-social-facebook c-progress-group-icon"></i>
+                    <span class="c-title">Facebook</span>
+                    <span class="c-ml-auto c-font-weight-bold">
+                      51,223 <span class="c-text-muted small">(15%)</span>
+                    </span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="15" variant="success"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="15"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="icon-social-twitter progress-group-icon"></i>
-                    <span class="title">Twitter</span>
-                    <span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
+                <div class="c-progress-group">
+                  <div class="c-progress-group-header">
+                    <i class="icon-social-twitter c-progress-group-icon"></i>
+                    <span class="c-title">Twitter</span>
+                    <span class="c-ml-auto c-font-weight-bold">
+                      37,564 <span class="c-text-muted c-small">(11%)</span>
+                    </span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="11" variant="success"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="11"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <i class="icon-social-linkedin progress-group-icon"></i>
-                    <span class="title">LinkedIn</span>
-                    <span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
+                <div class="c-progress-group">
+                  <div class="c-progress-group-header">
+                    <i class="icon-social-linkedin c-progress-group-icon"></i>
+                    <span class="c-title">LinkedIn</span>
+                    <span class="c-ml-auto c-font-weight-bold">
+                      27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
+                    </span>
                   </div>
-                  <div class="progress-group-bars">
-                    <CProgress  class="progress-xs" :value="8" variant="success"></CProgress>
+                  <div class="c-progress-group-bars">
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="8"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="divider text-center">
-                  <CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
+                <div class="c-divider c-text-center">
+                  <CButton variant="link" size="sm" class="c-text-muted">
+                    <i class="icon-options"></i>
+                  </CButton>
                 </div>
               </ul>
             </CCol>
           </CRow>
           <br/>
-          <CTable class="mb-0 table-outline"
-                   hover
-                   :items="tableItems"
-                   :fields="tableFields"
-                   head-variant="light"
-                   noSorting
+          <CTable
+            class="c-mb-0 c-table-outline"
+            hover
+            :items="tableItems"
+            :fields="tableFields"
+            head-variant="light"
+            noSorting
           >
             <!-- <div slot="activity-header">
               A tu nic
             </div> -->
-            <td slot="avatar" class="text-center" slot-scope="{item}">
-              <div class="avatar">
-                <img :src="item.avatar.url" class="img-avatar" alt="">
-                <span class="avatar-status"
-                      :class="item.avatar.status ?
-                      `bg-${item.avatar.status}` :
-                      'bg-secondary'"
+            <td slot="avatar" class="c-text-center" slot-scope="{item}">
+              <div class="c-avatar">
+                <img :src="item.avatar.url" class="c-img-avatar" alt="">
+                <span
+                  class="c-avatar-status"
+                  :class="`c-bg-${item.avatar.status || 'secondary'}`"
                 ></span>
               </div>
             </td>
             <td slot="user" slot-scope="{item}">
               <div>{{item.user.name}}</div>
-              <div class="small text-muted">
+              <div class="c-small c-text-muted">
                 <span>
                   <template v-if="item.user.new">New</template>
                   <template v-else>Recurring</template>
                 </span> | Registered: {{item.user.registered}}
               </div>
             </td>
-            <td slot="country"
-                slot-scope="{item}"
-                class="text-center"
+            <td
+              slot="country"
+              slot-scope="{item}"
+              class="text-center"
             >
-              <i class="h4 mb-0"
-                 :class="flag(item.country.flag)"
-                 :title="item.country.flag"
-                 :id="item.country.flag"
+              <i
+                class="c-h4 c-mb-0"
+                :class="flag(item.country.flag)"
+                :title="item.country.flag"
+                :id="item.country.flag"
               ></i>
             </td>
-            <!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
             <td slot="usage" slot-scope="{item}">
               <div class="clearfix">
-                <div class="float-left">
+                <div class="c-float-left">
                   <strong>{{item.usage.value}}%</strong>
                 </div>
-                <div class="float-right">
-                  <small class="text-muted">{{item.usage.period}}</small>
+                <div class="c-float-right">
+                  <small class="c-text-muted">{{item.usage.period}}</small>
                 </div>
               </div>
-              <CProgress  class="progress-xs" v-model="item.usage.value"
-
-              :variant="variant(item.usage.value)"></CProgress>
+              <CProgress
+                class="c-progress-xs"
+                v-model="item.usage.value"
+                :variant="variant(item.usage.value)"
+              />
             </td>
-            <td slot="payment"
-                slot-scope="{item}"
-                class="text-center"
+            <td
+              slot="payment"
+              slot-scope="{item}"
+              class="c-text-center"
             >
-              <i :class="item.payment.icon"
-                 style="font-size:24px"
-               ></i>
+              <i :class="item.payment.icon" style="font-size:24px"></i>
             </td>
             <td slot="activity" slot-scope="{item}">
-              <div class="small text-muted">Last login</div>
+              <div class="c-small c-text-muted">Last login</div>
               <strong>{{item.activity}}</strong>
             </td>
           </CTable>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 977daa29..b171ee2e 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="6" lg="3">
         <CWidgetProgress
@@ -10,7 +10,7 @@
           <CProgress
             variant="success"
             :value="25"
-            class="progress-xs my-3 mb-0"
+            class="c-progress-xs c-my-3 c-mb-0"
           />
         </CWidgetProgress>
       </CCol>
@@ -24,30 +24,63 @@
         />
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="warning" :value="25"/>
+        <CWidgetProgress
+          header="$98.111,00"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="warning"
+          :value="25"
+        />
       </CCol>
       <CCol sm="6" lg="3">
-          <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                    variant="danger" :value="25"/>
+        <CWidgetProgress
+          header="2 TB"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="danger"
+          :value="25"
+        />
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="success" inverse :value="25"/>
+        <CWidgetProgress
+          header="89.9%"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="success"
+          inverse :value="25"
+        />
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetProgress header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="info" inverse :value="25"/>
+        <CWidgetProgress
+          header="12.124"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="info"
+          inverse
+          :value="25"
+        />
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="warning" inverse :value="25"/>
+        <CWidgetProgress
+          header="$98.111,00"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="warning"
+          inverse
+          :value="25"
+        />
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="danger" inverse :value="25"/>
+        <CWidgetProgress
+          header="2 TB"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="danger"
+          inverse
+          :value="25"
+        />
       </CCol>
     </CRow>
     <CRow>
@@ -55,27 +88,27 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs bg-primary"
+          addIconClasses="fa fa-cogs c-bg-primary"
         />
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-laptop bg-info"
+          addIconClasses="fa fa-laptop c-bg-info"
           text="Income"
         />
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-moon-o bg-warning"
+          addIconClasses="fa fa-moon-o c-bg-warning"
           text="Income"
         />
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-bell bg-danger"
+          addIconClasses="fa fa-bell c-bg-danger"
           text="Income"
         />
       </CCol>
@@ -84,7 +117,7 @@
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-cogs bg-primary"
+          addIconClasses="fa fa-cogs c-bg-primary"
           text="Income"
           link="#"
         />
@@ -92,7 +125,7 @@
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-laptop bg-info"
+          addIconClasses="fa fa-laptop c-bg-info"
           text="Income"
           link="#"
         />
@@ -100,14 +133,14 @@
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-moon-o bg-warning bg-primary"
+          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
           text="Income" link="#"
         />
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-bell bg-danger"
+          addIconClasses="fa fa-bell c-bg-danger"
           text="Income"
           link="#"
         />
@@ -118,7 +151,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs bg-primary"
+          addIconClasses="fa fa-cogs c-bg-primary"
           noPadding
         />
       </CCol>
@@ -126,7 +159,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop bg-info"
+          addIconClasses="fa fa-laptop c-bg-info"
           noPadding
         />
       </CCol>
@@ -134,7 +167,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o bg-warning bg-primary"
+          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
           noPadding
         />
       </CCol>
@@ -142,7 +175,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-bell bg-danger"
+          addIconClasses="fa fa-bell c-bg-danger"
           noPadding
         />
       </CCol>
@@ -152,7 +185,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs bg-primary px-5"
+          addIconClasses="fa fa-cogs c-bg-primary c-px-5"
           noPadding
         />
       </CCol>
@@ -160,7 +193,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop bg-info px-5"
+          addIconClasses="fa fa-laptop c-bg-info c-px-5"
           noPadding
         />
       </CCol>
@@ -168,7 +201,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
+          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
           noPadding
         />
       </CCol>
@@ -178,7 +211,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs bg-primary px-5"
+          addIconClasses="fa fa-cogs c-bg-primary c-px-5"
           noPadding
           link="#"
         />
@@ -187,7 +220,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop bg-info px-5"
+          addIconClasses="fa fa-laptop c-bg-info c-px-5"
           noPadding
           link="#"
         />
@@ -196,7 +229,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
+          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
           noPadding
           link="#"
         />
@@ -204,84 +237,227 @@
     </CRow>
     <WidgetsSocial noCharts/>
     <WidgetsSocial/>
-    <CCardGroup class="mb-4">
-      <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+    <CCardGroup class="c-mb-4">
+      <CWidgetProgressIcon
+        iconClasses="icon-people"
+        header="87.500"
+        text="Visitors"
+        variant="info"
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-user-follow"
+        header="385"
+        text="New Clients"
+        variant="success"
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-basket-loaded"
+        header="1238"
+        text="Products sold"
+        variant="warning"
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-pie-chart"
+        header="28%"
+        text="Returning Visitors"
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-speedometer"
+        header="5:34:11"
+        text="Avg. Time"
+        variant="danger"
+      />
     </CCardGroup>
-    <CCardGroup class="mb-4">
-      <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
-      <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
-      <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+    <CCardGroup class="c-mb-4">
+      <CWidgetProgressIcon
+        iconClasses="icon-people"
+        header="87.500"
+        text="Visitors"
+        variant="info"
+        inverse
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-user-follow"
+        header="385"
+        text="New Clients"
+        variant="success"
+        inverse
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-basket-loaded"
+        header="1238"
+        text="Products sold"
+        variant="warning"
+        inverse
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-pie-chart"
+        header="28%"
+        variant="primary"
+        text="Returning Visitors"
+        inverse
+      />
+      <CWidgetProgressIcon
+        iconClasses="icon-speedometer"
+        header="5:34:11"
+        text="Avg. Time"
+        variant="danger"
+        inverse
+      />
     </CCardGroup>
     <CRow>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-people"
+          header="87.500"
+          text="visitors"
+          variant="info"
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-user-follow"
+          header="385"
+          text="New Clients"
+          variant="success"
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-basket-loaded"
+          header="1238"
+          text="Products sold"
+          variant="warning"
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-pie-chart"
+          header="28%"
+          text="Returning Visitors"
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
-          <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-speedometer"
+          header="5:34:11"
+          text="Avg. Time"
+        >
+          <CProgress
+            variant="danger"
+            :value="25"
+            class="c-progress-xs c-my-3 c-mb-0"
+          />
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+        <CWidgetProgressIcon
+          iconClasses="icon-speech"
+          header="972"
+          text="Comments"
+          variant="info"
+        />
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-people"
+          header="87.500"
+          text="visitors"
+          variant="info"
+          inverse
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-user-follow"
+          header="385"
+          text="New Clients"
+          variant="success"
+          inverse
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-basket-loaded"
+          header="1238" text="Products sold"
+          variant="warning"
+          inverse
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-pie-chart"
+          header="28%"
+          text="Returning Visitors"
+          variant="primary"
+          inverse
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-speedometer"
+          header="5:34:11" text="Avg. Time"
+          variant="danger"
+          inverse
+        />
       </CCol>
       <CCol sm="6" md="2">
-        <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
+        <CWidgetProgressIcon
+          iconClasses="icon-speech"
+          header="972"
+          text="Comments"
+          variant="info"
+          inverse
+        />
       </CCol>
     </CRow>
     <WidgetsDropdown/>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
+          rightHeader="SALE"
+          rightFooter="Today 6:43 AM"
+          leftHeader="$1.890,65"
+          leftFooter="+432,50 (15,78%)"
+        >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
+          variant="success"
+          rightHeader="SALE"
+          rightFooter="Today 6:43 AM"
+          leftHeader="$1.890,65"
+          leftFooter="+432,50 (15,78%)"
+        >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
+          variant="danger"
+          rightHeader="SALE"
+          rightFooter="Today 6:43 AM"
+          leftHeader="$1.890,65"
+          leftFooter="+432,50 (15,78%)"
+        >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
+          variant="warning"
+          rightHeader="SALE"
+          rightFooter="Today 6:43 AM"
+          leftHeader="$1.890,65"
+          leftFooter="+432,50 (15,78%)"
+        >
           <CChartLineSimple style="height:40px"/>
           <CChartBarSimple style="height:40px"/>
         </CWidgetSmallText>
@@ -289,32 +465,32 @@
     </CRow>
     <CRow>
       <CCol sm="4" lg="2">
-        <CWidgetSimple header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
           <CChartLineSimple style="height:40px" borderColor="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
           <CChartLineSimple style="height:40px" borderColor="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
           <CChartLineSimple style="height:40px" borderColor="success"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header='title' text='1,123'>
+        <CWidgetSimple  header="title" text="1,123">
           <CChartBarSimple style="height:40px" backgroundColor="danger"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header='title' text='1,123'>
+        <CWidgetSimple  header="title" text="1,123">
           <CChartBarSimple style="height:40px" backgroundColor="primary"/>
         </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidgetSimple  header='title' text='1,123'>
+        <CWidgetSimple  header="title" text="1,123">
           <CChartBarSimple style="height:40px" backgroundColor="success"/>
         </CWidgetSimple>
       </CCol>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 0526b537..7a792f42 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -4,8 +4,8 @@
       <CWidgetDropdown header="9.823" text="Members online">
         <template #dropdown>
           <CDropdown
-            class="float-right"
-            variant="transparent p-0"
+            class="c-float-right"
+            variant="transparent c-p-0"
             placement="bottom-end"
             buttonHtml="<i class='icon-settings'></i>"
           >
@@ -17,7 +17,7 @@
         </template>
         <CChartLineSimple
           pointed
-          class="px-3"
+          class="c-px-3"
           style="height:70px"
           :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
           backgroundColor="primary"
@@ -30,8 +30,8 @@
       <CWidgetDropdown variant="info" header="9.823" text="Members online">
         <template #dropdown>
           <CDropdown
-            class="float-right"
-            variant="transparent p-0"
+            class="c-float-right"
+            variant="transparent c-p-0"
             placement="bottom-end"
             noCaret
             buttonHtml="<i class='icon-location-pin'></i>"
@@ -44,7 +44,7 @@
         </template>
         <CChartLineSimple
           pointed
-          class="px-3"
+          class="c-px-3"
           style="height:70px"
           :dataPoints="[1, 18, 9, 17, 34, 22, 11]"
           backgroundColor="info"
@@ -63,8 +63,8 @@
 
         <template #dropdown>
           <CDropdown
-            class="float-right"
-            variant="transparent p-0"
+            class="c-float-right"
+            variant="transparent c-p-0"
             placement="bottom-end"
             buttonHtml="<i class='icon-settings'></i>"
           >
@@ -94,8 +94,8 @@
 
         <template #dropdown>
           <CDropdown
-            class="float-right"
-            variant="transparent p-0"
+            class="c-float-right"
+            variant="transparent c-p-0"
             placement="bottom-end"
             buttonHtml="<i class='icon-settings'></i>"
           >