Merge branch 'master' of https://github.com/ditdot-dev/vue-flow-form

Author: spinn

examples/questionnaire/branding.css

@@ -1,8 +1,3 @@
-/*
-    Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
-    https://www.ditdot.hr/en
-*/
-
 /*
   basic theme color and font styles
 */
@@ -180,61 +175,6 @@ p.description,
   color: var(--secondary-text-color);
 }
 
-/*
-  vue.js like theme with green background
-*/
-
-/*
-
-:root {
-  --bg-color: #41B883;
-  --main-text-color: #fff;
-  --secondary-text-color: #CFEDE0;
-  --tertiary-text-color: #67C69C;
-  --main-accent-color: #111;
-}
-
-header{
-  background-color: transparent;
-}
-
-.f-footer .footer-inner-wrap{
-  background-color: transparent;
-}
-
-header svg.logo{
-  fill: var(--main-accent-color);
-}
-
-.v-form textarea,
-.v-form input,
-.v-form select option{
-  color: var(--main-accent-color);;
-}
-
-ul.f-radios li.f-selected, ul.f-radios li:active {
-  border-color: var(--main-text-color);
-  background-color: var(--tertiary-text-color);
-}
-
-.text-alert,
-.f-invalid{
-  color: red
-}
-
-p.text-success{
-  color: yellow;
-}
-
-.f-progress-bar-inner {
-  background-color: var(--main-accent-color);
-}
-.f-progress {
-  opacity: 0.7;
-}
-*/
-
-
 /*
   dark mode styles
 */

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

@@ -0,0 +1,263 @@
+/*
+    Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
+    https://www.ditdot.hr/en
+*/
+
+/*
+  simple vue.js like theme with green background
+*/
+
+:root {
+  --bg-color: #41B883;
+  --main-text-color: #fff;
+  --secondary-text-color: #B2E2CD;
+  --tertiary-text-color: #67C69C;
+  --main-accent-color: #111;
+  --secondary-accent-color: #BBEBD5;
+}
+
+body,
+textarea,
+input,
+select,
+select option {
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--main-text-color);
+}
+
+/*header*/
+header {
+  background-color: transparent;
+}
+
+header svg.logo {
+  fill: var(--main-accent-color);
+}
+
+/* footer */
+.f-footer .footer-inner-wrap {
+  background-color: transparent;
+}
+
+.v-form textarea,
+.v-form input,
+.v-form select option {
+  color: var(--main-accent-color);
+}
+
+.v-form input[type=text],
+.v-form input[type=number],
+.v-form input[type=tel],
+.v-form input[type=email],
+.v-form input[type=url],
+.v-form textarea,
+.v-form span.faux-form {
+  border-bottom-color: var(--secondary-text-color);
+}
+
+a,
+a:active {
+  color: var(--main-text-color);
+}
+
+/*placeholder*/
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: var(--secondary-text-color);
+  opacity: 1;
+  font-weight: 300;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+  color: var(--secondary-text-color);
+  opacity: 1;
+  font-weight: 300;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+  color: var(--secondary-text-color)!important;
+  opacity: 1!important;
+  font-weight: 300!important;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+  color: #999;
+  opacity: 1;
+  font-weight: 300;
+}
+
+/*field-multiplechoicetype*/
+ul.f-radios li {
+  border: 1px solid var(--secondary-text-color);
+}
+
+ul.f-radios li.f-other.f-selected input {
+  color: inherit;
+}
+
+ul.f-radios li.f-selected, ul.f-radios li:active {
+  border-color: var(--main-text-color);
+  background-color: var(--tertiary-text-color);
+}
+
+.f-key{
+  color: var(--secondary-text-color);
+}
+
+/*field-dropdowntype*/
+span.f-empty {
+  color: var(--secondary-text-color);
+}
+
+span.f-answered{
+  color: var(--main-text-color);
+}
+
+.f-arrow-down svg {
+  fill: var(--main-text-color);
+}
+
+/*buttons*/
+.o-btn-action {
+  color: var(--bg-color);
+  background-color: var(--main-text-color);
+}
+
+.o-btn-action:hover,
+.o-btn-action:focus {
+  background-color: var(--main-text-color);
+  opacity: .9;
+}
+
+/* progress bar */
+.f-footer .f-prev svg,
+.f-footer .f-next svg {
+  fill: var(--main-text-color);
+}
+
+.f-progress {
+  color: var(--secondary-text-color);
+}
+
+.f-progress-bar {
+  background-color: var(--secondary-text-color);
+}
+
+.f-progress-bar-inner {
+  background-color: var(--main-text-color);
+}
+
+.f-prev:hover,
+.f-next:hover{
+  background-color: rgba(0,0,0,0.07);
+}
+
+/*text-muted*/
+span.f-title,
+span.f-sub,
+p.description,
+.text-muted {
+  color: var(--secondary-text-color);
+}
+
+.text-alert,
+.f-invalid {
+  color: red
+}
+
+p.text-success {
+  color: yellow;
+}
+
+/*
+  dark mode styles
+*/
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #313640;
+    --main-text-color: #fff;
+    --secondary-text-color: #AEB6BF;
+    --tertiary-text-color: #41464F;
+    --main-accent-color: #41B883;
+    --secondary-accent-color: #A0DBC1;
+  }
+
+  header{
+    background-color: transparent;
+  }
+
+  header svg.logo{
+    fill: var(--main-accent-color);
+  }
+
+  .v-form textarea,
+  .v-form input,
+  .v-form select option {
+    color: var(--main-accent-color);
+  }
+
+  span.f-answered{
+    color: var(--main-accent-color);
+  }
+
+  .f-arrow-down svg {
+    fill: var(--main-accent-color);
+  }
+  
+  .text-success{
+    color: var(--main-accent-color);
+  }
+
+  /*footer*/
+  .f-footer .footer-inner-wrap{
+    background-color: var(--bg-color);
+  }
+
+  .f-footer .f-prev svg,
+  .f-footer .f-next svg {
+    fill: var(--main-accent-color);
+  }
+
+  .f-footer .f-prev.f-disabled svg,
+  .f-footer .f-next.f-disabled svg {
+    fill: var(--main-text-color);
+  }
+
+  .f-footer .footer-inner-wrap{
+    background-color: var(--bg-color);
+  }
+
+  .f-prev:hover,
+  .f-next:hover{
+    background-color: rgba(0,0,0,0.2);
+  }
+
+  .f-progress-bar {
+    background-color: var(--secondary-text-color);
+    filter: brightness(1);
+  }
+
+  .f-progress-bar-inner {
+    background-color: var(--main-accent-color);
+  }
+
+  /*field-multiplechoicetype*/
+  ul.f-radios li.f-selected{
+    color: var(--main-accent-color);
+  }
+
+  ul.f-radios li{
+    font-weight: 900;
+    color: var(--secondary-text-color);
+  }
+
+  .f-key{
+    font-weight: 400;
+    color: var(--main-accent-color);
+  }
+
+}