Merge branch 'feature/opinion-scale-question' of https://github.com/ditdot-dev/vue-flow-form into feature/opinion-scale-question

Author: EkaterinaVu

src/assets/css/common.css

@@ -561,7 +561,7 @@ header.vff-header svg.f-logo {
   font-size: 2.4em;
   line-height: 1.34;
   padding-right: 1.8em;
-  margin-bottom: 20px;
+  margin-bottom: 21px;
 }
 
 .vff h3,
@@ -591,6 +591,10 @@ header.vff-header svg.f-logo {
   font-size: .51em;
 }
 
+.vff .fh2 span.f-label-scale {
+  font-size: .42em;
+}
+
 .vff span.f-tagline,
 .vff span.f-text {
   margin-bottom: 8px;
@@ -641,7 +645,7 @@ header.vff-header svg.f-logo {
 }
 
 .vff ul.f-radios li {
-  padding: .6em .68em;
+  padding: .62em .68em;
   margin: .5em 0 .6em;
   font-weight: 300;
   line-height: 1.24;
@@ -694,7 +698,7 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-multiplepicturechoice ul.f-radios {
-  max-width: 750px;
+  max-width: 760px;
   min-width: auto;
   display: -ms-flexbox;
   display: flex;
@@ -746,7 +750,7 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-opinionscale ul.f-radios {
-  max-width: 750px;
+  max-width: 760px;
   min-width: auto;
   display: -ms-flexbox;
   display: -webkit-box;
@@ -773,13 +777,13 @@ header.vff-header svg.f-logo {
   -ms-flex-align: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  padding: 8px 8px 10px;
+  padding: 9px 8px 8px;
   margin-right: 8px;
   -ms-flex: 1 0 calc(10% - 8px);
   flex: 1 0 calc(10% - 8px);
   font-size: 15px;
   line-height: 1.38;
-  min-height: 64px; 
+  min-height: 56px; 
 }
 
 .vff .field-opinionscale ul.f-radios li .f-label-wrap {
@@ -794,9 +798,9 @@ header.vff-header svg.f-logo {
   display: -ms-flexbox;
   display: flex;
   justify-content: space-between;
-  max-width: 750px;
+  max-width: 760px;
   min-width: auto;
-  margin: 8px -8px 0 0;
+  margin: 2px -8px .6em 0;
 }
 
 .vff .f-label-scale {
@@ -814,7 +818,7 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-iconrate ul.f-radios {
-  max-width: 750px;
+  max-width: 760px;
   min-width: auto;
   display: -ms-flexbox;
   display: -webkit-box;
@@ -828,7 +832,7 @@ header.vff-header svg.f-logo {
 }
 
 .vff .field-iconrate ul.f-radios li {
-  max-width: 64px;
+  max-width: 60px;
   height: 100%;
   flex: 1 0 0%;
   display: -ms-flexbox;
@@ -841,7 +845,8 @@ header.vff-header svg.f-logo {
   outline: none;
   border: none;
   position: relative;
-  padding: 0 8px 0 0;
+  margin-top: 0;
+  padding: 0 10px 0 0;
 }
 
 .vff .field-iconrate ul.f-radios li .f-icon-wrap {
@@ -858,11 +863,11 @@ header.vff-header svg.f-logo {
   align-self: stretch;
 }
 
-.vff .field-iconrate ul.f-radios li .f-icon-wrap svg{
+.vff .field-iconrate ul.f-radios li .f-icon-wrap svg {
   height: 100%;
   width: 100%;
-  max-height: 64px;
-  max-width: 64px;
+  max-height: 60px;
+  max-width: 60px;
   fill: transparent;
   stroke: var(--vff-secondary-text-color);
 }
@@ -881,7 +886,7 @@ header.vff-header svg.f-logo {
 .vff .field-iconrate ul.f-radios li.f-selected .f-icon-wrap svg, 
 .vff .field-iconrate ul.f-radios li.f-previous .f-icon-wrap svg,
 .vff .field-iconrate ul.f-radios li:active .f-icon-wrap svg {
-  fill: var(--vff-main-text-color);
+  fill: var(--vff-tertiary-text-color);
   stroke: var(--vff-main-text-color);
 }
 
@@ -1308,6 +1313,10 @@ header.vff-header svg.f-logo {
     font-size: .64em;
   }
 
+  .vff .fh2 span.f-label-scale {
+    margin-bottom: .3em;
+  }
+
   .vff span.f-tagline {
     line-height: 1.5;
   }
@@ -1337,7 +1346,7 @@ header.vff-header svg.f-logo {
   .vff .field-multiplepicturechoice ul.f-radios,
   .vff .field-opinionscale ul.f-radios,
   .vff .f-label-scale-wrap {
-    max-width: 320px;
+    max-width: 330px;
   }
 
   .vff .field-multiplepicturechoice ul.f-radios li {

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

@@ -130,7 +130,7 @@ header.vff-header svg.f-logo {
 
 .vff ul.f-radios li.f-selected,
 .vff ul.f-radios li:active {
-  border-color: var(--vff-main-form-bg-color);
+  border-color: var(--vff-secondary-form-bg-color);
   background-color: var(--vff-secondary-form-bg-color);
   color: var(--vff-tertiary-text-color);
 }
@@ -143,6 +143,14 @@ header.vff-header svg.f-logo {
   color: var(--vff-field-key-color);
 }
 
+/* field-rate */
+.vff .field-iconrate ul.f-radios li.f-selected .f-icon-wrap svg, 
+.vff .field-iconrate ul.f-radios li.f-previous .f-icon-wrap svg,
+.vff .field-iconrate ul.f-radios li:active .f-icon-wrap svg {
+  stroke: var(--vff-secondary-form-bg-color);
+  fill: var(--vff-secondary-form-bg-color);
+}
+
 /* field-dropdown */
 .vff span.f-empty {
   color: var(--vff-secondary-text-color);