Quiz theme renamed and moved, f-title renamed, small CSS fixes (#97)

Author: EkaterinaVu

examples/questionnaire/branding.css

@@ -37,6 +37,7 @@ header svg.logo{
 .v-form input[type=tel],
 .v-form input[type=email],
 .v-form input[type=url],
+.v-form input[type=password],
 .v-form textarea,
 .v-form span.faux-form {
   border-bottom-color: var(--secondary-text-color);
@@ -168,7 +169,7 @@ span.f-answered{
 }
 
 /*text-muted*/
-span.f-title,
+span.f-tagline,
 span.f-sub,
 p.description,
 .text-muted {

examples/quiz/Example.vue

@@ -329,7 +329,7 @@
 </script>
 
 <style lang="css">
-  @import './branding.css';
+  @import '../../src/assets/css/themes/purple-theme.css';
   /* If using the npm package, use the following lines instead of the one above */
   /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css'; */
   /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme.css'; */

src/assets/css/common.css

@@ -367,14 +367,14 @@ h3,
 }
 
 /*misc-typography*/
-span.f-title,
+span.f-tagline,
 span.f-sub {
   font-weight: 400;
   display: block;
   font-size: 1.222rem;
 }
 
-span.f-title,
+span.f-tagline,
 span.f-text {
   margin-bottom: 8px;
 }
@@ -623,12 +623,12 @@ a.f-disabled {
     width: 12px;
   }
 
-  span.f-title,
+  span.f-tagline,
   span.f-sub {
     font-size: 1.1rem;
   }
 
-  span.f-title {
+  span.f-tagline {
     line-height: 1.6;
   }
 

src/assets/css/themes/green-theme.css

@@ -54,6 +54,7 @@ header svg.logo {
 .v-form input[type=tel],
 .v-form input[type=email],
 .v-form input[type=url],
+.v-form input[type=password],
 .v-form textarea,
 .v-form span.faux-form {
   border-bottom-color: var(--secondary-text-color);
@@ -156,7 +157,7 @@ span.f-answered{
 }
 
 /*text-muted*/
-span.f-title,
+span.f-tagline,
 span.f-sub,
 p.description,
 .text-muted {

examples/quiz/branding.css renamed to src/assets/css/themes/purple-theme.css

@@ -57,6 +57,7 @@ header svg.logo{
 .v-form input[type=tel],
 .v-form input[type=email],
 .v-form input[type=url],
+.v-form input[type=password],
 .v-form textarea,
 .v-form span.faux-form {
   border-bottom-color: var(--secondary-text-color);
@@ -189,7 +190,7 @@ span.f-answered{
 }
 
 /*text-muted*/
-span.f-title,
+span.f-tagline,
 span.f-sub,
 p.description,
 .text-muted {

src/components/Question.vue

@@ -5,7 +5,7 @@
     <div class="q-inner">
       <div v-bind:class="{'section-wrap': question.type === QuestionType.SectionBreak}">
         <div v-bind:class="{'fh2': question.type !== QuestionType.SectionBreak}">
-          <span class="f-title" v-if="question.tagline">{{ question.tagline }}</span>
+          <span class="f-tagline" v-if="question.tagline">{{ question.tagline }}</span>
 
           <template v-if="question.title">
             <span class="fh2" v-if="question.type === QuestionType.SectionBreak">{{ question.title }}</span>