From 9f998b470daca455bd47305fbcfddf8bc64df4ce Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Mon, 15 Nov 2021 11:12:01 -0500 Subject: [PATCH] Now labels with the CSS class crayons-btn that wrap inputs of type file have focus states (#15368) --- app/assets/stylesheets/components/buttons.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index 45c720ff7..2233c83c5 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -132,7 +132,9 @@ } .js-focus-visible .crayons-btn.focus-visible:focus, -.js-focus-visible .crayons-btn.focus-visible:focus-within { +.js-focus-visible .crayons-btn.focus-visible:focus-within, +label[class*='crayons-btn']:focus-within // label for input[type="file"] made to look like a button as the browse... button can't be styled. +{ background-color: var(--bg-hover); border-color: var(--border-hover); box-shadow: var(--shadow-hover);