add border to control button

shoelace-style · Nov 16, 2021 · d6e4d2f · d6e4d2f
1 parent a14642b
commit d6e4d2f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/docs/components/animated-image.md b/docs/components/animated-image.md
@@ -91,6 +91,7 @@ You can change the appearance and location of the control box by targeting the `
     bottom: 1rem;
     left: 1rem;
     background-color: deeppink;
+    border: none;
     color: white;
   }
 </style>

diff --git a/src/components/animated-image/animated-image.styles.ts b/src/components/animated-image/animated-image.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --control-box-size: 2.5rem;
+    --control-box-size: 3rem;
     --icon-size: calc(var(--control-box-size) * 0.625);
     display: inline-flex;
     position: relative;
@@ -33,7 +33,7 @@ export default css`
     height: var(--control-box-size);
     font-size: var(--icon-size);
     background: none;
-    border: none;
+    border: solid 2px currentColor;
     background-color: rgb(var(--sl-color-neutral-1000) / 50%);
     border-radius: var(--sl-border-radius-circle);
     color: rgb(var(--sl-color-neutral-0));