making focus box-shadow customizable

BrightspaceUI · May 29, 2019 · 04fff18 · 04fff18
1 parent e9d97f8
commit 04fff18
Showing 1 changed file with 2 additions and 0 deletions.
diff --git a/d2l-button-icon.js b/d2l-button-icon.js
@@ -26,6 +26,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-button-icon">
 			:host {
 				display: inline-block;
 				--d2l-button-icon-border-radius: 0.3rem;
+				--d2l-button-icon-focus-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006fbf;
 				--d2l-button-icon-min-height: calc(2rem + 2px);
 				--d2l-button-icon-min-width: calc(2rem + 2px);
 				--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
@@ -85,6 +86,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-button-icon">
 			}
 			button:focus, :host(.d2l-button-icon-focus) button {
 				@apply --d2l-button-focus;
+				box-shadow: var(--d2l-button-icon-focus-box-shadow);
 			}
 
 			.d2l-button-icon {