improve code block button styles

shoelace-style · Aug 10, 2021 · a396c86 · a396c86
1 parent 75f2da3
commit a396c86
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
@@ -98,15 +98,22 @@
   border-radius: 0;
   background: rgb(var(--sl-color-neutral-1000));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: 0.7rem;
+  font-weight: 500;
   text-transform: uppercase;
   color: rgb(var(--sl-color-neutral-600));
   padding: 0 1rem;
   cursor: pointer;
   transition: none;
 }
 
+.code-block__button:not(:last-of-type) {
+  border-right: solid 1px rgb(var(--sl-color-neutral-200));
+}
+
 .code-block__button--codepen {
+  display: flex;
+  place-items: center;
   width: 6rem;
 }
 
@@ -121,6 +128,7 @@
 .code-block__button:hover,
 .code-block__button:active {
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400));
+  border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
   color: rgb(var(--sl-color-primary-600));
   z-index: 1;
@@ -130,6 +138,7 @@
   outline: none;
   color: rgb(var(--sl-color-primary-600));
   border-color: rgb(var(--sl-color-primary-400));
+  border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
     0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
@@ -144,10 +153,6 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 2.5rem;
-  font: inherit;
-  font-size: 0.7rem;
-  font-weight: 500;
   color: rgb(var(--sl-color-neutral-600));
   cursor: pointer;
   transition: 250ms background-color;