From 45eef2ff1fa6ea7e2f2d426642b5e0ea01818829 Mon Sep 17 00:00:00 2001
From: madalingorbanescu <madalin@pixelgrade.com>
Date: Mon, 2 Sep 2019 16:22:27 +0300
Subject: [PATCH] Fix keyboard navigation related to #4

---
 assets/scss/components/_card.scss | 12 ++++++++++++
 style-rtl.css                     | 13 +++++++++----
 style.css                         |  8 ++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/assets/scss/components/_card.scss b/assets/scss/components/_card.scss
index f6362c4..71f83dd 100644
--- a/assets/scss/components/_card.scss
+++ b/assets/scss/components/_card.scss
@@ -139,6 +139,18 @@
     pointer-events: none;
   }
 
+  &:focus-within {
+    .c-meta__primary,
+    .c-card__action,
+    .c-card__thumbnail-background:before {
+      opacity: 1;
+    }
+
+    .c-card__action:before {
+      width: 29px;
+    }
+  }
+
   @include below(lap) {
     @include spacing('margin-bottom', 1rem);
 
diff --git a/style-rtl.css b/style-rtl.css
index aebf221..2c1523e 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -1722,22 +1722,22 @@ a {
               transform: translate3d(-5px, calc(0.5px - 50%), 0); }
 
 ::-webkit-input-placeholder {
-  color: #3B3B3B;
+  color: currentColor;
   opacity: .6;
   font-style: italic; }
 
 ::-moz-placeholder {
-  color: #3B3B3B;
+  color: currentColor;
   opacity: .6;
   font-style: italic; }
 
 :-ms-input-placeholder {
-  color: #3B3B3B;
+  color: currentColor;
   opacity: .6;
   font-style: italic; }
 
 :-moz-placeholder {
-  color: #3B3B3B;
+  color: currentColor;
   opacity: .6;
   font-style: italic; }
 
@@ -8038,6 +8038,11 @@ blockquote {
   opacity: 0;
   pointer-events: none; }
 
+.c-card:focus-within .c-meta__primary,
+.c-card:focus-within .c-card__action,
+.c-card:focus-within .c-card__thumbnail-background:before {
+  opacity: 1; }
+
 @media not screen and (min-width: 62.5em) {
   .c-card {
     margin-bottom: 14px; }
diff --git a/style.css b/style.css
index 72683c0..2368ed8 100644
--- a/style.css
+++ b/style.css
@@ -8038,6 +8038,14 @@ blockquote {
   opacity: 0;
   pointer-events: none; }
 
+.c-card:focus-within .c-meta__primary,
+.c-card:focus-within .c-card__action,
+.c-card:focus-within .c-card__thumbnail-background:before {
+  opacity: 1; }
+
+.c-card:focus-within .c-card__action:before {
+  width: 29px; }
+
 @media not screen and (min-width: 62.5em) {
   .c-card {
     margin-bottom: 14px; }