From d8889fdaa9db01f76f3961fa618019fb6a6ed9ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 6 Jun 2019 17:59:47 +0200
Subject: [PATCH] Streamline form field colors

---
 .../Resources/Private/Assets/scss/_forms.scss  | 18 ++++++++++--------
 .../Resources/Private/Assets/scss/_mixins.scss | 10 ++++++++++
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss
index 61a8179a..d9bada6f 100644
--- a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss
+++ b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss
@@ -30,7 +30,8 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        background-color: $color-divider;
+        background-color: $color-brand-light;
+        color: white;
         border-radius: 8px;
     }
 
@@ -65,12 +66,13 @@
 }
 
 .form__field {
+    @include nooutline;
     border: none;
     border-radius: 8px;
     width: 100%;
     padding: 8px 16px;
-    color: $color-font-main;
-    background-color: $color-divider;
+    color: white;
+    background-color: $color-brand-light;
 
     .form--box & {
         background-color: $color-brand-light;
@@ -172,33 +174,33 @@
 }
 
 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-    color: $color-font-main;
+    color: white;
     opacity: 1;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 ::-moz-placeholder { /* Mozilla Firefox 19+ */
-    color: $color-font-main;
+    color: white;
     opacity: 1;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }
 
 ::-ms-input-placeholder { /* Microsoft Edge */
-    color: $color-font-main;
+    color: white;
     text-transform: uppercase;
     font-size: 90%;
 }
diff --git a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss
index 0a0de7a0..793d3da8 100644
--- a/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss
+++ b/public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss
@@ -6,6 +6,16 @@
   padding: 0 $padding;
 }
 
+@mixin nooutline() {
+  outline: none;
+
+  &:focus,
+  &:active,
+  &:visited {
+    outline: none;
+  }
+}
+
 @mixin sectionColours() {
   &.section-incentives {
     color: $color-incentives;