Merge pull request #172 from BrightspaceUI/custom-box-shadow

Custom box shadow
BrightspaceUI · May 30, 2019 · e4e29e8 · e4e29e8
2 parents 590138b + 04fff18
commit e4e29e8
Showing 1 changed file with 3 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);
@@ -47,6 +48,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-button-icon">
 				border-radius: var(--d2l-button-icon-border-radius);
 				min-height: var(--d2l-button-icon-min-height);
 				min-width: var(--d2l-button-icon-min-width);
+				padding: 0;
 				position: relative;
 			}
 
@@ -84,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 {