From b733005293cfbd41335a4cfcfe9c16a8f30f3e53 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 19 Jun 2020 12:41:05 +0300
Subject: [PATCH] Config update

---
 src/AppConfigurator.vue                   |  16 ++--
 src/assets/styles/app/_config.scss        | 112 ++++++----------------
 src/views/scrollpanel/ScrollPanelDemo.vue |   6 ++
 3 files changed, 43 insertions(+), 91 deletions(-)

diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 25ea67e22..3bf0bebf2 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -9,7 +9,7 @@
             </a>
 
             <div class="layout-config-content">
-                <div class="free-themes">
+                <div>
                     <h4>Component Scale</h4>
                     <div class="config-scale">
                         <Button icon="pi pi-minus" @click="decrementScale()" class="p-button-secondary" :disabled="scale === scales[0]"/>
@@ -21,7 +21,7 @@
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
 
                     <h5>Bootstrap</h5>
-                    <div class="p-grid">
+                    <div class="p-grid free-themes">
                          <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/bootstrap-light.png" alt="Bootstrap Light" @click="changeTheme($event, 'bootstrap-light')"/>
@@ -37,7 +37,7 @@
                     </div>
 
                     <h5>Material</h5>
-                    <div class="p-grid">
+                    <div class="p-grid free-themes">
                          <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/material-light.png" alt="Material Light" @click="changeTheme($event, 'material-light')"/>
@@ -53,7 +53,7 @@
                     </div>
 
                     <h5>PrimeOne Design</h5>
-                    <div class="p-grid">
+                    <div class="p-grid free-themes">
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue')"/>
@@ -129,7 +129,7 @@
                     </div>
 
                     <h5>Legacy</h5>
-                    <div class="p-grid">
+                    <div class="p-grid free-themes">
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/layouts/themeswitcher-nova.png" alt="Nova" @click="changeTheme($event, 'nova')"/>
@@ -185,11 +185,10 @@
                             <span>Rhea</span>
                         </div>
                     </div>
-                </div>
-                <div class="premium-themes">
+
                     <h4>Premium Vue-CLI Templates</h4>
                     <p>Beautifully crafted premium <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
-                    <div class="p-grid">
+                    <div class="p-grid premium-themes">
                         <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/ultima-vue">
                                 <img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg">
@@ -227,7 +226,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
     </div>
diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss
index c75f247ef..e7d30b96f 100644
--- a/src/assets/styles/app/_config.scss
+++ b/src/assets/styles/app/_config.scss
@@ -26,7 +26,7 @@
     .layout-config-content-wrapper {
         position: relative;
         height: 100%;
-        padding: 0;
+        padding: 2rem;
         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
         color: var(--text-color);
         background-color: var(--surface-e);
@@ -76,6 +76,28 @@
         height: 100%;
     }
 
+    .config-scale {
+        display: flex;
+        align-items: center;
+        margin: 1rem 0 2rem 0;
+
+        .p-button {
+            margin-right: .5rem;
+            border: 0 none !important;
+        }
+
+        i {
+            margin-right: .5rem;
+            font-size: .75rem;
+            color: var(--text-color-secondary);
+
+            &.scale-active {
+                font-size: 1.25rem;
+                color: $linkColor;
+            }
+        }
+    }
+
     .layout-config-close {
         position: absolute;
         width: 25px;
@@ -105,110 +127,36 @@
         }
     }
 
-    h3 {
-        margin-top: 1.5rem;
-        margin-bottom: .75rem;
-        font-size: 1.5rem;
-        font-weight: 500;
-        color: var(--text-color);
-    }
-
     .p-grid > div {
-        padding: 1rem .5rem;
+        padding: 1rem;
         text-align: center;
 
         span {
             display: block;
         }
-    }
 
-    p {
-        margin: 0 0 2rem 0;
-    }
-
-    .config-scale {
-        display: flex;
-        align-items: center;
-        margin: 1rem 0 2rem 0;
-
-        .p-button {
-            margin-right: .5rem;
-            border: 0 none !important;
-        }
-
-        i {
-            margin-right: .5rem;
-            font-size: .75rem;
-            color: var(--text-color-secondary);
-
-            &.scale-active {
-                font-size: 1.25rem;
-                color: $linkColor;
-            }
+        button {
+            position: relative;
+            display: inline-flex;
+            justify-content: center;
         }
     }
 
     .free-themes {
-        padding: 2rem;
-
         img {
             width: 50px;
             border-radius: 4px;
         }
 
         span {
-            font-size: 12px;
+            font-size: .875rem;
+            margin-top: .25rem;
         }
     }
 
-    .current-theme {
-        box-shadow: 0 0 0 0.2rem $focusBorderColor;
-    }
-
-    .p-grid {
-        button {
-            position: relative;
-            display: inline-flex;
-            justify-content: center;
-            transition: box-shadow .2s, transform .2s;
-    
-            i {
-                line-height: inherit;
-                font-size: 28px;
-                color: #41b783;
-                position: absolute;
-                top: 0;
-                left: 50%;
-                margin-left: -18px;
-                margin-top: -18px;
-                padding: .18rem;
-                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
-                background-color: #ffffff;
-                border-radius: 50%;
-                width: 36px;
-                height: 36px;
-            }
-    
-            &:focus {
-                box-shadow: 0 0 0 0.2rem $focusBorderColor;
-            }
-    
-            &:hover {
-                transform: scale(1.1);
-            } 
-        }
-    }    
-
     .premium-themes {
-        padding: 2rem;
-
         img {
             width: 100%;
-            transition: box-shadow .2s, transform .2s;
-    
-            &:hover {
-                transform: scale(1.1);
-            } 
         }
     }
 }
\ No newline at end of file
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index b4b6cf3a5..9f2f50072 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -116,4 +116,10 @@ export default {
         }
     }
 }
+</style>
+
+<style scoped>
+.p-col-12 {
+    padding: 2rem;
+}
 </style>
\ No newline at end of file