Adjustments, add typography page, fix notification buttons

src/assets/demo/demo.css

@@ -0,0 +1,63 @@
+.tim-row {
+  margin-bottom: 20px;
+}
+
+.tim-white-buttons {
+  background-color: #777777;
+}
+
+.typography-line {
+  padding-left: 25%;
+  margin-bottom: 35px;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.typography-line span {
+  bottom: 10px;
+  color: #c0c1c2;
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 13px;
+  left: 0;
+  position: absolute;
+  width: 260px;
+  text-transform: none;
+}
+
+.tim-row {
+  padding-top: 60px;
+}
+
+.tim-row h3 {
+  margin-top: 0;
+}
+
+.offline-doc .page-header {
+  display: flex;
+  align-items: center;
+}
+
+.offline-doc .footer {
+  position: absolute;
+  width: 100%;
+  background: transparent;
+  bottom: 0;
+  color: #fff;
+  z-index: 1;
+}
+
+@media all and (min-width: 992px) {
+  .sidebar .nav>li.active-pro {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+  }
+}
+
+.card.card-upgrade .card-category {
+  max-width: 530px;
+  margin: 0 auto;
+}

src/components/Button.vue

@@ -3,6 +3,7 @@
     :is="tag"
     :type="nativeType"
     :disabled="disabled || loading"
+    @click="handleClick"
     class="btn"
     :class="[
       {'btn-round': round},
@@ -46,6 +47,11 @@ export default {
       default: ""
     },
     simple: Boolean
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt);
+    }
   }
 };
 </script>

src/components/NotificationPlugin/Notification.vue

@@ -0,0 +1,171 @@
+<template>
+  <div @click="tryClose"
+       data-notify="container"
+       class="alert open"
+       :class="[{'alert-with-icon': icon}, verticalAlign, horizontalAlign, alertType]"
+       role="alert"
+       :style="customPosition"
+       data-notify-position="top-center">
+    <button
+      v-if="showClose"
+      type="button"
+      aria-hidden="true"
+      class="close col-xs-1"
+      data-notify="dismiss"
+      @click="close">
+      <i class="tim-icons icon-simple-remove"></i>
+    </button>
+
+    <span v-if="icon" data-notify="icon" :class="['alert-icon', icon]"></span>
+    <span data-notify="message">
+      <span v-if="title" class="title"><b>{{title}}<br/></b></span>
+      <span v-if="message" v-html="message"></span>
+      <content-render v-if="!message && component" :component="component"></content-render>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'notification',
+  components: {
+    contentRender: {
+      props: ['component'],
+      render: h => h(this.component)
+    }
+  },
+  props: {
+    message: String,
+    title: String,
+    icon: String,
+    verticalAlign: {
+      type: String,
+      default: 'top',
+      validator: value => {
+        let acceptedValues = ['top', 'bottom'];
+        return acceptedValues.indexOf(value) !== -1;
+      }
+    },
+    horizontalAlign: {
+      type: String,
+      default: 'right',
+      validator: value => {
+        let acceptedValues = ['left', 'center', 'right'];
+        return acceptedValues.indexOf(value) !== -1;
+      }
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator: value => {
+        let acceptedValues = [
+          'info',
+          'primary',
+          'danger',
+          'warning',
+          'success'
+        ];
+        return acceptedValues.indexOf(value) !== -1;
+      }
+    },
+    timeout: {
+      type: Number,
+      default: 5000,
+      validator: value => {
+        return value >= 0;
+      }
+    },
+    timestamp: {
+      type: Date,
+      default: () => new Date()
+    },
+    component: {
+      type: [Object, Function]
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    clickHandler: Function
+  },
+  data() {
+    return {
+      elmHeight: 0
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon && this.icon.length > 0;
+    },
+    alertType() {
+      return `alert-${this.type}`;
+    },
+    customPosition() {
+      let initialMargin = 20;
+      let alertHeight = this.elmHeight + 10;
+      let sameAlertsCount = this.$notifications.state.filter(alert => {
+        return (
+          alert.horizontalAlign === this.horizontalAlign &&
+          alert.verticalAlign === this.verticalAlign &&
+          alert.timestamp <= this.timestamp
+        );
+      }).length;
+      if (this.$notifications.settings.overlap) {
+        sameAlertsCount = 1;
+      }
+      let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin;
+      let styles = {};
+      if (this.verticalAlign === 'top') {
+        styles.top = `${pixels}px`;
+      } else {
+        styles.bottom = `${pixels}px`;
+      }
+      return styles;
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close', this.timestamp);
+    },
+    tryClose(evt) {
+      if (this.clickHandler) {
+        this.clickHandler(evt, this);
+      }
+      if (this.closeOnClick) {
+        this.close();
+      }
+    }
+  },
+  mounted() {
+    this.elmHeight = this.$el.clientHeight;
+    if (this.timeout) {
+      setTimeout(this.close, this.timeout);
+    }
+  }
+};
+</script>
+<style lang="scss">
+.notifications .alert {
+  position: fixed;
+  z-index: 10000;
+
+  &[data-notify='container'] {
+    width: 400px;
+  }
+
+  &.center {
+    left: 0px;
+    right: 0px;
+    margin: 0 auto;
+  }
+  &.left {
+    left: 20px;
+  }
+  &.right {
+    right: 20px;
+  }
+}
+</style>

src/components/NotificationPlugin/Notifications.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="notifications">
+    <transition-group :name="transitionName"
+                      :mode="transitionMode">
+      <notification
+        v-for="notification in notifications"
+        v-bind="notification"
+        :clickHandler="notification.onClick"
+        :key="notification.timestamp.getTime()"
+        @close="removeNotification">
+      </notification>
+    </transition-group>
+  </div>
+</template>
+<script>
+import Notification from './Notification.vue';
+
+export default {
+  components: {
+    Notification
+  },
+  props: {
+    transitionName: {
+      type: String,
+      default: 'list'
+    },
+    transitionMode: {
+      type: String,
+      default: 'in-out'
+    },
+    overlap: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      notifications: this.$notifications.state
+    };
+  },
+  methods: {
+    removeNotification(timestamp) {
+      this.$notifications.removeNotification(timestamp);
+    }
+  },
+  created() {
+    this.$notifications.settings.overlap = this.overlap;
+  },
+  watch: {
+    overlap: function(newVal) {
+      this.$notifications.settings.overlap = newVal;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.notifications {
+  .list-move {
+    transition: transform 0.3s, opacity 0.4s;
+  }
+  .list-item {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .list-enter-active {
+    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
+  }
+  .list-leave-active {
+    transition: transform 1s ease-out, opacity 0.4s ease-out;
+  }
+
+  .list-enter {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  .list-leave-to {
+    opacity: 0;
+    transform: scale(1.2, 0.7);
+  }
+}
+</style>

src/components/NotificationPlugin/index.js

@@ -0,0 +1,66 @@
+import Notifications from './Notifications.vue';
+
+const NotificationStore = {
+  state: [], // here the notifications will be added
+  settings: {
+    overlap: false,
+    verticalAlign: 'top',
+    horizontalAlign: 'right',
+    type: 'info',
+    timeout: 5000,
+    closeOnClick: true,
+    showClose: true
+  },
+  setOptions(options) {
+    this.settings = Object.assign(this.settings, options);
+  },
+  removeNotification(timestamp) {
+    const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
+    if (indexToDelete !== -1) {
+      this.state.splice(indexToDelete, 1);
+    }
+  },
+  addNotification(notification) {
+    if (typeof notification === 'string' || notification instanceof String) {
+      notification = { message: notification };
+    }
+    notification.timestamp = new Date();
+    notification.timestamp.setMilliseconds(
+      notification.timestamp.getMilliseconds() + this.state.length
+    );
+    notification = Object.assign({}, this.settings, notification);
+    this.state.push(notification);
+  },
+  notify(notification) {
+    if (Array.isArray(notification)) {
+      notification.forEach(notificationInstance => {
+        this.addNotification(notificationInstance);
+      });
+    } else {
+      this.addNotification(notification);
+    }
+  }
+};
+
+const NotificationsPlugin = {
+  install(Vue, options) {
+    let app = new Vue({
+      data: {
+        notificationStore: NotificationStore
+      },
+      methods: {
+        notify(notification) {
+          this.notificationStore.notify(notification);
+        }
+      }
+    });
+    Vue.prototype.$notify = app.notify;
+    Vue.prototype.$notifications = app.notificationStore;
+    Vue.component('Notifications', Notifications);
+    if (options) {
+      NotificationStore.setOptions(options);
+    }
+  }
+};
+
+export default NotificationsPlugin;

src/pages/Dashboard.vue

@@ -1,196 +1,10 @@
 <template>
   <div>
-
+    Dashboard page
-    <!--Stats cards-->
-    <div class="row">
-      <div class="col-md-6 col-xl-3" v-for="stats in statsCards" :key="stats.title">
-        <stats-card>
-          <div class="icon-big text-center" :class="`icon-${stats.type}`" slot="header">
-            <i :class="stats.icon"></i>
-          </div>
-          <div class="numbers" slot="content">
-            <p>{{stats.title}}</p>
-            {{stats.value}}
-          </div>
-          <div class="stats" slot="footer">
-            <i :class="stats.footerIcon"></i> {{stats.footerText}}
-          </div>
-        </stats-card>
-      </div>
-    </div>
-
-    <!--Charts-->
-    <div class="row">
-
-      <div class="col-12">
-        <chart-card title="Users behavior"
-                    sub-title="24 Hours performance"
-                    :chart-data="usersChart.data"
-                    :chart-options="usersChart.options">
-          <span slot="footer">
-            <i class="ti-reload"></i> Updated 3 minutes ago
-          </span>
-          <div slot="legend">
-            <i class="fa fa-circle text-info"></i> Open
-            <i class="fa fa-circle text-danger"></i> Click
-            <i class="fa fa-circle text-warning"></i> Click Second Time
-          </div>
-        </chart-card>
-      </div>
-
-      <div class="col-md-6 col-12">
-        <chart-card title="Email Statistics"
-                    sub-title="Last campaign performance"
-                    :chart-data="preferencesChart.data"
-                    chart-type="Pie">
-          <span slot="footer">
-            <i class="ti-timer"></i> Campaign set 2 days ago</span>
-          <div slot="legend">
-            <i class="fa fa-circle text-info"></i> Open
-            <i class="fa fa-circle text-danger"></i> Bounce
-            <i class="fa fa-circle text-warning"></i> Unsubscribe
-          </div>
-        </chart-card>
-      </div>
-
-      <div class="col-md-6 col-12">
-        <chart-card title="2015 Sales"
-                    sub-title="All products including Taxes"
-                    :chart-data="activityChart.data"
-                    :chart-options="activityChart.options">
-          <span slot="footer">
-            <i class="ti-check"></i> Data information certified
-          </span>
-          <div slot="legend">
-            <i class="fa fa-circle text-info"></i> Tesla Model S
-            <i class="fa fa-circle text-warning"></i> BMW 5 Series
-          </div>
-        </chart-card>
-      </div>
-
-    </div>
-
   </div>
 </template>
 <script>
-import { StatsCard, ChartCard } from "@/components/index";
+export default {};
-import Chartist from 'chartist';
-export default {
-  components: {
-    StatsCard,
-    ChartCard
-  },
-  /**
-   * Chart data used to render stats, charts. Should be replaced with server data
-   */
-  data() {
-    return {
-      statsCards: [
-        {
-          type: "warning",
-          icon: "ti-server",
-          title: "Capacity",
-          value: "105GB",
-          footerText: "Updated now",
-          footerIcon: "ti-reload"
-        },
-        {
-          type: "success",
-          icon: "ti-wallet",
-          title: "Revenue",
-          value: "$1,345",
-          footerText: "Last day",
-          footerIcon: "ti-calendar"
-        },
-        {
-          type: "danger",
-          icon: "ti-pulse",
-          title: "Errors",
-          value: "23",
-          footerText: "In the last hour",
-          footerIcon: "ti-timer"
-        },
-        {
-          type: "info",
-          icon: "ti-twitter-alt",
-          title: "Followers",
-          value: "+45",
-          footerText: "Updated now",
-          footerIcon: "ti-reload"
-        }
-      ],
-      usersChart: {
-        data: {
-          labels: [
-            "9:00AM",
-            "12:00AM",
-            "3:00PM",
-            "6:00PM",
-            "9:00PM",
-            "12:00PM",
-            "3:00AM",
-            "6:00AM"
-          ],
-          series: [
-            [287, 385, 490, 562, 594, 626, 698, 895, 952],
-            [67, 152, 193, 240, 387, 435, 535, 642, 744],
-            [23, 113, 67, 108, 190, 239, 307, 410, 410]
-          ]
-        },
-        options: {
-          low: 0,
-          high: 1000,
-          showArea: true,
-          height: "245px",
-          axisX: {
-            showGrid: false
-          },
-          lineSmooth: Chartist.Interpolation.simple({
-            divisor: 3
-          }),
-          showLine: true,
-          showPoint: false
-        }
-      },
-      activityChart: {
-        data: {
-          labels: [
-            "Jan",
-            "Feb",
-            "Mar",
-            "Apr",
-            "Mai",
-            "Jun",
-            "Jul",
-            "Aug",
-            "Sep",
-            "Oct",
-            "Nov",
-            "Dec"
-          ],
-          series: [
-            [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
-            [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795]
-          ]
-        },
-        options: {
-          seriesBarDistance: 10,
-          axisX: {
-            showGrid: false
-          },
-          height: "245px"
-        }
-      },
-      preferencesChart: {
-        data: {
-          labels: ["62%", "32%", "6%"],
-          series: [62, 32, 6]
-        },
-        options: {}
-      }
-    };
-  }
-};
 </script>
 <style>
 </style>

src/pages/Notifications.vue

@@ -60,24 +60,24 @@
         </div>
         <div class="row d-flex justify-content-center">
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('top', 'left')">Top Left</p-button>
+            <p-button type="primary" block @click="notifyVue('top', 'left')">Top Left</p-button>
           </div>
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('top', 'center')">Top Center</p-button>
+            <p-button type="primary" block @click="notifyVue('top', 'center')">Top Center</p-button>
           </div>
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('top', 'right')">Top Right</p-button>
+            <p-button type="primary" block @click="notifyVue('top', 'right')">Top Right</p-button>
           </div>
         </div>
         <div class="row d-flex justify-content-center">
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('bottom', 'left')">Bottom Left</p-button>
+            <p-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</p-button>
           </div>
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('bottom', 'center')">Bottom Center</p-button>
+            <p-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</p-button>
           </div>
           <div class="col-md-3">
-            <p-button round outline block @click.native="notifyVue('bottom', 'right')">Bottom Right</p-button>
+            <p-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</p-button>
           </div>
 
         </div>
@@ -102,7 +102,7 @@ export default {
       const color = Math.floor(Math.random() * 4 + 1);
       this.$notify({
         component: NotificationTemplate,
-        icon: "ti-gift",
+        icon: "tim-icons icon-bell-55",
         horizontalAlign: horizontalAlign,
         verticalAlign: verticalAlign,
         type: this.type[color]

src/pages/Typography.vue

@@ -1,89 +1,107 @@
 <template>
   <div class="row">
     <div class="col-md-12">
-    <card>
+      <div class="card">
-      <template slot="header">
+        <div class="card-header mb-5">
-        <h4 class="card-title">Black Dashboard Headings</h4>
+          <h5 class="card-category">Black Table Heading</h5>
-        <p class="card-category">Created using
+          <h3 class="card-title">Created using Poppins Font Family</h3>
-          <a href="https://www.google.com/fonts/specimen/Muli">Muli</a> Font Family</p>
+        </div>
-      </template>
+        <div class="card-body">
-      <div class="content">
+          <div class="typography-line">
-        <div class="typo-line">
             <h1>
-            <p class="category">Header 1</p>Black Dashboard Heading </h1>
+              <span>Header 1</span>The Life of Black Dashboard </h1>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <h2>
-            <p class="category">Header 2</p>Black Dashboard Heading </h2>
+              <span>Header 2</span>The Life of Black Dashboard </h2>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <h3>
-            <p class="category">Header 3</p>Black Dashboard Heading </h3>
+              <span>Header 3</span>The Life of Black Dashboard </h3>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <h4>
-            <p class="category">Header 4</p>Black Dashboard Heading </h4>
+              <span>Header 4</span>The Life of Black Dashboard </h4>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <h5>
-            <p class="category">Header 5</p>Black Dashboard Heading </h5>
+              <span>Header 5</span>The Life of Black Dashboard </h5>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <h6>
-            <p class="category">Header 6</p>Black Dashboard Heading </h6>
+              <span>Header 6</span>The Life of Black Dashboard </h6>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
             <p>
-            <span class="category">Paragraph</span>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.
+              <span>Paragraph</span>
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the answers.
+              I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push
+              possibilities, to show people, this is the level that things could be at.
             </p>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
-          <p class="category">Quote</p>
+            <span>Quote</span>
             <blockquote>
-            <p>
+              <p class="blockquote blockquote-primary">
-              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.
+                "I will be the leader of a company that ends up being worth billions of dollars, because I got the
-            </p>
+                answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push
+                possibilities, to show people, this is the level that things could be at."
+                <br>
+                <br>
                 <small>
-              Steve Jobs, CEO Apple
+                  - Noaa
                 </small>
+              </p>
             </blockquote>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
-          <p class="category">Muted Text</p>
+            <span>Muted Text</span>
             <p class="text-muted">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
+              answers...
             </p>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
-          <!--
+            <span>Primary Text</span>
-               there are also "text-info", "text-success", "text-warning", "text-danger" clases for the text
-               -->
-          <p class="category">Coloured Text</p>
             <p class="text-primary">
-            Text Primary - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
-          </p>
+              answers...</p>
+          </div>
+          <div class="typography-line">
+            <span>Info Text</span>
             <p class="text-info">
-            Text Info - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
-          </p>
+              answers... </p>
+          </div>
+          <div class="typography-line">
+            <span>Success Text</span>
             <p class="text-success">
-            Text Success - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
-          </p>
+              answers... </p>
+          </div>
+          <div class="typography-line">
+            <span>Warning Text</span>
             <p class="text-warning">
-            Text Warning - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
-          </p>
+              answers...
-          <p class="text-danger">
-            Text Danger - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet.
             </p>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
+            <span>Danger Text</span>
+            <p class="text-danger">
+              I will be the leader of a company that ends up being worth billions of dollars, because I got the
+              answers... </p>
+          </div>
+          <div class="typography-line">
             <h2>
-            <p class="category">Small Tag</p>Header with small subtitle
+              <span>Small Tag</span>
+              Header with small subtitle
               <br>
-            <small>".small" is a tag for the headers</small>
+              <small>Use "small" tag for the headers</small>
             </h2>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
-          <p class="category">Lists</p>
+            <span>Lists</span>
             <div class="row">
               <div class="col-md-3">
                 <h5>Unordered List</h5>
@@ -105,6 +123,7 @@
                 <ol>
                   <li>List Item</li>
                   <li>List Item</li>
+                  <li>List item</li>
                   <li>List Item</li>
                 </ol>
               </div>
@@ -113,55 +132,35 @@
                 <ul class="list-unstyled">
                   <li>List Item</li>
                   <li>List Item</li>
+                  <li>List item</li>
                   <li>List Item</li>
                 </ul>
               </div>
               <div class="col-md-3">
                 <h5>Inline List</h5>
                 <ul class="list-inline">
-                <li>List Item</li>
+                  <li class="list-inline-item">List1</li>
-                <li>List Item</li>
+                  <li class="list-inline-item">List2</li>
-                <li>List Item</li>
+                  <li class="list-inline-item">List3</li>
                 </ul>
               </div>
             </div>
           </div>
-        <div class="typo-line">
+          <div class="typography-line">
-          <p class="category">Blockquotes</p>
+            <span>Code</span>
-          <div class="row">
+            <p>This is
-            <div class="col-md-6">
-              <h5>Default Blockquote</h5>
-              <blockquote>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              </blockquote>
-            </div>
-            <div class="col-md-6">
-              <h5>Blockquote with Citation</h5>
-              <blockquote>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-                <small>Someone famous in
-                  <cite title="Source Title">Source Title</cite>
-                </small>
-              </blockquote>
-            </div>
-          </div>
-        </div>
-        <div class="typo-line">
-          <p class="category">Code</p>
-          <p>
-            This is
               <code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
-            <code>
+              <code> &lt;code&gt;...&lt;/code&gt;</code>tag.
-              &lt;code&gt;...&lt;/code&gt;</code>tag.</p>
+            </p>
-          <pre>1. #This is an example of preformatted text. 2. #Here is another line of code</pre>
+            <pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
+          </div>
         </div>
       </div>
-    </card>
     </div>
   </div>
 </template>
 <script>
-export default {};
+  export default {};
 </script>
 <style>
 </style>

src/plugins/blackDashboard.js

@@ -1,5 +1,6 @@
 import Notify from "vue-notifyjs";
 import "@/assets/css/nucleo-icons.css";
+import "@/assets/demo/demo.css";
 import SideBar from "@/components/SidebarPlugin";
 import GlobalComponents from "./globalComponents";
 import GlobalDirectives from "./globalDirectives";