Fixed #373 - Ability to add scaling inputs by group

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);

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);

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);

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);

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);

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);

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;

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;

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;

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;

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;

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;

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);

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);

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;

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;

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);

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);

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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);

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);

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);

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);

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>