Migrate to REMs

src/views/inputtext/InputTextDemo.vue

@@ -34,7 +34,7 @@
             <InputText type="text" v-model="value5" disabled />
 
              <h3>Invalid</h3>
-            <InputText type="text" class="p-error" />
+            <InputText type="text" class="p-invalid" />
 
             <h3>Sizes</h3>
             <div class="component-sizes">

src/views/inputtext/InputTextDoc.vue

@@ -98,7 +98,7 @@ import InputText from 'primevue/inputtext';
 <InputText type="text" v-model="value5" disabled />
 
     <h3>Invalid</h3>
-<InputText type="text" class="p-error" />
+<InputText type="text" class="p-invalid" />
 
 <h3>Sizes</h3>
 <div class="component-sizes">

src/views/message/MessageDemo.vue

@@ -27,11 +27,11 @@
             <h3>Inline Message</h3>
             <div class="p-grid">
                 <div class="p-col-12">
-                    <InputText placeholder="Username" class="p-error" />
+                    <InputText placeholder="Username" class="p-invalid" />
                     <InlineMessage>Field is required</InlineMessage>
                 </div>
                 <div class="p-col-12">
-                    <InputText placeholder="Email" class="p-error" :closable="false" />
+                    <InputText placeholder="Email" class="p-invalid" :closable="false" />
                     <InlineMessage />
                 </div>
             </div>

src/views/message/MessageDoc.vue

@@ -63,7 +63,7 @@ import InlineMessage from 'primevue/inlinemessage';
 
 				<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
 <CodeHighlight>
-&lt;InputText placeholder="Username" class="p-error" /&gt;
+&lt;InputText placeholder="Username" class="p-invalid" /&gt;
 &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
 </CodeHighlight>
 
@@ -251,11 +251,11 @@ import InlineMessage from 'primevue/inlinemessage';
 &lt;h3&gt;Validation Message&lt;/h3&gt;
 &lt;div class="p-grid"&gt;
     &lt;div class="p-col-12"&gt;
-        &lt;InputText placeholder="Username" class="p-error" /&gt;
+        &lt;InputText placeholder="Username" class="p-invalid" /&gt;
         &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
     &lt;/div&gt;
     &lt;div class="p-col-12"&gt;
-        &lt;InputText placeholder="Email" class="p-error" :closable="false" /&gt;
+        &lt;InputText placeholder="Email" class="p-invalid" :closable="false" /&gt;
         &lt;InlineMessage /&gt;
     &lt;/div&gt;
 &lt;/div&gt;

src/views/steps/PersonalDemo.vue

@@ -24,18 +24,18 @@
                 </div>
                 <div class="p-grid p-fluid wizard-content">
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                        <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
+                        <InputText v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
                         <ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
                     </div>
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                        <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
+                        <InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
                         <ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content">
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
                             <p class="wizard-input-header">Your Age</p>
-                            <InputText v-model="$v.age.$model" :class="{'p-error':$v.age.$error && submitted}" />
+                            <InputText v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
                             <ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
                     </div>
                 </div>

src/views/steps/StepsDoc.vue

@@ -205,18 +205,18 @@ export default {
             </div>
             <div class="p-grid p-fluid wizard-content">
                 <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                    <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname" />
+                    <InputText v-model="$v.firstname.$model" :class="{'p-invalid':$v.firstname.$invalid && submitted}" placeholder="Firstname" />
                     <ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
                 </div>
                 <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                    <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname"/>
+                    <InputText v-model="$v.lastname.$model" :class="{'p-invalid':$v.lastname.$invalid && submitted}" placeholder="Lastname"/>
                     <ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
                 </div>
             </div>
             <div class="p-grid p-fluid wizard-content">
                 <div class="p-col-12 p-md-3" style="max-width: 176px;">
                         <p class="wizard-input-header">Your Age</p>
-                        <InputText v-model="$v.age.$model" :class="{'p-error':$v.age.$error && submitted}" />
+                        <InputText v-model="$v.age.$model" :class="{'p-invalid':$v.age.$error && submitted}" />
                         <ValidationMessage v-show="$v.age.$invalid && submitted" style="margin-top: .5em; font-size: 12px">Age should be number.</ValidationMessage>
                 </div>
             </div>