From 8b43b3ba4bc4b296f5fe283674aaf8d710fc1493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Sun, 18 Jul 2021 12:10:30 +0200
Subject: [PATCH] adding #13

---
 public/plain-ui.css             | 17 ++++++-----------
 src/scss/components/_field.scss | 22 +++++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/public/plain-ui.css b/public/plain-ui.css
index 5c0fe60..99a2974 100644
--- a/public/plain-ui.css
+++ b/public/plain-ui.css
@@ -2261,7 +2261,6 @@ input.field-text, textarea.field-text, select.field-choice {
   font-size: 0.95rem;
   width: 100%;
   border: 1px solid #a4a4a4;
-  background-color: var(--background-contrast);
   border-radius: 2px;
   margin: 0.7rem 0 0;
 }
@@ -2284,17 +2283,13 @@ select.field-choice {
      -moz-appearance: none;
           appearance: none;
   padding: 0.8em;
-  position: relative;
+  background-image: linear-gradient(to right, #717171, #717171);
+  background-position: 100%;
+  background-size: 1.5rem 100%;
+  background-repeat: no-repeat;
 }
-select.field-choice::after {
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: block;
-  content: " ";
-  width: 10px;
-  height: 10px;
-  background: red;
+select.field-choice:active, select.field-choice:focus {
+  background-image: linear-gradient(to right, #3e3e3e, #3e3e3e);
 }
 
 /**
diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss
index 89c3112..f768c9f 100644
--- a/src/scss/components/_field.scss
+++ b/src/scss/components/_field.scss
@@ -49,7 +49,6 @@ input.field-text, textarea.field-text, select.field-choice {
     width: 100%;
 
     border: 1px solid lighten($color__primary, 40%);
-    background-color: var(--background-contrast);
     border-radius: $border-radius;
 
     margin: 0.7rem 0 0;
@@ -74,17 +73,18 @@ input.field-text, textarea.field-text {
 select.field-choice {
     appearance: none;
     padding: 0.8em;
-    position: relative;
 
-    &::after {
-        position: absolute;
-        right: 0;
-        top: 0;
-        display: block;
-        content: " ";
-        width: 10px;
-        height: 10px;
-        background: red;
+    background-image:
+        linear-gradient(to right, $color__active, $color__active);
+    background-position:
+        100%;
+    background-size:
+        1.5rem 100%;
+    background-repeat: no-repeat;
+
+    &:active, &:focus {
+        background-image:
+            linear-gradient(to right, $color__border, $color__border);
     }
 }