From 1de9117d2d2f131345f5eb004305816ac9abf9b6 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 10 Jul 2020 15:30:01 +0300
Subject: [PATCH] Fixed #373 - Ability to add scaling inputs by group

---
 public/themes/arya-blue/theme.css               | 10 ++++++++++
 public/themes/arya-green/theme.css              | 10 ++++++++++
 public/themes/arya-orange/theme.css             | 10 ++++++++++
 public/themes/arya-purple/theme.css             | 10 ++++++++++
 public/themes/bootstrap4-dark-blue/theme.css    | 10 ++++++++++
 public/themes/bootstrap4-dark-purple/theme.css  | 10 ++++++++++
 public/themes/bootstrap4-light-blue/theme.css   | 10 ++++++++++
 public/themes/bootstrap4-light-purple/theme.css | 10 ++++++++++
 public/themes/luna-amber/theme.css              | 10 ++++++++++
 public/themes/luna-blue/theme.css               | 10 ++++++++++
 public/themes/luna-green/theme.css              | 10 ++++++++++
 public/themes/luna-pink/theme.css               | 10 ++++++++++
 public/themes/md-dark-deeppurple/theme.css      | 10 ++++++++++
 public/themes/md-dark-indigo/theme.css          | 10 ++++++++++
 public/themes/md-light-deeppurple/theme.css     | 10 ++++++++++
 public/themes/md-light-indigo/theme.css         | 10 ++++++++++
 public/themes/mdc-dark-deeppurple/theme.css     | 10 ++++++++++
 public/themes/mdc-dark-indigo/theme.css         | 10 ++++++++++
 public/themes/mdc-light-deeppurple/theme.css    | 10 ++++++++++
 public/themes/mdc-light-indigo/theme.css        | 10 ++++++++++
 public/themes/nova-accent/theme.css             | 10 ++++++++++
 public/themes/nova-alt/theme.css                | 10 ++++++++++
 public/themes/nova-vue/theme.css                | 10 ++++++++++
 public/themes/nova/theme.css                    | 10 ++++++++++
 public/themes/rhea/theme.css                    | 10 ++++++++++
 public/themes/saga-blue/theme.css               | 10 ++++++++++
 public/themes/saga-green/theme.css              | 10 ++++++++++
 public/themes/saga-orange/theme.css             | 10 ++++++++++
 public/themes/saga-purple/theme.css             | 10 ++++++++++
 public/themes/vela-blue/theme.css               | 10 ++++++++++
 public/themes/vela-green/theme.css              | 10 ++++++++++
 public/themes/vela-orange/theme.css             | 10 ++++++++++
 public/themes/vela-purple/theme.css             | 10 ++++++++++
 src/views/inputtext/InputTextDoc.vue            | 12 +++++++++++-
 34 files changed, 341 insertions(+), 1 deletion(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index ad5d8f039..9aa4b11f5 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: #383838;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index c220b1d02..4480694e8 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -819,6 +819,16 @@
   background-color: #383838;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 27f73c995..113301cdb 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -819,6 +819,16 @@
   background-color: #383838;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 2749c6aa2..9d3c2320d 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -819,6 +819,16 @@
   background-color: #383838;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 4ab747141..b99cd62ef 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: #3f4b5b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+
 .p-listbox {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index a491d9ab0..74022bd0f 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -819,6 +819,16 @@
   background-color: #3f4b5b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+
 .p-listbox {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 9c58a21d8..fe9749719 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: rgba(0, 0, 0, 0.03);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #212529;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 0a02651f4..9713d1d70 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -819,6 +819,16 @@
   background-color: rgba(0, 0, 0, 0.03);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #212529;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 223542bdd..ab64a4db3 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -819,6 +819,16 @@
   background-color: #4b4b4b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 7cb3f4ef7..8a505a595 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: #4b4b4b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 704d56a7f..fdf7a6379 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -819,6 +819,16 @@
   background-color: #4b4b4b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 81412b4d5..8178b2133 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -819,6 +819,16 @@
   background-color: #4b4b4b;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 154af2798..e17a1e46d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -839,6 +839,16 @@
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index a2825834b..b02c65328 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -839,6 +839,16 @@
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index fba416cfd..c58728072 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -839,6 +839,16 @@
   background-color: #dcdcdc;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #000001;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 790548923..292e3d893 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -839,6 +839,16 @@
   background-color: #dcdcdc;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #000001;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 7470c3d61..7195896ea 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -839,6 +839,16 @@
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.65625rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.9375rem 0.9375rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 6a05aa2f4..2db98f4af 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -839,6 +839,16 @@
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.65625rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.9375rem 0.9375rem;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index ffc27a618..37856823e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -839,6 +839,16 @@
   background-color: #dcdcdc;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.65625rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.9375rem 0.9375rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #000001;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index d91923199..8439d5e58 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -839,6 +839,16 @@
   background-color: #dcdcdc;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.65625rem 0.65625rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.9375rem 0.9375rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #000001;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index a164e35e3..8a05f2e03 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -815,6 +815,16 @@
   background-color: #f4f4f4;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 04a4e0cc1..785c4f10d 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -819,6 +819,16 @@
   background-color: #f4f4f4;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 583f3a9fa..dfb2a86c7 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -819,6 +819,16 @@
   background-color: #f4f4f4;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 67f52a705..0d9f4976d 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -819,6 +819,16 @@
   background-color: #f4f4f4;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index aeb88fdfb..c9fefeb28 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -815,6 +815,16 @@
   background-color: #f4f4f4;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #666666;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 7404ca879..34059a5ad 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: #f8f9fa;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index b4d844483..9357521c2 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -819,6 +819,16 @@
   background-color: #f8f9fa;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 54e773452..36062da27 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -819,6 +819,16 @@
   background-color: #f8f9fa;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index e164392cc..99fe0a9b7 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -819,6 +819,16 @@
   background-color: #f8f9fa;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 7898c8d24..c15f1fe6a 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -819,6 +819,16 @@
   background-color: #304562;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 74651a434..690529a54 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -819,6 +819,16 @@
   background-color: #304562;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index cd2f783ff..047878c80 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -819,6 +819,16 @@
   background-color: #304562;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index decfb51b4..5a66aedde 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -819,6 +819,16 @@
   background-color: #304562;
 }
 
+.p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+
+.p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index 398e21569..89ef45b2c 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -45,11 +45,21 @@ import InputText from 'primevue/inputtext';
 
                 <h5>Sizes</h5>
                 <p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
-                Note that these classes should be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
+                Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
 <CodeHighlight>
 &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
 &lt;InputText type="text" placeholder="Normal" /&gt;
 &lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
+</CodeHighlight>
+
+                <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the 
+                    class to a container element so that descendant inputs share the same style easier.</p>
+<CodeHighlight>
+&lt;div class="p-inputtext-sm"&gt;
+    &lt;InputText /&gt;
+    &lt;InputNumber /&gt;
+    &lt;InputMask /&gt;
+&lt;/div&gt;
 </CodeHighlight>
 
                 <h5>Outlined vs Filled</h5>