From b8c1d5a79d29b6e08606eb7b779c208bd9bf4065 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Fri, 26 Jun 2020 16:32:56 +0200
Subject: [PATCH] form select arrow focused elements styling

---
 src/scss/_theme.scss                        |  2 +-
 src/scss/components/_button.scss            | 14 +++++++++++---
 src/scss/components/_form.scss              | 10 ++++++++++
 src/scss/components/_heading-permalink.scss |  2 +-
 src/scss/components/_site-foot.scss         |  4 ++++
 src/scss/components/_site-head.scss         |  4 ++++
 src/scss/global.scss                        |  2 +-
 7 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
index cb64022..a6dea5a 100644
--- a/src/scss/_theme.scss
+++ b/src/scss/_theme.scss
@@ -14,7 +14,7 @@
   --color-selection-bg: #{get-color('dark')};
   --color-stroke: #{get-color('mid')};
   --color-action-bg: #{get-color('primary')};
-  --color-action-text: #{get-color('light')};
+  --color-action-text: #{get-color('dark')};
   --color-theme-primary: #{get-color('primary')};
   --color-theme-primary-glare: #{get-color('primary-glare')};
   --color-theme-highlight: #{get-color('highlight')};
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 48c1346..3a04160 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -24,9 +24,9 @@
 }
 
 .button:focus:not(:hover),
-.btn:focus:not(:hover) {
-  outline: 1px solid var(--color-action-text);
-  outline-offset: -4px;
+.btn:not(button):focus:not(:hover) {
+  outline: 1px dotted var(--color-white);
+  outline-offset: -1rem;
 }
 
 .button:active,
@@ -44,6 +44,10 @@
   font-size: 1.125rem;
   font-weight: 600;
 
+  &:focus {
+    outline: none;
+  }
+
   + .btn {
     margin-left: 2rem;
   }
@@ -52,6 +56,10 @@
     color: var(--color-dark);
     background-color: var(--color-primary);
     font-weight: 700;
+
+    &:focus:not(:hover) {
+      outline-color: var(--color-dark);
+    }
   }
 
   &.btn-secondary {
diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
index 02a3556..75b0cbc 100644
--- a/src/scss/components/_form.scss
+++ b/src/scss/components/_form.scss
@@ -48,6 +48,11 @@ select {
   padding: .75rem 1.5rem;
   border-radius: 1.5rem;
   width: 100%;
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--color-dark) 0 0 1.5px 1px;
+  }
 }
 
 textarea {
@@ -55,6 +60,11 @@ textarea {
 }
 
 select {
+  background-image: url("data:image/svg+xml,%3Csvg width='32' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 32l-7.794-12h15.588L23 32z' fill='%23333'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
+  background-position: right 1.5rem top 50%;
+  background-size: 2rem 3rem;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
diff --git a/src/scss/components/_heading-permalink.scss b/src/scss/components/_heading-permalink.scss
index 1016c8c..e9e10d7 100644
--- a/src/scss/components/_heading-permalink.scss
+++ b/src/scss/components/_heading-permalink.scss
@@ -1,5 +1,5 @@
 .heading-permalink {
-  color: var(--color-theme-primary-glare);
+  color: var(--color-dark);
   font-size: .8em;
   margin-left: .3em;
   margin-top: .2em;
diff --git a/src/scss/components/_site-foot.scss b/src/scss/components/_site-foot.scss
index 3692366..1180f4b 100644
--- a/src/scss/components/_site-foot.scss
+++ b/src/scss/components/_site-foot.scss
@@ -28,6 +28,10 @@
     &:hover {
       text-decoration: none;
     }
+
+    &:focus {
+      outline-color: var(--color-white);
+    }
   }
 
   &__credit {
diff --git a/src/scss/components/_site-head.scss b/src/scss/components/_site-head.scss
index 6e3c2f3..bd337ff 100644
--- a/src/scss/components/_site-head.scss
+++ b/src/scss/components/_site-head.scss
@@ -6,5 +6,9 @@
     font-weight: 700;
     text-decoration: none;
     color: var(--color-text);
+    
+    &:focus {
+      outline-color: var(--color-secondary);
+    }
   }
 }
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 3af5d63..cf90273 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -48,7 +48,7 @@ img {
 }
 
 :focus {
-  outline: 1px solid var(--color-theme-primary-glare);
+  outline: 1px solid var(--color-dark);
   outline-offset: 0.25rem;
 }