Cosmetics

public/themes/bootstrap4-light-blue/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#212529;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#007bff;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

public/themes/bootstrap4-light-purple/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#212529;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#883cae;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

public/themes/saga-blue/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#495057;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#2196F3;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

public/themes/saga-green/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#495057;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#4CAF50;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

public/themes/saga-orange/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#495057;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#FFC107;
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

public/themes/saga-purple/theme.css

@@ -7,7 +7,7 @@
   --surface-e:#ffffff;
   --surface-f:#ffffff;
   --text-color:#495057;
-  --text-color-secondary:$shade600;
+  --text-color-secondary:#6c757d;
   --primary-color:#9C27B0;
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

src/assets/styles/app/_config.scss

@@ -7,17 +7,15 @@
     width: 550px;
     z-index: 998;
     height: 100%;
-    transition: transform .3s;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
-    transform: translate3d(550px,0,0);
+    transform: translateX(100%);
     backface-visibility: hidden;
 
     &.layout-config-active {
-        transform: translate3d(0,0,0);
+        transform: translateX(0);
 
         .layout-config-content-wrapper {
             .layout-config-button {
-                opacity: .9;
-
                 i {
                     transform: rotate(0deg);
                 }
@@ -114,7 +112,7 @@
         i {
             color:  var(--primary-color-text);
             line-height: inherit;
-            font-size: 16px;
+            font-size: 14px;
         }
 
         &:hover {

src/assets/styles/app/_content.scss

@@ -107,8 +107,7 @@
                             border: 0 none;
                             border-bottom: 1px solid transparent;
                             margin-bottom: -1px;
-                            transition: background-color .2s;
+                            transition: border-bottom-color .2s;
-                            font-weight: 500;
 
                             &:focus {
                                 outline: 0 none;
@@ -125,11 +124,12 @@
                         &.p-highlight a,
                         &.p-highlight:hover a {
                             background: transparent;
-                            color: $linkColor;
+                            color: var(--primary-color);
                             border-bottom: 1px solid $linkColor;
                         }
 
                         &:not(.p-highlight):not(.p-disabled):hover a {
+                            color: var(--text-color);
                             border-bottom: 1px solid var(--primary-color);
                         }
                     }

src/assets/styles/app/_core.scss

@@ -63,7 +63,6 @@ p {
     margin: 0 0 1rem 0;
 }
 
-
 input[type="number"] {
     -moz-appearance: textfield;
 

src/assets/styles/app/_home.scss

@@ -1,16 +1,14 @@
 /* Home Component*/
 .home {
-    p {
-        line-height: 1.5;
-        margin-top: 0;
-        margin-bottom: 2rem;
-    }
-
     a {
         color: var(--primary-color);
         font-weight: 500;
     }
     
+    p {
+        margin-bottom: 2rem;
+    }
+
     .introduction {
         background-color: var(--surface-a);
         background: url('./assets/images/home/intro-bg.jpg');
@@ -39,13 +37,13 @@
             }
         }
 
-        h1 {
+        .introduction-title {
             font-weight: 400;
             margin-bottom: 5px;
             font-size: 24px;
         }
 
-        h2 {
+        .introduction-subtitle {
             font-weight: 700;
             margin-bottom: 40px;
             margin-top: 0;
@@ -63,7 +61,7 @@
     .features {
         background-color: var(--surface-b);
         text-align: center;
-        padding: 30px;
+        padding: 2rem;
 
         .p-col-12 {
             padding: 1rem;
@@ -76,15 +74,12 @@
             border-radius: 3px;
 
             .feature-card-detail {
-                padding: 0 16px 16px 16px;
+                padding: 0 2rem 2rem 2rem;
-            }
             }
 
-        h3 {
+            p {
-             font-size:24px;
+                margin-bottom: 0;
-             color: var(--text-color);
+            }
-             padding: 30px 0 12px 0;
-             margin: 0;
         }
 
         img {
@@ -92,22 +87,9 @@
         }
 
         .feature-name {
-            display: block;
+            font-weight: 700;
-            font-weight: bold;
             font-size: 16px;
-            margin-top: 1rem;
+            margin: 1rem 0;
-        }
-
-        p {
-            margin-top: 1rem;
-            margin-bottom: 2rem;
-
-            &.features-tagline {
-                color: var(--text-color);
-                margin-bottom: 0;
-                margin-top: -5px;
-                margin-bottom: 2rem;
-            }
         }
     }
 
@@ -115,13 +97,7 @@
         background-color: #34495E;
         color: #EAECEE;
         text-align: center;
-        padding: 30px;
+        padding: 2rem;
-
-        h3 {
-            font-size: 24px;
-            margin-top: 0;
-            margin-bottom: 12px;
-        }
 
         img {
             height: 30px;
@@ -129,74 +105,43 @@
         }
 
         .p-grid > div {
-            padding: 2em .5rem;
+            padding: 2rem .5rem;
-        }
-
-        p {
-            margin-bottom: 30px;
-
-            > a {
-                font-weight: bold;
-            }
         }
     }
 
     .templates {
         background-color: var(--surface-b);
         text-align: center;
-        padding: 30px;
+        padding: 2rem;
         border-bottom: 1px solid var(--surface-d);
 
-        h3 {
-             font-size:24px;
-             color: var(--text-color);
-             margin-top: 0;
-             margin-bottom: 12px;
-        }
-
         img {
             width: 100%;
             box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
         }
-
-        a {
-            font-weight: bold;
-        }
     }
 
     .primevue-designer {
         background-color: var(--surface-a);
         color: var(--text-color);
-        padding: 30px;
+        padding: 2rem;
-    
-        h3 {
-            margin: 10px 0 20px 0;
-            display: block;
-            text-align: center;
-            font-size: 24px;
-        }
       
         img {
             width: 100%;
             margin-bottom: 30px;
         }
+
+        h4 {
+            text-align: center;
+        }
     }
 
     .prosupport {
         border-bottom: 1px solid var(--surface-d);
         background-color: var(--surface-b);
-        padding: 30px;
+        padding: 2rem;
         color: var(--text-color);
 
-        p {
-            line-height: 22px;
-            margin-bottom: 1rem;
-        }
-
-        h3 {
-            font-size: 24px;
-        }
-
         img {
             margin-top: 10px;
         }

src/assets/styles/app/_menu.scss

@@ -9,6 +9,7 @@
     border-right: 1px solid var(--surface-d);
     user-select: none;
     padding: 1rem;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
 
     .layout-menu {
         .menu-category {

src/assets/styles/app/_responsive.scss

@@ -17,13 +17,13 @@
     }
     
     .layout-topbar {
-        height: 111px;
+        height: 110px;
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 0;
 
         .menu-button {
-            display: inline-block;
+            display: block;
         }
 
         .logo {
@@ -40,7 +40,7 @@
         .topbar-menu {
             background-color: var(--surface-a);
             width: 100%;
-            height: 41px;
+            height: 40px;
             margin: 0;
             border-top: 1px solid var(--surface-d);
 
@@ -48,13 +48,13 @@
                 height: 40px;
                 line-height: 40px;
                 width: 25%;
-                font-size: 14px;
                 
                 > a {
                     padding-bottom: 0;
                     height: 40px;
-                    line-height: 36px;
+                    line-height: 38px;
                     width: 100%;
+                    font-size: 14px;
                     min-width: auto;
                 }
 
@@ -67,19 +67,18 @@
 
     .layout-sidebar {
         top: 0;
-        left: -300px;
         z-index: 999;
         height: 100%;
-        transition: left .3s;
+        transform: translateX(-100%);
 
         &.active {
-            left: 0;
+            transform: translateX(0);
         }
     }
 
     .layout-content {
         margin-left: 0;
-        padding-top: 111px;
+        padding-top: 110px;
 
         .content-section {
             &.introduction { 
@@ -94,9 +93,8 @@
 
     .layout-mask {
         background-color: rgba(0, 0, 0, 0.1);
-    }
 
-    .layout-mask-active {
+        &.layout-mask-active {
             z-index: 998;
             width: 100%;
             height: 100%;
@@ -106,6 +104,7 @@
             background-color: rgba(0, 0, 0, 0.4);
             transition: background-color .5s;
         }
+    }
     
     .home {
         .introduction > div {
@@ -125,14 +124,7 @@
         }
     }
 
-    .layout-content .content-section.content-submenu ul li {
-        width: 50%;
-    }
-
     .layout-config {
-        height: 100%;
-        transform: translate3d(100%,0,0);
-
         .layout-config-button {
             left: auto;
             right: -52px;
@@ -140,7 +132,6 @@
 
         &.layout-config-active {
             width: 100%;
-            transform: translate3d(0,0,0);
         }
     }
 
@@ -152,13 +143,15 @@
 @media screen and (max-width: 640px) {
     .layout-wrapper.layout-news-active {
         .topbar-menu {
-            > li.topbar-submenu {
+            > li {
+                &.topbar-submenu {
                     > ul  {
                         top: 180px;
                     }
                 }
             }
         }
+    }
 
     .layout-topbar {
         .topbar-menu {

src/views/Home.vue

@@ -5,8 +5,8 @@
                 <img alt="Gold Sponsor" src="../assets/images/home/vue-gold.png" />
                 <span>Vue.js Gold Sponsor</span>
             </span>
-            <h1>The Ultimate UI Component Library</h1>
+            <div class="introduction-title">The Ultimate UI Component Library</div>
-            <h2>for Vue</h2>
+            <div class="introduction-subtitle">for Vue</div>
 
             <router-link to="/setup" class="action-button">GET STARTED</router-link>
             <img alt="devices" class="introduction-devices" src="../assets/images/home/intro-devices.png" />
@@ -14,14 +14,14 @@
 
         <div class="features">
             <h4>Features</h4>
-            <p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
+            <p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
 
             <div class="p-grid">
                 <div class="p-col-12 p-md-4">
                     <div class="feature-card">
                         <img alt="components" src="../assets/images/home/vue-components.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">60+ COMPONENTS</span>
+                            <div class="feature-name">60+ COMPONENTS</div>
                             <p>The ultimate set of UI Components to assist you with 60+ impressive Vue Components.</p>
                         </div>
                     </div>
@@ -30,7 +30,7 @@
                     <div class="feature-card">
                         <img alt="opensource" src="../assets/images/home/vue-opensource.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">OPEN SOURCE</span>
+                            <div class="feature-name">OPEN SOURCE</div>
                             <p>The complete UI Suite is free to based on the MIT license and the source code is available at GitHub.</p>
                         </div>
                     </div>
@@ -39,8 +39,8 @@
                     <div class="feature-card">
                         <img alt="themes" src="../assets/images/home/vue-themes.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">THEMES</span>
+                            <div class="feature-name">THEMES</div>
-                            <p>Build on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
+                            <p>Build on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
                         </div>
                     </div>
                 </div>
@@ -48,7 +48,7 @@
                     <div class="feature-card">
                         <img alt="templates" src="../assets/images/home/vue-templates.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">TEMPLATES</span>
+                            <div class="feature-name">TEMPLATES</div>
                             <p>Fascinating Vue-CLI application templates designed by professional designers and crafted by Vue Experts.</p>
                         </div>
                     </div>
@@ -57,7 +57,7 @@
                     <div class="feature-card">
                         <img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">ACCESSIBILITY</span>
+                            <div class="feature-name">ACCESSIBILITY</div>
                             <p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
                         </div>
                     </div>
@@ -66,7 +66,7 @@
                     <div class="feature-card">
                         <img alt="pro" src="../assets/images/home/vue-pro.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">PRO SUPPORT</span>
+                            <div class="feature-name">PRO SUPPORT</div>
                             <p>Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                         </div>
                     </div>
@@ -75,7 +75,7 @@
                     <div class="feature-card">
                         <img alt="productivity" src="../assets/images/home/vue-productivity.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">PRODUCTIVITY</span>
+                            <div class="feature-name">PRODUCTIVITY</div>
                             <p>Boost your productivity by achieving more in less time and accomplish amazing results.</p>
                         </div>
                     </div>
@@ -84,7 +84,7 @@
                     <div class="feature-card">
                         <img alt="community" src="../assets/images/home/vue-community.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">COMMUNITY</span>
+                            <div class="feature-name">COMMUNITY</div>
                             <p>Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
@@ -93,7 +93,7 @@
                     <div class="feature-card">
                         <img alt="mobile" src="../assets/images/home/vue-mobile.png" />
                         <div class="feature-card-detail">
-                            <span class="feature-name">MOBILE</span>
+                            <div class="feature-name">MOBILE</div>
                             <p>First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </div>
@@ -180,14 +180,15 @@
             </div>
         </div>
         <div class="primevue-designer">
-            <h4>PrimeVue Designer API</h4>
+            <h4>Theme Designer</h4>
-            <div class="p-grid">
-                <div class="p-col-12">
-                    <img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
             <p>PrimeVue is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components. Designer includes a SASS enabled infrastructure that has over 500 customizable variables, a live editor
                 and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
 
             <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the live editor.</p>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
+                    
                 </div>
             </div>
         </div>