Merge branch 'dev' into v3-alpha for v3.0.0-alpha.3 version release

.editorconfig

@@ -1,14 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-package-lock.json
 /dist
 /coverage
 

babel.config.js

@@ -1,7 +1,5 @@
 module.exports = {
   presets: [
-    [ "@vue/app", {
+    ['@vue/app']
-      "useBuiltIns": 'entry'
-    }]
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -8,49 +8,37 @@
   "license": "MIT",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --modern",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.6",
+    "@coreui/coreui": "next",
-    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
-    "@coreui/icons": "0.3.0",
+    "@coreui/coreui-vue-chartjs": "coreui/coreui-vue-chartjs",
-    "@coreui/vue": "github:coreui/coreui-vue#v3-bridge-alpha",
+    "@coreui/icons": "coreui/coreui-icons#v1-alpha",
-    "bootstrap": "^4.1.3",
+    "@coreui/vue": "../coreui-vue",
-    "chart.js": "^2.7.3",
+    "vue": "^2.6.10",
-    "core-js": "^2.5.7",
+    "vue-router": "^3.0.6"
-    "css-vars-ponyfill": "^1.11.1",
-    "current-script-polyfill": "^1.0.0",
-    "element-resize-detector": "^1.2.0",
-    "flag-icon-css": "^3.2.0",
-    "font-awesome": "^4.7.0",
-    "perfect-scrollbar": "^1.4.0",
-    "simple-line-icons": "^2.4.1",
-    "tooltip.js": "^1.3.1",
-    "vue": "^2.6.6",
-    "vue-chartjs": "^3.4.0",
-    "vue-perfect-scrollbar": "^0.1.0",
-    "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.5",
+    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-e2e-nightwatch": "^3.0.5",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.0.5",
+    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-plugin-unit-jest": "^3.0.5",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
-    "@vue/cli-service": "^3.0.5",
+    "@vue/cli-service": "^3.8.4",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.26.3",
     "babel-plugin-dynamic-import-node": "^2.2.0",
-    "babel-plugin-module-resolver": "^3.1.2",
+    "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-vue-app": "^2.0.0",
     "babel-jest": "^23.6.0",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
-    "node-sass": "^4.9.4",
+    "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.6"
+    "vue-template-compiler": "^2.6.10"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -11,14 +11,6 @@ export default {
 <style lang="scss">
   // CoreUI Icons Set
   @import '~@coreui/icons/css/coreui-icons.min.css';
-  /* Import Font Awesome Icons Set */
-  $fa-font-path: '~font-awesome/fonts/';
-  @import '~font-awesome/scss/font-awesome.scss';
-  /* Import Simple Line Icons Set */
-  $simple-line-font-path: '~simple-line-icons/fonts/';
-  @import '~simple-line-icons/scss/simple-line-icons.scss';
-  /* Import Flag Icons Set */
-  @import '~flag-icon-css/css/flag-icon.min.css';
   // Import Main styles for this application
   @import 'assets/scss/style';
 </style>

src/_nav.js

@@ -3,7 +3,7 @@ export default {
     {
       name: 'Dashboard',
       url: '/dashboard',
-      icon: 'icon-speedometer',
+      icon: 'cui-speedometer',
       badge: {
         variant: 'primary',
         text: 'NEW'
@@ -21,12 +21,12 @@ export default {
     {
       name: 'Colors',
       url: '/theme/colors',
-      icon: 'icon-drop'
+      icon: 'cui-drop'
     },
     {
       name: 'Typography',
       url: '/theme/typography',
-      icon: 'icon-pencil'
+      icon: 'cui-pencil'
     },
     {
       title: true,
@@ -40,183 +40,174 @@ export default {
     {
       name: 'Base',
       url: '/base',
-      icon: 'icon-puzzle',
+      icon: 'cui-puzzle',
       children: [
         {
           name: 'Breadcrumbs',
           url: '/base/breadcrumbs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Cards',
           url: '/base/cards',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Carousels',
           url: '/base/carousels',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Collapses',
           url: '/base/collapses',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Forms',
           url: '/base/forms',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Jumbotrons',
           url: '/base/jumbotrons',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'List Groups',
           url: '/base/list-groups',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Navs',
           url: '/base/navs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Navbars',
           url: '/base/navbars',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Paginations',
           url: '/base/paginations',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Popovers',
           url: '/base/popovers',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Progress Bars',
           url: '/base/progress-bars',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Switches',
           url: '/base/switches',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tables',
           url: '/base/tables',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tabs',
           url: '/base/tabs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tooltips',
           url: '/base/tooltips',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         }
       ]
     },
     {
       name: 'Buttons',
       url: '/buttons',
-      icon: 'icon-cursor',
+      icon: 'cui-cursor',
       children: [
         {
           name: 'Buttons',
           url: '/buttons/standard-buttons',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Button Dropdowns',
           url: '/buttons/dropdowns',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Button Groups',
           url: '/buttons/button-groups',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Brand Buttons',
           url: '/buttons/brand-buttons',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         }
       ]
     },
     {
       name: 'Charts',
       url: '/charts',
-      icon: 'icon-pie-chart'
+      icon: 'cui-pie-chart'
     },
     {
       name: 'Icons',
       url: '/icons',
-      icon: 'icon-star',
+      icon: 'cui-star',
       children: [
         {
           name: 'CoreUI Icons',
           url: '/icons/coreui-icons',
-          icon: 'icon-star',
+          icon: 'cui-star',
           badge: {
             variant: 'info',
             text: 'NEW'
           }
         },
+        {
+          name: 'Brands',
+          url: '/icons/brands',
+          icon: 'cui-star'
+        },
         {
           name: 'Flags',
           url: '/icons/flags',
-          icon: 'icon-star'
+          icon: 'cui-star'
-        },
-        {
-          name: 'Font Awesome',
-          url: '/icons/font-awesome',
-          icon: 'icon-star',
-          badge: {
-            variant: 'secondary',
-            text: '4.7'
-          }
-        },
-        {
-          name: 'Simple Line Icons',
-          url: '/icons/simple-line-icons',
-          icon: 'icon-star'
         }
       ]
     },
     {
       name: 'Notifications',
       url: '/notifications',
-      icon: 'icon-bell',
+      icon: 'cui-bell',
       children: [
         {
           name: 'Alerts',
           url: '/notifications/alerts',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         },
         {
           name: 'Badges',
           url: '/notifications/badges',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         },
         {
           name: 'Modals',
           url: '/notifications/modals',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         }
       ]
     },
     {
       name: 'Widgets',
       url: '/widgets',
-      icon: 'icon-calculator',
+      icon: 'cui-calculator',
       badge: {
         variant: 'primary',
         text: 'NEW'
@@ -232,41 +223,41 @@ export default {
     {
       name: 'Pages',
       url: '/pages',
-      icon: 'icon-star',
+      icon: 'cui-star',
       children: [
         {
           name: 'Login',
           url: '/pages/login',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Register',
           url: '/pages/register',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Error 404',
           url: '/pages/404',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Error 500',
           url: '/pages/500',
-          icon: 'icon-star'
+          icon: 'cui-star'
         }
       ]
     },
     {
       name: 'Download CoreUI',
       url: 'http://coreui.io/vue/',
-      icon: 'icon-cloud-download',
+      icon: 'cui-cloud-download',
       class: 'mt-auto',
       variant: 'success'
     },
     {
       name: 'Try CoreUI PRO',
       url: 'http://coreui.io/pro/vue/',
-      icon: 'icon-layers',
+      icon: 'cui-layers',
       variant: 'danger'
     }
   ]

src/assets/icons/icons.js

@@ -0,0 +1,48 @@
+import {
+  facebook,
+  twitter,
+  linkedin,
+  flickr,
+  tumblr,
+  xing,
+  github,
+  stackOverflow,
+  youtube,
+  dribbble,
+  instagram,
+  pinterest,
+  vk,
+  yahoo,
+  behance,
+  reddit,
+  vimeo,
+  ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+} from '@coreui/icons/brands'
+import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
+import { iconSet } from '@coreui/icons'
+
+export const iconsSet = Object.assign(
+  {},
+  iconSet,
+  { US, BR, IN, FR, ES, PL },
+  {
+    facebook,
+    twitter,
+    linkedin,
+    flickr,
+    tumblr,
+    xing,
+    github,
+    stackOverflow,
+    youtube,
+    dribbble,
+    instagram,
+    pinterest,
+    vk,
+    yahoo,
+    behance,
+    reddit,
+    vimeo,
+    ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
+  }
+)

src/assets/scss/_ie-fix.scss

@@ -1,6 +0,0 @@
-//IE fix for sticky footer
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .app {
-    height: 100%;
-  }
-}

src/assets/scss/style.scss

@@ -6,6 +6,3 @@
 
 // If you want to add something do it here
 @import "custom";
-
-// ie fixes
-@import "ie-fix";

src/assets/scss/vendors/_variables.scss

@@ -1,4 +0,0 @@
-// Override Boostrap variables
-@import "../variables";
-@import "~bootstrap/scss/mixins";
-@import "~@coreui/coreui/scss/variables";

src/assets/scss/vendors/chart.js/chart.scss

@@ -1,48 +0,0 @@
-// Import variables
-@import '../variables';
-
-.chart-legend,
-.bar-legend,
-.line-legend,
-.pie-legend,
-.radar-legend,
-.polararea-legend,
-.doughnut-legend {
-  list-style-type: none;
-  margin-top: 5px;
-  text-align: center;
-  -webkit-padding-start: 0;
-  -moz-padding-start: 0;
-  padding-left: 0;
-}
-.chart-legend li,
-.bar-legend li,
-.line-legend li,
-.pie-legend li,
-.radar-legend li,
-.polararea-legend li,
-.doughnut-legend li {
-  display: inline-block;
-  white-space: nowrap;
-  position: relative;
-  margin-bottom: 4px;
-  @include border-radius($border-radius);
-  padding: 2px 8px 2px 28px;
-  font-size: smaller;
-  cursor: default;
-}
-.chart-legend li span,
-.bar-legend li span,
-.line-legend li span,
-.pie-legend li span,
-.radar-legend li span,
-.polararea-legend li span,
-.doughnut-legend li span {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 20px;
-  height: 20px;
-  @include border-radius($border-radius);
-}

src/containers/DefaultAside.vue

@@ -1,247 +0,0 @@
-<template>
-  <CTabs>
-    <CTab active>
-      <template slot="title">
-        <i class="icon-list"></i>
-      </template>
-      <CListGroup class="list-group-accent">
-        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
-          Today
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
-          <div class="avatar float-right">
-            <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
-          </div>
-          <div>Meeting with
-            <strong>Lucas</strong>
-          </div>
-          <small class="text-muted mr-3">
-            <i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm
-          </small>
-          <small class="text-muted">
-            <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
-          </small>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-info">
-          <div class="avatar float-right">
-            <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
-          </div>
-          <div>Skype with <strong>Megan</strong>
-          </div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
-          <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
-        </CListGroupItem>
-        <hr class="transparent mx-3 my-0">
-        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
-          Tomorrow
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
-          <div>New UI Project - <strong>deadline</strong>
-          </div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
-          <small class="text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
-          <div class="avatars-stack mt-2">
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-          </div>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
-          <div><strong>#10 Startups.Garden</strong> Meetup</div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
-          <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
-          <div><strong>Team meeting</strong></div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
-          <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
-          <div class="avatars-stack mt-2">
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-          </div>
-        </CListGroupItem>
-      </CListGroup>
-    </CTab>
-    <CTab>
-      <template slot="title">
-        <i class='icon-speech'></i>
-      </template>
-      <div class="p-3">
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="success" class="avatar-status"/>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="danger" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="info" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="warning" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="dark" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-      </div>
-    </CTab>
-    <CTab>
-      <template slot="title">
-        <i class='icon-settings'></i>
-      </template>
-      <div class="p-3">
-        <h6>Settings</h6>
-        <div class="aside-options">
-          <div class="clearfix mt-4">
-            <small><b>Option 1</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
-          </div>
-          <div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 2</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
-          </div>
-          <div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 3</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
-          </div>
-          <div>
-            <small class="text-muted">Disabled option.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 4</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
-          </div>
-        </div>
-        <hr>
-        <h6>System Utilization</h6>
-        <div class="text-uppercase mb-1 mt-4">
-          <small><b>CPU Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="info" :value="25"></CProgress>
-        <small class="text-muted">348 Processes. 1/4 Cores.</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>Memory Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="warning" :value="70"></CProgress>
-        <small class="text-muted">11444GB/16384MB</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>SSD 1 Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="danger" :value="95"></CProgress>
-        <small class="text-muted">243GB/256GB</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>SSD 2 Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="success" :value="10"></CProgress>
-        <small class="text-muted">25GB/256GB</small>
-      </div>
-    </CTab>
-  </CTabs>
-</template>
-
-<script>
-export default {
-  name: 'DefaultAside',
-}
-</script>

src/containers/DefaultContainer.vue

@@ -1,118 +1,43 @@
 <template>
-  <div class="app">
+  <div class="c-app c-default-layout">
-    <CHeader fixed>
+    <TheHeader/>
-      <CSidebarToggler class="d-lg-none" display="md" mobile />
+    <TheSidebar/>
-      <CLink class="navbar-brand" to="#">
+    <div class="c-body">
-        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
+      <main class="c-main">
-        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
-      </CLink>
-      <CSidebarToggler class="d-md-down-none" display="lg" />
-      <CNavbarNav class="d-md-down-none">
-        <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
-        <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
-        <CNavItem class="px-3">Settings</CNavItem>
-      </CNavbarNav>
-      <CNavbarNav class="ml-auto">
-        <CNavItem class="d-md-down-none">
-          <i class="icon-bell"></i>
-          <CBadge pill variant="danger">5</CBadge>
-        </CNavItem>
-        <CNavItem class="d-md-down-none">
-          <i class="icon-list"></i>
-        </CNavItem>
-        <CNavItem class="d-md-down-none">
-          <i class="icon-location-pin"></i>
-        </CNavItem>
-        <DefaultHeaderDropdownAccnt/>
-      </CNavbarNav>
-      <CAsideToggler class="d-none d-lg-block" />
-      <!--<AsideToggler class="d-lg-none" mobile />-->
-    </CHeader>
-    <div class="app-body">
-      <CSidebar fixed>
-        <CSidebarHeader/>
-        <CSidebarForm/>
-        <!-- <CSidebarNav :navItems="computedNav"/> -->
-        <nav class="sidebar-nav">
-          <VuePerfectScrollbar class="scroll-area" :settings="psSettings"
-                               @ps-scroll-y="scrollHandle">
-              <CSidebarNavItems :items="computedNav"/>
-          </VuePerfectScrollbar>
-        </nav>
-        <CSidebarFooter/>
-        <CSidebarMinimizer/>
-      </CSidebar>
-      <main class="main">
         <CBreadcrumbRouter/>
-        <div class="container-fluid">
+        <CContainer fluid>
+          <transition name="fade">
             <router-view></router-view>
-        </div>
+          </transition>
+        </CContainer>
       </main>
-      <CAside fixed>
-        <!--aside-->
-        <DefaultAside/>
-      </CAside>
     </div>
-    <CFooter>
+    <TheFooter/>
-      <!--footer-->
-      <div>
-        <a href="https://coreui.io">CoreUI</a>
-        <span class="ml-1">&copy; 2018 creativeLabs.</span>
-      </div>
-      <div class="ml-auto">
-        <span class="mr-1">Powered by</span>
-        <a href="https://coreui.io">CoreUI for Vue</a>
-      </div>
-    </CFooter>
   </div>
 </template>
 
 <script>
-import nav from '@/_nav'
+import TheSidebar from './TheSidebar'
-import DefaultAside from './DefaultAside'
+import TheHeader from './TheHeader'
-import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+import TheFooter from './TheFooter'
-import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 
 export default {
   name: 'full',
   components: {
-    DefaultAside,
+    TheSidebar,
-    DefaultHeaderDropdownAccnt,
+    TheHeader,
-    VuePerfectScrollbar
+    TheFooter
-  },
-  data () {
-    return {
-      nav: nav.items
-    }
-  },
-  computed: {
-    computedNav () {
-      return this.nav.filter((item) => item.name !== 'Dashboard')
-    },
-    psSettings: () => {
-      // ToDo: find better rtl fix
-      return {
-        maxScrollbarLength: 200,
-        minScrollbarLength: 40,
-        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
-        wheelPropagation: false,
-        interceptRailY: styles => ({ ...styles, height: 0 })
-      }
-    }
-  },
-  methods: {
-    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
-    scrollHandle (evt) {
-      // console.log(evt)
-    }
   }
 }
 </script>
 
-<style scoped lang="css">
+<style scoped>
-  .scroll-area {
+.fade-enter-active,
-    position: absolute;
+.fade-leave-active {
-    height: 100%;
+  transition: opacity 0.3s;
-    margin: auto;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>

src/containers/DefaultHeaderDropdownAccnt.vue

@@ -1,63 +1,62 @@
 <template>
   <CDropdown
-    right
     nav
-    noCaret
+    no-caret
-    noPopper
+    no-popper
-    addMenuClasses="dropdown-menu-right"
+    add-menu-classes="c-dropdown-menu-right"
   >
-    <template #buttonContent>
+    <template #button-content>
       <img
         src="img/avatars/6.jpg"
-        class="img-avatar"
+        class="c-img-avatar"
         alt="admin@bootstrapmaster.com"
       />
     </template>
-    <CDropdownHeader tag="div" class="text-center">
+    <CDropdownHeader tag="div" class="c-text-center">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="fa fa-bell-o" /> Updates
+      <i class="cui-bell"/> Updates
-      <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
+      <CBadge variant="info" additional-classes="hehe">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-envelope-o" /> Messages
+      <i class="cui-envelope-open" /> Messages
       <CBadge variant="success">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-tasks" /> Tasks
+      <i class="cui-task" /> Tasks
       <CBadge variant="danger">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-comments" /> Comments
+      <i class="cui-comment-square" /> Comments
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
      tag="div"
-      class="text-center"
+      class="c-text-center"
     >
       <strong>Settings</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="fa fa-user" /> Profile
+      <i class="cui-user" /> Profile
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-wrench" /> Settings
+      <i class="cui-wrench" /> Settings
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-usd" /> Payments
+      <i class="cui-dollar" /> Payments
       <CBadge variant="secondary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-file" /> Projects
+      <i class="cui-file" /> Projects
       <CBadge variant="primary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>
-      <i class="fa fa-shield" /> Lock Account
+      <i class="cui-shield" /> Lock Account
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-lock" /> Logout
+      <i class="cui-lock-locked" /> Logout
     </CDropdownItem>
   </CDropdown>
 </template>

src/containers/TheFooter.vue

@@ -0,0 +1,18 @@
+<template>
+  <CFooter>
+    <div>
+      <a href="https://coreui.io">CoreUI</a>
+      <span class="c-ml-1">&copy; 2018 creativeLabs.</span>
+    </div>
+    <div class="c-ml-auto">
+      <span class="c-mr-1">Powered by</span>
+      <a href="https://coreui.io">CoreUI for Vue</a>
+    </div>
+  </CFooter>
+</template>
+
+<script>
+export default {
+  name: 'TheFooter'
+}
+</script>

src/containers/TheHeader.vue

@@ -0,0 +1,43 @@
+<template>
+  <CHeader fixed>
+    <CSidebarToggler class="c-header-toggler c-d-lg-none"/>
+    <CLink class="c-header-brand" to="#">
+      <img class="c-navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
+      <!-- <img class="c-navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> -->
+    </CLink>
+    <CSidebarToggler class="c-header-toggler c-d-md-down-none"/>
+    <ul class="c-header-nav c-d-md-down-none">
+      <CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem>
+      <CNavItem class="c-px-3" to="/users" exact>Users</CNavItem>
+      <CNavItem class="c-px-3">Settings</CNavItem>
+    </ul>
+    <CNav class="c-header-nav c-ml-auto">
+      <CNavItem class="c-d-md-down-none">
+        <i class="cui-bell"></i>
+        <CBadge pill variant="danger">5</CBadge>
+      </CNavItem>
+      <CNavItem class="c-d-md-down-none">
+        <i class="cui-list"></i>
+      </CNavItem>
+      <CNavItem class="d-md-down-none">
+        <i class="cui-location-pin"></i>
+      </CNavItem>
+      <DefaultHeaderDropdownAccnt/>
+    </CNav>
+    <!-- <CSidebarToggler
+      class="c-header-toggler c-d-md-down-none"
+      aside
+    /> -->
+  </CHeader>
+</template>
+
+<script>
+import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+
+export default {
+  name: 'TheHeader',
+  components: {
+    DefaultHeaderDropdownAccnt
+  }
+}
+</script>

src/containers/TheSidebar.vue

@@ -0,0 +1,21 @@
+<template>
+  <CSidebar fixed>
+    <CSidebarHeader/>
+    <CSidebarForm/>
+    <CSidebarNav :nav-items="computedNav"/>
+    <CSidebarFooter/>
+    <CSidebarMinimizer/>
+  </CSidebar>
+</template>
+
+<script>
+import nav from '@/_nav'
+export default {
+  name: 'TheSidebar',
+  computed: {
+    computedNav () {
+      return nav.items.filter(item => item.name !== 'Dashboard')
+    }
+  }
+}
+</script>

src/main.js

@@ -1,26 +1,15 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-
-import 'core-js/es6/promise'
-import 'core-js/es6/string'
-import 'core-js/es7/array'
-import '@babel/polyfill'
-
-// import cssVars from 'css-vars-ponyfill'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-//Import built package
+import CoreuiVue from '@coreui/vue/dist/custom.common.js'
-import CoreuiVue from '@coreui/vue'
+import { CIconPlugin } from '@coreui/icons/vue'
+import { iconsSet } from './assets/icons/icons.js'
 
 Vue.config.performance = true
-// todo
-// cssVars()
 Vue.use(CoreuiVue)
+Vue.use(CIconPlugin, iconsSet)
 
-
+new Vue({
-/* eslint-disable no-new */
-var vm = new Vue({
   el: '#app',
   router,
   template: '<App/>',

src/router/index.js

@@ -38,10 +38,9 @@ const Dropdowns = () => import('@/views/buttons/Dropdowns')
 const BrandButtons = () => import('@/views/buttons/BrandButtons')
 
 // Views - Icons
-const Flags = () => import('@/views/icons/Flags')
-const FontAwesome = () => import('@/views/icons/FontAwesome')
-const SimpleLineIcons = () => import('@/views/icons/SimpleLineIcons')
 const CoreUIIcons = () => import('@/views/icons/CoreUIIcons')
+const Brands = () => import('@/views/icons/Brands')
+const Flags = () => import('@/views/icons/Flags')
 
 // Views - Notifications
 const Alerts = () => import('@/views/notifications/Alerts')
@@ -62,7 +61,7 @@ Vue.use(Router)
 
 export default new Router({
   mode: 'hash', // https://router.vuejs.org/api/#mode
-  linkActiveClass: 'open active',
+  linkActiveClass: 'c-active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
@@ -247,31 +246,26 @@ export default new Router({
         },
         {
           path: 'icons',
-          redirect: '/icons/font-awesome',
+          redirect: '/icons/coreui-icons',
-          name: 'Icons',
+          name: 'CoreUI Icons',
           component: {
             render (c) { return c('router-view') }
           },
           children: [
             {
               path: 'coreui-icons',
-              name: 'CoreUI Icons',
+              name: 'Icons library',
               component: CoreUIIcons
             },
+            {
+              path: 'brands',
+              name: 'Brands',
+              component: Brands
+            },
             {
               path: 'flags',
               name: 'Flags',
               component: Flags
-            },
-            {
-              path: 'font-awesome',
-              name: 'Font Awesome',
-              component: FontAwesome
-            },
-            {
-              path: 'simple-line-icons',
-              name: 'Simple Line Icons',
-              component: SimpleLineIcons
             }
           ]
         },

src/shared/classes.js

@@ -1,21 +0,0 @@
-export const sidebarCssClasses = [
-  'sidebar-show',
-  'sidebar-sm-show',
-  'sidebar-md-show',
-  'sidebar-lg-show',
-  'sidebar-xl-show'
-]
-
-export const asideMenuCssClasses = [
-  'aside-menu-show',
-  'aside-menu-sm-show',
-  'aside-menu-md-show',
-  'aside-menu-lg-show',
-  'aside-menu-xl-show'
-]
-
-export const validBreakpoints = [ 'sm', 'md', 'lg', 'xl' ]
-
-export function checkBreakpoint (breakpoint, list) {
-  return list.indexOf(breakpoint) > -1
-}

src/shared/toggle-classes.js

@@ -1,6 +0,0 @@
-export default function toggleClasses (toggleClass, classList, force) {
-  const level = classList.indexOf(toggleClass)
-  const removeClassList = classList.slice(0, level)
-  removeClassList.map((className) => document.body.classList.remove(className))
-  document.body.classList.toggle(toggleClass, force)
-}

src/views/Charts.vue

@@ -1,57 +1,43 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
-    <CCardGroup columns class="card-columns">
+    <CCardGroup columns class="c-card-columns c-cols-2">
-      <CCard header="Line Chart" bodyWrapper>
+      <CCard header-html="Line Chart" body-wrapper>
-        <LineExample/>
+        <CChartLineExample/>
       </CCard>
-      <CCard header="Bar Chart" bodyWrapper>
+      <CCard header-html="Bar Chart" body-wrapper>
-        <BarExample/>
+        <CChartBarExample/>
       </CCard>
-      <CCard header="Doughnut Chart" bodyWrapper>
+      <CCard header-html="Doughnut Chart" body-wrapper>
-        <DoughnutExample/>
+        <CChartDoughnutExample/>
       </CCard>
-      <CCard header="Radar Chart" bodyWrapper>
+      <CCard header-html="Radar Chart" body-wrapper>
-        <RadarExample/>
+        <CChartRadarExample/>
       </CCard>
-      <CCard header="Pie Chart" bodyWrapper>
+      <CCard header-html="Pie Chart" body-wrapper>
-        <PieExample/>
+        <CChartPieExample/>
       </CCard>
-      <CCard header="Polar Area Chart" bodyWrapper>
+      <CCard header-html="Polar Area Chart" body-wrapper>
-        <PolarAreaExample/>
+        <CChartPolarAreaExample/>
       </CCard>
-      <CCard header="Simple line chart" bodyWrapper>
+      <CCard header-html="Simple line chart" body-wrapper>
-        <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <CChartLineSimple border-color="success" labels="months"/>
-                     label='Sales' borderColor='success'/>
       </CCard>
-      <CCard header="Simple pointed chart" bodyWrapper>
+      <CCard header-html="Simple pointed chart" body-wrapper>
-        <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
+        <CChartLineSimple pointed border-color="warning"/>
-                     :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                     style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
       </CCard>
-      <CCard header="Simple bar chart" bodyWrapper>
+      <CCard header-html="Simple bar chart" body-wrapper>
-        <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <CChartBarSimple background-color="danger"/>
-                    label='Sales' color='danger'/>
       </CCard>
     </CCardGroup>
   </div>
 </template>
 <script>
-import BarExample from './charts/BarExample'
+import * as Charts from './charts/index.js'
-import LineExample from './charts/LineExample'
-import DoughnutExample from './charts/DoughnutExample'
-import RadarExample from './charts/RadarExample'
-import PieExample from './charts/PieExample'
-import PolarAreaExample from './charts/PolarAreaExample'
 
 export default {
   name: 'Charts',
   components: {
-    BarExample,
+    ...Charts
-    LineExample,
-    DoughnutExample,
-    RadarExample,
-    PieExample,
-    PolarAreaExample
   }
 }
 </script>

src/views/Dashboard.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
-    <Widgets06/>
+    <WidgetsDropdown/>
     <CCard>
       <CCardBody>
         <CRow>
           <CCol sm="5">
-            <h4 id="traffic" class="card-title mb-0">Traffic</h4>
+            <h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
-            <div class="small text-muted">November 2017</div>
+            <div class="c-small c-text-muted">November 2017</div>
           </CCol>
-          <CCol sm="7" class="d-none d-md-block">
+          <CCol sm="7" class="c-d-none c-d-md-block">
-            <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
+            <CButton variant="primary" class="c-float-right">
-            <CButtonGroup class="float-right mr-3">
+              <i class="cui-cloud-download"></i>
-              <CButton variant="outline-secondary"
+            </CButton>
+            <CButtonGroup class="c-float-right c-mr-3">
+              <CButton
+                variant="outline-secondary"
                 v-for="(value, key) in ['Day', 'Month', 'Year']"
                 :key="key"
-                       class="mx-0"
+                class="c-mx-0"
                 :pressed="value === selected ? true : false"
                 @click="selected = value"
               >
@@ -23,144 +26,217 @@
             </CButtonGroup>
           </CCol>
         </CRow>
-        <MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
+        <MainChartExample style="height:300px;margin-top:40px;"/>
       </CCardBody>
       <CCardFooter>
-        <CRow class="text-center">
+        <CRow class="c-text-center">
-          <CCol md sm="12" class="mb-sm-2 mb-0">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="text-muted">Visits</div>
+            <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">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
-            <div class="text-muted">Unique</div>
+            <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">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="text-muted">Pageviews</div>
+            <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">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0">
-            <div class="text-muted">New Users</div>
+            <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">
+          <CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
-            <div class="text-muted">Bounce Rate</div>
+            <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>
     </CCard>
-    <Widgets04/>
+    <WidgetsSocial/>
     <CRow>
       <CCol md="12">
-        <CCard header="Traffic &amp; Sales" bodyWrapper>
+        <CCard header-html="Traffic &amp; Sales" body-wrapper>
           <CRow>
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="info">
-                    <small class="text-muted">New Clients</small><br>
+                    <small class="c-text-muted">New Clients</small><br>
-                    <strong class="h4">9,123</strong>
+                    <strong class="c-h4">9,123</strong>
-                    <div :style="{ top: '-10px'}">
-                      <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
-                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
-                    </div>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="danger">
-                    <small class="text-muted">Recurring Clients</small><br>
+                    <small class="c-text-muted">Recurring Clients</small><br>
-                    <strong class="h4">22,643</strong>
+                    <strong class="c-h4">22,643</strong>
-                    <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
-                    </div>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="mt-0">
+              <hr class="c-mt-0">
-              <div class="progress-group mb-4">
+              <div class="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Monday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress class="progress-xs" variant="info" :value="34"  />
+                  <CProgress
-                  <CProgress class="progress-xs" variant="danger" :value="78"  />
+                    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="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Tuesday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="56" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="94" variant="danger"></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="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Wednesday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="12" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="67" variant="danger"></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="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Thursday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="43" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="91" variant="danger"></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="c-progress-group mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Friday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="22" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="73" variant="danger"></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="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Saturday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="53" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="82" variant="danger"></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="c-progress-group c-mb-4">
-                <div class="progress-group-prepend">
+                <div class="c-progress-group-prepend">
-                  <span class="progress-group-text">
+                  <span class="c-progress-group-text">
                     Sunday
                   </span>
                 </div>
-                <div class="progress-group-bars">
+                <div class="c-progress-group-bars">
-                  <CProgress  class="progress-xs" :value="9" variant="info"></CProgress>
+                  <CProgress
-                  <CProgress  class="progress-xs" :value="69" variant="danger"></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
@@ -174,155 +250,195 @@
               <CRow>
                 <CCol sm="6">
                   <CCallout variant="warning">
-                    <small class="text-muted">Pageviews</small><br>
+                    <small class="c-text-muted">Pageviews</small><br>
-                    <strong class="h4">78,623</strong>
+                    <strong class="c-h4">78,623</strong>
-                    <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
-                    </div>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
                   <CCallout variant="success">
-                    <small class="text-muted">Organic</small><br>
+                    <small class="c-text-muted">Organic</small><br>
-                    <strong class="h4">49,123</strong>
+                    <strong class="c-h4">49,123</strong>
-                    <div :style="{ top: '-10px'}">
-                      <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
-                    </div>
                   </CCallout>
                 </CCol>
               </CRow>
-              <hr class="mt-0">
+              <hr class="c-mt-0">
-              <ul class="horizontal-bars type-2">
+              <ul class="c-horizontal-bars c-type-2">
-                <div class="progress-group">
+                <div class="c-progress-group">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-user progress-group-icon"></i>
+                    <i class="cui-user c-progress-group-icon"></i>
-                    <span class="title">Male</span>
+                    <span class="c-title">Male</span>
-                    <span class="ml-auto font-weight-bold">43%</span>
+                    <span class="c-ml-auto c-font-weight-bold">43%</span>
                   </div>
-                  <div class="progress-group-bars">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="43" variant="warning"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="43"
+                      variant="warning"
+                    />
                   </div>
                 </div>
-                <div class="progress-group mb-5">
+                <div class="c-progress-group c-mb-5">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-user-female progress-group-icon"></i>
+                    <i class="cui-user-female c-progress-group-icon"></i>
-                    <span class="title">Female</span>
+                    <span class="c-title">Female</span>
-                    <span class="ml-auto font-weight-bold">37%</span>
+                    <span class="c-ml-auto c-font-weight-bold">37%</span>
                   </div>
-                  <div class="progress-group-bars">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="37" variant="warning"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="37"
+                      variant="warning"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
+                <div class="c-progress-group">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-globe progress-group-icon"></i>
+                    <i class="cui-globe c-progress-group-icon"></i>
-                    <span class="title">Organic Search</span>
+                    <span class="c-title">Organic Search</span>
-                    <span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></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">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="56" variant="success"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="56"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
+                <div class="c-progress-group">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-social-facebook progress-group-icon"></i>
+                    <CIcon
-                    <span class="title">Facebook</span>
+                      name="socialFacebook"
-                    <span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
+                    <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">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="15" variant="success"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="15"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
+                <div class="c-progress-group">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-social-twitter progress-group-icon"></i>
+                    <CIcon
-                    <span class="title">Twitter</span>
+                      name="socialTwitter"
-                    <span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
+                    <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">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="11" variant="success"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="11"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="progress-group">
+                <div class="c-progress-group">
-                  <div class="progress-group-header">
+                  <div class="c-progress-group-header">
-                    <i class="icon-social-linkedin progress-group-icon"></i>
+                    <CIcon
-                    <span class="title">LinkedIn</span>
+                      name="socialLinkedin"
-                    <span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
+                    <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">
+                  <div class="c-progress-group-bars">
-                    <CProgress  class="progress-xs" :value="8" variant="success"></CProgress>
+                    <CProgress
+                      class="c-progress-xs"
+                      :value="8"
+                      variant="success"
+                    />
                   </div>
                 </div>
-                <div class="divider text-center">
+                <div class="c-divider c-text-center">
-                  <CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
+                  <CButton variant="link" size="sm" class="c-text-muted">
+                    <i class="cui-options"></i>
+                  </CButton>
                 </div>
               </ul>
             </CCol>
           </CRow>
           <br/>
-          <CTable class="mb-0 table-outline"
+          <CTable
+            class="c-mb-0 c-table-outline"
             hover
             :items="tableItems"
             :fields="tableFields"
             head-variant="light"
-                   noSorting
+            no-sorting
           >
-            <!-- <div slot="activity-header">
+            <td slot="avatar" class="c-text-center" slot-scope="{item}">
-              A tu nic
+              <div class="c-avatar">
-            </div> -->
+                <img :src="item.avatar.url" class="c-img-avatar" alt="">
-            <td slot="avatar" class="text-center" slot-scope="{item}">
+                <span
-              <div class="avatar">
+                  class="c-avatar-status"
-                <img :src="item.avatar.url" class="img-avatar" alt="">
+                  :class="`c-bg-${item.avatar.status || 'secondary'}`"
-                <span class="avatar-status"
-                      :class="item.avatar.status ?
-                      `bg-${item.avatar.status}` :
-                      'bg-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"
+            <td
+              slot="country"
               slot-scope="{item}"
-                class="text-center"
+              class="c-text-center"
             >
-              <i class="h4 mb-0"
+              <CIcon
-                 :class="flag(item.country.flag)"
+                :name="item.country.flag"
-                 :title="item.country.flag"
+                height="25"
-                 :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="c-clearfix">
-                <div class="float-left">
+                <div class="c-float-left">
                   <strong>{{item.usage.value}}%</strong>
                 </div>
-                <div class="float-right">
+                <div class="c-float-right">
-                  <small class="text-muted">{{item.usage.period}}</small>
+                  <small class="c-text-muted">{{item.usage.period}}</small>
                 </div>
               </div>
-              <CProgress  class="progress-xs" v-model="item.usage.value"
+              <CProgress
-
+                class="c-progress-xs"
-              :variant="variant(item.usage.value)"></CProgress>
+                v-model="item.usage.value"
+                :variant="variant(item.usage.value)"
+              />
             </td>
-            <td slot="payment"
+            <td
+              slot="payment"
               slot-scope="{item}"
-                class="text-center"
+              class="c-text-center"
             >
-              <i :class="item.payment.icon"
+              <CIcon
-                 style="font-size:24px"
+                :name="item.payment.icon"
-               ></i>
+                height="25"
+              />
             </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>
@@ -333,80 +449,78 @@
 </template>
 
 <script>
-import MainChartExample from './dashboard/MainChartExample'
+import MainChartExample from './charts/MainChartExample'
-import Widgets06 from './widgets/Widgets06'
+import WidgetsDropdown from './widgets/WidgetsDropdown'
-import Widgets04 from './widgets/Widgets04'
+import WidgetsSocial from './widgets/WidgetsSocial'
-import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
+import CChartLineSimple from './charts/CChartLineSimple'
-import CalloutChartExample from './dashboard/CalloutChartExample'
 
 export default {
   name: 'Dashboard',
   components: {
     MainChartExample,
-    SocialBoxChartExample,
+    WidgetsDropdown,
-    CalloutChartExample,
+    WidgetsSocial,
-    Widgets06,
+    CChartLineSimple
-    Widgets04
   },
-  data: function () {
+  data () {
     return {
       selected: 'Month',
       tableItems: [
         {
           avatar: { url: 'img/avatars/1.jpg', status: 'success' },
           user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'USA', flag: 'us' },
+          country: { name: 'USA', flag: 'US' },
           usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
+          payment: { name: 'Mastercard', icon: 'cc-mastercard' },
           activity: '10 sec ago'
         },
         {
           avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
           user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
-          country: { name: 'Brazil', flag: 'br' },
+          country: { name: 'Brazil', flag: 'BR' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
+          payment: { name: 'Visa', icon: 'cc-visa' },
           activity: '5 minutes ago'
         },
         {
           avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
           user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'India', flag: 'in' },
+          country: { name: 'India', flag: 'IN' },
           usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
+          payment: { name: 'Stripe', icon: 'stripe' },
           activity: '1 hour ago'
         },
         {
           avatar: { url: 'img/avatars/4.jpg', status: '' },
           user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'France', flag: 'fr' },
+          country: { name: 'France', flag: 'FR' },
           usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'PayPal', icon: 'fa fa-paypal' },
+          payment: { name: 'PayPal', icon: 'paypal' },
           activity: 'Last month'
         },
         {
           avatar: { url: 'img/avatars/5.jpg', status: 'success' },
           user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Spain', flag: 'es' },
+          country: { name: 'Spain', flag: 'ES' },
           usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
+          payment: { name: 'Google Wallet', icon: 'google-wallet' },
           activity: 'Last week'
         },
         {
           avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
           user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Poland', flag: 'pl' },
+          country: { name: 'Poland', flag: 'PL' },
           usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
+          payment: { name: 'Amex', icon: 'cc-amex' },
           activity: 'Last week'
         }
       ],
       tableFields: [
-        { key: 'avatar', label: '<i class="icon-people"></i>',},
+        { key: 'avatar', label: '', _classes: 'c-text-center' },
         { key: 'user' },
-        { key: 'country' },
+        { key: 'country', _classes: 'c-text-center' },
         { key: 'usage' },
-        { key: 'payment', label: 'Payment method' },
+        { key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
         { key: 'activity' },
       ]
     }
@@ -424,9 +538,6 @@ export default {
         $variant = 'danger'
       }
       return $variant
-    },
-    flag (value) {
-      return 'flag-icon flag-icon-' + value
     }
   }
 }

src/views/base/Breadcrumbs.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols>
+        <CCol col>
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
@@ -13,7 +13,7 @@
               </div> -->
             </CCardHeader>
             <CCardBody>
-              <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
+              <CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
               <CBreadcrumb :items="items2"/>
               <CBreadcrumb :items="items3"/>
             </CCardBody>
@@ -30,43 +30,43 @@ export default {
   data () {
     return {
       items: [{
-        text: '<b>Admin</b>',
+        textHtml: '<b>Admin</b>',
         href: '#'
       }, {
-        text: 'Manage',
+        textHtml: 'Manage',
         href: '#'
       }, {
-        text: 'Library'
+        textHtml: 'Library'
       }],
 
 
       items2: [{
-        text: 'Go to dashboard',
+        textHtml: 'Go to dashboard',
         to: '/dashboard'
       }, {
-        text: 'Go to widgets',
+        textHtml: 'Go to widgets',
         to: '/Widgets'
       }, {
-        text: 'Go to Google',
+        textHtml: 'Go to Google',
         href: 'http://google.com'
       },{
-        text: 'Current page'
+        textHtml: 'Current page'
       }],
 
 
       items3: [{
-        text: 'Link',
+        textHtml: 'Link',
         to: '#2',
-        activeClass: 'bg-info p-1'
+        activeClass: 'c-bg-info c-p-1'
       }, {
-        text: 'Active',
+        textHtml: 'Active',
         to: '#3',
-        activeClass: 'bg-warning p-1',
+        activeClass: 'c-bg-warning c-p-1',
-        addLinkClasses: 'bg-info p-1'
+        addLinkClasses: 'c-bg-info c-p-1'
       },{
-        text: 'Classes',
+        textHtml: 'Classes',
         to: '#4',
-        activeClass: 'bg-danger p-1',
+        activeClass: 'c-bg-danger c-p-1',
       }]
     }
   }

src/views/base/Cards.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title" :body="loremIpsum"/>
+        <CCard header-html="Card title" :body-html="loremIpsum"/>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footer="Card Footer" :body="loremIpsum" />
+        <CCard footer-html="Card Footer" :body-html="loremIpsum" />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
-          header="<i class='fa fa-check'></i> Card with icon"
+          headerHtml="<i class='cui-check'></i> Card with icon"
-          :body="loremIpsum"
+          :bodyHtml="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
@@ -18,12 +18,12 @@
           <CCardHeader>
             Card with switch
             <CSwitch
-              class="float-right"
+              class="c-float-right"
               size="sm"
               shape="pill"
               variant="info"
-              dataOn="On"
+              data-on="On"
-              dataOff="Off"
+              data-off="Off"
               :checked="true"
             />
           </CCardHeader>
@@ -36,7 +36,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge variant="success" class="float-right">Success</CBadge>
+            <CBadge variant="success" class="c-float-right">Success</CBadge>
           </CCardHeader>
           <CCardBody>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -47,89 +47,89 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill variant="danger" class="float-right">42</CBadge>
+            <CBadge pill variant="danger" class="c-float-right">42</CBadge>
           </CCardHeader>
-          <CCardBody :body="loremIpsum"/>
+          <CCardBody :body-html="loremIpsum"/>
         </CCard>
       </CCol>
-    </CRow><!--/.row-->
+    </CRow>
     <CRow>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline primary"
-          borderVariant="primary"
+          border-variant="primary"
-          :body="loremIpsum"
+          :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline secondary"
-          borderVariant="secondary"
+          border-variant="secondary"
-          :body="loremIpsum"
+          :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline success"
-          borderVariant="success"
+          border-variant="success"
-          bodyWrapper
+          body-wrapper
         >
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline info" borderVariant="info" bodyWrapper>
+        <CCard header-html="Card outline info" border-variant="info" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline warning" borderVariant="warning" bodyWrapper>
+        <CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card outline danger" borderVariant="danger" bodyWrapper>
+        <CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
-    </CRow><!--/.row-->
+    </CRow>
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
+        <CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
+        <CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
+        <CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
+        <CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent">
+        <CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
+        <CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
-    </CRow><!--/.row-->
+    </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center" bodyWrapper>
+        <CCard class="c-bg-primary c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -138,8 +138,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-success text-center" bodyWrapper>
+        <CCard class="c-bg-success c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -148,8 +148,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-info text-center" bodyWrapper>
+        <CCard class="c-bg-info c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -158,8 +158,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center" bodyWrapper>
+        <CCard class="c-bg-warning c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -168,8 +168,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center" bodyWrapper>
+        <CCard class="c-bg-danger c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -178,8 +178,8 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center" bodyWrapper>
+        <CCard class="c-bg-secondary c-text-center" body-wrapper>
-          <blockquote class="card-blockquote">
+          <blockquote class="c-card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
               <cite title="Source Title">Source Title</cite>
@@ -187,47 +187,47 @@
           </blockquote>
         </CCard>
       </CCol>
-    </CRow><!--/.row-->
+    </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-primary" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-primary" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-success" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-success" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-info" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-info" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-warning" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-warning" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header="Card title" class="bg-danger" bodyWrapper>
+        <CCard header-html="Card title" class="c-bg-danger" body-wrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show" >
+          <CCard class="c-bg-secondary" v-if="show" >
             <CCardHeader>
               Card with header actions
-              <div class="card-header-actions">
+              <div class="c-card-header-actions">
-                <CLink href="#" class="card-header-action btn-setting" >
+                <CLink href="#" class="c-card-header-action btn-setting" >
-                  <i class="icon-settings"></i>
+                  <i class="cui-settings"></i>
                 </CLink>
-                <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
+                <CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
+                  <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
-                <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
+                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
-                  <i class="icon-close"></i>
+                  <i class="cui-circle-x"></i>
                 </CLink>
               </div>
             </CCardHeader>
@@ -243,8 +243,8 @@
     <!-- <CRow>
       <CCol sm="6" md="4">
         <CCard >
-          <CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
+          <CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
-          <CCardHeader header="Card title"/>
+          <CCardHeader header-html="Card title"/>
           <CCardBody style="max-height:200px;overflow-y:auto">
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

src/views/base/Carousels.vue

@@ -1,6 +1,6 @@
 <template functional>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
         <CCol md="12" lg="9" >
           <CCard>
@@ -19,18 +19,22 @@
               </div> -->
             </CCardHeader>
             <CCardBody>
-              <CCarousel>
+              <CCarousel
+                arrows
+                indicators
+                animate
+              >
                 <CCarouselItem
                   caption="First Slide"
-                  imgSrc="https://lorempixel.com/1024/480/technics/2/"
+                  img-src="https://lorempixel.com/1024/480/technics/2/"
                   text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                 />
                 <CCarouselItem
                   active
-                  imgSrc="https://lorempixel.com/1024/480/technics/4/"
+                  img-src="https://lorempixel.com/1024/480/technics/4/"
                 />
                 <CCarouselItem
-                  imgSrc="https://lorempixel.com/1024/480/technics/8/"
+                 img-src="https://lorempixel.com/1024/480/technics/8/"
                 />
               </CCarousel>
             </CCardBody>

src/views/base/Collapses.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -17,146 +17,20 @@
               <CButton id="collapse1" variant="primary">
                 Toggle Collapse
               </CButton>
-              <CCollapse toggler="collapse1" class="mt-2">
+              <CCollapse toggler="collapse1" class="c-mt-2">
-                <CCard bodyWrapper>
+                <CCard body-wrapper>
-                  <p class="card-text">Collapse contents Here</p>
+                  <p class="c-card-text">Collapse contents Here</p>
                   <CButton id="collapse2" size="sm">
                     Toggle Inner Collapse
                   </CButton>
-                  <CCollapse toggler="collapse2" class="mt-2">
+                  <CCollapse toggler="collapse2" class="c-mt-2">
-                    <CCard>Hello!</CCard>
+                    <CCard body-wrapper>Hello!</CCard>
                   </CCollapse>
                 </CCard>
               </CCollapse>
             </CCardBody>
           </CCard>
         </CCol>
-        <!-- <CCol cols="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
-
-              <CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
-
-              <CCollapse id="collapse2">
-                <CCard>
-                  I am collapsible content!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol cols="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
-              <CCollapse visible id="collapse3">
-                <CCard>
-                  I should start open!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol cols="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
-            </CCardHeader>
-            <div>
-              <CButton @click="showCollapse = !showCollapse"
-                     :class="showCollapse ? 'collapsed' : null"
-                     aria-controls="collapse4"
-                     :aria-expanded="showCollapse ? 'true' : 'false'">
-                Toggle Collapse
-              </CButton>
-              <CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
-                <CCard>
-                  I should start open!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol cols="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
-            </CCardHeader>
-            <div>
-              <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
-
-              <CCollapse id="collapseA" class="mt-2">
-                <CCard>
-                  I am collapsable content A!
-                </CCard>
-              </CCollapse>
-              <CCollapse id="collapseB" class="mt-2">
-                <CCard>
-                  I am collapsable content B!
-                </CCard>
-              </CCollapse>
-            </div>
-          </CCard>
-        </CCol>
-        <CCol cols="12" md="6">
-          <CCard>
-            <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
-            </CCardHeader>
-            <div role="tablist">
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      I start opened because <code>visible</code> is <code>true</code>
-                    </p>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-              <CCard  class="mb-1">
-                <CCardHeader  class="p-1" role="tab">
-                  <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
-                </CCardHeader>
-                <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
-                  <CCardBody>
-                    <p class="card-text">
-                      {{ text }}
-                    </p>
-                  </CCardBody>
-                </CCollapse>
-              </CCard>
-            </div>
-          </CCard>
-        </CCol> -->
       </CRow>
     </div>
   </div>

src/views/base/Forms.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
       <CCol sm="6">
         <CCard>
@@ -153,14 +153,15 @@
                 placeholder="Please select"
               />
               <CFormSelect
-                label="Select"
+                label="Large select"
                 size="lg"
                 horizontal
-                :options="options"
+                :value.sync="selectedOption"
+                :options="selectOptions"
                 placeholder="Please select"
               />
               <CFormSelect
-                label="Select"
+                label="Small select"
                 size="sm"
                 horizontal
                 :options="options"
@@ -174,22 +175,40 @@
                 disabled
               />
               <template v-for="(name, key) in checkboxNames">
-                <div class="form-row form-group" :key="name">
+                <div class="c-form-group c-form-row" :key="name">
-                  <CCol sm="3">
+                  <CCol tag="label" sm="3" class="c-col-form-label">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
+                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
                     <CFormCheckbox
                       v-for="option in options"
                       :key="option"
                       :label="option"
-                      :type="[0,1,4,5].includes(key) ? 'radio' : 'checkbox'"
                       :value="option"
-                      :custom="key > 3"
+                      :custom="key > 1"
                       :name="`Option 1${key}`"
-                      :checked="[0,1,4,5].includes(key) ?
+                      :checked="Math.random() > 0.6"
-                        `Option 1` : Math.random() > 0.6"
+                      :inline="key % 2 === 1"
-                      :class="key % 2 === 1 ? 'form-check-inline' : ''"
+                    />
+                  </CCol>
+                </div>
+              </template>
+              <template v-for="(name, key) in radioNames">
+                <div class="c-form-row c-form-group" :key="name">
+                  <CCol sm="3">
+                    {{name}}
+                  </CCol>
+                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
+                    <CFormRadio
+                      v-for="option in options"
+                      :key="option"
+                      :label="option"
+                      type="radio"
+                      :value="option"
+                      :custom="key > 1"
+                      :name="`Option 1${key}`"
+                      checked="Option 1"
+                      :inline="key % 2 === 1"
                     />
                   </CCol>
                 </div>
@@ -203,11 +222,22 @@
                 horizontal
                 multiple
               />
+              <CFormFile
+                label="File custom input"
+                horizontal
+                custom
+              />
+              <CFormFile
+                label="Multiple file custom input"
+                horizontal
+                multiple
+                custom
+              />
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -219,20 +249,26 @@
             <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
             <CForm inline>
               <CFormInput
-                class="mr-2"
+                class="c-mr-2"
-                label="<small>Name:&nbsp;</small>"
                 placeholder="Jane Doe"
-              />
+              >
+                <template #label>
+                  <small>Name:&nbsp;</small>
+                </template>
+              </CFormInput>
               <CFormInput
-                label="<small>Email:&nbsp;</small>"
                 placeholder="jane.doe@example.com"
                 autocomplete="email"
-              />
+              >
+                <template #label>
+                  <small>Email:&nbsp;</small>
+                </template>
+              </CFormInput>
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -259,12 +295,12 @@
                 horizontal
                 placeholder="Enter Password..."
               />
-              <CCardFooter>
-                <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-                <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-              </CCardFooter>
             </CForm>
           </CCardBody>
+          <CCardFooter>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+          </CCardFooter>
         </CCard>
         <CCard>
           <CCardHeader>
@@ -279,7 +315,7 @@
                 label="Email"
                 placeholder="Enter Email..."
                 required
-                wasValidated
+                was-validated
               />
               <CFormInput
                 type="password"
@@ -288,12 +324,12 @@
                 label="Password"
                 placeholder="Enter Password..."
                 required
-                wasValidated
+                was-validated
               />
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+              <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-              <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+              <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
@@ -302,60 +338,60 @@
             Input <strong>Grid</strong>
           </CCardHeader>
           <CCardBody>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="3">
-                <CFormInput class="mb-0" placeholder=".col-sm-3"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="4">
-                <CFormInput class="mb-0" placeholder=".col-sm-4"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="5">
-                <CFormInput class="mb-0" placeholder=".col-sm-5"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="6">
-                <CFormInput class="mb-0" placeholder=".col-sm-6"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="7">
-                <CFormInput class="mb-0" placeholder=".col-sm-7"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="8">
-                <CFormInput class="mb-0" placeholder=".col-sm-8"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="9">
-                <CFormInput class="mb-0" placeholder=".col-sm-9"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="10">
-                <CFormInput class="mb-0" placeholder=".col-sm-10"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="11">
-                <CFormInput class="mb-0" placeholder=".col-sm-11"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="12">
-                <CFormInput class="mb-0" placeholder=".col-sm-12"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
               </CCol>
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -382,8 +418,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -423,13 +459,13 @@
                 valid-feedback="Input is valid."
                 invalid-feedback="Please provide at least 4 characters."
                 value="Valid value"
-                :isValid="validator"
+                :is-valid="validator"
               />
               <CFormInput
                 label="Input is invalid"
                 valid-feedback="Thank you :)"
                 invalid-feedback="Please provide at least 4 characters."
-                :isValid="validator"
+                :is-valid="validator"
               />
             </CForm>
           </CCardBody>
@@ -445,23 +481,23 @@
           <CCardBody>
             <CFormInput
               placeholder="Username"
-              prepend="<i class='fa fa-user'></i>"
+              prependHtml="<i class='cui-user'></i>"
             />
             <CFormInput
               type="email"
               placeholder="Email"
               autocomplete="email"
-              append="<i class='fa fa-envelope-o'></i>"
+              appendHtml="<i class='cui-envelope-open'></i>"
             />
             <CFormInput
-              prepend="<i class='fa fa-euro'></i>"
+              prependHtml="<i class='cui-euro'></i>"
               placeholder="ex. $1.000.000"
-              append=".00"
+              appendHtml=".00"
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -473,7 +509,9 @@
           <CCardBody>
             <CFormInput placeholder="Username">
               <template #prepend>
-                <CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
+                <CButton variant="primary">
+                  <i class="cui-magnifying-glass"></i> Search
+                </CButton>
               </template>
             </CFormInput>
             <CFormInput
@@ -499,8 +537,8 @@
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -513,7 +551,7 @@
             <CFormInput placeholder="Username">
               <template #prepend>
                 <CDropdown
-                  buttonContent="Action"
+                  button-html="Action"
                   variant="primary"
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -530,7 +568,7 @@
             >
               <template #append>
                 <CDropdown
-                  buttonContent="Action"
+                  button-html="Action"
                   variant="primary"
                   right
                 >
@@ -545,7 +583,7 @@
 
               <template #prepend>
                 <CDropdown
-                  buttonContent="Split"
+                  button-html="Split"
                   variant="primary"
                   split
                 >
@@ -558,7 +596,7 @@
 
               <template #append>
                 <CDropdown
-                  buttonContent="Action"
+                  button-html="Action"
                   variant="primary"
                   right
                 >
@@ -572,8 +610,8 @@
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -586,15 +624,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="form-group"
+              class="c-form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
-              <CCol :cols="12 - number">
+              <CCol :col="12 - number">
-                <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
               </CCol>
-              <CCol :cols="number">
+              <CCol :col="number">
-                <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -614,15 +652,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="form-group"
+              class="c-form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
-              <CCol :cols="number">
+              <CCol :col="number">
-                <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
               </CCol>
-              <CCol :cols="12 - number">
+              <CCol :col="12 - number">
-                <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -645,23 +683,25 @@
           <CCardBody>
             <CForm>
               <CFormInput
-                prepend="Username"
+                prepend-html="Username"
-                append="<i class='fa fa-user'></i>"
+                appendHtml="<i class='cui-user'></i>"
               />
               <CFormInput
-                prepend="Email"
+                prepend-html="Email"
                 type="email"
                 autocomplete="email"
-                append="<i class='fa fa-envelope'></i>"
+                appendHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
-                prepend="Password"
+                prepend-html="Password"
                 type="password"
                 autocomplete="current-password"
-                append="<i class='fa fa-asterisk'></i>"
+                appendHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
+              <div class="c-form-group c-form-actions">
-                <CButton type="submit" size="sm" variant="primary">Submit</CButton>
+                <CButton type="submit" size="sm" variant="primary">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -676,22 +716,24 @@
             <CForm>
               <CFormInput
                 placeholder="Username"
-                append="<i class='fa fa-user'></i>"
+                appendHtml="<i class='cui-user'></i>"
               />
               <CFormInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                append="<i class='fa fa-envelope'></i>"
+                appendHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                append="<i class='fa fa-asterisk'></i>"
+                appendHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
+              <div class="c-form-group c-form-actions">
-                <CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
+                <CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -706,22 +748,24 @@
             <CForm>
               <CFormInput
                 placeholder="Username"
-                prepend="<i class='fa fa-user'></i>"
+                prependHtml="<i class='cui-user'></i>"
               />
               <CFormInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                prepend="<i class='fa fa-envelope'></i>"
+                prependHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 placeholder="Password"
                 type="password"
                 autocomplete="current-password"
-                prepend="<i class='fa fa-asterisk'></i>"
+                prependHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
+              <div class="c-form-group c-form-actions">
-                <CButton type="submit" size="sm" variant="success">Submit</CButton>
+                <CButton type="submit" size="sm" variant="success">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -733,19 +777,19 @@
         <transition name="fade">
           <CCard v-if="show">
             <CCardHeader>
-              <i class="fa fa-edit"></i> Form Elements
+              <i class="cui-pencil"></i> Form Elements
-              <div class="card-header-actions">
+              <div class="c-card-header-actions">
-                <CLink href="#" class="card-header-action btn-setting">
+                <CLink href="#" class="c-card-header-action c-btn-setting">
-                  <i class="icon-settings"></i>
+                  <i class="cui-settings"></i>
                 </CLink>
                 <CLink
-                  class="card-header-action btn-minimize"
+                  class="c-card-header-action c-btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
-                  <i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
+                  <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
-                <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
+                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
-                  <i class="icon-close"></i>
+                  <i class="cui-circle-x"></i>
                 </CLink>
               </div>
             </CCardHeader>
@@ -753,20 +797,20 @@
               <CCardBody>
                 <CFormInput
                   label="Prepended text"
-                  prepend="@"
+                  prepend-html="@"
                   description="Here's some help text"
                   type="email"
                   autocomplete="email"
                 />
                 <CFormInput
                   label="Appended text"
-                  append=".00"
+                  append-html=".00"
                   description="Here's some help text"
                 />
                 <CFormInput
-                  label="Appended text"
+                  label="Appended and prepended text"
-                  prepend="$"
+                  prepend-html="$"
-                  append=".00"
+                  append-html=".00"
                   description="Here's some help text"
                 />
                 <CFormInput
@@ -778,12 +822,12 @@
                   </template>
                 </CFormInput>
                 <CFormInput label="Two-buttons append">
-                  <template v-slot:append>
+                  <template #append>
                     <CButton variant="primary">Search</CButton>
                     <CButton variant="danger">Options</CButton>
                   </template>
                 </CFormInput>
-                <div class="form-actions">
+                <div class="c-form-actions">
                   <CButton type="submit" variant="primary">Save changes</CButton>
                   <CButton variant="secondary">Cancel</CButton>
                 </div>
@@ -809,27 +853,26 @@ export default {
       trueValue:'someTrueValue',
       falseValue:'someFalseValue',
       checks: ['someTrueValue','hehehe2','',1,1,1,1,1,1,1,1,1,1,1,1],
-      selected: 'first',
       isValid: '',
       testkkk: 2,
       horizontal: { label:'col-3', input:'col-9' },
       options: ['Option 1', 'Option 2', 'Option 3'],
+      selectOptions: [
+        'Option 1', 'Option 2', 'Option 3',
+        { value: ['some value', 'another value'], label: 'Option 4' }],
+      selectedOption: ['some value', 'another value'],
+
       formCollapsed: true,
-      checkboxNames: ['Radios', 'Inline Radios',
+      checkboxNames: ['Checkboxes', 'Inline Checkboxes',
-                      'Checkboxes', 'Inline Checkboxes',
+                      'Checkboxes - custom', 'Inline Checkboxes - custom'],
-                      'Radios - custom', 'Inline Radios - custom',
+      radioNames: ['Radios', 'Inline Radios',
-                      'Checkboxes - custom', 'Inline Checkboxes - custom']
+                    'Radios - custom', 'Inline Radios - custom']
     }
   },
   updated () {
     console.log('parent updated')
   },
   methods: {
-    testt (e) {
-      // console.log(e)
-      //   this.selected = 3
-      this.cInput += 100
-    },
     validator (val) {
       return val ? val.length >= 4 : false
     }

src/views/base/Jumbotrons.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
         <CCol>
           <CCard>
@@ -9,7 +9,7 @@
               <strong> Bootstrap Jumbotron </strong>
               <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="text-muted">docs</small>
+                  <small class="c-text-muted">docs</small>
                 </a>
               </div> -->
             </CCardHeader>
@@ -29,11 +29,11 @@
             </CCardHeader>
             <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="">
-                <p slot="lead" class="lead">
+                <p slot="lead" class="c-lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="my-4">
+                <hr class="c-my-4">
                 <p>
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.
@@ -53,16 +53,17 @@
               <small>variants</small>
             </CCardHeader>
             <CCardBody>
-              <CJumbotron variant="info"
+              <CJumbotron
-                           textVariant="white"
+                variant="info"
-                           borderVariant="dark"
+                text-variant="white"
-                           header="Bootstrap 4">
+                border-variant="dark"
-
+                header="Bootstrap 4"
-                <p slot="lead" class="lead">
+              >
+                <p slot="lead" class="c-lead">
                   This is a simple hero unit, a simple jumbotron-style component for
                   calling extra attention to featured content or information.
                 </p>
-                <hr class="my-4">
+                <hr class="c-my-4">
                 <p>
                   It uses utility classes for typography and spacing to space content
                   out within the larger container.

src/views/base/ListGroups.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
         <CCol md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap list group </strong>
-              <!-- <div class="card-header-actions">
+              <!-- <div class="c-card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
+                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="text-muted">docs</small>
+                  <small class="c-text-muted">docs</small>
                 </a>
               </div> -->
             </CCardHeader>
@@ -105,15 +105,21 @@
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Cras justo odio
                   <CBadge variant="primary" pill>14</CBadge>
                 </CListGroupItem>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Dapibus ac facilisis in
                   <CBadge variant="primary" pill>2</CBadge>
                 </CListGroupItem>
-                <CListGroupItem class="d-flex justify-content-between align-items-center">
+                <CListGroupItem
+                  class="c-d-flex c-justify-content-between c-align-items-center"
+                >
                   Morbi leo risus
                   <CBadge variant="primary" pill>1</CBadge>
                 </CListGroupItem>
@@ -169,7 +175,7 @@
         </CCol>
       </CRow>
       <CRow>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -178,13 +184,13 @@
             </CCardHeader>
             <CCardBody>
               <CCardGroup deck>
-                <CCard header="<b>Card with list group</b>">
+                <CCard headerHtml="<b>Card with list group</b>">
                   <CListGroup>
                     <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                     <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                     <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
                   </CListGroup>
-                  <p class="card-text mt-2">
+                  <p class="c-card-text c-mt-2">
                     Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
                     nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
                     consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -217,38 +223,42 @@
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem href="#" active class="flex-column align-items-start">
+                <CListGroupItem
-                  <div class="d-flex w-100 justify-content-between">
+                  href="#"
-                    <h5 class="mb-1">List group item heading</h5>
+                  active
+                  class="c-flex-column c-align-items-start"
+                >
+                  <div class="c-d-flex c-w-100 c-justify-content-between">
+                    <h5 class="c-mb-1">List group item heading</h5>
                     <small>3 days ago</small>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
                   <small>Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem href="#" class="flex-column align-items-start">
+                <CListGroupItem href="#" class="c-flex-column c-align-items-start">
-                  <div class="d-flex w-100 justify-content-between">
+                  <div class="c-d-flex c-w-100 c-justify-content-between">
-                    <h5 class="mb-1">List group item heading</h5>
+                    <h5 class="c-mb-1">List group item heading</h5>
-                    <small class="text-muted">3 days ago</small>
+                    <small class="c-text-muted">3 days ago</small>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="text-muted">Donec id elit non mi porta.</small>
+                  <small class="c-text-muted">Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem href="#" disabled class="flex-column align-items-start">
+                <CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
-                  <div class="d-flex w-100 justify-content-between">
+                  <div class="c-d-flex c-w-100 c-justify-content-between">
-                    <h5 class="mb-1">Disabled List group item</h5>
+                    <h5 class="c-mb-1">Disabled List group item</h5>
-                    <small class="text-muted">3 days ago</small>
+                    <small class="c-text-muted">3 days ago</small>
                   </div>
-                  <p class="mb-1">
+                  <p class="c-mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas
                     sed diam eget risus varius blandit.
                   </p>
-                  <small class="text-muted">Donec id elit non mi porta.</small>
+                  <small class="c-text-muted">Donec id elit non mi porta.</small>
                 </CListGroupItem>
               </CListGroup>
             </CCardBody>

src/views/base/Navbars.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <!-- <CCard>
         <CNavbar toggleable="md" light variant="light">
           <CNavbarToggle class="hehe" @click="test2 = !test2"/>
@@ -19,12 +19,12 @@
               <DefaultHeaderDropdownAccnt/>
             </CNavbarNav>
             <CNavbarNav class="ml-auto">
-              <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
+              <CDropdown right class="c-nav-item " toggle-classes="c-nav-link">
-                <CDropdownItem><i class="fa fa-file" /> Projects
+                <CDropdownItem><i class="cui-file" /> Projects
                   <CBadge variant="primary">32</CBadge>
                 </CDropdownItem>
-                <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
+                <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
-                <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
+                <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
               </CDropdown>
             </CNavbarNav>
           </CCollapse>
@@ -34,36 +34,40 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navbar </strong>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
+            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
-          <CNavbar toggleable="md" type="dark" variant="info">
+          <CNavbar
+            toggleable="md"
+            type="dark"
+            variant="info"
+            sticky
+          >
             <CNavbarToggle @click="show=!show"/>
             <CNavbarBrand href="#">NavBar</CNavbarBrand>
-            <CCollapse :show="show"
+            <CCollapse :show="show" navbar>
-                       navbar
-            >
               <CNavbarNav>
                 <CNavItem href="#">Link</CNavItem>
                 <CNavItem href="#" disabled>Disabled</CNavItem>
               </CNavbarNav>
 
               <!-- Right aligned nav items -->
-              <CNavbarNav class="ml-auto">
+              <CNavbarNav class="c-ml-auto">
                 <CForm inline>
                   <CFormInput
-                    class="mr-sm-2"
+                    class="c-mr-sm-2"
                     placeholder="Search"
                     size="sm"
                   />
-                  <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
+                  <CButton size="sm" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
                 </CForm>
 
-                <CDropdown buttonContent="Lang"
+                <CDropdown
+                  button-html="Lang"
                   nav
                   placement="bottom-end"
                 >
@@ -73,8 +77,9 @@
                     <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
 
-                <CDropdown nav
+                <CDropdown
-                           buttonContent="<em>User</em>"
+                  nav
+                  buttonHtml="<em>User</em>"
                   placement="bottom-end"
                 >
                   <CDropdownItem>Profile</CDropdownItem>
@@ -94,7 +99,7 @@
           <!-- Image and text -->
           <CNavbar variant="faded" light>
             <CNavbarBrand href="#">
-              <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
+              <img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
               BootstrapVue
             </CNavbarBrand>
           </CNavbar>
@@ -111,7 +116,7 @@
             <CNavbarBrand>BootstrapVue</CNavbarBrand>
             <CCollapse :show="navbarText" navbar>
               <CNavbarNav>
-                <span class="navbar-text">Navbar text</span>
+                <span class="c-navbar-text">Navbar text</span>
               </CNavbarNav>
             </CCollapse>
           </CNavbar>
@@ -130,13 +135,21 @@
                 <CNavItem href="#">Home</CNavItem>
                 <CNavItem href="#">Link</CNavItem>
                 <!-- Navbar dropdowns -->
-                <CDropdown buttonContent="Lang" right nav>
+                <CDropdown
+                  button-html="Lang"
+                  right
+                  nav
+                >
                   <CDropdownItem>EN</CDropdownItem>
                   <CDropdownItem>ES</CDropdownItem>
                   <CDropdownItem>RU</CDropdownItem>
                   <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
-                <CDropdown buttonContent="User" right nav>
+                <CDropdown
+                  button-html="User"
+                  right
+                  nav
+                >
                   <CDropdownItem>Account</CDropdownItem>
                   <CDropdownItem>Settings</CDropdownItem>
                 </CDropdown>
@@ -154,11 +167,11 @@
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
-                class="mr-sm-2"
+                class="c-mr-sm-2"
                 placeholder="Search"
                 size="sm"
               />
-              <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
+              <CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
             </CForm>
           </CNavbar>
         </CCardBody>
@@ -172,7 +185,7 @@
           <CNavbar type="light" variant="light">
             <CForm inline>
               <CFormInput
-                class="mr-sm-2"
+                class="c-mr-sm-2"
                 placeholder="Username"
               />
             </CForm>

src/views/base/Navs.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
             <CLink
               href="#"
-              class="card-header-action"
+              class="c-card-header-action"
             >
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </CLink>
           </div> -->
         </CCardHeader>
@@ -31,7 +31,7 @@
         <CCardBody>
           <CNav>
             <CNavItem active>
-              <i class="icon-basket-loaded"></i>
+              <i class="cui-basket-loaded"></i>
             </CNavItem>
             <CNavItem>
               Link
@@ -119,12 +119,13 @@
           <CNav pills>
             <CNavItem active>Active</CNavItem>
             <CNavItem>Link</CNavItem>
-            <CDropdown id="nav7_ddown"
+            <CDropdown
+              id="nav7_ddown"
               nav
               placement="bottom-end"
-                       buttonContent="Dropdown"
+              button-content="Dropdown"
             >
-              <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
+              <!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
               <CDropdownItem>one</CDropdownItem>
               <CDropdownItem>two</CDropdownItem>
               <CDropdownDivider/>
@@ -141,7 +142,7 @@
         </CCardHeader>
         <CCardBody>
           <CRow>
-            <CCol cols="3" class="m-0">
+            <CCol col="3" class="c-m-0">
               <CNav vertical pills >
                 <CNavItem active>Active</CNavItem>
                 <CNavItem>Link</CNavItem>

src/views/base/Paginations.vue

@@ -1,27 +1,38 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
+          <i class="fa fa-align-justify"></i>
-          <!-- <div class="card-header-actions">
+          <strong> Bootstrap Pagination</strong>
-            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
+          <!-- <div class="c-card-header-actions">
-              <small class="text-muted">docs</small>
+            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>
-          <CPagination v-model="currentPage" :pages="10"/>
+          <CPagination
+            :active-page.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <h6>Small</h6>
-          <CPagination size="sm" v-model="currentPage" :pages="10"/>
+          <CPagination
+            size="sm"
+            :active-page.sync="currentPage"
+            :pages="10"/>
           <br>
 
-          <div class="d-sm-down-none">
+          <div>
             <h6>Large</h6>
-            <CPagination size="lg" v-model="currentPage" :pages="10"/>
+            <CPagination
+              size="lg"
+              :active-page.sync="currentPage"
+              :pages="10"
+            />
             <br>
           </div>
 
@@ -30,20 +41,32 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
+          <i class="fa fa-align-justify"></i>
+          <strong> Pagination </strong>
           <small>alignment</small>
         </CCardHeader>
         <CCardBody>
           <h6>Left alignment (default)</h6>
-          <CPagination v-model="currentPage" :pages="10"/>
+          <CPagination
+            :active-page.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <h6>Center alignment</h6>
-          <CPagination align="center" :pages="10" v-model="currentPage"/>
+          <CPagination
+            align="center"
+            :pages="10"
+            :active-page.sync="currentPage"
+          />
           <br>
 
           <h6>Right (end) alignment</h6>
-          <CPagination align="end" v-model="currentPage" :pages="10"/>
+          <CPagination
+            align="end"
+            :active-page.sync="currentPage"
+            :pages="10"
+          />
           <br>
 
           <div>currentPage: {{currentPage}}</div>
@@ -60,11 +83,6 @@ export default {
     return {
       currentPage: 3,
     }
-  },
+  }
-  // methods: {
-  //   linkGen (pageNum) {
-  //     return '#page/' + pageNum + '/foobar'
-  //   },
-  // }
 }
 </script>

src/views/base/Popovers.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Popovers</strong>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
+            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CRow>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -26,8 +26,8 @@
                 </CButton>
               </div>
             </CCol>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover="{
@@ -35,12 +35,12 @@
                     content: 'I start <strong>open</strong>',
                     active: true
                   }"
-                  text="Hover me"
+                  textHtml="Hover me"
                 />
               </div>
             </CCol>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="my-3 text-center">
+              <div class="c-my-3 c-text-center">
                 <CButton
                   variant="primary"
                   v-c-popover.click="{
@@ -62,11 +62,11 @@
           <strong> Popovers </strong>
           <small>placement</small>
         </CCardHeader>
-        <CCardBody class="my-3">
+        <CCardBody class="c-my-3">
           <CRow>
             <CCol
               md="4"
-              class="py-4 text-center"
+              class="c-py-4 c-text-center"
               v-for="placement in placements"
               :key="placement"
             >

src/views/base/ProgressBars.vue

@@ -1,24 +1,24 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Progress</strong>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
+            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CProgress :value="counter" :max="max" show-progress animated></CProgress>
-          <CProgress class="mt-1" :max="max" show-value>
+          <CProgress class="c-mt-1" :max="max" show-value>
             <CProgressBar :value="counter*(6/10)" variant="success"/>
             <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
             <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
           </CProgress>
-          <CButton class="mt-4" @click="clicked">Click me</CButton>
+          <CButton class="c-mt-4" @click="clicked">Click me</CButton>
         </CCardBody>
       </CCard>
       <CCard>
@@ -27,68 +27,97 @@
         </CCardHeader>
         <CCardBody>
           <h6>No label</h6>
-          <CProgress :value="value" :max="max2" class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" class="c-mb-3"/>
           <h6>Value label</h6>
-          <CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
           <h6>Progress label</h6>
-          <CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
           <h6>Value label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
           <h6>Progress label with precision</h6>
-          <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>width</small>
         </CCardHeader>
         <CCardBody>
           <h6>Default width</h6>
-          <CProgress :value="value3" class="mb-3"></CProgress>
+          <CProgress :value="value3" class="c-mb-3"/>
           <h6>Custom widths</h6>
-          <CProgress :value="value3" class="w-75 mb-2"></CProgress>
+          <CProgress :value="value3" class="c-w-75 c-mb-2"/>
-          <CProgress :value="value3" class="w-50 mb-2"></CProgress>
+          <CProgress :value="value3" class="c-w-50 c-mb-2"/>
-          <CProgress :value="value3" class="w-25"></CProgress>
+          <CProgress :value="value3" class="c-w-25"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>height</small>
         </CCardHeader>
         <CCardBody>
           <h6>Default height</h6>
-          <CProgress :value="value3" show-progress class="mb-3"></CProgress>
+          <CProgress :value="value3" show-progress class="c-mb-3"/>
           <h6>Custom heights</h6>
-          <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
+          <CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
-          <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
+          <CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
-          <CProgress height="2px" :value="value3"></CProgress>
+          <CProgress height="2px" :value="value3"/>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>variants</small>
         </CCardHeader>
         <CCardBody>
-          <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
+          <div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
-            <div class="col-sm-2">{{ bar.variant }}:</div>
+            <div class="c-col-sm-2">{{ bar.variant }}:</div>
-            <div class="col-sm-10 pt-1">
+            <div class="c-col-sm-10 c-pt-1">
-              <CProgress :value="bar.value"
+              <CProgress
+                :value="bar.value"
                 :variant="bar.variant"
                 :key="bar.variant"
-              ></CProgress>
+              />
             </div>
           </div>
         </CCardBody>
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>striped</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
+          <CProgress
-          <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
+            :value="25"
-          <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
+            variant="success"
-          <CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="50"
+            variant="info"
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="75"
+            variant="warning"
+            :striped="striped"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="100"
+            variant="danger"
+            :striped="striped"
+            class="c-mb-2"
+          />
           <CButton variant="secondary" @click="striped = !striped">
             {{ striped ? 'Remove' : 'Add'}} Striped
           </CButton>
@@ -96,13 +125,38 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>animated</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
+          <CProgress
-          <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
+            :value="25"
-          <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
+            variant="success"
-          <CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="50"
+            variant="info"
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="75"
+            variant="warning"
+            striped
+            :animated="animate"
+            class="c-mb-2"
+          />
+          <CProgress
+            :value="100"
+            variant="danger"
+            :animated="animate"
+            class="c-mb-3"
+          />
           <CButton variant="secondary" @click="animate = !animate">
             {{ animate ? 'Stop' : 'Start'}} Animation
           </CButton>
@@ -110,28 +164,30 @@
       </CCard>
       <CCard>
         <CCardHeader>
-          <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
+          <i class="fa fa-align-justify"></i>
+          <strong> Progress </strong>
+          <small>multiple bars</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress :max="max3" class="mb-3">
+          <CProgress :max="max3" class="c-mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress show-progress :max="max3" class="mb-3">
+          <CProgress show-progress :max="max3" class="c-mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress show-value striped :max="max3" class="mb-3">
+          <CProgress show-value striped :max="max3" class="c-mb-3">
-            <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
+            <CProgressBar variant="primary" :value="values[0]"/>
-            <CProgressBar variant="success" :value="values[1]"></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]"/>
-            <CProgressBar variant="info" :value="values[2]"></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]"/>
           </CProgress>
-          <CProgress :max="max3" class="mb-3">
+          <CProgress :max="max3" class="c-mb-3">
-            <CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
+            <CProgressBar variant="primary" :value="values[0]" show-progress/>
-            <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
+            <CProgressBar variant="success" :value="values[1]" animated show-progress/>
-            <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
+            <CProgressBar variant="info" :value="values[2]" striped show-progress/>
           </CProgress>
         </CCardBody>
       </CCard>
@@ -168,8 +224,8 @@ export default {
   methods: {
     clicked () {
       this.counter = Math.random() * this.max
-      console.log('Change progress to ' +
+      // console.log('Change progress to ' +
-          Math.round(this.counter * 100) / 100)
+      //     Math.round(this.counter * 100) / 100)
     }
   },
   mounted () {

src/views/base/Switches.vue

@@ -1,19 +1,27 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
-
     <CRow>
       <CCol xs="12" md="6">
         <CCard v-if="true">
           <CCardHeader>
             <h5>
                Radio switches
-              <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
+              <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
-              <CBadge variant="danger" class="float-right">NEW</CBadge>
+              <CBadge variant="danger" class="c-float-right">NEW</CBadge>
             </h5>
           </CCardHeader>
           <CCardBody>
-            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
+            <!-- <CSwitch
-            <CSwitch class="mx-1"
+              :checked.sync="test11"
+              true-value="yes"
+              false-value="no"
+              id="alt"
+              name="lg"
+              required
+            /> -->
+            <!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
+            <CSwitch
+              class="c-mx-1"
               :key="key"
               :variant="variant"
               shape="3d"
@@ -21,9 +29,9 @@
               v-bind="labelIcon"
               type="radio"
               name="radio"
-                     v-model="radio"
+              :checked.sync="radio"
               :value="variant"
-                     v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
+              v-for="(variant, key) in variants"
             />
           </CCardBody>
         </CCard>
@@ -37,29 +45,22 @@
             <CBadge variant="primary">{{checker}}</CBadge>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1"
+            <CSwitch
+              class="c-mx-1"
               variant="primary"
-              checked
               name="switch1"
-              v-model="checker"
+              :checked.sync="checker"
-              value="someValue"
+              true-value="yes"
-              trueValue="yes"
+              false-value="no"
-              falseValue="no"
             />
-            <CSwitch class="mx-1"
+            <CSwitch
-              variant="primary"
+              class="c-mx-1"
-              checked
-              name="switch1"
-              :checked="true"
-              value="someValue"
-            />
-            <CSwitch class="mx-1"
               :variant="variant"
               checked
               :key="key"
-                     v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
+              v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
             />
-            <CSwitch class="mx-1" variant="primary" disabled />
+            <CSwitch class="c-mx-1" variant="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -69,15 +70,15 @@
             Switch pills
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked  shape="pill"/>
+            <CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked  shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="mx-1" variant="primary" disabled  shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -87,15 +88,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="success" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="warning" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="info" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="danger" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="light" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="dark" checked   shape="3d" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -105,15 +106,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
+            <CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -123,15 +124,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -141,15 +142,15 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
+            <CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -159,15 +160,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -177,15 +178,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="primary" disabled   shape="3d" outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -195,15 +196,15 @@
             Switch <small><code>outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="c-mx-1" variant="primary" checked outline />
-            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline />
-            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="c-mx-1" variant="success" checked outline />
-            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="c-mx-1" variant="warning" checked outline />
-            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="c-mx-1" variant="info" checked outline />
-            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="c-mx-1" variant="danger" checked outline />
-            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="c-mx-1" variant="light" checked outline />
-            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="c-mx-1" variant="dark" checked outline />
-            <CSwitch class="mx-1" variant="primary" outline disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -213,15 +214,15 @@
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline  shape="pill"/>
+            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline  shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline  shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -231,15 +232,15 @@
             Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -249,15 +250,15 @@
             Switch <small><code>outline="alt"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -267,15 +268,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked />
+            <CSwitch class="c-mx-1" variant="primary" checked />
-            <CSwitch class="mx-1" variant="secondary" checked />
+            <CSwitch class="c-mx-1" variant="secondary" checked />
-            <CSwitch class="mx-1" variant="success" checked />
+            <CSwitch class="c-mx-1" variant="success" checked />
-            <CSwitch class="mx-1" variant="warning" checked />
+            <CSwitch class="c-mx-1" variant="warning" checked />
-            <CSwitch class="mx-1" variant="info" checked />
+            <CSwitch class="c-mx-1" variant="info" checked />
-            <CSwitch class="mx-1" variant="danger" checked />
+            <CSwitch class="c-mx-1" variant="danger" checked />
-            <CSwitch class="mx-1" variant="light" checked />
+            <CSwitch class="c-mx-1" variant="light" checked />
-            <CSwitch class="mx-1" variant="dark" checked />
+            <CSwitch class="c-mx-1" variant="dark" checked />
-            <CSwitch class="mx-1" variant="primary" disabled />
+            <CSwitch class="c-mx-1" variant="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -285,15 +286,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -303,15 +304,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline />
+            <CSwitch class="c-mx-1" variant="primary" checked outline />
-            <CSwitch class="mx-1" variant="secondary" checked outline />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline />
-            <CSwitch class="mx-1" variant="success" checked outline />
+            <CSwitch class="c-mx-1" variant="success" checked outline />
-            <CSwitch class="mx-1" variant="warning" checked outline />
+            <CSwitch class="c-mx-1" variant="warning" checked outline />
-            <CSwitch class="mx-1" variant="info" checked outline />
+            <CSwitch class="c-mx-1" variant="info" checked outline />
-            <CSwitch class="mx-1" variant="danger" checked outline />
+            <CSwitch class="c-mx-1" variant="danger" checked outline />
-            <CSwitch class="mx-1" variant="light" checked outline />
+            <CSwitch class="c-mx-1" variant="light" checked outline />
-            <CSwitch class="mx-1" variant="dark" checked outline />
+            <CSwitch class="c-mx-1" variant="dark" checked outline />
-            <CSwitch class="mx-1" variant="primary" outline disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -321,15 +322,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -339,15 +340,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -357,15 +358,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -376,15 +377,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
+            <CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>shape
       </CCol>
@@ -394,15 +395,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -412,15 +413,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -430,15 +431,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -448,15 +449,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -466,15 +467,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -484,14 +485,14 @@
           <CCardHeader>
             Sizes
           </CCardHeader>
-          <CCardBody class="p-0">
+          <CCardBody class="c-p-0">
             <CTable
               hover
               striped
-              class="table-align-middle mb-0"
+              class="c-table-align-middle c-mb-0"
               :items="items"
               :fields="fields"
-              noSorting
+              no-sorting
             >
               <template #example="{item}">
                 <td>
@@ -521,6 +522,9 @@ export default {
   name: 'switches',
   data () {
     return {
+      variants:[
+        'primary','secondary','warning','success','info','danger','light','dark'
+      ],
       fields: [
         {key: 'size'},
         {key: 'example'},
@@ -534,13 +538,14 @@ export default {
       checker: 'yes',
       radio: 'primary',
       labelIcon: {
-        dataOn: '\u2713',
+        labelOn: '\u2713',
-        dataOff: '\u2715'
+        labelOff: '\u2715'
       },
       labelTxt: {
-        dataOn: 'yes',
+        labelOn: 'yes',
-        dataOff: 'no'
+        labelOff: 'no'
-      }
+      },
+
     }
   }
 }

src/views/base/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <CCard :header="caption" bodyWrapper>
+  <CCard :header="caption" body-wrapper>
     <CTable
       :hover="hover"
       :striped="striped"
@@ -10,9 +10,9 @@
       :fields="fields"
       :per-page="small ? 10 : 5"
       :dark="dark"
-      noSorting
+      no-sorting
     >
-      <template v-slot:status="{item}">
+      <template #status="{item}">
         <td>
           <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
         </td>
@@ -22,7 +22,6 @@
 </template>
 
 <script>
-import items from '../users/UsersData'
 export default {
   name: 'TableWrapper',
   props: {

src/views/base/Tables.vue

@@ -1,27 +1,31 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
       <CCol sm="12">
-        <CCard header="CTable power presentation" bodyWrapper>
+        <CCard header-html="CTable power presentation" body-wrapper>
-          <CTable :items="items.slice(0)"
+          <CTable
+            :items="getItems()"
             :fields="fields"
-                  :perPage="6"
+            :per-page="6"
-                  indexColumn
+            index-column
-                  filterRow
+            filter-row
-                  optionsRow
+            options-row
-                  loadings
             hover
-                  :defaultSorter="{ name:'username', direction:'desc'}"
+            :default-column-filter="{ role:'staff' }"
-                  :defaultColumnFilter="{ role:'staff' }"
+            :default-sorters="['username', 'asc']"
+            :default-filter="2012"
+            dark-header
+            footer
+            pagination
           >
-              <template #index-col="{index}">
+            <template #index-column="{index}">
               <td
                 @click="toggleDetails(index)"
                 style="cursor:pointer"
-                  class="text-center"
+                class="c-text-center"
               >
                 <i
-                    class="icons font-lg d-block cui-chevron-right"
+                  class="c-icons c-font-lg c-d-block cui-chevron-right"
                   style="transition: transform 0.4s"
                   :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
                 ></i>
@@ -35,13 +39,13 @@
               </td>
             </template>
             <template #show_details="{item, index}">
-                <td class="py-2">
+              <td class="c-py-2">
                 <CButton
                   variant="outline-primary"
                   square
                   size="sm"
                   @click="toggleDetails(index)"
-                    :text="details.includes(index) ? 'Hide' : 'Show'"
+                  :text-html="details.includes(index) ? 'Hide' : 'Show'"
                 />
               </td>
             </template>
@@ -53,20 +57,25 @@
               </CCollapse>
             </template>
           </CTable>
+          <!-- <CPagination
+            v-show="pages > 1"
+            :activePage.sync="page"
+            :pages="pages"
+          /> -->
         </CCard>
       </CCol>
     </CRow>
     <!-- <CRow>
       <CCol sm="12">
-        <CCard header="test2">
+        <CCard header-html="test2">
           <CTable
             :items="items.slice(0)"
             :fields="fields"
-            :perPage="5"
+            :per-page="5"
-            indexCol="onlyCleaner"
+            index-col="onlyCleaner"
-            filterRow
+            filter-row
-            optionsRow="onlyFiltesr"
+            options-row="onlyFiltesr"
-            :paginationProps="{align:'center'}"
+            :pagination-props="{align:'center'}"
           >
               <td slot="status" slot-scope="{item}">
                 <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
@@ -83,7 +92,7 @@
           :items="getItems()"
           caption="<i class='fa fa-align-justify'></i> Simple Table"
         />
-      </CCol><!--/.col-->
+      </CCol>
 
       <CCol lg="6">
         <CTableWrapper
@@ -91,8 +100,8 @@
           striped
           caption="<i class='fa fa-align-justify'></i> Striped Table"
         />
-      </CCol><!--/.col-->
+      </CCol>
-    </CRow><!--/.row-->
+    </CRow>
 
     <CRow>
       <CCol lg="6">
@@ -101,7 +110,7 @@
           small
           caption="<i class='fa fa-align-justify'></i> Condensed Table"
         />
-      </CCol><!--/.col-->
+      </CCol>
 
       <CCol lg="6">
         <CTableWrapper
@@ -110,8 +119,8 @@
           bordered
           caption="<i class='fa fa-align-justify'></i> Bordered Table"
         />
-      </CCol><!--/.col-->
+      </CCol>
-    </CRow><!--/.row-->
+    </CRow>
 
     <CRow>
       <CCol sm="12">
@@ -152,7 +161,7 @@ import CTableWrapper from './Table.vue'
 
 const fields = [
   { key: 'username', _style:'width:40%' },
-  { key: 'registered' , style:'width:20%' },
+  'registered',
   { key: 'role', _style:'width:20%;' },
   { key: 'status', _style:'width:20%;' },
   { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
@@ -164,11 +173,11 @@ const items = [
   {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
+  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-table-success'},
   {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
   {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
+  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
   {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
   {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
   {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -180,7 +189,7 @@ const items = [
   {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
   {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
   {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
+  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-table-danger'},
   {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
   {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
@@ -194,7 +203,7 @@ export default {
       fields: fields,
       page: 1,
       pages: null,
-      details: []
+      details: [],
     }
   },
   methods: {

src/views/base/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
       <CCol xs="12" lg="6">
         <CCard>
@@ -7,22 +7,22 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="mt-1">
+            <CTabs add-tab-classes="c-mt-1">
-              <CTab title="Home" active>
+              <CTab title-html="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Profile" >
+              <CTab title-html="Profile" >
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Disabled" disabled>
+              <CTab title-html="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -41,23 +41,23 @@
           <CCardBody>
             <CTabs
               pills
-              addNavClasses="mb-3"
+              add-nav-classes="c-mb-3"
             >
-              <CTab title="Home" active>
+              <CTab title-html="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Profile" >
+              <CTab title-html="Profile" >
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Disabled" disabled>
+              <CTab title-html="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -74,10 +74,10 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs addTabClasses="mt-1">
+            <CTabs add-tab-classes="c-mt-1">
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i>
+                  <i class="cui-calculator"></i>
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -87,7 +87,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i>
+                  <i class="cui-basket-loaded"></i>
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -97,7 +97,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i>
+                  <i class="cui-pie-chart"></i>
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -109,19 +109,16 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12" lg="6">
+      <!-- <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs
+            <CTabs add-tab-classes="c-mt-1">
-              addTabClasses="mt-1"
-              card
-            >
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i> {{tabs[0]}}
+                  <i class="cui-calculator"></i> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -131,7 +128,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -141,7 +138,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-pie-chart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -152,22 +149,17 @@
             </CTabs>
           </CCardBody>
         </CCard>
-      </CCol>
+      </CCol> -->
       <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
             Tabs vertical
           </CCardHeader>
           <CCardBody>
-            <CTabs
+            <CTabs pills vertical="4">
-              card
-              pills
-              vertical="4"
-              v-model="tabIndex[1]"
-            >
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i> {{tabs[0]}}
+                  <i class="cui-calculator"></i> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -177,7 +169,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -187,7 +179,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-pie-chart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -208,7 +200,6 @@ export default {
   name: 'tabs',
   data () {
     return {
-      tabIndex: [0, 0],
       tabs: [
         'Calculator',
         'Shopping cart',

src/views/base/Tooltips.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Tooltips </strong>
           <small><code>v-c-tooltip</code> directive</small>
-          <!-- <div class="card-header-actions">
+          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
+            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
+              <small class="c-text-muted">docs</small>
             </a>
           </div> -->
         </CCardHeader>
         <CCardBody>
           <CRow>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
                   Hover Me
                 </CButton>
               </div>
             </CCol>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip="{content: 'I start open!', active:true }">
                   Hover me
                 </CButton>
               </div>
             </CCol>
-            <CCol cols="4">
+            <CCol col="4">
-              <div class="text-center my-3">
+              <div class="c-text-center c-my-3">
                 <CButton v-c-tooltip.click="
                   'I am showing on click and hiding on click outside tooltip!'
                 ">
@@ -47,11 +47,11 @@
           <small>placement</small>
         </CCardHeader>
         <CCardBody>
-          <div class="my-3">
+          <div class="c-my-3">
             <CRow>
               <CCol
                 md="4"
-                class="py-4 text-center"
+                class="c-py-4 c-text-center"
                 v-for="placement in placements"
                 :key="placement"
               >

src/views/buttons/BrandButtons.vue

@@ -1,304 +1,220 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
-      <CCol cols="12">
+      <CCol col="12">
         <CCard>
           <CCardHeader>
             <strong>Brand Button</strong>
           </CCardHeader>
+          <CCardBody>
+            <small>Usage </small>
+            <code>
+              &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
+            </code>
+            <hr/>
+            <h6>
+              Size Small
+              <small>Add <code>size="sm"</code></small>
+            </h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="sm"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
+            </p>
+            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="lg"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                  <span>{{brandName}}</span>
+                </CButton>
+              </template>
+            </p>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol col="12">
+        <CCard>
+          <CCardHeader>
+            <strong>Brand Button </strong> <small>Icons only</small>
+          </CCardHeader>
+          <CCardBody>
+            <small>Usage </small>
+              <code>
+                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
+              </code>
+            <hr/>
+            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="sm"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
+            </p>
+            <h6>Size Normal</h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
+            </p>
+            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
+            <p>
+              <template v-for="(brandName, key) in $options.brands">
+                <CButton
+                  :name="brandName"
+                  size="lg"
+                  :key="key"
+                  :variant="brandName"
+                >
+                  <CIcon :name="brandName"/>
+                </CButton>
+              </template>
+            </p>
+          </CCardBody>
+        </CCard>
+      </CCol>
+
+      <CCol col="12">
+        <CCard>
+          <CCardHeader>
+            <strong>Brand Button </strong> <small>Text only</small>
+          </CCardHeader>
           <CCardBody>
             <small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
             <hr/>
             <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
             <p>
-              <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+                <CButton
-              <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+                  size="sm"
-              <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+                  :key="key"
-              <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+                  :variant="brandName"
-              <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+                >
-              <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+                </CButton>
-              <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              </template>
-              <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+                <CButton
-              <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+                  :key="key"
-              <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+                  :variant="brandName"
-              <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+                >
-              <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+                </CButton>
-              <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+              </template>
-              <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
-              <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
             <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
             <p>
-              <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
+              <template v-for="(brandName, key) in $options.brands">
-              <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
+                <CButton
-              <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
+                  :name="brandName"
-              <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
+                  size="lg"
-              <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
+                  :key="key"
-              <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
+                  :variant="brandName"
-              <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
+                >
-              <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
+                  <span>{{brandName}}</span>
-              <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
+                </CButton>
-              <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
+              </template>
-              <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
             </p>
           </CCardBody>
         </CCard>
-      </CCol><!--/.col-->
+      </CCol>
-      <CCol cols="12">
+    </CRow>
-        <CCard>
-          <CCardHeader>
-            <strong>Brand Button </strong> <small>Icons only</small>
-          </CCardHeader>
-          <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
-            <hr/>
-            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-            <p>
-              <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-            </p>
-            <h6>Size Normal</h6>
-            <p>
-              <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-            </p>
-            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-            <p>
-              <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
-              <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
-              <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
-              <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
-              <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
-              <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
-              <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
-              <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
-              <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
-              <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
-              <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
-              <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
-              <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
-              <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
-              <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
-              <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
-              <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
-              <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
-              <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
-              <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
-              <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
-              <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
-              <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
-              <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
-              <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
-            </p>
-          </CCardBody>
-        </CCard>
-      </CCol><!--/.col-->
-
-      <CCol cols="12">
-        <CCard>
-          <CCardHeader>
-            <strong>Brand Button </strong> <small>Text only</small>
-          </CCardHeader>
-          <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
-            <hr/>
-            <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
-            <p>
-              <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-            </p>
-            <h6>Size Normal</h6>
-            <p>
-              <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-            </p>
-            <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
-            <p>
-              <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
-              <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
-              <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
-              <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
-              <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
-              <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
-              <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
-              <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
-              <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
-              <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
-              <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
-              <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
-              <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
-              <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
-              <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
-              <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
-              <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
-              <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
-              <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
-              <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
-              <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
-              <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
-              <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
-              <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
-              <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
-            </p>
-          </CCardBody>
-        </CCard>
-      </CCol><!--/.col-->
-    </CRow><!--/.row-->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'brand-buttons'
+  name: 'brand-buttons',
+  brands: [
+    'facebook',
+    'twitter',
+    'linkedin',
+    'flickr',
+    'tumblr',
+    'xing',
+    'github',
+    'stack-overflow',
+    'youtube',
+    'dribbble',
+    'instagram',
+    'pinterest',
+    'vk',
+    'yahoo',
+    'behance',
+    'reddit',
+    'vimeo'
+  ]
+  // labels: {
+  //   facebook: 'Facebook',
+  //   twitter: 'Twitter',
+  //   linkedin: 'LinkedIn',
+  //   flickr: 'Flickr',
+  //   tumblr: 'Tumblr',
+  //   xing: 'Xing',
+  //   github: 'Github',
+  //   'stack-overflow': 'StackOverflow',
+  //   youtube: 'YouTube',
+  //   dribbble: 'Dribbble',
+  //   instagram: 'Instagram',
+  //   pinterest: 'Pinterest',
+  //   vk: 'VK',
+  //   yahoo: 'Yahoo',
+  //   behance: 'Behance',
+  //   reddit: 'Reddit',
+  //   vimeo: 'Vimeo'
+  // }
 }
 </script>
 
 <style scoped lang="css">
-.btn {
+.c-btn {
   margin-bottom: 4px;
+  margin-right: 6px;
+}
+.c-btn svg + span {
+  margin-left: 8px;
 }
 </style>

src/views/buttons/ButtonGroups.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12" >
+        <CCol col="12" >
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
+              <i class="fa fa-align-justify"></i>
+              <strong> Bootstrap button group</strong>
               <!-- <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -19,14 +20,14 @@
                   <CButton>Two</CButton>
                   <CButton>Three</CButton>
                   <CButton>Four</CButton>
-                  <CButton class="d-sm-down-none">Five</CButton>
+                  <CButton class="c-d-sm-down-none">Five</CButton>
                 </CButtonGroup>
                 <br><br>
                 <CButtonGroup>
-                  <CButton class="d-sm-down-none" variant="success">Success</CButton>
+                  <CButton class="c-d-sm-down-none" variant="success">Success</CButton>
                   <CButton variant="info">Info</CButton>
                   <CButton variant="warning">Warn</CButton>
-                  <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
+                  <CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
                   <CButton variant="danger">Danger</CButton>
                   <CButton variant="link">Link</CButton>
                 </CButtonGroup>
@@ -34,10 +35,11 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
+              <i class="fa fa-align-justify"></i>
+              <strong> Button group </strong>sizing
             </CCardHeader>
             <CCardBody>
               <div>
@@ -62,7 +64,7 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
@@ -70,15 +72,15 @@
             <CCardBody>
               <div>
                 <CButtonGroup>
-                  <CButton class="d-sm-down-none">Button 1</CButton>
+                  <CButton class="c-d-sm-down-none">Button 1</CButton>
-                  <CButton class="d-sm-down-none">Button 2</CButton>
+                  <CButton class="c-d-sm-down-none">Button 2</CButton>
                   <CDropdown right text="Menu" variant="success">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownDivider></CDropdownDivider>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButton class="d-sm-down-none">Button 3</CButton>
+                  <CButton class="c-d-sm-down-none">Button 3</CButton>
                   <CDropdown right split text="Split Menu" variant="info">
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
@@ -90,10 +92,11 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
+              <i class="fa fa-align-justify"></i>
+              <strong> Button group </strong>vertical variation
             </CCardHeader>
             <CCardBody>
               <div>
@@ -106,7 +109,7 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -120,45 +123,48 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CButtonToolbar key-nav aria-label="Toolbar with button groups">
+                <CButtonToolbar aria-label="Toolbar with button groups">
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
-                    <CButton class="d-sm-down-none">&laquo;</CButton>
+                    <CButton class="c-d-sm-down-none">&laquo;</CButton>
                     <CButton>&lsaquo;</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
-                    <CButton class="d-sm-down-none">Edit</CButton>
+                    <CButton class="c-d-sm-down-none">Edit</CButton>
                     <CButton>Undo</CButton>
                     <CButton>Redo</CButton>
                   </CButtonGroup>
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
                     <CButton>&rsaquo;</CButton>
-                    <CButton class="d-sm-down-none">&raquo;</CButton>
+                    <CButton class="c-d-sm-down-none">&raquo;</CButton>
                   </CButtonGroup>
                 </CButtonToolbar>
               </div>
-              <hr class="d-sm-down-none"/>
+              <hr class="c-d-sm-down-none"/>
               <div>
-                <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
+                <CButtonToolbar
-                  <CButtonGroup size="sm" class="mx-1">
+                  aria-label="Toolbar with button groups and input groups"
+                  class="c-d-sm-down-none"
+                >
+                  <CButtonGroup size="sm" class="c-mx-1">
                     <CButton>New</CButton>
                     <CButton>Edit</CButton>
                   </CButtonGroup>
                   <CFormInput
-                    class="mb-0 w-25 mx-1"
+                    class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prepend="$"
+                    prepend-html="$"
-                    append=".00"
+                    append-html=".00"
                     value="100"
                   />
                   <CFormSelect
-                    class="mb-0 w-25 mx-1"
+                    class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prepend="Size"
+                    prepend-html="Size"
                     value="Medium"
                     :options="['Large','Medium','Small']"
                     custom
                   />
-                  <CButtonGroup  size="sm" class="mx-1">
+                  <CButtonGroup size="sm" class="c-mx-1">
                     <CButton>Save</CButton>
                     <CButton>Cancel</CButton>
                   </CButtonGroup>
@@ -167,21 +173,21 @@
               <hr/>
               <div>
                 <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
-                  <CButtonGroup class="mx-1 d-sm-down-none">
+                  <CButtonGroup class="c-mx-1 c-d-sm-down-none">
                     <CButton>New</CButton>
                     <CButton>Edit</CButton>
                     <CButton>Undo</CButton>
                   </CButtonGroup>
                   <CDropdown
-                    class="mx-1"
+                    class="c-mx-1"
                     placement="bottom-end"
-                    buttonContent="Menu"
+                    button-content="Menu"
                   >
                     <CDropdownItem>Item 1</CDropdownItem>
                     <CDropdownItem>Item 2</CDropdownItem>
                     <CDropdownItem>Item 3</CDropdownItem>
                   </CDropdown>
-                  <CButtonGroup class="mx-1">
+                  <CButtonGroup class="c-mx-1">
                     <CButton>Save</CButton>
                     <CButton>Cancel</CButton>
                   </CButtonGroup>

src/views/buttons/Dropdowns.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -15,7 +15,7 @@
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
+                <CDropdown button-html="Dropdown Button" class="c-m-2">
                   <CDropdownItem>First Action</CDropdownItem>
                   <CDropdownItem>Second Action</CDropdownItem>
                   <CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
                 </CDropdown>
               </div>
               <!-- <div>
-                <CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
+                <CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
                   <CDropdownItem>I'm a button</CDropdownItem>
                   <CDropdownItem>I'm also a button</CDropdownItem>
                   <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -33,7 +33,7 @@
                 </CDropdown>
               </div> -->
               <div>
-                <CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
+                <CDropdown button-html="Dropdown with divider" class="c-m-2">
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second item</CDropdownItem>
                   <CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
+                <CDropdown button-html="Dropdown with header" class="c-m-2">
                   <CDropdownHeader>Dropdown header</CDropdownHeader>
                   <CDropdownItem>First item</CDropdownItem>
                   <CDropdownItem>Second Item</CDropdownItem>
@@ -50,23 +50,29 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>positioning</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
+                <CDropdown
+                  button-html="Left align"
+                  variant="primary"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-right"
+                <CDropdown
                   placement="bottom-end"
-                           buttonContent="Right align"
+                  button-html="Right align"
                   variant="primary"
-                           class="m-2"
+                  class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -74,10 +80,10 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-dropup"
+                <CDropdown
-                           buttonContent="Drop-Up"
+                  button-html="Drop-Up"
                   variant="info"
-                           class="m-2"
+                  class="c-m-2"
                   dropup
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -86,10 +92,10 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-offset"
+                <CDropdown
                   :offset="25"
-                           buttonContent="Offset Dropdown"
+                  button-html="Offset Dropdown"
-                           class="m-2"
+                  class="c-m-2"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -97,7 +103,11 @@
                 </CDropdown>
               </div>
               <div>
-                <CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
+                <CDropdown
+                  split
+                  button-html="Split Dropdown"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -108,16 +118,19 @@
         </CCol>
       </CRow>
       <CRow>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>hidden caret</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown variant="link"
+                <CDropdown
+                  variant="link"
                   size="lg"
-                           buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
+                  buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
                   no-caret
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -128,30 +141,49 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>sizing</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
+                <CDropdown
+                  size="lg"
+                  button-html="Large"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
+                <CDropdown
+                  size="lg"
+                  split
+                  button-html="Large Split"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
                 <br>
-                <CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
+                <CDropdown
+                  size="sm"
+                  button-html="Small"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
                 </CDropdown>
-                <CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
+                <CDropdown
+                  size="sm"
+                  split button-html="Small Split"
+                  class="c-m-2"
+                >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
                   <CDropdownItem>Something else here...</CDropdownItem>
@@ -162,78 +194,132 @@
         </CCol>
       </CRow>
       <CRow>
-        <CCol cols="12" md="6">
+        <!-- <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small>headers and accessibility</small>
             </CCardHeader>
             <CCardBody>
               <div>
-                <CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
+                <CDropdown
-                  <div role="group" aria-lableledby="header1">
+                  button-html="Dropdown ARIA" variant="primary"
-                    <CDropdownHeader id="header1">Groups</CDropdownHeader>
+                  class="c-m-2"
-                    <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
+                >
-                    <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
+                  <div role="group">
+                    <CDropdownHeader>Groups</CDropdownHeader>
+                    <CDropdownItem>Add</CDropdownItem>
+                    <CDropdownItem>Delete</CDropdownItem>
                   </div>
-                  <div role="group" aria-lableledby="header2">
+                  <div role="group">
-                    <CDropdownHeader id="header2">Users</CDropdownHeader>
+                    <CDropdownHeader>Users</CDropdownHeader>
-                    <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
+                    <CDropdownItem>Add</CDropdownItem>
-                    <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
+                    <CDropdownItem>Delete</CDropdownItem>
                   </div>
                   <CDropdownDivider></CDropdownDivider>
-                  <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
+                  <CDropdownItem>
+                    Something <strong>not</strong> associated with user
+                  </CDropdownItem>
                 </CDropdown>
               </div>
             </CCardBody>
           </CCard>
-        </CCol>
+        </CCol> -->
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
+              <i class="fa fa-align-justify"></i>
+              <strong> Dropdown </strong>
+              <small><code>variant</code></small>
             </CCardHeader>
             <CCardBody>
-              <CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Primary"
+                variant="primary"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Secondary"
+                variant="secondary"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Success"
+                variant="success"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Warning"
+                variant="warning"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Danger"
+                variant="danger"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Info"
+                variant="info"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Light"
+                variant="light"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Dark"
+                variant="dark"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>
               </CDropdown>
-              <CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
+              <CDropdown
+                size="sm"
+                button-html="Link"
+                variant="link"
+                class="c-m-0"
+              >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
                 <CDropdownItem>Third Action</CDropdownItem>

src/views/buttons/StandardButtons.vue

@@ -1,103 +1,103 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CCard >
       <CCardHeader>
         <strong>Standard buttons</strong>
       </CCardHeader>
       <CCardBody>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -109,97 +109,97 @@
       </CCardHeader>
       <CCardBody>
         <p>
-          Use <code>variant="outline-*"</code> prop
+          Use <code>outline</code> prop
         </p>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-primary">Primary</CButton>
+            <CButton block outline variant="primary">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-secondary">Secondary</CButton>
+            <CButton block outline variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-success">Success</CButton>
+            <CButton block outline variant="success">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-warning">Warning</CButton>
+            <CButton block outline variant="warning">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-danger">Danger</CButton>
+            <CButton block outline variant="danger">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-info">Info</CButton>
+            <CButton block outline variant="info">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-light">Light</CButton>
+            <CButton block outline variant="light">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-dark">Dark</CButton>
+            <CButton block outline variant="dark">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
+            <CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
+            <CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
+            <CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-primary" disabled>Primary</CButton>
+            <CButton block outline variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-secondary" disabled>Secondary</CButton>
+            <CButton block outline variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-success" disabled>Success</CButton>
+            <CButton block outline variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-warning" disabled>Warning</CButton>
+            <CButton block outline variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-danger" disabled>Danger</CButton>
+            <CButton block outline variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-info" disabled>Info</CButton>
+            <CButton block outline variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-light" disabled>Light</CButton>
+            <CButton block outline variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
-            <CButton block variant="outline-dark" disabled>Dark</CButton>
+            <CButton block outline variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -212,95 +212,95 @@
           Use
           <code>ghost</code> prop for ghost buttons.
         </p>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0" >
             <CButton block ghost variant="primary">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="secondary">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="success">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="warning">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="danger">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="info">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="light">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="dark">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="primary" disabled>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="secondary" disabled>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="success" disabled>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="warning" disabled>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="danger" disabled>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="info" disabled>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="light" disabled>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block ghost variant="dark" disabled>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
         </CRow>
       </CCardBody>
     </CCard>
@@ -313,99 +313,99 @@
           Use
           <code>square</code> prop for square buttons.
         </p>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" square>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" square>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" square>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" square>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" square>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" square>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" square>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" square>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" square>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" square disabled>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" square disabled>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" square disabled>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" square disabled>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" square disabled>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" square disabled>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" square disabled>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" square disabled>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" square disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -420,99 +420,99 @@
           Use
           <code>pill</code> prop for pill buttons.
         </p>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" pill>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" pill>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" pill>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" pill>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" pill>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" pill>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" pill>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" pill>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" pill>Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Active State
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="12" xl class="mb-3 mb-xl-0">
+          <CCol col="12" xl class="c-mb-3 c-mb-xl-0">
             Disabled
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="primary" pill disabled>Primary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="secondary" pill disabled>Secondary</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="success" pill disabled>Success</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="warning" pill disabled>Warning</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="danger" pill disabled>Danger</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="info" pill disabled>Info</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="light" pill disabled>Light</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="dark" pill disabled>Dark</CButton>
           </CCol>
-          <CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+          <CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
             <CButton block variant="link" pill disabled>Link</CButton>
           </CCol>
         </CRow>
@@ -524,63 +524,63 @@
       </CCardHeader>
       <CCardBody>
         <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol cols="2" xl class="mb-3 mb-xl-0">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Small
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary" size="sm">Standard Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
-            <CButton variant="outline-secondary" size="sm">Outline Button</CButton>
+            <CButton outline variant="secondary" size="sm">Outline Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton size="sm" ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" size="sm" square>Square Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" size="sm" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="2" xl class="mb-3 mb-xl-0">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Normal
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary">Standard Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
-            <CButton variant="outline-secondary" >Outline Button</CButton>
+            <CButton outline variant="secondary" >Outline Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton ghost variant="success">Ghost Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" square>Square Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" pill>Pill Button</CButton>
           </CCol>
         </CRow>
-        <CRow class="align-items-center mt-3">
+        <CRow class="c-align-items-center c-mt-3">
-          <CCol cols="2" xl class="mb-3 mb-xl-0">
+          <CCol col="2" xl class="c-mb-3 c-mb-xl-0">
             Large
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="primary" size="lg">Standard Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
-            <CButton variant="outline-secondary" size="lg">Outline Button</CButton>
+            <CButton outline variant="secondary" size="lg">Outline Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton ghost variant="success" size="lg">Ghost Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="warning" size="lg" square>Square Button</CButton>
           </CCol>
-          <CCol cols="2" class="mb-3 mb-xl-0 text-center">
+          <CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
             <CButton variant="danger" size="lg" pill>Pill Button</CButton>
           </CCol>
         </CRow>
@@ -591,30 +591,30 @@
         <strong>With Icons</strong>
       </CCardHeader>
       <CCardBody>
-        <CRow class="align-items-center">
+        <CRow class="c-align-items-center">
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="primary">
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
+              <i class="cui-lightbulb"></i>&nbsp;Standard Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="secondary" outline>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
+              <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="success">
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
+              <i class="cui-lightbulb"></i>&nbsp;Ghost Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="warning" square>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
+              <i class="cui-lightbulb"></i>&nbsp;Square Button
             </CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="danger" pill>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
+              <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
           </CCol>
         </CRow>
@@ -626,23 +626,23 @@
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
-          <CCol sm xs="12" class="text-center mt-3">
+          <CCol sm xs="12" class="c-text-center c-mt-3">
-            <CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -670,12 +670,12 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
+            <CButton size="lg" outline variant="secondary" block>Block level button</CButton>
-            <CButton size="lg" variant="outline-primary" block>Block level button</CButton>
+            <CButton size="lg" outline variant="primary" block>Block level button</CButton>
-            <CButton size="lg" variant="outline-success" block>Block level button</CButton>
+            <CButton size="lg" outline variant="success" block>Block level button</CButton>
-            <CButton size="lg" variant="outline-info" block>Block level button</CButton>
+            <CButton size="lg" outline variant="info" block>Block level button</CButton>
-            <CButton size="lg" variant="outline-warning" block>Block level button</CButton>
+            <CButton size="lg" outline variant="warning" block>Block level button</CButton>
-            <CButton size="lg" variant="outline-danger" block>Block level button</CButton>
+            <CButton size="lg" outline variant="danger" block>Block level button</CButton>
             <CButton size="lg" ghost variant="info" block>Block level button</CButton>
           </CCardBody>
         </CCard>

src/views/charts/BarExample.vue

@@ -1,40 +0,0 @@
-<script>
-import { Bar } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  name: 'BarExample',
-  extends: Bar,
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datasets: [
-          {
-            label: 'GitHub Commits',
-            backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-          }
-        ]
-      },
-      {
-        responsive: true,
-        maintainAspectRatio: true,
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips,
-          intersect: true,
-          mode: 'index',
-          position: 'nearest',
-          callbacks: {
-            labelColor: function (tooltipItem, chart) {
-              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-            }
-          }
-        }
-      }
-    )
-  }
-}
-</script>

src/views/charts/CChartBarExample.vue

@@ -0,0 +1,26 @@
+<template>
+  <CChartBar
+    :datasets="defaultDatasets"
+    labels="months"
+  />
+</template>
+
+<script>
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartBarExample',
+  components: { CChartBar },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/charts/CChartBarSimple.vue

@@ -0,0 +1,69 @@
+<template>
+  <CChartBar
+    :datasets="computedDatasets"
+    :options="computedOptions"
+    :labels="labels"
+  />
+</template>
+
+<script>
+import { CChartBar } from '@coreui/coreui-vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+export default {
+  name: 'CChartBarSimple',
+  components: { CChartBar },
+  props: {
+    ...CChartBar.props,
+    backgroundColor: {
+      type: String,
+      default: 'rgba(0,0,0,.2)'
+    },
+    pointHoverBackgroundColor: String,
+    dataPoints: {
+      type: Array,
+      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean
+  },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          data: this.dataPoints,
+          backgroundColor: getColor(this.backgroundColor),
+          pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
+          label: this.label
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false,
+            categoryPercentage: 1,
+            barPercentage: 0.5
+          }],
+          yAxes: [{
+            display: false
+          }]
+        }
+      }
+    },
+    computedDatasets () {
+      return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
+    },
+    computedOptions () {
+      return deepObjectsMerge(this.defaultOptions, this.options || {})
+    }
+  }
+}
+</script>

src/views/charts/CChartDoughnutExample.vue

@@ -0,0 +1,30 @@
+<template>
+  <CChartDoughnut
+    :datasets="defaultDatasets"
+    :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
+  />
+</template>
+
+<script>
+import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartDoughnutExample',
+  components: { CChartDoughnut },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/charts/CChartLineExample.vue

@@ -0,0 +1,31 @@
+<template>
+  <CChartLine
+    :datasets="defaultDatasets"
+    labels="months"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartLineExample',
+  components: { CChartLine },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'Data One',
+          backgroundColor: 'rgb(228,102,81,0.9)',
+          data: [30, 39, 10, 50, 30, 70, 35]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: 'rgb(0,216,255,0.9)',
+          data: [39, 80, 40, 35, 40, 20, 45]
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/charts/CChartLineSimple.vue

@@ -0,0 +1,133 @@
+<template>
+  <CChartLine
+    :datasets="computedDatasets"
+    :options="computedOptions"
+    :labels="labels"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+export default {
+  name: 'CChartLineSimple',
+  components: { CChartLine },
+  props: {
+    ...CChartLine.props,
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,.55)'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    dataPoints: {
+      type: Array,
+      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    label: {
+      type: String,
+      default: 'Sales'
+    },
+    pointed: Boolean
+  },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          data: this.dataPoints,
+          borderColor: getColor(this.borderColor),
+          backgroundColor: getColor(this.backgroundColor),
+          pointBackgroundColor: this.pointBackgroundColor,
+          pointHoverBackgroundColor: getColor(this.borderColor),
+          label: this.label
+        }
+      ]
+    },
+    pointBackgroundColor () {
+      if (this.backgroundColor === 'transparent') {
+        return '#fff'
+      } else {
+        return getColor(this.backgroundColor)
+      }
+    },
+    pointedOptions () {
+      return {
+        scales: {
+          xAxes: [
+            {
+              offset: true,
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: 'transparent'
+              },
+              ticks: {
+                fontSize: 2,
+                fontColor: 'transparent'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: false,
+              ticks: {
+                display: false,
+                min: Math.min.apply(Math, this.dataPoints) - 5,
+                max: Math.max.apply(Math, this.dataPoints) + 5
+              }
+            }
+          ]
+        },
+        elements: {
+          line: {
+            borderWidth: 1
+          },
+          point: {
+            radius: 4,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    straightOptions () {
+      return {
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        elements: {
+          line: {
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    },
+    defaultOptions () {
+      const options = this.pointed ? this.pointedOptions : this.straightOptions
+      return Object.assign({}, options, {
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        }
+      })
+    },
+    computedDatasets () {
+      return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
+    },
+    computedOptions () {
+      return deepObjectsMerge(this.defaultOptions, this.options || {})
+    }
+  }
+}
+</script>

src/views/charts/CChartPieExample.vue

@@ -0,0 +1,30 @@
+<template>
+  <CChartPie
+    :datasets="defaultDatasets"
+    :labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
+  />
+</template>
+
+<script>
+import { CChartPie } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartPieExample',
+  components: { CChartPie },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/charts/CChartPolarAreaExample.vue

@@ -0,0 +1,48 @@
+<template>
+  <CChartPolarArea
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="[
+      'Eating', 'Drinking', 'Sleeping', 'Designing',
+      'Coding', 'Cycling', 'Running'
+    ]"
+  />
+</template>
+
+<script>
+import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
+
+export default {
+  name: 'CChartPolarAreaExample',
+  components: { CChartPolarArea },
+  computed: {
+    defaultDatasets () {
+      return [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+        aspectRatio: 1.5
+      }
+    }
+  }
+}
+</script>

src/views/charts/CChartRadarExample.vue

@@ -1,13 +1,23 @@
+<template>
+  <CChartRadar
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="[
+      'Eating', 'Drinking', 'Sleeping', 'Designing',
+      'Coding', 'Cycling', 'Running'
+    ]"
+  />
+</template>
+
 <script>
-import { Radar } from '@coreui/vue/src/extends/BaseCharts'
+import { CChartRadar } from '@coreui/coreui-vue-chartjs'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
-  extends: Radar,
+  name: 'CChartRadarExample',
-  mounted () {
+  components: { CChartRadar },
-    this.renderChart({
+  computed: {
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+    defaultDatasets () {
-      datasets: [
+      return [
         {
           label: '2017',
           backgroundColor: 'rgba(179,181,198,0.2)',
@@ -16,6 +26,7 @@ export default {
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
           pointHoverBorderColor: 'rgba(179,181,198,1)',
+          tooltipLabelColor: 'rgba(179,181,198,1)',
           data: [65, 59, 90, 81, 56, 55, 40]
         },
         {
@@ -26,25 +37,16 @@ export default {
           pointBorderColor: '#fff',
           pointHoverBackgroundColor: '#fff',
           pointHoverBorderColor: 'rgba(255,99,132,1)',
+          tooltipLabelColor: 'rgba(255,99,132,1)',
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    }, {
+    },
-      responsive: true,
+    defaultOptions () {
-      maintainAspectRatio: true,
+      return {
-      tooltips: {
+        aspectRatio: 1.5
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
       }
     }
   }
-    })
-  }
 }
 </script>

src/views/charts/DoughnutExample.vue

@@ -1,24 +0,0 @@
-<script>
-import { Doughnut } from '@coreui/vue/src/extends/BaseCharts'
-
-export default {
-  name: 'DoughnutExample',
-  extends: Doughnut,
-  mounted () {
-    this.renderChart({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    }, {responsive: true, maintainAspectRatio: true})
-  }
-}
-</script>

src/views/charts/LineExample.vue

@@ -1,48 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  components: {
-    hexToRgba,
-    CustomTooltips
-  },
-  extends: Line,
-  mounted () {
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [
-          {
-            label: 'Data One',
-            backgroundColor: hexToRgba('#E46651', 90),
-            data: [30, 39, 10, 50, 30, 70, 35]
-          },
-          {
-            label: 'Data Two',
-            backgroundColor: hexToRgba('#00D8FF', 90),
-            data: [39, 80, 40, 35, 40, 20, 45]
-          }
-        ]
-      },
-      {
-        responsive: true,
-        maintainAspectRatio: true,
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips,
-          intersect: true,
-          mode: 'index',
-          position: 'nearest',
-          callbacks: {
-            labelColor: function (tooltipItem, chart) {
-              return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-            }
-          }
-        }
-      }
-    )
-  }
-}
-</script>

src/views/charts/MainChartExample.vue

@@ -0,0 +1,190 @@
+<template>
+  <CChartLine
+    :datasets="defaultDatasets"
+    :options="defaultOptions"
+    :labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
+  />
+</template>
+
+<script>
+import { CChartLine } from '@coreui/coreui-vue-chartjs'
+import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+
+function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+export default {
+  components: {
+    CChartLine
+  },
+  computed: {
+    defaultDatasets () {
+      const brandSuccess = getColor('success') || '#4dbd74'
+      const brandInfo = getColor('info') || '#20a8d8'
+      const brandDanger = getColor('danger') || '#f86c6b'
+
+      let elements = 27
+      const data1 = []
+      const data2 = []
+      const data3 = []
+
+      for (let i = 0; i <= elements; i++) {
+        data1.push(random(50, 200))
+        data2.push(random(80, 100))
+        data3.push(65)
+      }
+      return [
+        {
+          label: 'My First dataset',
+          backgroundColor: hexToRgba(brandInfo, 10),
+          borderColor: brandInfo,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data1
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandSuccess,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 2,
+          data: data2
+        },
+        {
+          label: 'My Third dataset',
+          backgroundColor: 'transparent',
+          borderColor: brandDanger,
+          pointHoverBackgroundColor: '#fff',
+          borderWidth: 1,
+          borderDash: [8, 5],
+          data: data3
+        }
+      ]
+    },
+    defaultOptions () {
+      return {
+
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines: {
+              drawOnChartArea: false
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+              max: 250
+            },
+            gridLines: {
+              display: true
+            }
+          }]
+        },
+        elements: {
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3
+          }
+        }
+      }
+    }
+  },
+  // mounted () {
+  //   const brandSuccess = getStyle('--success') || '#4dbd74'
+  //   const brandInfo = getStyle('--info') || '#20a8d8'
+  //   const brandDanger = getStyle('--danger') || '#f86c6b'
+  //
+  //   let elements = 27
+  //   const data1 = []
+  //   const data2 = []
+  //   const data3 = []
+  //
+  //   for (let i = 0; i <= elements; i++) {
+  //     data1.push(random(50, 200))
+  //     data2.push(random(80, 100))
+  //     data3.push(65)
+  //   }
+  //   this.renderChart({
+  //     datasets: [
+  //       {
+  //         label: 'My First dataset',
+  //         backgroundColor: hexToRgba(brandInfo, 10),
+  //         borderColor: brandInfo,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 2,
+  //         data: data1
+  //       },
+  //       {
+  //         label: 'My Second dataset',
+  //         backgroundColor: 'transparent',
+  //         borderColor: brandSuccess,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 2,
+  //         data: data2
+  //       },
+  //       {
+  //         label: 'My Third dataset',
+  //         backgroundColor: 'transparent',
+  //         borderColor: brandDanger,
+  //         pointHoverBackgroundColor: '#fff',
+  //         borderWidth: 1,
+  //         borderDash: [8, 5],
+  //         data: data3
+  //       }
+  //     ]
+  //   }, {
+  //     tooltips: {
+  //       enabled: false,
+  //       custom: CustomTooltips,
+  //       intersect: true,
+  //       mode: 'index',
+  //       position: 'nearest',
+  //       callbacks: {
+  //         labelColor: function (tooltipItem, chart) {
+  //           return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+  //         }
+  //       }
+  //     },
+  //     maintainAspectRatio: false,
+  //     legend: {
+  //       display: false
+  //     },
+  //     scales: {
+  //       xAxes: [{
+  //         gridLines: {
+  //           drawOnChartArea: false
+  //         }
+  //       }],
+  //       yAxes: [{
+  //         ticks: {
+  //           beginAtZero: true,
+  //           maxTicksLimit: 5,
+  //           stepSize: Math.ceil(250 / 5),
+  //           max: 250
+  //         },
+  //         gridLines: {
+  //           display: true
+  //         }
+  //       }]
+  //     },
+  //     elements: {
+  //       point: {
+  //         radius: 0,
+  //         hitRadius: 10,
+  //         hoverRadius: 4,
+  //         hoverBorderWidth: 3
+  //       }
+  //     }
+  //   })
+  // }
+}
+</script>

src/views/charts/PieExample.vue

@@ -1,23 +0,0 @@
-<script>
-import { Pie } from '@coreui/vue/src/extends/BaseCharts'
-
-export default {
-  extends: Pie,
-  mounted () {
-    this.renderChart({
-      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-      datasets: [
-        {
-          backgroundColor: [
-            '#41B883',
-            '#E46651',
-            '#00D8FF',
-            '#DD1B16'
-          ],
-          data: [40, 20, 80, 10]
-        }
-      ]
-    }, {responsive: true, maintainAspectRatio: true})
-  }
-}
-</script>

src/views/charts/PolarAreaExample.vue

@@ -1,48 +0,0 @@
-<script>
-import { PolarArea } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: PolarArea,
-  mounted () {
-    this.renderChart({
-      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: 'rgba(179,181,198,0.2)',
-          pointBackgroundColor: 'rgba(179,181,198,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(179,181,198,1)',
-          data: [65, 59, 90, 81, 56, 55, 40]
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'rgba(255,99,132,0.2)',
-          pointBackgroundColor: 'rgba(255,99,132,1)',
-          pointBorderColor: '#fff',
-          pointHoverBackgroundColor: '#fff',
-          pointHoverBorderColor: 'rgba(255,99,132,1)',
-          data: [28, 48, 40, 19, 96, 27, 100]
-        }
-      ]
-    }, {
-      responsive: true,
-      maintainAspectRatio: false,
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].backgroundColor }
-          }
-        }
-      }
-    })
-  }
-}
-</script>

src/views/charts/index.js

@@ -0,0 +1,19 @@
+import CChartLineSimple from './CChartLineSimple'
+import CChartBarSimple from './CChartBarSimple'
+import CChartLineExample from './CChartLineExample'
+import CChartBarExample from './CChartBarExample'
+import CChartDoughnutExample from './CChartDoughnutExample'
+import CChartRadarExample from './CChartRadarExample'
+import CChartPieExample from './CChartPieExample'
+import CChartPolarAreaExample from './CChartPolarAreaExample'
+
+export {
+  CChartLineSimple,
+  CChartBarSimple,
+  CChartLineExample,
+  CChartBarExample,
+  CChartDoughnutExample,
+  CChartRadarExample,
+  CChartPieExample,
+  CChartPolarAreaExample
+}

src/views/dashboard/CalloutChartExample.vue

@@ -1,67 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  components: {
-    CustomTooltips
-  },
-  extends: Line,
-  props: ['data', 'height', 'width', 'variant'],
-  mounted () {
-    this.renderChart({
-      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-      datasets: [
-        {
-          backgroundColor: 'transparent',
-          borderColor: this.getVariant(this.variant) || '#c2cfd6',
-          data: this.data
-        }
-      ]
-    }, {
-      responsive: true,
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
-          }
-        }
-      },
-      maintainAspectRatio: true,
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false
-        }]
-      },
-      elements: {
-        line: {
-          borderWidth: 2
-        },
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      },
-      legend: {
-        display: false
-      }
-    })
-  },
-  methods: {
-    getVariant (val, el) {
-      return val[0] === '#' ? val : getStyle(`--${val}`, el)
-    }
-  }
-}
-</script>

src/views/dashboard/CardBarChartExample.vue

@@ -1,45 +0,0 @@
-<script>
-import { Bar } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: Bar,
-  props: ['height'],
-  mounted () {
-    const datasets4 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: 'rgba(255,255,255,.3)',
-        borderColor: 'transparent',
-        data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
-      }
-    ]
-    this.renderChart(
-      {
-        labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
-        datasets: datasets4
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false,
-            categoryPercentage: 1,
-            barPercentage: 0.5
-          }],
-          yAxes: [{
-            display: false
-          }]
-        }
-      }
-    )
-  }
-}
-</script>

src/views/dashboard/CardLine1ChartExample.vue

@@ -1,72 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const brandPrimary = getStyle('--primary') || '#20a8d8'
-    const datasets1 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: brandPrimary,
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [65, 59, 84, 84, 51, 55, 40]
-      }
-    ]
-
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets1
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, datasets1[0].data) - 5,
-                max: Math.max.apply(Math, datasets1[0].data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>

src/views/dashboard/CardLine2ChartExample.vue

@@ -1,73 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const brandInfo = getStyle('--light-blue') || '#63c2de'
-    const datasets2 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: brandInfo,
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [1, 18, 9, 17, 34, 22, 11]
-      }
-    ]
-
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets2
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                color: 'transparent',
-                zeroLineColor: 'transparent'
-              },
-              ticks: {
-                fontSize: 2,
-                fontColor: 'transparent'
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: false,
-              ticks: {
-                display: false,
-                min: Math.min.apply(Math, datasets2[0].data) - 5,
-                max: Math.max.apply(Math, datasets2[0].data) + 5
-              }
-            }
-          ]
-        },
-        elements: {
-          line: {
-            tension: 0.00001,
-            borderWidth: 1
-          },
-          point: {
-            radius: 4,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>

src/views/dashboard/CardLine3ChartExample.vue

@@ -1,53 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  extends: Line,
-  props: ['height', 'width'],
-  mounted () {
-    const datasets3 = [
-      {
-        label: 'My First dataset',
-        backgroundColor: 'rgba(255,255,255,.2)',
-        borderColor: 'rgba(255,255,255,.55)',
-        data: [78, 81, 80, 45, 34, 12, 40]
-      }
-    ]
-    this.renderChart(
-      {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: datasets3
-      },
-      {
-        tooltips: {
-          enabled: false,
-          custom: CustomTooltips
-        },
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            display: false
-          }],
-          yAxes: [{
-            display: false
-          }]
-        },
-        elements: {
-          line: {
-            borderWidth: 2
-          },
-          point: {
-            radius: 0,
-            hitRadius: 10,
-            hoverRadius: 4
-          }
-        }
-      }
-    )
-  }
-}
-</script>

src/views/dashboard/MainChartExample.vue

@@ -1,103 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-function random (min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
-
-export default {
-  extends: Line,
-  props: ['height'],
-  mounted () {
-    const brandSuccess = getStyle('--success') || '#4dbd74'
-    const brandInfo = getStyle('--info') || '#20a8d8'
-    const brandDanger = getStyle('--danger') || '#f86c6b'
-
-    let elements = 27
-    const data1 = []
-    const data2 = []
-    const data3 = []
-
-    for (let i = 0; i <= elements; i++) {
-      data1.push(random(50, 200))
-      data2.push(random(80, 100))
-      data3.push(65)
-    }
-    this.renderChart({
-      labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          backgroundColor: hexToRgba(brandInfo, 10),
-          borderColor: brandInfo,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: data1
-        },
-        {
-          label: 'My Second dataset',
-          backgroundColor: 'transparent',
-          borderColor: brandSuccess,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: data2
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: brandDanger,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: data3
-        }
-      ]
-    }, {
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips,
-        intersect: true,
-        mode: 'index',
-        position: 'nearest',
-        callbacks: {
-          labelColor: function (tooltipItem, chart) {
-            return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
-          }
-        }
-      },
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          gridLines: {
-            drawOnChartArea: false
-          }
-        }],
-        yAxes: [{
-          ticks: {
-            beginAtZero: true,
-            maxTicksLimit: 5,
-            stepSize: Math.ceil(250 / 5),
-            max: 250
-          },
-          gridLines: {
-            display: true
-          }
-        }]
-      },
-      elements: {
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      }
-    })
-  }
-}
-</script>

src/views/dashboard/SocialBoxChartExample.vue

@@ -1,70 +0,0 @@
-<script>
-import { Line } from '@coreui/vue/src/extends/BaseCharts'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-
-export default {
-  name: 'SocialBoxChartExample',
-  extends: Line,
-  props: {
-    data: {
-      type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
-    },
-    height: {
-      type: String,
-      default: '100'
-    },
-    label:{
-      type: String,
-      default: 'label|string'
-    },
-    labels:{
-      type: Array,
-      default () {
-        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
-      }
-    }
-  },
-  mounted () {
-    this.renderChart({
-      labels: this.labels,
-      datasets: [
-        {
-          label: this.label,
-          backgroundColor: 'rgba(255,255,255,.1)',
-          borderColor: 'rgba(255,255,255,.55)',
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 2,
-          data: this.data
-        }
-      ]
-    }, {
-      tooltips: {
-        enabled: false,
-        custom: CustomTooltips
-      },
-      responsive: true,
-      maintainAspectRatio: false,
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false
-        }]
-      },
-      elements: {
-        point: {
-          radius: 0,
-          hitRadius: 10,
-          hoverRadius: 4,
-          hoverBorderWidth: 3
-        }
-      }
-    })
-  }
-}
-</script>

src/views/icons/Brands.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <CCard>
+      <CCardHeader>
+        <i class="cui-globe"></i>Font Awesome brand icons
+      </CCardHeader>
+      <CCardBody>
+        <CRow class="c-text-center">
+          <CCol class="c-mb-5" col="12">
+            <!-- For using the flags inline with text add the classes
+            <code>.flag-icon</code> and <code>.flag-icon-xx</code>
+            (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
+            span. If you want to have a squared version flag then add the class
+            flag-icon-squared as well. -->
+          </CCol>
+          <template v-for="(brand, brandName) in $options.brands">
+            <CCol
+              class="c-mb-5"
+              col="3"
+              sm="2"
+              :key="brandName"
+            >
+              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <div>{{brandName}}</div>
+            </CCol>
+          </template>
+        </CRow>
+      </CCardBody>
+    </CCard>
+  </div>
+</template>
+
+<script>
+import { iconSet as brands } from '@coreui/icons/brands'
+export default {
+  name: 'Brands',
+  brands
+}
+</script>

src/views/icons/CoreUIIcons.vue

@@ -1,414 +1,429 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CCard >
       <CCardHeader>
-        <i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
+        <i class="cui-pencil"></i>CoreUI Icons
-        <div class="card-header-actions">
+        <CBadge variant="info">New</CBadge>
-          <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
+        <div class="c-card-header-actions">
-            <small class="text-muted">Github</small>
+          <a
+            href="https://github.com/coreui/coreui-icons"
+            rel="noreferrer noopener"
+            target="_blank"
+            class="c-card-header-action"
+          >
+            <small class="c-text-muted">Github</small>
           </a>
         </div>
       </CCardHeader>
       <CCardBody>
-        <CRow class="text-center">
+        <!-- <CRow class="c-text-center c-mb-5">
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <template v-for="(name, key) in $options.iconNames">
-            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
+            <CCol :key="key" col="6" sm="4" md="3" xl="2" >
+              <CIcon :name="name" width="24" class="c-mt-4"/>
+              <div>{{name}}</div>
+            </CCol>
+          </template>
+        </CRow>
+         -->
+        <CRow class="c-text-center ">
+          <CCol col="6" sm="4" md="3" xl="2">
+            <i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>account-logout</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
+            <i class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>action-redo</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
+            <i class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>action-undo</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
+            <i class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>align-center</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
+            <i class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>align-left</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
+            <i class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>align-right</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
+            <i class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>arrow-bottom</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
+            <i class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>arrow-left</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
+            <i class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>arrow-right</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
+            <i class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>arrow-top</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban icons font-2xl d-block mt-4"></i>
+            <i class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>ban</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
+            <i class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>basket-loaded</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell icons font-2xl d-block mt-4"></i>
+            <i class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>bell</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold icons font-2xl d-block mt-4"></i>
+            <i class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>bold</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
+            <i class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>bookmark</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
+            <i class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>briefcase</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
+            <i class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>british-pound</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush icons font-2xl d-block mt-4"></i>
+            <i class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>brush</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
+            <i class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>calculator</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
+            <i class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>calendar</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart icons font-2xl d-block mt-4"></i>
+            <i class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cart</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart icons font-2xl d-block mt-4"></i>
+            <i class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>chart</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check icons font-2xl d-block mt-4"></i>
+            <i class="cui-check c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>check</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
+            <i class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>chevron-bottom</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
+            <i class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>chevron-left</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
+            <i class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>chevron-right</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
+            <i class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>chevron-top</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
+            <i class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>circle-check</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
+            <i class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>circle-x</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
+            <i class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cloud</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
+            <i class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cloud-download</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
+            <i class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cloud-upload</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code icons font-2xl d-block mt-4"></i>
+            <i class="cui-code c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>code</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog icons font-2xl d-block mt-4"></i>
+            <i class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cog</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
+            <i class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>comment-square</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
+            <i class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>credit-card</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
+            <i class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>cursor</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
+            <i class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>dashboard</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete icons font-2xl d-block mt-4"></i>
+            <i class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>delete</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
+            <i class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>dollar</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop icons font-2xl d-block mt-4"></i>
+            <i class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>drop</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
+            <i class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>envelope-closed</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
+            <i class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>envelope-letter</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
+            <i class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>envelope-open</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro icons font-2xl d-block mt-4"></i>
+            <i class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>euro</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file icons font-2xl d-block mt-4"></i>
+            <i class="cui-file c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>file</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe icons font-2xl d-block mt-4"></i>
+            <i class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>globe</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph icons font-2xl d-block mt-4"></i>
+            <i class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>graph</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home icons font-2xl d-block mt-4"></i>
+            <i class="cui-home c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>home</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
+            <i class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>inbox</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info icons font-2xl d-block mt-4"></i>
+            <i class="cui-info c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>info</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic icons font-2xl d-block mt-4"></i>
+            <i class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>italic</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
+            <i class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>justify-center</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
+            <i class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>justify-left</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
+            <i class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>justify-right</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
+            <i class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>laptop</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers icons font-2xl d-block mt-4"></i>
+            <i class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>layers</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
+            <i class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>lightbulb</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list icons font-2xl d-block mt-4"></i>
+            <i class="cui-list c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>list</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
+            <i class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>location-pin</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
+            <i class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>lock-locked</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
+            <i class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>lock-unlocked</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
+            <i class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>magnifying-glass</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map icons font-2xl d-block mt-4"></i>
+            <i class="cui-map c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>map</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
+            <i class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>monitor</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon icons font-2xl d-block mt-4"></i>
+            <i class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>moon</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note icons font-2xl d-block mt-4"></i>
+            <i class="cui-note c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>note</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options icons font-2xl d-block mt-4"></i>
+            <i class="cui-options c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>options</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
+            <i class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>paperclip</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
+            <i class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>pencil</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people icons font-2xl d-block mt-4"></i>
+            <i class="cui-people c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>people</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone icons font-2xl d-block mt-4"></i>
+            <i class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>phone</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
+            <i class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>pie-chart</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print icons font-2xl d-block mt-4"></i>
+            <i class="cui-print c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>print</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
+            <i class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>puzzle</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss icons font-2xl d-block mt-4"></i>
+            <i class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>rss</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
+            <i class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>screen-desktop</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
+            <i class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>screen-smartphone</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings icons font-2xl d-block mt-4"></i>
+            <i class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>settings</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share icons font-2xl d-block mt-4"></i>
+            <i class="cui-share c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>share</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield icons font-2xl d-block mt-4"></i>
+            <i class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>shield</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
+            <i class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>sort-ascending</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
+            <i class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>sort-descending</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech icons font-2xl d-block mt-4"></i>
+            <i class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>speech</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
+            <i class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>speedometer</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star icons font-2xl d-block mt-4"></i>
+            <i class="cui-star c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>star</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun icons font-2xl d-block mt-4"></i>
+            <i class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>sun</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
+            <i class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>tablet</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags icons font-2xl d-block mt-4"></i>
+            <i class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>tags</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task icons font-2xl d-block mt-4"></i>
+            <i class="cui-task c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>task</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
+            <i class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>thumb-down</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
+            <i class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>thumb-up</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash icons font-2xl d-block mt-4"></i>
+            <i class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>trash</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline icons font-2xl d-block mt-4"></i>
+            <i class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>underline</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user icons font-2xl d-block mt-4"></i>
+            <i class="cui-user c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>user</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
+            <i class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>user-female</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
+            <i class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>user-follow</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
+            <i class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>user-unfollow</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
+            <i class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>wrench</div>
           </CCol>
-          <CCol cols="6" sm="4" md="3" xl="2">
+          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen icons font-2xl d-block mt-4"></i>
+            <i class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>yen</div>
           </CCol>
         </CRow>
@@ -417,7 +432,11 @@
   </div>
 </template>
 <script>
+// import { iconSet } from '@coreui/icons'
+// const iconNames = Object.keys(iconSet)
+
 export default {
-  name: 'CoreUIIcons'
+  name: 'CoreUIIcons',
+  // iconNames,
 }
 </script>

src/views/icons/SimpleLineIcons.vue

@@ -1,751 +0,0 @@
-<template>
-  <div class="animated fadeIn">
-    <CCard  class="card-default">
-      <CCardHeader>
-        <i class="fa fa-picture-o"></i> Simple Line Icons
-      </CCardHeader>
-      <CCardBody>
-        <CRow class="text-center">
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
-          </CCol>
-
-          <CCol cols="6" sm="4" md="3">
-            <i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
-          </CCol>
-        </CRow><!--/.row-->
-      </CCardBody>
-    </CCard>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'simple-line-icons'
-}
-</script>

src/views/notifications/Alerts.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -28,66 +28,66 @@
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Alert
-              <small> use <code>.alert-link</code> to provide links</small>
+              <small> use <code>.c-alert-link</code> to provide links</small>
             </CCardHeader>
             <CCardBody>
               <div>
                 <CAlert show variant="primary">
-                  Primary Alert with <a href="#" class="alert-link">an example link</a>.
+                  Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="secondary">
-                  Secondary Alert with <a href="#" class="alert-link">an example link</a>.
+                  Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="success">
-                  Success Alert with <a href="#" class="alert-link">an example link</a>.
+                  Success Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="danger">
-                  Danger Alert with <a href="#" class="alert-link">an example link</a>.
+                  Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="warning">
-                  Warning Alert with <a href="#" class="alert-link">an example link</a>.
+                  Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="info">
-                  Info Alert with <a href="#" class="alert-link">an example link</a>.
+                  Info Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="light">
-                  Light Alert with <a href="#" class="alert-link">an example link</a>.
+                  Light Alert with <a href="#" class="c-alert-link">an example link</a>.
                 </CAlert>
                 <CAlert show variant="dark">
                   Dark Alert with
-                  <CLink href="#" class="alert-link">an example link</CLink>
+                  <CLink href="#" class="c-alert-link">an example link</CLink>
                   .
                 </CAlert>
               </div>
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
             </CCardHeader>
             <CCardBody>
               <CAlert show variant="success">
-                <h4 class="alert-heading">Well done!</h4>
+                <h4 class="c-alert-heading">Well done!</h4>
                 <p>
                   Aww yeah, you successfully read this important alert message.
                   This example text is going to run a bit longer so that you can see
                   how spacing within an alert works with this kind of content.
                 </p>
                 <hr>
-                <p class="mb-0">
+                <p class="c-mb-0">
                   Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                 </p>
               </CAlert>
             </CCardBody>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Alerts
@@ -119,14 +119,14 @@
 
               <CAlert
                 :show.sync="dismissibleAlerts[3]"
-                class="alert-dismissible"
+                dismissible="customButton"
                 v-slot="{dismiss}"
               >
                 Dismissible Alert with custom button!
                 <CButton
-                  class="position-absolute bg-primary"
+                  class="c-position-absolute c-bg-primary"
                   style="right:10px;top: 50%;transform: translateY(-50%);"
-                  text="<i>Close</i>"
+                  textHtml="<i>Close</i>"
                   @click="dismiss"
                 />
               </CAlert>
@@ -140,7 +140,7 @@
               <CButton
                 @click="showDismissibleAlerts"
                 variant="info"
-                class="m-1"
+                class="c-m-1"
               >
                 Show dismissible alerts
               </CButton>
@@ -148,7 +148,8 @@
           </CCard>
           <CCard>
             <CCardHeader>
-              <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
+              <i class="fa fa-align-justify"></i> Alerts
+              <small>auto dismissible</small>
             </CCardHeader>
             <CCardBody>
               <div>
@@ -162,18 +163,20 @@
                   <strong>{{dismissCountDown}}</strong> seconds...
                 </CAlert>
 
-                <CAlert :show.sync="dismissCountDown"
+                <CAlert
+                  :show.sync="dismissCountDown"
                   dismissible
                   variant="info"
                 >
                   Alert will dismiss after {{dismissCountDown}} seconds...
-                  <CProgress variant="info"
+                  <CProgress
+                    variant="info"
                     :max="dismissSecs"
                     :value="dismissCountDown"
-                              height="4px">
+                    height="4px"
-                  </CProgress>
+                  />
                 </CAlert>
-                <CButton @click="showAlert" variant="info" class="m-1">
+                <CButton @click="showAlert" variant="info" class="c-m-1">
                   Show alert with timer
                 </CButton>
               </div>
@@ -193,9 +196,6 @@ export default {
       dismissSecs: 10,
       dismissCountDown: 10,
       dismissibleAlerts: [true, true, true, true, true],
-      // dismissibleAlert: true,
-      // dismissibleAlert2: true,
-      // dismissibleAlert3: true
     }
   },
   methods: {
@@ -206,12 +206,7 @@ export default {
       this.dismissCountDown = this.dismissSecs
     },
     showDismissibleAlerts () {
-      // this.dismissibleAlert = true
+      this.dismissibleAlerts = this.dismissibleAlerts.map(el => el = true)
-      // this.dismissibleAlert2 = true
-      // this.dismissibleAlert3 = true
-      this.dismissibleAlerts = this.dismissibleAlerts.map(
-        alert => alert = true
-      )
     }
   }
 }

src/views/notifications/Badges.vue

@@ -1,8 +1,8 @@
 <template functional>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
@@ -22,12 +22,13 @@
             </CCardBody>
             <CCardFooter>
               <CButton variant="primary">
-                Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
+                Notifications
+                <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
               </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
-        <CCol cols="12" md="6">
+        <CCol col="12" md="6">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Badge

src/views/notifications/Modals.vue

@@ -1,50 +1,50 @@
 <template>
-  <div class="wrapper">
+  <div class="c-wrapper">
-    <div class="animated fadeIn">
+    <div>
       <CRow>
-        <CCol cols="12">
+        <CCol col="12">
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Bootstrap Modals
             </CCardHeader>
             <CCardBody>
-              <CButton variant="secondary" @click="myModal = true" class="mr-1">
+              <CButton variant="secondary" @click="myModal = true" class="c-mr-1">
                 Launch demo modal
               </CButton>
-              <CButton variant="secondary" @click="largeModal = true" class="mr-1">
+              <CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
                 Launch large modal
               </CButton>
-              <CButton variant="secondary" @click="smallModal = true" class="mr-1">
+              <CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
                 Launch small modal
               </CButton>
               <hr>
-              <CButton variant="primary" @click="primaryModal = true" class="mr-1">
+              <CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
                 Launch primary modal
               </CButton>
-              <CButton variant="success" @click="successModal = true" class="mr-1">
+              <CButton variant="success" @click="successModal = true" class="c-mr-1">
                 Launch success modal
               </CButton>
-              <CButton variant="warning" @click="warningModal = true" class="mr-1">
+              <CButton variant="warning" @click="warningModal = true" class="c-mr-1">
                 Launch warning modal
               </CButton>
-              <CButton variant="danger" @click="dangerModal = true" class="mr-1">
+              <CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
                 Launch danger modal
               </CButton>
-              <CButton variant="info" @click="infoModal = true" class="mr-1">
+              <CButton variant="info" @click="infoModal = true" class="c-mr-1">
                 Launch info modal
               </CButton>
-              <CButton variant="dark" @click="darkModal = true" class="mr-1">
+              <CButton variant="dark" @click="darkModal = true" class="c-mr-1">
                 Launch dark modal
               </CButton>
             </CCardBody>
           </CCard>
-        </CCol><!--/.col-->
+        </CCol>
-      </CRow><!--/.row-->
+      </CRow>
     </div>
     <!-- Modal Component -->
-    <CModal title="Modal title"
+    <CModal
-            :visible="myModal"
+      title="Modal title"
-            @hide="myModal = false"
+      :visible.sync="myModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -53,9 +53,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
+      title="Modal title"
       size="lg"
-            v-model="largeModal"
+      :visible.sync="largeModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -64,9 +65,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
+      title="Modal title"
       size="sm"
-            v-model="smallModal"
+      :visible.sync="smallModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -76,9 +78,10 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
 
-    <CModal title="Modal title"
+    <CModal
-            class="modal-primary"
+      title="Modal title"
-            v-model="primaryModal"
+      class="c-modal-primary"
+      :visible.sync="primaryModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -87,9 +90,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
-            class="modal-success"
+      title="Modal title"
-            v-model="successModal"
+      class="c-modal-success"
+      :visible.sync="successModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -98,9 +102,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
-            class="modal-warning"
+      title="Modal title"
-            v-model="warningModal"
+      class="c-modal-warning"
+      :visible.sync="warningModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -109,9 +114,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
-            class="modal-danger"
+      title="Modal title"
-            v-model="dangerModal"
+      class="c-modal-danger"
+      :visible.sync="dangerModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -120,9 +126,10 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal title="Modal title"
+    <CModal
-            class="modal-info"
+      title="Modal title"
-            v-model="infoModal"
+      class="c-modal-info"
+      :visible.sync="infoModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -131,21 +138,22 @@
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </CModal>
-    <CModal v-model="darkModal"
+    <CModal
-            :noBackdrop="false"
+      :visible.sync="darkModal"
-            :noCloseOnBackdrop="false"
+      :no-backdrop="false"
-            :noFade="false"
+      :no-close-on-backdrop="fsalse"
+      :no-fade="false"
       :centered="true"
       title="Modal title 2"
       size="lg"
       variant="dark"
-            borderVariant="danger2"
+      border-variant="danger2"
-            addModalClasses="hehe1"
+      add-modal-classess="hehe1"
-            addDialogClasses="hehe2"
+      add-dialog-classess="hehe2"
-            addContentClasses="hehe3"
+      add-content-classess="hehe3"
-            :noHeader="false"
+      :no-header="false"
-            :noBody="false"
+      :no-body="false"
-            :noFooter="false"
+      :no-footer="false"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -153,11 +161,11 @@
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      <template v-slot:header="{hide}">
+      <template #header="{hide}">
-        <h5 class="modal-title">Custom modal title</h5>
+        <h5 class="c-modal-title">Custom modal title</h5>
-        <CButtonClose @click="hide()" class="text-white"/>
+        <CButtonClose @click="hide()" class="c-text-white"/>
       </template>
-      <template v-slot:footer="{hide}">
+      <template #footer="{hide}">
         <CButton @click="hide()" variant="danger">Discard</CButton>
         <CButton @click="hide()" variant="success">Accept</CButton>
       </template>

src/views/pages/Login.vue

@@ -1,46 +1,45 @@
 <template>
-  <div class="app flex-row align-items-center">
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <div class="container">
+    <CRow class="c-justify-content-center">
-      <CRow class="justify-content-center">
       <CCol md="8">
         <CCardGroup>
-            <CCard class="p-4">
+          <CCard class="c-p-4">
             <CCardBody>
               <CForm>
                 <h1>Login</h1>
-                  <p class="text-muted">Sign In to your account</p>
+                <p class="c-text-muted">Sign In to your account</p>
                 <CFormInput
-                    prepend="<i class='icon-user'></i>"
+                  prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
                   autocomplete="username email"
                 />
                 <CFormInput
-                    prepend="<i class='icon-lock'></i>"
+                  prependHtml="<i class='cui-lock-locked'></i>"
                   placeholder="Password"
                   type="password"
                   autocomplete="curent-password"
                 />
                 <CRow>
-                    <CCol cols="6">
+                  <CCol col="6">
-                      <CButton variant="primary" class="px-4">Login</CButton>
+                    <CButton variant="primary" class="c-px-4">Login</CButton>
                   </CCol>
-                    <CCol cols="6" class="text-right">
+                  <CCol col="6" class="c-text-right">
-                      <CButton variant="link" class="px-0">Forgot password?</CButton>
+                    <CButton variant="link" class="c-px-0">Forgot password?</CButton>
                   </CCol>
                 </CRow>
               </CForm>
             </CCardBody>
           </CCard>
           <CCard
-              class="text-white text-center bg-primary py-5 d-md-down-none"
+            class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
             style="width:44%"
-              bodyWrapper
+            body-wrapper
           >
             <h2>Sign up</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
             <CButton
               variant="primary"
-                class="active mt-3"
+              class="c-active c-mt-3"
             >
               Register Now!
             </CButton>
@@ -48,8 +47,7 @@
         </CCardGroup>
       </CCol>
     </CRow>
-    </div>
+  </CContainer>
-  </div>
 </template>
 
 <script>

src/views/pages/Page404.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="app flex-row align-items-center">
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <div class="container">
+    <CRow class="c-w-100 c-justify-content-center">
-      <CRow class="justify-content-center">
       <CCol md="6">
-          <div class="clearfix">
+        <div class="c-w-100">
-            <h1 class="float-left display-3 mr-4">404</h1>
+        <div class="c-clearfix">
-            <h4 class="pt-3">Oops! You're lost.</h4>
+          <h1 class="c-float-left c-display-3 c-mr-4">404</h1>
-            <p class="text-muted">The page you are looking for was not found.</p>
+          <h4 class="c-pt-3">Oops! You're lost.</h4>
+          <p class="c-text-muted">The page you are looking for was not found.</p>
         </div>
         <CFormInput
-            class="mb-0"
+          class="c-mb-0"
-            prepend="<i class='fa fa-search'></i>"
+          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
           <template #append>
             <CButton variant="info">Search</CButton>
           </template>
         </CFormInput>
+      </div>
       </CCol>
     </CRow>
-    </div>
+  </CContainer>
-  </div>
 </template>
 
 <script>

src/views/pages/Page500.vue

@@ -1,16 +1,15 @@
 <template>
-  <div class="app flex-row align-items-center">
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
-    <div class="container">
+    <CRow class="c-w-100 c-justify-content-center">
-      <CRow class="justify-content-center">
       <CCol md="6">
-          <div class="clearfix">
+        <div class="c-clearfix">
-            <h1 class="float-left display-3 mr-4">500</h1>
+          <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
-            <h4 class="pt-3">Houston, we have a problem!</h4>
+          <h4 class="c-pt-3">Houston, we have a problem!</h4>
-            <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
+          <p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
         </div>
         <CFormInput
-            class="mb-0"
+          class="c-mb-0"
-            prepend="<i class='fa fa-search'></i>"
+          prependHtml="<i class='cui-magnifying-glass'></i>"
           placeholder="What are you looking for?"
         >
           <template #append>
@@ -19,8 +18,7 @@
         </CFormInput>
       </CCol>
     </CRow>
-    </div>
+  </CContainer>
-  </div>
 </template>
 
 <script>

src/views/pages/Register.vue

@@ -1,54 +1,52 @@
 <template>
-  <div class="app flex-row align-items-center">
+  <CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
-    <div class="container">
+    <CRow class="c-w-100 c-justify-content-center">
-      <CRow class="justify-content-center">
       <CCol md="6" sm="8">
-          <CCard class="mx-4">
+        <CCard class="c-mx-4">
-            <CCardBody class="p-4">
+          <CCardBody class="c-p-4">
             <CForm>
               <h1>Register</h1>
-                <p class="text-muted">Create your account</p>
+              <p class="c-text-muted">Create your account</p>
               <CFormInput
                 placeholder="Username"
-                  prepend="<i class='icon-user'></i>"
+                prependHtml="<i class='cui-user'></i>"
                 autocomplete="username"
               />
               <CFormInput
                 placeholder="Email"
-                  prepend="@"
+                prepend-html="@"
                 autocomplete="email"
               />
               <CFormInput
                 placeholder="Password"
                 type="password"
-                  prepend="<i class='icon-lock'></i>"
+                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
               />
               <CFormInput
                 placeholder="Repeat password"
                 type="password"
-                  prepend="<i class='icon-lock'></i>"
+                prependHtml="<i class='cui-lock-locked'></i>"
                 autocomplete="new-password"
-                  class="mb-4"
+                class="c-mb-4"
               />
               <CButton variant="success" block>Create Account</CButton>
             </CForm>
           </CCardBody>
-            <CCardFooter class="p-4">
+          <CCardFooter class="c-p-4">
             <CRow>
-                <CCol cols="6">
+              <CCol col="6">
-                  <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
+                <CButton block variant="facebook" textHtml="Facebook"/>
               </CCol>
-                <CCol cols="6">
+              <CCol col="6">
-                  <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
+                <CButton block variant="twitter" textHtml="Twitter"/>
               </CCol>
             </CRow>
           </CCardFooter>
         </CCard>
       </CCol>
     </CRow>
-    </div>
+  </CContainer>
-  </div>
 </template>
 
 <script>

src/views/theme/ColorTheme.vue

@@ -1,6 +1,9 @@
 <template>
-  <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
+  <CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
-    <div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
+    <div
+      :class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
+      :style="{ paddingTop: '75%' }"
+    ></div>
     <slot></slot>
     <ColorView/>
   </CCol>
@@ -12,13 +15,9 @@ export default {
   name: 'ColorTheme',
   components: { ColorView },
   props: {
-    classObj: {
-      type: String,
-      default: 'theme-color w-75 rounded mb-3'
-    },
     color: {
       type: String,
-      default: 'bg-secondary'
+      default: 'c-bg-secondary'
     }
   }
 }

src/views/theme/ColorView.vue

@@ -1,13 +1,13 @@
 <template>
-  <table class="w-100">
+  <table class="c-w-100">
     <tbody>
     <tr>
-      <td class="text-muted">HEX:</td>
+      <td class="c-text-muted">HEX:</td>
-      <td class="font-weight-bold">{{this.hexColor}}</td>
+      <td class="c-font-weight-bold">{{this.hexColor}}</td>
     </tr>
     <tr>
-      <td class="text-muted">RGB:</td>
+      <td class="c-text-muted">RGB:</td>
-      <td class="font-weight-bold">{{this.bgColor}}</td>
+      <td class="c-font-weight-bold">{{this.bgColor}}</td>
     </tr>
     </tbody>
   </table>
@@ -17,7 +17,7 @@
 import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
 export default {
   name: 'ColorView',
-  data: function () {
+  data () {
     return {
       bgColor: 'rgb(255, 255, 255)'
     }
@@ -39,4 +39,3 @@ export default {
   }
 }
 </script>
-

src/views/theme/Colors.vue

@@ -1,58 +1,58 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CCard >
       <CCardHeader>
-        <i class="icon-drop"></i> Theme colors
+        <i class="cui-drop"></i> Theme colors
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="bg-primary">
+          <ColorTheme color="c-bg-primary">
             <h6>Brand Primary Color</h6>
           </ColorTheme>
-          <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
-          <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
-          <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
-          <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
-          <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
-          <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
-          <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="icon-drop"></i> Grays
+        <i class="cui-drop"></i> Grays
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
-          <ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>
     <CCard >
       <CCardHeader>
-        <i class="icon-drop"></i> Additional colors
+        <i class="cui-drop"></i> Additional colors
       </CCardHeader>
       <CCardBody>
         <CRow>
-          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
-          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
-          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
-          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
-          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
-          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
-          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
-          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
-          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
-          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
+          <ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
         </CRow>
       </CCardBody>
     </CCard>

src/views/theme/Typography.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
-    <div class="card">
+    <div class="c-card">
-      <div class="card-header">
+      <div class="c-card-header">
         Headings
       </div>
-      <div class="card-body">
+      <div class="c-card-body">
-        <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
+        <p>Documentation and examples for Bootstrap typography,
-        <table class="table">
+          including global settings, headings, body text, lists, and more.</p>
+        <table class="c-table">
           <thead>
             <tr>
               <th>Heading</th>
@@ -16,132 +17,193 @@
           <tbody>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h1&gt;&lt;/h1&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h1">h1. Bootstrap heading</span></td>
+              <td><span class="c-h1">h1. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h2&gt;&lt;/h2&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h2">h2. Bootstrap heading</span></td>
+              <td><span class="c-h2">h2. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h3&gt;&lt;/h3&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h3">h3. Bootstrap heading</span></td>
+              <td><span class="c-h3">h3. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h4&gt;&lt;/h4&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h4">h4. Bootstrap heading</span></td>
+              <td><span class="c-h4">h4. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h5&gt;&lt;/h5&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h5">h5. Bootstrap heading</span></td>
+              <td><span class="c-h5">h5. Bootstrap heading</span></td>
             </tr>
             <tr>
               <td>
-                <p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
+                <p>
+                  <code class="c-highlighter-rouge">
+                    &lt;h6&gt;&lt;/h6&gt;
+                  </code>
+                </p>
               </td>
-              <td><span class="h6">h6. Bootstrap heading</span></td>
+              <td><span class="c-h6">h6. Bootstrap heading</span></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-    <div class="card">
+    <div class="c-card">
-      <div class="card-header">
+      <div class="c-card-header">
         Headings
       </div>
-      <div class="card-body">
+      <div class="c-card-body">
-        <p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
+        <p>
-        <div class="bd-example">
+          <code class="c-highlighter-rouge">.h1</code> through
-          <p class="h1">h1. Bootstrap heading</p>
+          <code class="c-highlighter-rouge">.h6</code>
-          <p class="h2">h2. Bootstrap heading</p>
+          classes are also available, for when you want to match the font
-          <p class="h3">h3. Bootstrap heading</p>
+          styling of a heading but cannot use the associated HTML element.
-          <p class="h4">h4. Bootstrap heading</p>
+        </p>
-          <p class="h5">h5. Bootstrap heading</p>
+        <div class="c-bd-example">
-          <p class="h6">h6. Bootstrap heading</p>
+          <p class="c-h1">h1. Bootstrap heading</p>
+          <p class="c-h2">h2. Bootstrap heading</p>
+          <p class="c-h3">h3. Bootstrap heading</p>
+          <p class="c-h4">h4. Bootstrap heading</p>
+          <p class="c-h5">h5. Bootstrap heading</p>
+          <p class="c-h6">h6. Bootstrap heading</p>
         </div>
       </div>
     </div>
-    <div class="card">
+    <div class="c-card">
-      <div class="card-header">
+      <div class="c-card-header">
         Display headings
       </div>
-      <div class="card-body">
+      <div class="c-card-body">
-        <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+        <p>
-        <div class="bd-example bd-example-type">
+          Traditional heading elements are designed to work best in the meat
-          <table class="table">
+          of your page content. When you need a heading to stand out,
+          consider using a <strong>display heading</strong>—a larger,
+           slightly more opinionated heading style.
+        </p>
+        <div class="c-bd-example c-bd-example-type">
+          <table class="c-table">
             <tbody>
               <tr>
-                <td><span class="display-1">Display 1</span></td>
+                <td><span class="c-display-1">Display 1</span></td>
               </tr>
               <tr>
-                <td><span class="display-2">Display 2</span></td>
+                <td><span class="c-display-2">Display 2</span></td>
               </tr>
               <tr>
-                <td><span class="display-3">Display 3</span></td>
+                <td><span class="c-display-3">Display 3</span></td>
               </tr>
               <tr>
-                <td><span class="display-4">Display 4</span></td>
+                <td><span class="c-display-4">Display 4</span></td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
     </div>
-    <div class="card">
+    <div class="c-card">
-      <div class="card-header">
+      <div class="c-card-header">
         Inline text elements
       </div>
-      <div class="card-body">
+      <div class="c-card-body">
-        <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+        <p>
-        <div class="bd-example">
+          Traditional heading elements are designed to work best in the meat
+          of your page content. When you need a heading to stand out,
+          consider using a <strong>display heading</strong>—a larger,
+          slightly more opinionated heading style.
+        </p>
+        <div class="c-bd-example">
           <p>You can use the mark tag to <mark>highlight</mark> text.</p>
-          <p><del>This line of text is meant to be treated as deleted text.</del></p>
+          <p><del>
-          <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+            This line of text is meant to be treated as deleted text.
-          <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+          </del></p>
+          <p><s>
+            This line of text is meant to be treated as no longer accurate.
+          </s></p>
+          <p><ins>
+            This line of text is meant to be treated as an addition to the document.
+          </ins></p>
           <p><u>This line of text will render as underlined</u></p>
-          <p><small>This line of text is meant to be treated as fine print.</small></p>
+          <p><small>
+            This line of text is meant to be treated as fine print.
+          </small></p>
           <p><strong>This line rendered as bold text.</strong></p>
           <p><em>This line rendered as italicized text.</em></p>
         </div>
       </div>
     </div>
-    <div class="card">
+    <div class="c-card">
-      <div class="card-header">
+      <div class="c-card-header">
         Description list alignment
       </div>
-      <div class="card-body">
+      <div class="c-card-body">
-        <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
+        <p>
-        <div class="bd-example">
+          Align terms and descriptions horizontally by using our grid system’s
-          <dl class="row">
+          predefined classes (or semantic mixins). For longer terms, you can
-            <dt class="col-sm-3">Description lists</dt>
+          optionally add a <code class="highlighter-rouge">.text-truncate</code>
-            <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+          class to truncate the text with an ellipsis.
+        </p>
+        <div class="c-bd-example">
+          <dl class="c-row">
+            <dt class="c-col-sm-3">Description lists</dt>
+            <dd class="c-col-sm-9">
+              A description list is perfect for defining terms.
+            </dd>
 
-            <dt class="col-sm-3">Euismod</dt>
+            <dt class="c-col-sm-3">Euismod</dt>
-            <dd class="col-sm-9">
+            <dd class="c-col-sm-9">
               <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
               <p>Donec id elit non mi porta gravida at eget metus.</p>
             </dd>
 
-            <dt class="col-sm-3">Malesuada porta</dt>
+            <dt class="c-col-sm-3">Malesuada porta</dt>
-            <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+            <dd class="c-col-sm-9">
+              Etiam porta sem malesuada magna mollis euismod.
+            </dd>
 
-            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+            <dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
-            <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+            <dd class="c-col-sm-9">
+              Fusce dapibus, tellus ac cursus commodo, tortor mauris
+              condimentum nibh, ut fermentum massa justo sit amet risus.
+            </dd>
 
-            <dt class="col-sm-3">Nesting</dt>
+            <dt class="c-col-sm-3">Nesting</dt>
-            <dd class="col-sm-9">
+            <dd class="c-col-sm-9">
-              <dl class="row">
+              <dl class="c-row">
-                <dt class="col-sm-4">Nested definition list</dt>
+                <dt class="c-col-sm-4">Nested definition list</dt>
-                <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+                <dd class="c-col-sm-8">
+                  Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
+                </dd>
               </dl>
             </dd>
           </dl>

src/views/users/User.vue

@@ -1,12 +1,13 @@
 <template>
   <CRow>
-    <CCol cols="12" lg="6">
+    <CCol col="12" lg="6">
       <CCard>
         <CCardHeader>
           User id:  {{ $route.params.id }}
         </CCardHeader>
         <CCardBody>
-          <CTable striped
+          <CTable
+            striped
             small
             fixed
             :items="items($route.params.id)"

src/views/users/Users.vue

@@ -1,16 +1,17 @@
 <template>
   <CRow>
-    <CCol cols="12" xl="8">
+    <CCol col="12" xl="8">
       <transition name="slide">
-        <CCard header="users" bodyWrapper>
+        <CCard header-html="users" body-wrapper>
-          <CTable hover
+          <CTable
+            hover
             striped
             :items="items"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             @row-clicked="rowClicked"
-                  :paginationProps="$options.paginationProps"
+            :pagination="$options.paginationProps"
           >
             <td slot="id" slot-scope="data">
               <strong>{{data.item.id}}</strong>
@@ -19,7 +20,9 @@
               <strong>{{data.item.name}}</strong>
             </td>
             <td slot="status" slot-scope="data">
-              <CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
+              <CBadge :variant="getBadge(data.item.status)">
+                {{data.item.status}}
+              </CBadge>
             </td>
           </CTable>
         </CCard>
@@ -48,11 +51,10 @@ export default {
     }
   },
   paginationProps: {
-    // size: 'sm',
     align: 'center',
     hideDoubleArrows: true,
-    previousButtonText: 'prev',
+    previousButtonHtml: 'prev',
-    nextButtonText: 'next'
+    nextButtonHtml: 'next'
   },
   methods: {
     getBadge (status) {
@@ -74,7 +76,7 @@ export default {
 </script>
 
 <style scoped>
-.card-body >>> table > tbody > tr > td {
+.c-card-body >>> table > tbody > tr > td {
   cursor: pointer;
 }
 </style>

src/views/widgets/Widgets.vue

@@ -1,324 +1,572 @@
 <template>
-  <div class="animated fadeIn">
+  <div>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
+        <CWidgetProgress
-          <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
+          header="89.9%"
-        </CWidget01>
+          text="Lorem ipsum..."
-      </CCol>
+          footer="Lorem ipsum dolor sit amet enim."
-      <CCol sm="6" lg="3">
-        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="info" :value="25"/>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="warning" :value="25"/>
-      </CCol>
-      <CCol sm="6" lg="3">
-          <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                    variant="danger" :value="25"/>
-      </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="success" inverse :value="25"/>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="info" inverse :value="25"/>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidget01 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">
-        <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="danger" inverse :value="25"/>
-      </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
-      </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
-      </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
-      </CCol>
-    </CRow><!--/.row-->
-    <CRow>
-      <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
-      </CCol>
-      <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
-      </CCol>
-
-    </CRow><!--/.row-->
-    <Widgets04 noCharts/>
-    <Widgets04/>
-    <CCardGroup class="mb-4">
-      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
-    </CCardGroup>
-    <CCardGroup class="mb-4">
-      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
-      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      <CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
-      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
-    </CCardGroup>
-    <CRow>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
-          <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
-        </CWidget05>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
-      </CCol>
-    </CRow>
-    <CRow>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
-      </CCol>
-    </CRow>
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidget06 header="9.823" text="Members online">
-          <template #dropdown>
-            <CDropdown
-              class="float-right"
-              variant="transparent p-0"
-              placement="bottom-end"
         >
-              <template #buttonContent>
+          <CProgress
-                <i class="icon-settings"></i>
+            variant="success"
-              </template>
+            :value="25"
-              <CDropdownItem>Action</CDropdownItem>
+            class="c-progress-xs c-my-3 c-mb-0"
-              <CDropdownItem>Another action</CDropdownItem>
+          />
-              <CDropdownItem>Something else here...</CDropdownItem>
+        </CWidgetProgress>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members' pointHoverColor='primary'/>
-        </CWidget06>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget06
+        <CWidgetProgress
+          header="12.124"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
           variant="info"
-          header="9.823"
+          :value="25"
-          text="Members online"
+        />
+      </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"
+        />
+      </CCol>
+      <CCol sm="6" lg="3">
+        <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"
+        />
+      </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"
+        />
+      </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"
+        />
+      </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"
+        />
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
         >
-          <template #dropdown>
+          <CIcon name="settings" width="24"/>
-            <CDropdown
+        </CWidgetIcon>
-              class="float-right"
-              variant="transparent p-0"
-             right no-caret>
-              <i slot="buttonContent"
-                 class="icon-location-pin"
-              ></i>
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-
-          <CSimplePointedChart class="px-3"
-                               :data="[1, 18, 9, 17, 34, 22, 11]"
-                               :labels="['January', 'February', 'March', 'April',  'May', 'June', 'July']"
-                               style="height:70px"
-                               label="Members"
-                               :options="{elements: {line: {tension: 0.00001}}}"
-                               pointHoverColor="info"
-          />
-        </CWidget06>
       </CCol>
-      <CCol sm="6" lg="3">
+      <CCol col="12" sm="6" lg="3">
-        <CWidget06 variant="warning" header="9.823" text="Members online">
+        <CWidgetIcon
-          <template slot='dropdown'>
+          header="$1.999,50"
-            <CDropdown class="float-right" variant="transparent p-0" right>
+          text="Income"
-              <template slot="buttonContent">
+          variant="info"
-                <i class="icon-settings"></i>
+        >
-              </template>
+          <CIcon name="laptop" width="24"/>
-              <CDropdownItem>Action</CDropdownItem>
+        </CWidgetIcon>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdown>
-          </template>
-          <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
-                         :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
-                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
-        </CWidget06>
       </CCol>
-      <CCol sm="6" lg="3">
+      <CCol col="12" sm="6" lg="3">
-        <CWidget06 variant="danger" header="9.823" text="Members online">
+        <CWidgetIcon
-          <template slot="dropdown">
+          header="$1.999,50"
-            <CDropdown class="float-right" variant="transparent p-0" right>
+          text="Income"
-              <template slot="buttonContent">
+          variant="warning"
-                <i class="icon-settings"></i>
+        >
-              </template>
+          <CIcon name="moon" width="24"/>
-              <CDropdownItem>Action</CDropdownItem>
+        </CWidgetIcon>
-              <CDropdownItem>Another action</CDropdownItem>
+      </CCol>
-              <CDropdownItem>Something else here...</CDropdownItem>
+      <CCol col="12" sm="6" lg="3">
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
+        <CWidgetIcon
-            </CDropdown>
+          header="$1.999,50"
-          </template>
+          text="Income"
-          <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          variant="danger"
-                        label='Members' color='rgb(250, 152, 152)' style='height:70px' />
+        >
-        </CWidget06>
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
       </CCol>
     </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
+          link="#"
+        >
+          <CIcon name="settings" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="info"
+          link="#"
+        >
+          <CIcon name="laptop" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="warning"
+          link="#"
+        >
+          <CIcon name="moon" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="danger"
+          link="#"
+        >
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
+          no-padding
+        >
+          <CIcon name="settings" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="info"
+          no-padding
+        >
+          <CIcon name="laptop" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="warning"
+          no-padding
+        >
+          <CIcon name="moon" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="danger"
+          no-padding
+        >
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
+          no-padding
+        >
+          <CIcon name="settings" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="info"
+          no-padding
+        >
+          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="warning"
+          no-padding
+        >
+          <CIcon name="moon" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
+          no-padding
+          link="#"
+        >
+          <CIcon name="settings" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="info"
+          no-padding
+          link="#"
+        >
+          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="warning"
+          no-padding
+          link="#"
+        >
+          <CIcon name="moon" class="c-mx-5" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+    </CRow>
+    <WidgetsSocial noCharts/>
+    <WidgetsSocial/>
+    <CCardGroup class="c-mb-4">
+      <CWidgetProgressIcon
+        header="87.500"
+        text="Visitors"
+        variant="info"
+      >
+        <CIcon name="people" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="385"
+        text="New Clients"
+        variant="success"
+      >
+        <CIcon name="userFollow" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="1238"
+        text="Products sold"
+        variant="warning"
+      >
+        <CIcon name="basketLoaded" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="28%"
+        text="Returning Visitors"
+      >
+        <CIcon name="chartPie" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="5:34:11"
+        text="Avg. Time"
+        variant="danger"
+      >
+        <CIcon name="speedometer" height="36"/>
+      </CWidgetProgressIcon>
+    </CCardGroup>
+    <CCardGroup class="c-mb-4">
+      <CWidgetProgressIcon
+        header="87.500"
+        text="Visitors"
+        variant="info"
+        inverse
+      >
+        <CIcon name="people" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="385"
+        text="New Clients"
+        variant="success"
+        inverse
+      >
+        <CIcon name="userFollow" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="1238"
+        text="Products sold"
+        variant="warning"
+        inverse
+      >
+        <CIcon name="basketLoaded" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="28%"
+        text="Returning Visitors"
+        variant="primary"
+        inverse
+      >
+        <CIcon name="chartPie" height="36"/>
+      </CWidgetProgressIcon>
+      <CWidgetProgressIcon
+        header="5:34:11"
+        text="Avg. Time"
+        variant="danger"
+        inverse
+      >
+        <CIcon name="speedometer" height="36"/>
+      </CWidgetProgressIcon>
+    </CCardGroup>
+    <CRow>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="87.500"
+          text="Visitors"
+          variant="info"
+        >
+          <CIcon name="people" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="385"
+          text="New Clients"
+          variant="success"
+        >
+          <CIcon name="userFollow" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="1238"
+          text="Products sold"
+          variant="warning"
+        >
+          <CIcon name="basketLoaded" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="28%"
+          text="Returning Visitors"
+          variant="primary"
+        >
+          <CIcon name="chartPie" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="5:34:11"
+          text="Avg. Time"
+          variant="danger"
+        >
+          <CIcon name="speedometer" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="972"
+          text="comments"
+          variant="info"
+        >
+          <CIcon name="speech" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="87.500"
+          text="Visitors"
+          variant="info"
+          inverse
+        >
+          <CIcon name="people" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="385"
+          text="New Clients"
+          variant="success"
+          inverse
+        >
+          <CIcon name="userFollow" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="1238"
+          text="Products sold"
+          variant="warning"
+          inverse
+        >
+          <CIcon name="basketLoaded" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="28%"
+          text="Returning Visitors"
+          variant="primary"
+          inverse
+        >
+          <CIcon name="chartPie" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="5:34:11"
+          text="Avg. Time"
+          variant="danger"
+          inverse
+        >
+          <CIcon name="speedometer" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="972"
+          text="comments"
+          variant="info"
+          inverse
+        >
+          <CIcon name="speech" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+    </CRow>
+    <WidgetsDropdown/>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          right-header="SALE"
-          <CSimpleBarChart style="height:40px"
+          right-footer="Today 6:43 AM"
-                           :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+          left-header="$1.890,65"
-                           label="Sales"
+          left-footer="+432,50 (15,78%)"
-          />
+        >
-        </CWidget07>
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          variant="success"
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          right-header="SALE"
-        </CWidget07>
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
+        >
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          variant="danger"
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          right-header="SALE"
-        </CWidget07>
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
+        >
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+        <CWidgetSmallText
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          variant="warning"
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          right-header="SALE"
-        </CWidget07>
+          right-footer="Today 6:43 AM"
+          left-header="$1.890,65"
+          left-footer="+432,50 (15,78%)"
+        >
+          <CChartLineSimple style="height:40px"/>
+          <CChartBarSimple style="height:40px"/>
+        </CWidgetSmallText>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-          <CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CChartLineSimple style="height:40px" border-color="danger"/>
-                       label='Sales' borderColor='danger'/>
+        </CWidgetSimple>
-        </CWidget08>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-          <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CChartLineSimple style="height:40px" border-color="primary"/>
-                       label='Sales' borderColor='primary'/>
+        </CWidgetSimple>
-        </CWidget08>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-                       <CSimpleLineChart style="height:40px"
+          <CChartLineSimple style="height:40px" border-color="success"/>
-                                        :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
+        </CWidgetSimple>
-                                        label="Sales"
-                                        borderColor="success"
-                       />
-        </CWidget08>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-          <CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CChartBarSimple style="height:40px" background-color="danger"/>
-                      label='Sales' color='danger'/>
+        </CWidgetSimple>
-        </CWidget08>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-          <CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CChartBarSimple style="height:40px" background-color="primary"/>
-                      label='Sales' color='primary'/>
+        </CWidgetSimple>
-        </CWidget08>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
+        <CWidgetSimple header="title" text="1,123">
-          <CSimpleBarChart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+          <CChartBarSimple style="height:40px" background-color="success"/>
-                      label='Sales' color='success'/>
+        </CWidgetSimple>
-        </CWidget08>
       </CCol>
     </CRow>
   </div>
 </template>
 
 <script>
-import Widgets04 from './Widgets04'
+import WidgetsSocial from './WidgetsSocial'
+import WidgetsDropdown from './WidgetsDropdown'
+import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
+
 export default {
   name: 'Widgets',
   components: {
-    Widgets04
+    CChartLineSimple,
+    CChartBarSimple,
+    WidgetsSocial,
+    WidgetsDropdown
   }
 }
 </script>

src/views/widgets/Widgets04.vue

@@ -1,126 +0,0 @@
-<template functional>
-  <CRow>
-    <template v-if="!props.noCharts">
-      <CCol md="3" sm="6">
-        <CWidget04
-          variant="facebook"
-          rightHeader="89k"
-          rightFooter="friends"
-          leftHeader="459"
-          leftFooter="feeds"
-        >
-          <CSimpleLineChart
-            chartId="facebook"
-            :data="[65, 59, 84, 84, 51, 55, 40]"
-            label="Friends"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-            style="height:100px"
-            color="rgba(255,255,255,.1)"
-          />
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04
-          variant="twitter"
-          rightHeader="973k"
-          rightFooter="followers"
-          leftHeader="1.792"
-          leftFooter="tweets"
-        >
-          <CSimpleLineChart
-            chartId="twitter"
-            :data="[1, 13, 9, 17, 34, 41, 38]"
-            label="Followers"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-            style="height:100px"
-            color="rgba(255,255,255,.1)"
-          />
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04
-          variant="linkedin"
-          rightHeader="500+"
-          rightFooter="contracts"
-          leftHeader="292"
-          leftFooter="feeds"
-        >
-          <CSimpleLineChart
-            chartId="linkedIn"
-            :data="[78, 81, 80, 45, 34, 12, 40]"
-            label="Contracts"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-            style="height:100px"
-            color="rgba(255,255,255,.1)"
-          />
-        </CWidget04>
-       </CCol>
-       <CCol md="3" sm="6">
-        <CWidget04
-          variant="google-plus"
-          rightHeader="894"
-          rightFooter="followers"
-          leftHeader="92"
-          leftFooter="circles"
-        >
-          <CSimpleLineChart
-            chartId="google-plus"
-            :data="[35, 23, 56, 22, 97, 23, 64]"
-            label="Followers"
-            :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-            style="height:100px"
-            color="rgba(255,255,255,.1)"
-          />
-        </CWidget04>
-      </CCol>
-    </template>
-    <template v-else>
-      <CCol md="3" sm="6">
-        <CWidget04
-          variant="facebook"
-          rightHeader="89k"
-          rightFooter="friends"
-          leftHeader="459"
-          leftFooter="feeds"
-        />
-      </CCol>
-      <CCol md="3" sm="6">
-        <CWidget04
-          variant="twitter"
-          rightHeader="973k"
-          rightFooter="followers"
-          leftHeader="1.792"
-          leftFooter="tweets"
-        />
-      </CCol>
-      <CCol md="3" sm="6">
-        <CWidget04
-          variant="linkedin"
-          rightHeader="500+"
-          rightFooter="contracts"
-          leftHeader="292"
-          leftFooter="feeds"
-        />
-      </CCol>
-      <CCol md="3" sm="6">
-        <CWidget04
-          variant="warning"
-          iconClasses="fa fa-battery-1"
-          rightHeader="0:57"
-          rightFooter="time"
-          leftHeader="17"
-          leftFooter="percentage"
-        />
-      </CCol>
-    </template>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Widgets04',
-  props: {
-    noCharts: Boolean
-  }
-}
-</script>

src/views/widgets/WidgetsDropdown.vue

@@ -1,14 +1,13 @@
 <template>
   <CRow>
     <CCol sm="6" lg="3">
-      <CWidget06 header="9.823" text="Members online">
+      <CWidgetDropdown header="9.823" text="Members online">
-
         <template #dropdown>
           <CDropdown
-            class="float-right"
+            class="c-float-right"
-            variant="transparent p-0"
+            variant="transparent c-p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -16,26 +15,26 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
+        <CChartLineSimple
-        <CSimplePointedChart
+          pointed
-          class="px-3"
+          class="c-px-3"
-          :data="[65, 59, 84, 84, 51, 55, 40]"
-          :labels="months"
           style="height:70px"
+          :data-points="[65, 59, 84, 84, 51, 55, 40]"
+          background-color="primary"
           label="Members"
-          pointHoverColor="primary"
+          labels="months"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06 variant="info" header="9.823" text="Members online">
+      <CWidgetDropdown variant="info" header="9.823" text="Members online">
         <template #dropdown>
           <CDropdown
-            class="float-right"
+            class="c-float-right"
-            variant="transparent p-0"
+            variant="transparent c-p-0"
             placement="bottom-end"
-            noCaret
+            no-caret
-            buttonContent="<i class='icon-location-pin'></i>"
+            buttonHtml="<i class='cui-location-pin'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -43,19 +42,20 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-        <CSimplePointedChart
+        <CChartLineSimple
-          class="px-3"
+          pointed
-          :data="[1, 18, 9, 17, 34, 22, 11]"
+          class="c-px-3"
-          :labels="months"
           style="height:70px"
-          label="Members"
+          :data-points="[1, 18, 9, 17, 34, 22, 11]"
+          background-color="info"
           :options="{ elements: { line: { tension: 0.00001 }}}"
-          pointHoverColor="info"
+          label="Members"
+          labels="months"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06
+      <CWidgetDropdown
         variant="warning"
         header="9.823"
         text="Members online"
@@ -63,10 +63,10 @@
 
         <template #dropdown>
           <CDropdown
-            class="float-right"
+            class="c-float-right"
-            variant="transparent p-0"
+            variant="transparent c-p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -74,21 +74,19 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
+          <CChartLineSimple
-        <CSimpleLineChart
-          chartId="CWidget06_3"
-          :data="[78, 81, 80, 45, 34, 12, 40]"
-          :labels="months"
             style="height:70px"
-          color="rgba(255,255,255,.2)"
+            background-color="rgba(255,255,255,.2)"
-          label="Members"
+            :data-points="[78, 81, 80, 45, 34, 12, 40]"
             :options="{ elements: { line: { borderWidth: 2.5 }}}"
-          pointHoverColor="warning"
+            point-hover-background-color="warning"
+            label="Members"
+            labels="months"
           />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06
+      <CWidgetDropdown
         variant="danger"
         header="9.823"
         text="Members online"
@@ -96,10 +94,10 @@
 
         <template #dropdown>
           <CDropdown
-            class="float-right"
+            class="c-float-right"
-            variant="transparent p-0"
+            variant="transparent c-p-0"
             placement="bottom-end"
-            buttonContent="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -107,24 +105,27 @@
             <CDropdownItem disabled>Disabled action</CDropdownItem>
           </CDropdown>
         </template>
-
+        <CChartBarSimple
-        <CSimpleBarChart
-          chartId="CWidget06_4"
-          :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
-          label="Members"
-          color="rgb(250, 152, 152)"
           style="height:70px"
+          background-color="rgb(250, 152, 152)"
+          label="Members"
+          labels="months"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
   </CRow>
 </template>
 
 <script>
+import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
+
 export default {
-  name: 'Widgets06',
+  name: 'WidgetsDropdown',
-  props: {
+  // data () {
-    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  //   return {
-  }
+  //     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+  //   }
+  // },
+  components: { CChartLineSimple, CChartBarSimple }
 }
 </script>

src/views/widgets/WidgetsSocial.vue

@@ -0,0 +1,174 @@
+<template>
+  <CRow>
+    <template v-if="!noCharts">
+      <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="facebook"
+          right-header="89k"
+          right-footer="friends"
+          left-header="459"
+          left-footer="feeds"
+        >
+          <CIcon
+            name="socialFacebook"
+            height="56"
+            class="c-my-4"
+          />
+          <CChartLineSimple
+            style="height:100px"
+            class="c-position-absolute"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[65, 59, 84, 84, 51, 55, 40]"
+            label="Friends"
+            labels="months"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="twitter"
+          right-header="973k"
+          right-footer="followers"
+          left-header="1.792"
+          left-footer="tweets"
+        >
+          <CIcon
+            name="socialTwitter"
+            height="56"
+            class="c-my-4"
+          />
+          <CChartLineSimple
+            style="height:100px"
+            class="c-position-absolute"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[1, 13, 9, 17, 34, 41, 38]"
+            label="Followers"
+            labels="months"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="linkedin"
+          right-header="500+"
+          right-footer="contracts"
+          left-header="292"
+          left-footer="feeds"
+        >
+          <CIcon
+            name="socialLinkedin"
+            height="56"
+            class="c-my-4"
+          />
+          <CChartLineSimple
+            style="height:100px"
+            class="c-position-absolute"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[78, 81, 80, 45, 34, 12, 40]"
+            label="Contracts"
+            labels="months"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidgetSocial
+          right-header="12"
+          right-footer="events"
+          left-header="4"
+          left-footer="meetings"
+          variant="warning"
+        >
+          <CIcon
+            name="calendar"
+            height="56"
+            class="c-my-4"
+          />
+          <CChartLineSimple
+            style="height:100px"
+            class="c-position-absolute"
+            background-color="rgba(255,255,255,.1)"
+            :data-points="[35, 23, 56, 22, 97, 23, 64]"
+            label="Followers"
+            labels="months"
+          />
+        </CWidgetSocial>
+      </CCol>
+    </template>
+    <template v-else>
+      <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="facebook"
+          right-header="89k"
+          right-footer="friends"
+          left-header="459"
+          left-footer="feeds"
+        >
+          <CIcon
+            name="socialFacebook"
+            height="56"
+            class="c-my-4"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="twitter"
+          right-header="973k"
+          right-footer="followers"
+          left-header="1.792"
+          left-footer="tweets"
+        >
+          <CIcon
+            name="socialTwitter"
+            height="56"
+            class="c-my-4"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
+        <CWidgetSocial
+          variant="linkedin"
+          right-header="500+"
+          right-footer="contracts"
+          left-header="292"
+          left-footer="feeds"
+        >
+          <CIcon
+            name="socialLinkedin"
+            height="56"
+            class="c-my-4"
+          />
+        </CWidgetSocial>
+       </CCol>
+      <CCol md="3" sm="6">
+        <CWidgetSocial
+          right-header="12"
+          right-footer="events"
+          left-header="4"
+          left-footer="meetings"
+          variant="warning"
+        >
+          <CIcon
+            name="calendar"
+            height="56"
+            class="c-my-4"
+          />
+        </CWidgetSocial>
+      </CCol>
+    </template>
+  </CRow>
+</template>
+
+<script>
+import { CChartLineSimple } from '../charts/index.js'
+
+export default {
+  name: 'WidgetsSocial',
+  components: {
+    CChartLineSimple
+  },
+  props: {
+    noCharts: Boolean
+  }
+}
+</script>

tests/e2e/specs/test.js

@@ -22,84 +22,84 @@ module.exports = {
 
     browser.url(devServer).pause(500).expect.element('body').to.be.present
 
-    browser.waitForElementVisible('.app', 10000)
+    // browser.waitForElementVisible('.app', 10000)
-      .assert.elementPresent('.app-header')
+    //   .assert.elementPresent('.app-header')
-      .assert.elementPresent('.app-header > .navbar-brand')
+    //   .assert.elementPresent('.app-header > .navbar-brand')
-      .assert.elementPresent('.app-body')
+    //   .assert.elementPresent('.app-body')
-      .assert.elementPresent('.app-body > .main > .breadcrumb')
+    //   .assert.elementPresent('.app-body > .main > .breadcrumb')
-      .assert.elementPresent('.app-body > .main > .container-fluid > .animated')
+    //   .assert.elementPresent('.app-body > .main > .container-fluid > .animated')
-      .assert.elementPresent('.app-body > .sidebar > .sidebar-nav')
+    //   .assert.elementPresent('.app-body > .sidebar > .sidebar-nav')
-      .assert.elementPresent('.app-body > .sidebar > .sidebar-minimizer')
+    //   .assert.elementPresent('.app-body > .sidebar > .sidebar-minimizer')
-      .assert.elementPresent('.app-footer')
+    //   .assert.elementPresent('.app-footer')
-      .assert.containsText('.app-footer > div > span', 'creativeLabs')
+    //   .assert.containsText('.app-footer > div > span', 'creativeLabs')
-      .assert.containsText('.app-footer > div.ml-auto > span', 'Powered by')
+    //   .assert.containsText('.app-footer > div.ml-auto > span', 'Powered by')
-      .assert.elementCount('button', 10)
+    //   .assert.elementCount('button', 10)
-      .resizeWindow(1024, 800)
+    //   .resizeWindow(1024, 800)
-      .pause(500)
+    //   .pause(500)
 
-    browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
+    // browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
-      console.log('response', typeof response)
+    //   console.log('response', typeof response)
-      this.assert.ok(browser === this, 'Check if the context is right.')
+    //   this.assert.ok(browser === this, 'Check if the context is right.')
-      this.assert.cssClassPresent('body', 'aside-menu-show')
+    //   this.assert.cssClassPresent('body', 'aside-menu-show')
-    })
+    // })
+    //
+    // browser.pause(500)
 
-    browser.pause(500)
+    // browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
+    //   console.log('response', typeof response)
+    //   this.assert.cssClassNotPresent('body', 'aside-menu-show')
+    // })
+    //
+    // browser.pause(500)
+    //
+    // browser
+    //   .useXpath()
+    //   .click('/html/body/div/header/button[2]', function (response) {
+    //     console.log('response', typeof response)
+    //     this.assert.cssClassNotPresent('/html/body', 'sidebar-lg-show')
+    //   })
+    //
+    // browser
+    //   .pause(500)
+    //   .click('/html/body/div/header/button[2]', function (response) {
+    //     console.log('response', typeof response)
+    //     this.assert.cssClassPresent('/html/body', 'sidebar-lg-show')
+    //   })
+    //
+    // browser
+    //   .pause(500)
+    //   .click('/html/body/div/div/div/button', function (response) {
+    //     console.log('response', typeof response)
+    //     this.assert.cssClassPresent('/html/body', 'sidebar-minimized')
+    //     this.assert.cssClassPresent('/html/body', 'brand-minimized')
+    //   })
+    //   .pause(500)
+    //   .click('/html/body/div/div/div/button', function (response) {
+    //     console.log('response', typeof response)
+    //     this.assert.cssClassNotPresent('/html/body', 'sidebar-minimized')
+    //     this.assert.cssClassNotPresent('/html/body', 'brand-minimized')
+    //   })
+    //
+    // browser
+    // .resizeWindow(800, 600)
+    // .pause(500)
+    //
+    // browser
+    // .pause(500)
+    // .click('/html/body/div/header/button[1]', function (response) {
+    //   console.log('response', typeof response)
+    //   this.assert.cssClassPresent('/html/body', 'sidebar-show')
+    // })
+    //
+    // browser
+    // .pause(500)
+    // .click('/html/body/div/div/div/nav/section/ul/li[1]/div/a', function (response) {
+    //   console.log('response', typeof response)
+    //   this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
+    // })
+    //
+    // browser.pause(5000)
 
-    browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
+    browser.end()
-      console.log('response', typeof response)
-      this.assert.cssClassNotPresent('body', 'aside-menu-show')
-    })
-
-    browser.pause(500)
-
-    browser
-      .useXpath()
-      .click('/html/body/div/header/button[2]', function (response) {
-        console.log('response', typeof response)
-        this.assert.cssClassNotPresent('/html/body', 'sidebar-lg-show')
-      })
-
-    browser
-      .pause(500)
-      .click('/html/body/div/header/button[2]', function (response) {
-        console.log('response', typeof response)
-        this.assert.cssClassPresent('/html/body', 'sidebar-lg-show')
-      })
-
-    browser
-      .pause(500)
-      .click('/html/body/div/div/div/button', function (response) {
-        console.log('response', typeof response)
-        this.assert.cssClassPresent('/html/body', 'sidebar-minimized')
-        this.assert.cssClassPresent('/html/body', 'brand-minimized')
-      })
-      .pause(500)
-      .click('/html/body/div/div/div/button', function (response) {
-        console.log('response', typeof response)
-        this.assert.cssClassNotPresent('/html/body', 'sidebar-minimized')
-        this.assert.cssClassNotPresent('/html/body', 'brand-minimized')
-      })
-
-    browser
-    .resizeWindow(800, 600)
-    .pause(500)
-
-    browser
-    .pause(500)
-    .click('/html/body/div/header/button[1]', function (response) {
-      console.log('response', typeof response)
-      this.assert.cssClassPresent('/html/body', 'sidebar-show')
-    })
-
-    browser
-    .pause(500)
-    .click('/html/body/div/div/div/nav/section/ul/li[1]/div/a', function (response) {
-      console.log('response', typeof response)
-      this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
-    })
-
-    browser
-      .pause(5000)
-      .end()
   }
 }

tests/unit/.eslintrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  env: {
-    jest: true
-  },
-  rules: {
-    'import/no-extraneous-dependencies': 'off'
-  }
-}

tests/unit/.template.js

@@ -1,21 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Component from '@/views/PATH'
-
-Vue.use(BootstrapVue)
-
-const ComponentName = 'COMPONENT_NAME'
-const wrapper = shallowMount(Component)
-
-describe(ComponentName + '.vue', () => {
-  it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
-  })
-  it('is Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('has a created hook', () => {
-    expect(typeof Component.data).toMatch('function')
-  })
-})

tests/unit/App.spec.js

@@ -1,31 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import VueRouter from 'vue-router'
-import BootstrapVue from 'bootstrap-vue'
-import App from '@/App'
-
-const localVue = createLocalVue()
-localVue.use(VueRouter)
-const router = new VueRouter()
-
-
-localVue.use(BootstrapVue)
-
-describe('App.vue', () => {
-  it('has a name', () => {
-    expect(App.name).toMatch('app')
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(App, {
-      localVue,
-      router
-    })
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is App', () => {
-    const wrapper = shallowMount(App, {
-      localVue,
-      router
-    })
-    expect(wrapper.is(App)).toBe(true)
-  })
-})

tests/unit/Charts.spec.js

@@ -1,20 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Charts from '@/views/Charts'
-
-Vue.use(BootstrapVue)
-
-describe('Charts.vue', () => {
-  it('has a name', () => {
-    expect(Charts.name).toMatch('charts')
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Charts)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Charts', () => {
-    const wrapper = shallowMount(Charts)
-    expect(wrapper.is(Charts)).toBe(true)
-  })
-})

tests/unit/Dashboard.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Dashboard from '@/views/Dashboard'
-
-Vue.use(BootstrapVue)
-
-describe('Dashboard.vue', () => {
-  it('has a name', () => {
-    expect(Dashboard.name).toMatch('dashboard')
-  })
-  it('has a created hook', () => {
-    expect(typeof Dashboard.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Dashboard.data).toMatch('function')
-    const defaultData = Dashboard.data()
-    expect(defaultData.selected).toMatch('Month')
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Dashboard)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Dashboard', () => {
-    const wrapper = shallowMount(Dashboard)
-    expect(wrapper.is(Dashboard)).toBe(true)
-  })
-  it('should render correct content', () => {
-    const wrapper = shallowMount(Dashboard)
-    expect(wrapper.find('#traffic').text()).toMatch('Traffic')
-  })
-})

tests/unit/Plugin.spec.js

@@ -1,38 +0,0 @@
-// import Vue from 'vue'
-import CoreuiVueModule from '@coreui/vue'
-// Vue.use(CoreuiVueModule)
-
-test("Should register all components when installed", () => {
-
-  const component = jest.fn();
-  const Vue = { component };
-
-  CoreuiVueModule.install(Vue);
-
-  // Test if a particular component was registered
-  expect(component).toBeCalledWith("Aside", expect.any(Object));
-  expect(component).toBeCalledWith("AsideToggler", expect.any(Object));
-  expect(component).toBeCalledWith("Breadcrumb", expect.any(Object));
-  expect(component).toBeCalledWith("Callout", expect.any(Object));
-  expect(component).toBeCalledWith("Footer", expect.any(Object));
-  expect(component).toBeCalledWith("Header", expect.any(Object));
-  expect(component).toBeCalledWith("HeaderDropdown", expect.any(Object));
-  expect(component).toBeCalledWith("Sidebar", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarFooter", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarForm", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarHeader", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarMinimizer", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNav", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavDivider", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavItem", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavDropdown", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavLabel", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavLink", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarNavTitle", expect.any(Object));
-  expect(component).toBeCalledWith("SidebarToggler", expect.any(Object));
-  expect(component).toBeCalledWith("Switch", expect.any(Object));
-
-  // Test how many times component got registered
-  // const totalOfComponents = 21;
-  // expect(component).toHaveBeenCalledTimes(totalOfComponents);
-});

tests/unit/base/Breadcrumbs.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Breadcrumbs from '@/views/base/Breadcrumbs'
-
-Vue.use(BootstrapVue)
-
-describe('Breadcrumbs.vue', () => {
-  it('has a name', () => {
-    expect(Breadcrumbs.name).toMatch('breadcrumbs')
-  })
-  it('has a created hook', () => {
-    expect(typeof Breadcrumbs.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Breadcrumbs.data).toMatch('function')
-    const defaultData = Breadcrumbs.data()
-    expect(typeof defaultData.items).toMatch('object')
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Breadcrumbs)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Breadcrumbs', () => {
-    const wrapper = shallowMount(Breadcrumbs)
-    expect(wrapper.is(Breadcrumbs)).toBe(true)
-  })
-  it('should render correct content', () => {
-    const wrapper = mount(Breadcrumbs)
-    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Breadcrumb')
-  })
-})

tests/unit/base/Cards.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Cards from '@/views/base/Cards'
-
-Vue.use(BootstrapVue)
-
-describe('Cards.vue', () => {
-  it('has a name', () => {
-    expect(Cards.name).toMatch('cards')
-  })
-  it('has a created hook', () => {
-    expect(typeof Cards.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Cards.data).toMatch('function')
-    const defaultData = Cards.data()
-    expect(defaultData.show).toBe(true)
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Cards)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Cards', () => {
-    const wrapper = shallowMount(Cards)
-    expect(wrapper.is(Cards)).toBe(true)
-  })
-  it('should render correct content', () => {
-    const wrapper = mount(Cards)
-    expect(wrapper.find('div.card-header > div').text()).toMatch('Card title')
-  })
-})

tests/unit/base/Carousels.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Carousels from '@/views/base/Carousels'
-
-Vue.use(BootstrapVue)
-
-describe('Carousels.vue', () => {
-  it('has a name', () => {
-    expect(Carousels.name).toMatch('carousels')
-  })
-  it('has a created hook', () => {
-    expect(typeof Carousels.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Carousels.data).toMatch('function')
-    const defaultData = Carousels.data()
-    expect(defaultData.slide).toBe(0)
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Carousels)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Carousels', () => {
-    const wrapper = shallowMount(Carousels)
-    expect(wrapper.is(Carousels)).toBe(true)
-  })
-  it('should render correct content', () => {
-    const wrapper = mount(Carousels)
-    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Carousel')
-  })
-})

tests/unit/base/Collapses.spec.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
-import BootstrapVue from 'bootstrap-vue'
-import Collapses from '@/views/base/Collapses'
-
-Vue.use(BootstrapVue)
-
-describe('Collapses.vue', () => {
-  it('has a name', () => {
-    expect(Collapses.name).toMatch('collapses')
-  })
-  it('has a created hook', () => {
-    expect(typeof Collapses.data).toMatch('function')
-  })
-  it('sets the correct default data', () => {
-    expect(typeof Collapses.data).toMatch('function')
-    const defaultData = Collapses.data()
-    expect(defaultData.showCollapse).toBe(true)
-  })
-  it('is Vue instance', () => {
-    const wrapper = shallowMount(Collapses)
-    expect(wrapper.isVueInstance()).toBe(true)
-  })
-  it('is Collapses', () => {
-    const wrapper = shallowMount(Collapses)
-    expect(wrapper.is(Collapses)).toBe(true)
-  })
-  it('should render correct content', () => {
-    const wrapper = mount(Collapses)
-    expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
-  })
-})