fix(cc-badge): set consistent border display with webkit

Fixes #630
CleverCloud · Dec 1, 2022 · 131aff7 · 131aff7
1 parent c313f54
commit 131aff7
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/cc-badge/cc-badge.js b/src/components/cc-badge/cc-badge.js
@@ -101,7 +101,7 @@ export class CcBadge extends LitElement {
         }
 
         .skeleton.outlined {
-          box-shadow: inset 0 0 0 0.06em #777 !important;
+          border: 0.06em solid #777 !important;
         }
 
         .skeleton img {
@@ -119,19 +119,21 @@ export class CcBadge extends LitElement {
         }
 
         .dimmed {
+          border: 0.06em solid var(--accent-color, #ccc);
           background-color: var(--accent-color, #ccc);
         }
 
         .strong {
+          border: 0.06em solid var(--accent-color, #777);
           background-color: var(--accent-color, #777);
           color: var(--cc-color-text-inverted, #fff);
         }
 
         .outlined {
-          background-color: transparent;
           /* roughly 1px. We want the border to scale with the font size so that outlined
           badges still stand out as they should when font-size is increased. */
-          box-shadow: inset 0 0 0 0.06em var(--accent-color, #777);
+          border: 0.06em solid var(--accent-color, #777);
+          background-color: transparent;
           color: var(--accent-color, #777);
         }