Scaler

src/AppConfigurator.vue

@@ -10,7 +10,14 @@
 
             <div class="layout-config-content">
                 <div class="free-themes">
-                    <h1 style="margin-top: 0">FREE THEMES</h1>
+                    <h1 style="margin-top: 0">COMPONENT SCALE</h1>
+                    <div class="config-scale">
+                        <Button icon="pi pi-minus" @click="decrementScale()" class="p-button-secondary" :disabled="scale === scales[0]"/>
+                        <i class="pi pi-circle-on" v-for="s of scales" :class="{'scale-active': s === scale}" :key="s"/>
+                        <Button icon="pi pi-plus"  @click="incrementScale()" class="p-button-secondary" :disabled="scale === scales[scales.length - 1]" />
+                    </div>
+
+                    <h1>FREE THEMES</h1>
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
 
                     <div class="p-grid">
@@ -246,7 +253,9 @@ export default {
     },
     data() {
         return {
-            active: false
+            active: false,
+            scale: 14,
+            scales: [12,13,14,15,16]
         }
     },
     outsideClickListener: null,
@@ -300,6 +309,14 @@ export default {
         },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
+        },
+        decrementScale() {
+            this.scale--;
+            document.documentElement.style.fontSize = this.scale + 'px';
+        },
+        incrementScale() {
+            this.scale++;
+            document.documentElement.style.fontSize = this.scale + 'px';
         }
     }
 }

src/assets/styles/app/_config.scss

@@ -118,6 +118,27 @@
         margin: 0 0 2em 0;
     }
 
+    .config-scale {
+        display: flex;
+        align-items: center;
+        margin: 1rem 0 2rem 0;
+
+        button {
+            margin-right: .5rem;
+        }
+
+        i {
+            margin-right: .5rem;
+            font-size: .75rem;
+            color: var(--text-color-secondary);
+
+            &.scale-active {
+                font-size: 1.25rem;
+                color: $linkColor;
+            }
+        }
+    }
+
     .free-themes {
         padding: 2em;
         color: var(--text-color);