Feature/isolate styles and new layout option

* Isolate css styles
* Fix css variables
* Integrate - remove animations.css and normalize.css
* Fix main containers margins
* New layout option - standalone and non-standalone

Author: phre1

examples/questionnaire/Example.vue

@@ -2,10 +2,10 @@
 
 <template>
   <div>
-    <header>
+    <header class="vff-header">
       <div class="f-container">
        <!-- Add custom logo here -->
-        <svg class="logo" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet" viewBox="0 0 35.606 11.211">
+        <svg class="f-logo" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet" viewBox="0 0 35.606 11.211">
           <path d="M.134.837H3.21V8.01h4.203v2.18H.134V.837z"/>
           <path d="M11.875.59c1.48 0 2.668.448 3.567 1.344s1.35 2.052 1.35 3.47c0 1.48-.445 2.7-1.336 3.632S13.38 10.45 11.9 10.45c-1.678 0-2.954-.54-3.827-1.622-.717-.9-1.08-2.022-1.09-3.397-.01-1.36.39-2.484 1.193-3.374C9.06 1.08 10.292.59 11.875.59zm0 2.283c-.563 0-1.003.222-1.323.662-.338.467-.507 1.124-.507 1.972 0 .865.162 1.524.487 1.978a1.58 1.58 0 0 0 1.369.682c.588 0 1.04-.223 1.355-.668s.474-1.07.474-1.875c0-1.834-.62-2.75-1.855-2.75z"/>
           <path d="M21.565 7.078V5.055h4.217v5.163h-1.986l-.13-.908c-.693.76-1.617 1.142-2.777 1.142-1.383 0-2.488-.437-3.313-1.3s-1.243-2.03-1.252-3.464c-.01-1.462.385-2.65 1.18-3.567.875-1.012 2.11-1.518 3.7-1.518 1.21 0 2.207.303 3 .907s1.264 1.457 1.447 2.556h-2.92c-.207-.787-.73-1.182-1.57-1.182-.553 0-.988.236-1.303.707s-.475 1.153-.475 2.043c0 1.695.652 2.542 1.96 2.542.363 0 .695-.103.998-.306a1.29 1.29 0 0 0 .572-.784h-1.35v.002z"/>
@@ -20,18 +20,19 @@
       v-on:submit="onSubmit"
       v-bind:questions="questions"
       v-bind:language="language"
+      v-bind:standalone="true"
     >
     <!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
       <!-- We've overriden the default "complete" slot content -->
      <template v-slot:complete>
-        <div class="section-wrap">
+        <div class="f-section-wrap">
           <p>
             <span class="fh2">Thank you. 🙏</span>
-            <span class="section-text">
+            <span class="f-section-text">
               Great work, the survey is completed, and our demo is done. You can review your answers or press submit.
             </span>
           </p>
-          <p class="description">Note: No data will be saved and/or sent in this demo.</p>
+          <p class="f-description">Note: No data will be saved and/or sent in this demo.</p>
         </div>  
       </template>
 

examples/quiz/Example.vue

@@ -2,10 +2,10 @@
 
 <template>
   <div>
-    <header>
+    <header class="vff-header">
       <div class="f-container">
         <!-- Add custom logo here -->
-        <svg xmlns="http://www.w3.org/2000/svg" width='150' height='30' fill='white' viewBox="0 0 361.3 69.57">
+        <svg xmlns="http://www.w3.org/2000/svg" width='150' height='28' fill='white' viewBox="0 0 361.3 69.57">
           <g data-name="Layer 2">
             <g data-name="Layer 1">
               <path d="M35.05 12.34h-22v9.88h20.24v10H13.08V54.7H0V2.36h35.05zM79 35q0 9.74-5.32 15.35t-15.07 5.6q-9.68 0-15-5.6T38.25 35q0-9.84 5.36-15.42t15-5.57q9.7 0 15 5.61T79 35zm-12.62.07a24.64 24.64 0 00-.58-5.85 10.88 10.88 0 00-1.6-3.75 6 6 0 00-2.46-2.05 7.91 7.91 0 00-3.13-.58 8.34 8.34 0 00-3 .51 5.82 5.82 0 00-2.46 2A10.8 10.8 0 0051.5 29a24.06 24.06 0 00-.63 6 23.19 23.19 0 00.6 5.85A11 11 0 0053 44.47a5.77 5.77 0 002.46 2 8.22 8.22 0 003.27.63 7.84 7.84 0 003-.63 5.68 5.68 0 002.45-1.9 11.19 11.19 0 001.65-3.64 24.4 24.4 0 00.58-5.88zM112.08 26.86h-1a9.16 9.16 0 00-2-.37c-.89-.08-1.88-.12-3-.12a16 16 0 00-4.06.56 36.9 36.9 0 00-4.13 1.34V54.7H85.57V15.22h12.31v5.66c.56-.51 1.34-1.16 2.33-1.95a23.8 23.8 0 012.73-1.88 15.17 15.17 0 013.11-1.39 11 11 0 013.36-.58h1.33c.49 0 .94.06 1.34.1zM164 54.7V35c0-1.94 0-3.59-.11-4.92a10 10 0 00-.63-3.27 3.59 3.59 0 00-1.63-1.85 6.93 6.93 0 00-3.12-.58 6.71 6.71 0 00-2.77.62 18.65 18.65 0 00-3 1.74v28h-12.4V35c0-1.92 0-3.56-.12-4.9a10.27 10.27 0 00-.65-3.29 3.59 3.59 0 00-1.63-1.85 6.84 6.84 0 00-3.08-.58 6.63 6.63 0 00-3 .71 21.81 21.81 0 00-2.82 1.65v28h-12.3V15.22h12.3v4.36a34.59 34.59 0 015.7-4 12.45 12.45 0 016-1.44 11.68 11.68 0 016.36 1.73 10.78 10.78 0 014.25 5.13 36.16 36.16 0 016.65-5.09 12.93 12.93 0 016.39-1.78 13.23 13.23 0 014.92.88 9.57 9.57 0 013.69 2.64 12.47 12.47 0 012.48 4.52 23.27 23.27 0 01.82 6.83v25.7zM254.85 68.55a32.87 32.87 0 01-4.24.78 65.92 65.92 0 01-6.66.24 21.07 21.07 0 01-7-1 12.93 12.93 0 01-4.83-2.94 11.81 11.81 0 01-2.9-4.43 17.71 17.71 0 01-1.11-5.52q-11.12-.49-17.49-7.7t-6.38-19.4q0-12.63 6.75-20t18.6-7.33q11.81 0 18.59 7.29t6.79 20a31.14 31.14 0 01-3.85 15.87 21.31 21.31 0 01-10.88 9.4c0 2.56.61 4.32 1.7 5.3s3 1.45 5.75 1.45a12.87 12.87 0 003.31-.46 13 13 0 002.55-.9h1.3zm-17-26.75a17.08 17.08 0 002.6-5.33 28.31 28.31 0 00.92-8 28.3 28.3 0 00-1-8 16.55 16.55 0 00-2.58-5.4 10 10 0 00-3.79-2.99 10.92 10.92 0 00-4.41-.94 10.72 10.72 0 00-4.39.87 10.51 10.51 0 00-3.8 3.07 16 16 0 00-2.62 5.42 28.41 28.41 0 00-1 8.05 28.14 28.14 0 001 8 16.17 16.17 0 002.6 5.33 9.8 9.8 0 003.76 3.12 11 11 0 004.43.93 10.61 10.61 0 004.5-1 9.77 9.77 0 003.76-3.13zM298.65 54.7h-12.3v-4.36a33.11 33.11 0 01-5.87 4.06 13.61 13.61 0 01-6.37 1.39q-5.87 0-9.15-3.71t-3.29-11.16v-25.7H274V34.8c0 2 .06 3.71.16 5a10.09 10.09 0 00.76 3.27 3.84 3.84 0 001.74 1.86 7 7 0 003.28.63 9.42 9.42 0 003.08-.63 13.4 13.4 0 003.29-1.72v-28h12.3zM320.73 9.6h-13V0h13zm-.35 45.1h-12.31V15.22h12.31zM361.3 54.7h-34.52v-8.12l18.84-22.11h-18v-9.25h33.29v8L342 45.28h19.3z"/>
@@ -21,13 +21,14 @@
       v-on:submit="onQuizSubmit"
       v-bind:questions="questions"
       v-bind:language="language"
+      v-bind:standalone="true"
     >
     <!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
       <!-- We've overriden the default "complete" slot content -->
       <template v-slot:complete>
         <p>
           <span class="fh2">You did it!</span>
-          <span v-if="!submitted" class="section-text">
+          <span v-if="!submitted" class="f-section-text">
             Review your answers or press Calculate score to see your result.
           </span>
         </p>

examples/support-page/Example.vue

@@ -9,25 +9,26 @@
       v-bind:questions="questions"
       v-bind:language="language"
       v-bind:progressbar="false"
+      v-bind:standalone="true"
     >
       <!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
       <!-- We've overriden the default "complete" slot content -->
       <template v-slot:complete>
-        <div class="section-wrap">
+        <div class="f-section-wrap">
           <div v-if="questions[0].answer === 'technical_issue'">
             <span class="f-tagline">Submit issue &gt; Step 3/3</span>
             <div v-if="loading">
               <span class="fh2">Please wait, submitting...</span>
             </div>
             <div v-else>
               <span class="fh2">Your ticket number is: {{ getTicket() }}</span>
-              <p class="description"><span>Thank You 😊. Our support team will contact you as soon as possible.</span></p>
+              <p class="f-description"><span>Thank You 😊. Our support team will contact you as soon as possible.</span></p>
             </div>
           </div>
           <div v-else>
             <span class="f-tagline">Support page &gt; Ticket status</span>
             <span class="fh2">Good news - the wheels are turning, your ticket is being processed!😉</span>
-            <p class="description"><span>Have a great day!</span></p>
+            <p class="f-description"><span>Have a great day!</span></p>
           </div>
         </div>  
       </template>

src/assets/css/animations.css

@@ -1,91 +0,0 @@
-/* ==========================================================================
-
-// Base Animations - http://getbase.org
-// Author: Matthew Hartman - http://www.matthewhartman.com.au/
-// Version: 4.1.2 - Last Updated: December 11, 2018
-
-========================================================================== */
-.animate {
-  -webkit-animation-duration: .4s;
-  animation-duration: .4s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  animation-name: fadeIn;
-}
-
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -12px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fade-in-down {
-  animation-name: fadeInDown;
-}
-
-@keyframes fadeInLeft {
-  0% {
-    opacity: 0;
-    transform: translate3d(-12px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fade-in-left {
-  animation-name: fadeInLeft;
-}
-
-@keyframes fadeInRight {
-  0% {
-    opacity: 0;
-    transform: translate3d(12px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fade-in-right {
-  animation-name: fadeInRight;
-}
-
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 12px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fade-in-up {
-  animation-name: fadeInUp;
-}