diff --git a/.eslintignore b/.eslintignore
index f7462f15c3..3f8aa85e46 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,18 +8,9 @@ packages/core/src/lib/markdown-it/plugins/*
 
 # --- packages/vue-components ---
 
-packages/vue-components/dist
 packages/vue-components/src/directives/Closeable.js
 packages/vue-components/src/directives/Float.js
 packages/vue-components/src/utils/NodeList.js
 packages/vue-components/src/utils/utils.js
 
-# yuche/vue-strap
-packages/vue-components/src/main.js
-packages/vue-components/src/Navbar.vue
-packages/vue-components/src/Tab.vue
-packages/vue-components/src/TabGroup.vue
-packages/vue-components/src/Tabset.vue
-packages/vue-components/src/Typeahead.vue
-
 # --- packages/vue-components end ---
diff --git a/.stylelintignore b/.stylelintignore
index c10b20f990..e3ccae354a 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -2,28 +2,3 @@
 **/_site/**/*.css
 packages/cli/test/functional/**/expected/**/*.css
 packages/vue-components/**/*.css
-
-# --- packages/vue-components .vue files ---
-
-packages/vue-components/src/Navbar.vue
-packages/vue-components/src/Panel.vue
-packages/vue-components/src/Pic.vue
-packages/vue-components/src/Retriever.vue
-packages/vue-components/src/Searchbar.vue
-packages/vue-components/src/SearchbarPageItem.vue
-packages/vue-components/src/SiteNav.vue
-packages/vue-components/src/Submenu.vue
-packages/vue-components/src/Tab.vue
-packages/vue-components/src/TabGroup.vue
-packages/vue-components/src/Tabset.vue
-packages/vue-components/src/Thumbnail.vue
-packages/vue-components/src/TipBox.vue
-packages/vue-components/src/Trigger.vue
-packages/vue-components/src/panels/MinimalPanel.vue
-packages/vue-components/src/panels/NestedPanel.vue
-packages/vue-components/src/panels/PanelSwitch.vue
-packages/vue-components/src/questions/QOption.vue
-packages/vue-components/src/questions/Question.vue
-packages/vue-components/src/questions/Quiz.vue
-
-# --- packages/vue-components end ---
diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue
index c2be04f3a0..b59d207d38 100644
--- a/packages/vue-components/src/Navbar.vue
+++ b/packages/vue-components/src/Navbar.vue
@@ -27,17 +27,21 @@
         </div>
       </div>
     </nav>
-    <div ref="lowerNavbar" v-show="isLowerNavbarShowing" class="lower-navbar-container">
+    <div
+      v-show="isLowerNavbarShowing"
+      ref="lowerNavbar"
+      class="lower-navbar-container"
+    >
       <slot name="lower-navbar">
-          <site-nav-button />
-          <page-nav-button />
+        <site-nav-button />
+        <page-nav-button />
       </slot>
     </div>
   </div>
 </template>
 
 <script>
-import $ from './utils/NodeList.js';
+import $ from './utils/NodeList';
 import { toBoolean } from './utils/utils';
 import normalizeUrl from './utils/urls';
 
@@ -102,10 +106,11 @@ export default {
   },
   methods: {
     toggleCollapse(e) {
-      e && e.preventDefault();
+      if (e) { e.preventDefault(); }
       this.collapsed = !this.collapsed;
     },
-    // Splits a normalised URL into its parts, e.g http://site.org/foo/bar/index.html -> ['foo','bar','index.html']
+    // Splits a normalised URL into its parts,
+    // e.g http://site.org/foo/bar/index.html -> ['foo','bar','index.html']
     splitUrl(url) {
       const u = new URL(normalizeUrl(url));
       return `${u.pathname}`.substr(1).split('/');
@@ -116,7 +121,7 @@ export default {
       if (hParts.length !== uParts.length) {
         return false;
       }
-      for (let i = 0; i < hParts.length - 1; i++) {
+      for (let i = 0; i < hParts.length - 1; i += 1) {
         if (hParts[i] !== uParts[i]) {
           return false;
         }
@@ -129,9 +134,8 @@ export default {
       if (uParts.length <= hParts.length) {
         return false;
       }
-      for (let i = 0; i < hParts.length; i++) {
+      for (let i = 0; i < hParts.length; i += 1) {
         if (hParts[i] !== uParts[i]) {
-          console.log(`${hParts[i]} ${uParts[i]}`);
           return false;
         }
       }
@@ -150,7 +154,7 @@ export default {
       let el = a.parentElement;
       while (el !== li) {
         if (el.classList.contains('dropdown-submenu')) {
-          $(el).findChildren('a').each(a => a.classList.add('dropdown-current'));
+          $(el).findChildren('a').each(aChild => aChild.classList.add('dropdown-current'));
         }
         el = el.parentElement;
       }
@@ -159,14 +163,17 @@ export default {
       const defHlMode = this.defaultHighlightOn;
       const navLis = Array.from(this.$el.querySelector('.navbar-nav').children);
       // attempt an exact match first
-      for (const li of navLis) {
+      for (let i = 0; i < navLis.length; i += 1) {
+        const li = navLis[i];
         const standardLinks = [li];
         const navLinks = Array.from(li.querySelectorAll('a.nav-link'));
         const dropdownLinks = Array.from(li.querySelectorAll('a.dropdown-item'));
         const allNavLinks = standardLinks.concat(navLinks).concat(dropdownLinks).filter(a => a.href);
-        for (const a of allNavLinks) {
+        for (let j = 0; j < allNavLinks.length; j += 1) {
+          const a = allNavLinks[j];
           const hlMode = a.getAttribute('highlight-on') || defHlMode;
           if (hlMode === 'none') {
+            // eslint-disable-next-line no-continue
             continue;
           }
           // terminate early on an exact match
@@ -178,16 +185,20 @@ export default {
         }
       }
       // fallback to user preference, otherwise
-      for (const li of navLis) {
+      for (let i = 0; i < navLis.length; i += 1) {
+        const li = navLis[i];
         const standardLinks = [li];
         const navLinks = Array.from(li.querySelectorAll('a.nav-link'));
         const dropdownLinks = Array.from(li.querySelectorAll('a.dropdown-item'));
         const allNavLinks = standardLinks.concat(navLinks).concat(dropdownLinks).filter(a => a.href);
-        for (const a of allNavLinks) {
+        for (let j = 0; j < allNavLinks.length; j += 1) {
+          const a = allNavLinks[j];
           const hlMode = a.getAttribute('highlight-on') || defHlMode;
           if (hlMode === 'none') {
+            // eslint-disable-next-line no-continue
             continue;
           }
+          // Ignores invalid navbar highlight rule
           if (hlMode === 'sibling-or-child') {
             if (this.isSibling(url, a.href) || this.isChild(url, a.href)) {
               li.classList.add('current');
@@ -206,8 +217,6 @@ export default {
               this.addClassIfDropdown(dropdownLinks, a, li);
               return;
             }
-          } else {
-            console.log('Ignoring invalid navbar highlight rule');
           }
         }
       }
@@ -240,7 +249,7 @@ export default {
       });
     });
     $(this.$el).on('click', 'li:not(.dropdown)>a', (e) => {
-      if (e.target.classList.contains('submenu-toggle')) { return }
+      if (e.target.classList.contains('submenu-toggle')) { return; }
       setTimeout(() => { this.collapsed = true; }, 200);
     }).onBlur((e) => {
       if (!this.$el.contains(e.target)) { this.collapsed = true; }
@@ -262,30 +271,30 @@ export default {
 </script>
 
 <style scoped>
-  @media (max-width: 767px) {
-    .navbar-collapse {
-      max-height: 80vh !important;
-      overflow-x: hidden !important;
-      overflow-y: scroll !important;
+    @media (max-width: 767px) {
+        .navbar-collapse {
+            max-height: 80vh !important;
+            overflow-x: hidden !important;
+            overflow-y: scroll !important;
+        }
     }
-  }
 
-  .navbar-fixed {
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-  }
+    .navbar-fixed {
+        position: fixed;
+        width: 100%;
+        z-index: 1000;
+    }
 
-  >>> .dropdown-current {
-    color: #fff !important;
-    background: #007bff;
-  }
+    >>> .dropdown-current {
+        color: #fff !important;
+        background: #007bff;
+    }
 
-  .lower-navbar-container {
-    background-color: #fff;
-    border-bottom: 1px solid #c1c1c1;
-    height: 50px;
-    width: 100%;
-    position: relative;
-  }
+    .lower-navbar-container {
+        background-color: #fff;
+        border-bottom: 1px solid #c1c1c1;
+        height: 50px;
+        width: 100%;
+        position: relative;
+    }
 </style>
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
index 9371eea7e8..26131d53aa 100644
--- a/packages/vue-components/src/Searchbar.vue
+++ b/packages/vue-components/src/Searchbar.vue
@@ -255,21 +255,21 @@ export default {
 </script>
 
 <style>
-.search-dropdown-menu {
-  min-width: 30em;
-  max-height: 30em;
-  overflow-y: scroll;
-}
+    .search-dropdown-menu {
+        min-width: 30em;
+        max-height: 30em;
+        overflow-y: scroll;
+    }
 
-.dropdown-menu > li > a {
-  cursor: pointer;
-}
+    .dropdown-menu > li > a {
+        cursor: pointer;
+    }
 
-@media screen and (max-width: 768px) {
-  .search-dropdown-menu {
-    min-width: auto;
-    max-height: 30em;
-    overflow-y: scroll;
-  }
-}
+    @media screen and (max-width: 768px) {
+        .search-dropdown-menu {
+            min-width: auto;
+            max-height: 30em;
+            overflow-y: scroll;
+        }
+    }
 </style>
diff --git a/packages/vue-components/src/SearchbarPageItem.vue b/packages/vue-components/src/SearchbarPageItem.vue
index 5c83fb295d..615111ce71 100644
--- a/packages/vue-components/src/SearchbarPageItem.vue
+++ b/packages/vue-components/src/SearchbarPageItem.vue
@@ -84,35 +84,35 @@ export default {
 </script>
 
 <style scoped>
-  .mark {
-    padding: 0 !important;
-  }
+    .mark {
+        padding: 0 !important;
+    }
 
-  .heading {
-    padding: 0 0 0.1rem 0.2rem;
-  }
+    .heading {
+        padding: 0 0 0.1rem 0.2rem;
+    }
 
-  .heading-text {
-    display: inline-block;
-    width: 40%;
-    white-space: normal;
-    vertical-align: top;
-  }
+    .heading-text {
+        display: inline-block;
+        width: 40%;
+        white-space: normal;
+        vertical-align: top;
+    }
 
-  .heading-text-items {
-    display: inline-block;
-    width: calc(60% - 0.7rem);
-    white-space: normal;
-    border-left: 1px solid #ddd;
-    padding-left: 0.5rem;
-  }
+    .heading-text-items {
+        display: inline-block;
+        width: calc(60% - 0.7rem);
+        white-space: normal;
+        border-left: 1px solid #ddd;
+        padding-left: 0.5rem;
+    }
 
-  .page-title {
-    font-size: 1.05rem;
-    font-weight: bold;
-  }
+    .page-title {
+        font-size: 1.05rem;
+        font-weight: bold;
+    }
 
-  .page-headings-separator {
-    margin: 0.2rem 0;
-  }
+    .page-headings-separator {
+        margin: 0.2rem 0;
+    }
 </style>
diff --git a/packages/vue-components/src/SiteNav.vue b/packages/vue-components/src/SiteNav.vue
index 266772354e..dfe3ecef91 100644
--- a/packages/vue-components/src/SiteNav.vue
+++ b/packages/vue-components/src/SiteNav.vue
@@ -33,108 +33,108 @@ export default {
 </script>
 
 <style>
-/* Site navigation */
-
-.site-nav-root a.current {
-    color: #0072ec;
-}
-
-/* Navigation list */
-
-.site-nav-list {
-    list-style-type: none;
-    padding-left: 0;
-}
-
-.site-nav-list-root {
-    margin: 0 -12px;
-}
-
-.site-nav-default-list-item {
-    display: flex;
-    padding: 0.5rem 0 0 2.8rem;
-    transition: background-color 0.08s;
-    color: #454545;
-    cursor: pointer;
-}
-
-.site-nav-custom-list-item {
-    padding: 0.5rem 0 0 2.8rem;
-    color: #454545;
-}
-
-.site-nav-list-item-0 {
-    padding: 0.8rem 0 0.4rem 0.8rem;
-    font-weight: 600;
-    font-size: 1.05em;
-}
-
-.site-nav-list-item-1 {
-    padding: 0.5rem 0 0.3rem 1.3rem;
-}
-
-.site-nav-list-item-2 {
-    padding: 0.5rem 0 0.2rem 1.8rem;
-    font-size: 0.95em;
-}
-
-.site-nav-list-item-3 {
-    padding: 0.5rem 0 0.2rem 2.4rem;
-    font-size: 0.87em;
-}
-
-.site-nav-default-list-item:hover {
-    background-color: rgba(214, 233, 255, 0.35);
-}
-
-.site-nav-default-list-item a {
-    display: inline-block;
-    height: 100%;
-    color: #454545;
-}
-
-.site-nav-default-list-item:hover a {
-    color: black;
-    text-decoration: none;
-}
-
-/* Navigation dropdown menu */
-
-.site-nav-dropdown-btn-icon {
-    display: inline-block;
-    align-self: center;
-    width: 1.5em;
-    height: 1.5em;
-    text-align: center;
-    border-radius: 1rem;
-    margin: 0 0.5rem 0 auto;
-    transition: 0.4s;
-    transform: rotate(0deg);
-    -webkit-transition: 0.4s;
-    -webkit-transform: rotate(0deg);
-}
-
-.site-nav-dropdown-btn-icon:hover {
-    background-color: #d8e3fb;
-}
-
-.site-nav-rotate-icon {
-    color: #4c7ff1;
-    transform: rotate(-180deg);
-    -webkit-transform: rotate(-180deg);
-}
-
-.site-nav-dropdown-container {
-    background: transparent;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.15s ease-out;
-    -webkit-transition: max-height 0.15s ease-out;
-}
-
-.site-nav-dropdown-container-open {
-    max-height: 1000px;
-    transition: max-height 0.25s ease-in;
-    -webkit-transition: max-height 0.25s ease-in;
-}
+    /* Site navigation */
+
+    .site-nav-root a.current {
+        color: #0072ec;
+    }
+
+    /* Navigation list */
+
+    .site-nav-list {
+        list-style-type: none;
+        padding-left: 0;
+    }
+
+    .site-nav-list-root {
+        margin: 0 -12px;
+    }
+
+    .site-nav-default-list-item {
+        display: flex;
+        padding: 0.5rem 0 0 2.8rem;
+        transition: background-color 0.08s;
+        color: #454545;
+        cursor: pointer;
+    }
+
+    .site-nav-custom-list-item {
+        padding: 0.5rem 0 0 2.8rem;
+        color: #454545;
+    }
+
+    .site-nav-list-item-0 {
+        padding: 0.8rem 0 0.4rem 0.8rem;
+        font-weight: 600;
+        font-size: 1.05em;
+    }
+
+    .site-nav-list-item-1 {
+        padding: 0.5rem 0 0.3rem 1.3rem;
+    }
+
+    .site-nav-list-item-2 {
+        padding: 0.5rem 0 0.2rem 1.8rem;
+        font-size: 0.95em;
+    }
+
+    .site-nav-list-item-3 {
+        padding: 0.5rem 0 0.2rem 2.4rem;
+        font-size: 0.87em;
+    }
+
+    .site-nav-default-list-item:hover {
+        background-color: rgba(214, 233, 255, 0.35);
+    }
+
+    .site-nav-default-list-item a {
+        display: inline-block;
+        height: 100%;
+        color: #454545;
+    }
+
+    .site-nav-default-list-item:hover a {
+        color: black;
+        text-decoration: none;
+    }
+
+    /* Navigation dropdown menu */
+
+    .site-nav-dropdown-btn-icon {
+        display: inline-block;
+        align-self: center;
+        width: 1.5em;
+        height: 1.5em;
+        text-align: center;
+        border-radius: 1rem;
+        margin: 0 0.5rem 0 auto;
+        transition: 0.4s;
+        transform: rotate(0deg);
+        -webkit-transition: 0.4s;
+        -webkit-transform: rotate(0deg);
+    }
+
+    .site-nav-dropdown-btn-icon:hover {
+        background-color: #d8e3fb;
+    }
+
+    .site-nav-rotate-icon {
+        color: #4c7ff1;
+        transform: rotate(-180deg);
+        -webkit-transform: rotate(-180deg);
+    }
+
+    .site-nav-dropdown-container {
+        background: transparent;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.15s ease-out;
+        -webkit-transition: max-height 0.15s ease-out;
+    }
+
+    .site-nav-dropdown-container-open {
+        max-height: 1000px;
+        transition: max-height 0.25s ease-in;
+        -webkit-transition: max-height 0.25s ease-in;
+    }
 </style>
diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
index f124f5ab97..5cb1104293 100644
--- a/packages/vue-components/src/Submenu.vue
+++ b/packages/vue-components/src/Submenu.vue
@@ -126,27 +126,27 @@ export default {
     .submenu-toggle {
         display: inline-block;
         width: 100%;
-        padding: .25rem .75rem .25rem 1.5rem;
+        padding: 0.25rem 0.75rem 0.25rem 1.5rem;
     }
 
     .dropdown > ul > .dropdown-submenu:last-child > ul,
     .btn-group > ul > .dropdown-submenu:last-child > ul {
-        margin-bottom: -.5rem;
+        margin-bottom: -0.5rem;
     }
 
     @media (min-width: 768px) {
-        .submenu-toggle:after {
+        .submenu-toggle::after {
             display: inline-block;
             width: 0;
             height: 0;
-            vertical-align: .255em;
+            vertical-align: 0.255em;
             content: "";
-            border-top: .3em solid transparent;
+            border-top: 0.3em solid transparent;
             border-right: 0;
-            border-bottom: .3em solid transparent;
-            border-left: .3em solid;
+            border-bottom: 0.3em solid transparent;
+            border-left: 0.3em solid;
             float: right;
-            margin-top: .5em;
+            margin-top: 0.5em;
         }
     }
 
@@ -154,24 +154,24 @@ export default {
         .dropdown-submenu > ul {
             padding-bottom: 0;
             border-radius: 0;
-            margin: -.05rem;
+            margin: -0.05rem;
             position: static;
             float: none;
         }
 
-        .submenu-toggle:after {
+        .submenu-toggle::after {
             display: inline-block;
             width: 0;
             height: 0;
-            margin-left: .255em;
-            vertical-align: .255em;
+            margin-left: 0.255em;
+            vertical-align: 0.255em;
             content: "";
-            border-top: .3em solid;
-            border-right: .3em solid transparent;
+            border-top: 0.3em solid;
+            border-right: 0.3em solid transparent;
             border-bottom: 0;
-            border-left: .3em solid transparent;
+            border-left: 0.3em solid transparent;
             float: right;
-            margin-top: .5em;
+            margin-top: 0.5em;
         }
     }
 </style>
diff --git a/packages/vue-components/src/Tab.vue b/packages/vue-components/src/Tab.vue
index 4c42b35932..ebf1b226c8 100644
--- a/packages/vue-components/src/Tab.vue
+++ b/packages/vue-components/src/Tab.vue
@@ -1,6 +1,9 @@
 <template>
   <transition name="fade">
-    <div role="tabpanel" class="tab-pane active" v-show="show"
+    <div
+      v-show="show"
+      role="tabpanel"
+      class="tab-pane active"
       :class="{hide:!show}"
     >
       <slot></slot>
@@ -13,81 +16,82 @@
 </template>
 
 <script>
-import {toBoolean} from './utils/utils.js'
+import { toBoolean } from './utils/utils';
 
 export default {
   props: {
     header: {
-      type: String
+      type: String,
+      default: '',
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {
-    headerRendered () {
-      return this.$refs.header.innerHTML
+    headerRendered() {
+      return this.$refs.header.innerHTML;
     },
-    active () {
-      return this._tabset.show === this
+    active() {
+      return this._tabset.show === this;
     },
-    index () {
-      return this._tabset.tabs.indexOf(this)
+    index() {
+      return this._tabset.tabs.indexOf(this);
     },
-    show () {
-      return this._tabset && this._tabset.show === this
+    show() {
+      return this._tabset && this._tabset.show === this;
     },
-    transition () {
-      return this._tabset ? this._tabset.effect : null
+    transition() {
+      return this._tabset ? this._tabset.effect : null;
+    },
+    disabledBool() {
+      return toBoolean(this.disabled);
     },
-    disabledBool () {
-      return toBoolean(this.disabled)
-    }
   },
-  created () {
-    this._ingroup = this.$parent && this.$parent._tabgroup
-    let tabset = this
-    while (tabset && tabset._tabset!==true && tabset.$parent) {
-      tabset = tabset.$parent
+  created() {
+    this._ingroup = this.$parent && this.$parent._tabgroup;
+    let tabset = this;
+    while (tabset && tabset._tabset !== true && tabset.$parent) {
+      tabset = tabset.$parent;
     }
     if (!tabset._tabset) {
-      this._tabset = {}
-      console.warn('Warning: "tab" depend on "tabset" to work properly.')
+      this._tabset = {};
+      // Warning: "tab" depend on "tabset" to work properly.
     } else {
-      tabset.tabs.push(this)
+      tabset.tabs.push(this);
       if (!this._ingroup) {
-        tabset.headers.push(this)
-      } else {
-        if (!~tabset.headers.indexOf(this.$parent)) {
-          tabset.headers.push(this.$parent)
-        }
+        tabset.headers.push(this);
+      // eslint-disable-next-line no-bitwise
+      } else if (!~tabset.headers.indexOf(this.$parent)) {
+        tabset.headers.push(this.$parent);
       }
-      this._tabset = tabset
+      this._tabset = tabset;
     }
     if (this._ingroup) {
-      this.$parent.tabs.push(this)
+      this.$parent.tabs.push(this);
     }
   },
-  beforeDestroy () {
-    if (this._tabset.active === this.index) { this._tabset.active = 0 }
+  beforeDestroy() {
+    if (this._tabset.active === this.index) { this._tabset.active = 0; }
     if (this._ingroup) {
-      var index = parent.tabs.indexOf(this);
-      parent.tabs.splice(index, 1)
+      const tabIndex = this.$parent.tabs.indexOf(this);
+      this.$parent.tabs.splice(tabIndex, 1);
     }
-    var index = this._tabset.tabs.indexOf(this);
-    this._tabset.tabs.splice(index, 1)
-  }
-}
+    this._tabset.tabs.splice(this.index, 1);
+  },
+};
 </script>
 <style>
     .tab-pane > hr {
         margin: 0;
     }
+
     .fade-enter-active {
-      transition: opacity .5s;
+        transition: opacity 0.5s;
     }
+
     .fade-leave-active {
-      transition: opacity 0s;
+        transition: opacity 0s;
     }
 </style>
diff --git a/packages/vue-components/src/TabGroup.vue b/packages/vue-components/src/TabGroup.vue
index b539244ad1..c7f882b689 100644
--- a/packages/vue-components/src/TabGroup.vue
+++ b/packages/vue-components/src/TabGroup.vue
@@ -8,65 +8,67 @@
 </template>
 
 <script>
-import {coerce} from './utils/utils.js'
+import { coerce } from './utils/utils';
 
 export default {
   props: {
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     header: {
-      type: String
-    }
+      type: String,
+      default: '',
+    },
   },
-  data () {
+  data() {
     return {
       tabs: [],
-      show: false
-    }
+      show: false,
+    };
   },
   computed: {
-    active () {
-      return ~this.tabs.indexOf(this._tabset.show)
+    active() {
+      // eslint-disable-next-line no-bitwise
+      return ~this.tabs.indexOf(this._tabset.show);
     },
-    headerRendered () {
-      return this.$refs.header.innerHTML
+    headerRendered() {
+      return this.$refs.header.innerHTML;
+    },
+    disabledBool() {
+      return coerce.boolean(this.disabled);
     },
-    disabledBool () {
-      return coerce.boolean(this.disabled)
-    }
   },
-  created () {
-    this._tabgroup = true
-    let tabset = (this.$parent && this.$parent._tabset === true) ? this.$parent : {}
-    if (this.$parent && this.$parent._tabgroup) {
-      console.error('Can\'t nest tabgroups.')
-    }
+  created() {
+    this._tabgroup = true;
+    let tabset = (this.$parent && this.$parent._tabset === true) ? this.$parent : {};
+
+    // Tabgroups cannot be nested
+
     while (tabset && !tabset._tabset && tabset.$parent) {
-      tabset = tabset.$parent
+      tabset = tabset.$parent;
     }
     if (!tabset._tabset) {
-      this._tabset = {}
-      this.show = true
-      console.warn('Warning: tabgroup depend on tabset to work properly.')
+      this._tabset = {};
+      this.show = true;
+      // Warning: tabgroup depend on tabset to work properly.
     } else {
-      this._tabset = tabset
+      this._tabset = tabset;
     }
   },
   methods: {
-    blur () {
-      this.show = false
+    blur() {
+      this.show = false;
     },
-    toggle () {
-      this.show = !this.show
-    }
-  }
-}
+    toggle() {
+      this.show = !this.show;
+    },
+  },
+};
 </script>
 
 <style scoped>
-.nav-tabs {
-  margin-bottom: 15px;
-}
+    .nav-tabs {
+        margin-bottom: 15px;
+    }
 </style>
diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue
index 26a3982bec..7f2e3b4439 100644
--- a/packages/vue-components/src/Tabset.vue
+++ b/packages/vue-components/src/Tabset.vue
@@ -1,82 +1,110 @@
 <template>
   <div :class="[addClass]">
     <!-- Nav tabs -->
-    <ul class="nav nav-tabs" :class="getNavStyleClass" role="tablist">
-      <template v-for="t in headers">
-        <li v-if="!t._tabgroup" class="nav-item" @click.prevent="select(t)">
-          <a class="nav-link" :class="{active: t.active, disabled:t.disabledBool}" href="#"><span v-html="t.headerRendered"></span></a>
+    <ul
+      class="nav nav-tabs"
+      :class="getNavStyleClass"
+      role="tablist"
+    >
+      <template v-for="(t, index) in headers">
+        <li
+          v-if="!t._tabgroup"
+          :key="index"
+          class="nav-item"
+          @click.prevent="select(t)"
+        >
+          <a
+            class="nav-link"
+            :class="{active: t.active, disabled:t.disabledBool}"
+            href="#"
+          ><span v-html="t.headerRendered"></span></a>
         </li>
-        <dropdown v-else class="nav-item nav-link" :header="t.headerRendered" :class="{active:t.active}" :disabled="t.disabled">
-          <li v-for="tab in t.tabs"><a class="nav-link" :class="{disabled:tab.disabled}" href="#" @click.prevent="select(tab)" v-html="tab.headerRendered"></a></li>
+        <dropdown
+          v-else
+          :key="index"
+          class="nav-item nav-link"
+          :header="t.headerRendered"
+          :class="{active:t.active}"
+          :disabled="t.disabled"
+        >
+          <li v-for="(tab, tabIndex) in t.tabs" :key="tabIndex">
+            <a
+              class="nav-link"
+              :class="{disabled:tab.disabled}"
+              href="#"
+              @click.prevent="select(tab)"
+              v-html="tab.headerRendered"
+            ></a>
+          </li>
         </dropdown>
       </template>
     </ul>
-    <div class="tab-content" ref="tab-content">
+    <div ref="tab-content" class="tab-content">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-import {toNumber} from './utils/utils.js'
-import dropdown from './Dropdown.vue'
+import { toNumber } from './utils/utils';
+import dropdown from './Dropdown.vue';
 
 export default {
   components: {
-    dropdown
+    dropdown,
   },
   props: {
     navStyle: {
       type: String,
-      default: 'tabs'
+      default: 'tabs',
     },
     active: {
       type: Number,
-      default: 0
+      default: 0,
     },
     addClass: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
-  data () {
+  data() {
     return {
       show: null,
       headers: [],
-      tabs: []
-    }
+      tabs: [],
+    };
   },
-  created () {
-    this._tabset = true
+  created() {
+    this._tabset = true;
   },
   computed: {
     getNavStyleClass() {
       return `nav-${this.navStyle}`;
     },
-    activeNumber () {
-       return toNumber(this.active);
+    activeNumber() {
+      return toNumber(this.active);
     },
   },
   watch: {
-    activeNumber (val) {
-      this.show = this.tabs[val]
-    }
+    activeNumber(val) {
+      this.show = this.tabs[val];
+    },
   },
-  mounted () {
-    this.show = this.tabs[this.activeNumber]
+  mounted() {
+    this.show = this.tabs[this.activeNumber];
   },
   methods: {
-    select (tab) {
+    select(tab) {
       if (!tab.disabled) {
-        this.active = tab.index
+        this.active = tab.index;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
-.nav-tabs {
-  margin-bottom: 15px;
-}
+    .nav-tabs {
+        margin-bottom: 15px;
+    }
 </style>
diff --git a/packages/vue-components/src/Thumbnail.vue b/packages/vue-components/src/Thumbnail.vue
index 0b246cdc26..ce04e9eef4 100644
--- a/packages/vue-components/src/Thumbnail.vue
+++ b/packages/vue-components/src/Thumbnail.vue
@@ -119,26 +119,26 @@ export default {
 </script>
 
 <style>
-  .thumb-wrapper {
-    display: inline-block;
-    overflow: hidden;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-  }
+    .thumb-wrapper {
+        display: inline-block;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        vertical-align: middle;
+    }
 
-  .thumb-circle {
-    border-radius: 50%;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-  }
+    .thumb-circle {
+        border-radius: 50%;
+        -moz-border-radius: 50%;
+        -webkit-border-radius: 50%;
+    }
 
-  .thumb-image {
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    -ms-transform: translate(-50%,-50%);
-    -webkit-transform: translate(-50%,-50%);
-  }
+    .thumb-image {
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        -webkit-transform: translate(-50%, -50%);
+    }
 </style>
diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue
index 9902545c6c..202c67b007 100644
--- a/packages/vue-components/src/TipBox.vue
+++ b/packages/vue-components/src/TipBox.vue
@@ -355,6 +355,11 @@ export default {
         padding: 0.75rem 0.5rem;
     }
 
+    .contents {
+        padding: 0 6px;
+        width: 100%;
+    }
+
     .box-container.seamless > .header-and-body > div.box-body-wrapper > .contents {
         padding-left: 12px;
     }
@@ -400,11 +405,6 @@ export default {
         vertical-align: text-top;
     }
 
-    .contents {
-        padding: 0 6px;
-        width: 100%;
-    }
-
     .contents > :last-child {
         margin-bottom: 0;
     }
@@ -418,7 +418,7 @@ export default {
     .alert-border-left {
         background-color: #f9f8f8;
         border-left: solid;
-        border-width: 0px 0px 0px 5px;
+        border-width: 0 0 0 5px;
     }
 
     .vertical-divider {
@@ -432,11 +432,11 @@ export default {
     }
 
     .no-background {
-      background: none;
+        background: none;
     }
 
     .no-border {
-      border: none;
+        border: none;
     }
 </style>
 
diff --git a/packages/vue-components/src/panels/MinimalPanel.vue b/packages/vue-components/src/panels/MinimalPanel.vue
index 767711311f..99ae0b9900 100644
--- a/packages/vue-components/src/panels/MinimalPanel.vue
+++ b/packages/vue-components/src/panels/MinimalPanel.vue
@@ -140,156 +140,160 @@ export default {
 
 <style scoped>
 
-  .card-peek-collapsed {
-    position: relative;
-  }
+    .card-peek-collapsed {
+        position: relative;
+    }
 
-  /*
+    /*
    * Gives the faded content effect for peek.
    * Ensure that height has the same value as collapsedPanelHeight in PanelBase.js.
    */
-  .card-peek-collapsed::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    height: 125px;
-    background-image: linear-gradient(180deg, transparent, white 90%);
-  }
-
-  .morph-title {
-    padding: 0 0.3em;
-    border-color: black;
-    background-color: transparent;
-    vertical-align: top;
-  }
+    .card-peek-collapsed::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        height: 125px;
+        background-image: linear-gradient(180deg, transparent, white 90%);
+    }
 
-  .morph-title:hover, .morph-title:active, .morph-title:focus {
-    color: white;
-    border-color: #343a40;
-    background-color: #343a40;
-  }
+    .morph-title {
+        padding: 0 0.3em;
+        border-color: black;
+        background-color: transparent;
+        vertical-align: top;
+    }
 
-  .card-collapse {
-    overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-  }
+    .morph-title:hover,
+    .morph-title:active,
+    .morph-title:focus {
+        color: white;
+        border-color: #343a40;
+        background-color: #343a40;
+    }
 
-  .card-flex {
-    display: flex;
-    flex-direction: column;
-    border: 0;
-    margin: 0;
-  }
+    .card-collapse {
+        overflow: hidden;
+        transition: max-height 0.5s ease-in-out;
+    }
 
-  .header-fade-enter {
-    opacity: 0;
-  }
+    .card-flex {
+        display: flex;
+        flex-direction: column;
+        border: 0;
+        margin: 0;
+    }
 
-  .header-fade-leave-active {
-    position: absolute;
-  }
+    .header-fade-enter {
+        opacity: 0;
+    }
 
-  .header-fade-leave-to {
-    opacity: 0 !important;
-  }
+    .header-fade-leave-active {
+        position: absolute;
+    }
 
-  .card-title-inline {
-    display: inline-block;
-  }
+    .header-fade-leave-to {
+        opacity: 0 !important;
+    }
 
-  .card-body {
-    padding: 0;
-  }
+    .card-title-inline {
+        display: inline-block;
+    }
 
-  .header-wrapper {
-    width: 100%;
-    display: inline-block;
-    background-color: white;
-  }
+    .card-body {
+        padding: 0;
+    }
 
-  .header-wrapper-bottom {
-    order: 1;
-  }
+    .header-wrapper {
+        width: 100%;
+        display: inline-block;
+        background-color: white;
+    }
 
-  .ellipses::before {
-    position: relative;
-    bottom: 3px;
-    content: '...';
-    font-weight: 900;
-    margin-right: 4px;
-  }
+    .header-wrapper-bottom {
+        order: 1;
+    }
 
-  .button-wrapper {
-    padding-left: 2px;
-    border-width: 0 0 0 1px;
-    border-color: rgba(150, 150, 150, 0.2);
-    border-style: solid;
-    margin-left: 2px;
-    width: auto;
-    float: none;
-    opacity: 0;
-    transition: opacity 0.5s;
-    vertical-align: text-top;
-  }
+    .ellipses::before {
+        position: relative;
+        bottom: 3px;
+        content: '...';
+        font-weight: 900;
+        margin-right: 4px;
+    }
 
-  .button-wrapper-expanded {
-    padding-left: 0;
-    border: 0;
-    margin-left: 0;
-  }
+    .button-wrapper {
+        padding-left: 2px;
+        border-width: 0 0 0 1px;
+        border-color: rgba(150, 150, 150, 0.2);
+        border-style: solid;
+        margin-left: 2px;
+        width: auto;
+        float: none;
+        opacity: 0;
+        transition: opacity 0.5s;
+        vertical-align: text-top;
+    }
 
-  .card:hover .button-wrapper {
-    opacity: 1;
-  }
+    .button-wrapper-expanded {
+        padding-left: 0;
+        border: 0;
+        margin-left: 0;
+    }
 
-  .header-toggle {
-    cursor: pointer;
-  }
+    .card:hover .button-wrapper {
+        opacity: 1;
+    }
 
-  .minimal-button {
-    padding: 0 3px;
-    border: 0;
-    color: rgb(150, 150, 150);
-    background-color: transparent;
-    cursor: pointer;
-  }
+    .header-toggle {
+        cursor: pointer;
+    }
 
-  .minimal-button:hover, .minimal-button:active, .minimal-button:focus {
-    color: rgb(30, 30, 30);
-  }
+    .minimal-button {
+        padding: 0 3px;
+        border: 0;
+        color: rgb(150, 150, 150);
+        background-color: transparent;
+        cursor: pointer;
+    }
 
-  .minimal-popup-button {
-    top: 1px;
-    font-size: 9px;
-  }
+    .minimal-button:hover,
+    .minimal-button:active,
+    .minimal-button:focus {
+        color: rgb(30, 30, 30);
+    }
 
-  .minimal-menu-up {
-    top: 3px;
-    font-size: 13px;
-  }
+    .minimal-popup-button {
+        top: 1px;
+        font-size: 9px;
+    }
 
-  .minimal-menu-down {
-    top: 1px;
-    font-size: 13px;
-  }
+    .minimal-menu-up {
+        top: 3px;
+        font-size: 13px;
+    }
 
-  .minimal-close-button {
-    top: 2px;
-    font-size: 11px;
-  }
+    .minimal-menu-down {
+        top: 1px;
+        font-size: 13px;
+    }
 
-  /* Bootstrap extra small(xs) responsive breakpoint */
-  @media (max-width: 575.98px) {
-    .button-wrapper-expanded {
-      padding-left: 0;
-      border: 0;
-      margin-left: 0;
-      opacity: 0.15;
+    .minimal-close-button {
+        top: 2px;
+        font-size: 11px;
     }
 
-    .button-wrapper-visible {
-      opacity: 1;
+    /* Bootstrap extra small(xs) responsive breakpoint */
+    @media (max-width: 575.98px) {
+        .button-wrapper-expanded {
+            padding-left: 0;
+            border: 0;
+            margin-left: 0;
+            opacity: 0.15;
+        }
+
+        .button-wrapper-visible {
+            opacity: 1;
+        }
     }
-  }
 </style>
diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue
index 76f07d8332..80511aa57d 100644
--- a/packages/vue-components/src/panels/NestedPanel.vue
+++ b/packages/vue-components/src/panels/NestedPanel.vue
@@ -211,7 +211,7 @@ export default {
     }
 
     .card-title * {
-        margin: 0px !important;
+        margin: 0 !important;
     }
 
     .caret-wrapper {
@@ -246,7 +246,7 @@ export default {
     }
 
     .card-group > .card-container > .expandable-card {
-        margin-top: 0!important;
+        margin-top: 0 !important;
     }
 
     .card-seamless {
@@ -271,11 +271,6 @@ export default {
         padding: 10px 0;
     }
 
-    .card-seamless > .card-collapse > .card-body > .collapse-button {
-        position: relative;
-        top: 22px;
-    }
-
     .card-body > .collapse-button {
         margin-bottom: 13px;
         margin-top: 5px;
@@ -286,6 +281,11 @@ export default {
         opacity: 1;
     }
 
+    .card-seamless > .card-collapse > .card-body > .collapse-button {
+        position: relative;
+        top: 22px;
+    }
+
     .close-button {
         font-size: 10px !important;
         float: right;
@@ -311,7 +311,6 @@ export default {
 
     /* Bootstrap extra small(xs) responsive breakpoint */
     @media (max-width: 575.98px) {
-
         .caret-wrapper {
             float: left;
             display: inline-block;
diff --git a/packages/vue-components/src/questions/QOption.vue b/packages/vue-components/src/questions/QOption.vue
index ddcf75625c..2f17b8e4d0 100644
--- a/packages/vue-components/src/questions/QOption.vue
+++ b/packages/vue-components/src/questions/QOption.vue
@@ -149,60 +149,60 @@ export default {
 </script>
 
 <style scoped>
-.fa-check,
-.fa-times {
-    font-size: 1.2em;
-}
-
-/* For accomodating block markdown nicely */
-.reason :last-child,
-.content :last-child {
-    margin-bottom: 0;
-}
-
-.reason {
-    padding: 0 0.5rem;
-}
-
-.checkbox-label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-bottom: 0;
-    vertical-align: text-bottom;
-}
-
-.form-control {
-    height: auto;
-    margin-bottom: 10px;
-    cursor: pointer;
-}
-
-.form-control.success,
-.form-control.success > .checkbox-label,
-.form-control.danger,
-.form-control.danger > .checkbox-label {
-    cursor: default;
-}
-
-.disabled {
-    opacity: 0.9;
-}
-
-.radio-svg {
-    width: 1em;
-    height: 1em;
-}
-
-.checkbox {
-    width: 1em;
-    height: 1em;
-    margin-right: 5px;
-    vertical-align: middle;
-}
-
-.row {
-    margin: 0.2rem 0 0 0;
-    align-items: center;
-}
+    .fa-check,
+    .fa-times {
+        font-size: 1.2em;
+    }
+
+    /* For accomodating block markdown nicely */
+    .reason :last-child,
+    .content :last-child {
+        margin-bottom: 0;
+    }
+
+    .reason {
+        padding: 0 0.5rem;
+    }
+
+    .checkbox-label {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-bottom: 0;
+        vertical-align: text-bottom;
+    }
+
+    .form-control {
+        height: auto;
+        margin-bottom: 10px;
+        cursor: pointer;
+    }
+
+    .form-control.success,
+    .form-control.success > .checkbox-label,
+    .form-control.danger,
+    .form-control.danger > .checkbox-label {
+        cursor: default;
+    }
+
+    .disabled {
+        opacity: 0.9;
+    }
+
+    .radio-svg {
+        width: 1em;
+        height: 1em;
+    }
+
+    .checkbox {
+        width: 1em;
+        height: 1em;
+        margin-right: 5px;
+        vertical-align: middle;
+    }
+
+    .row {
+        margin: 0.2rem 0 0 0;
+        align-items: center;
+    }
 </style>
diff --git a/packages/vue-components/src/questions/Question.vue b/packages/vue-components/src/questions/Question.vue
index 490b035d1c..2bb04d27e7 100644
--- a/packages/vue-components/src/questions/Question.vue
+++ b/packages/vue-components/src/questions/Question.vue
@@ -303,80 +303,80 @@ export default {
 </script>
 
 <style scoped>
-.result-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 2em;
-    width: 2em;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 2em;
-}
+    .result-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 2em;
+        width: 2em;
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 2em;
+    }
 
-.question {
-    margin-bottom: 1rem;
-    transition: transform 0.5s ease-out, opacity 0.5s linear;
-    box-shadow: 0 2px 7px 5px rgba(210, 210, 210, 0.2);
-}
+    .question {
+        margin-bottom: 1rem;
+        transition: transform 0.5s ease-out, opacity 0.5s linear;
+        box-shadow: 0 2px 7px 5px rgba(210, 210, 210, 0.2);
+    }
 
-.question-enter-active {
-    opacity: 0;
-    transform: translateX(-100%);
-}
+    .question-enter-active {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
 
-.question-leave-to {
-    opacity: 0;
-    transform: translateX(100%);
-}
+    .question-leave-to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 
-.q-btn {
-    border-radius: 2.5em;
-    transition: opacity 0.5s, transform 0.7s;
-}
+    .q-btn {
+        border-radius: 2.5em;
+        transition: opacity 0.5s, transform 0.7s;
+    }
 
-.q-btn-enter {
-    opacity: 0;
-    transform: translateY(30px);
-}
+    .q-btn-enter {
+        opacity: 0;
+        transform: translateY(30px);
+    }
 
-.q-btn-leave-to {
-    opacity: 0;
-    transform: translateX(calc(-100% - 0.25rem));
-}
+    .q-btn-leave-to {
+        opacity: 0;
+        transform: translateX(calc(-100% - 0.25rem));
+    }
 
-.q-btn-leave-active {
-    position: absolute;
-}
+    .q-btn-leave-active {
+        position: absolute;
+    }
 
-.card-header {
-    font-size: 1.05em;
-    font-weight: 500;
-}
+    .card-header {
+        font-size: 1.05em;
+        font-weight: 500;
+    }
 
-/* For accomodating block markdown nicely */
-.card-header > :last-child,
-.answer > :last-child {
-    margin-bottom: 0;
-}
+    /* For accomodating block markdown nicely */
+    .card-header > :last-child,
+    .answer > :last-child {
+        margin-bottom: 0;
+    }
 
-@keyframes shake {
-    20% { transform: translate(-1px, -1px); }
-    40% { transform: translate(1px, 1px); }
-    60% { transform: translate(0, 0); }
-    80% { transform: translate(-1px, 1px); }
-    100% { transform: translate(1px, -1px); }
-}
+    @keyframes shake {
+        20% { transform: translate(-1px, -1px); }
+        40% { transform: translate(1px, 1px); }
+        60% { transform: translate(0, 0); }
+        80% { transform: translate(-1px, 1px); }
+        100% { transform: translate(1px, -1px); }
+    }
 
-.shake {
-    animation: shake 0.25s;
-    animation-iteration-count: 2;
-}
+    .shake {
+        animation: shake 0.25s;
+        animation-iteration-count: 2;
+    }
 
-/* text question text area */
-textarea.form-control {
-    height: auto;
-    min-height: 75px;
-    margin-bottom: 10px;
-}
+    /* text question text area */
+    textarea.form-control {
+        height: auto;
+        min-height: 75px;
+        margin-bottom: 10px;
+    }
 </style>
diff --git a/packages/vue-components/src/questions/Quiz.vue b/packages/vue-components/src/questions/Quiz.vue
index 81eca15a0e..ec726a1d2d 100644
--- a/packages/vue-components/src/questions/Quiz.vue
+++ b/packages/vue-components/src/questions/Quiz.vue
@@ -162,48 +162,48 @@ export default {
 </script>
 
 <style scoped>
-.quiz-container {
-    overflow: hidden;
-}
-
-.intro-outro-card {
-    transition: opacity 0.5s;
-    box-shadow: 0 2px 7px 5px rgba(210, 210, 210, 0.2);
-}
-
-.intro-outro-card-enter-active,
-.intro-outro-card-leave-to {
-    opacity: 0;
-}
-
-.intro-outro-card > .card-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.score {
-    font-size: 1.4rem;
-    font-weight: bold;
-}
-
-.score-circle {
-    stroke-dasharray: 264;
-    fill: none;
-    stroke: rgba(132, 215, 255, 0.8);
-    stroke-width: 8;
-    transition: stroke-dashoffset 1.5s ease-out, stroke 1.5s linear;
-}
-
-.score-background-circle {
-    fill: none;
-    stroke: rgba(227, 226, 226, 0.5);
-    stroke-width: 8;
-}
-
-.btn {
-    border-radius: 2em;
-}
+    .quiz-container {
+        overflow: hidden;
+    }
+
+    .intro-outro-card {
+        transition: opacity 0.5s;
+        box-shadow: 0 2px 7px 5px rgba(210, 210, 210, 0.2);
+    }
+
+    .intro-outro-card-enter-active,
+    .intro-outro-card-leave-to {
+        opacity: 0;
+    }
+
+    .intro-outro-card > .card-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .score {
+        font-size: 1.4rem;
+        font-weight: bold;
+    }
+
+    .score-circle {
+        stroke-dasharray: 264;
+        fill: none;
+        stroke: rgba(132, 215, 255, 0.8);
+        stroke-width: 8;
+        transition: stroke-dashoffset 1.5s ease-out, stroke 1.5s linear;
+    }
+
+    .score-background-circle {
+        fill: none;
+        stroke: rgba(227, 226, 226, 0.5);
+        stroke-width: 8;
+    }
+
+    .btn {
+        border-radius: 2em;
+    }
 
 </style>