docs(code previews): improve styling of code preview blocks

improve the stying of code preview blocks in the docs.
iambacon · Jan 26, 2023 · db22e95 · db22e95
1 parent cb592ba
commit db22e95
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/docs/assets/sass/styleguide.scss b/docs/assets/sass/styleguide.scss
@@ -22,10 +22,48 @@
   }
 }
 
-.sg-example {
+.sg-preview {
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, 
+              rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, 
+              rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
+
   pre[class*="language-"] {
     background-color: #f5f5f5;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    margin-top: 0px;
+    max-height: 24rem;   
+
+    &::-webkit-scrollbar-corner{
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track{
+      background-color: transparent;
+      border-radius: 8px;
+    }
+
+    &::-webkit-scrollbar{
+      background-color: transparent;
+      width: 9px;
+      height: 9px;
+    }
+
+    &::-webkit-scrollbar-thumb{    
+      border-radius: 8px;
+      background-color: #c1c1c1;
+    }
   }
+
+  &-example {
+    padding: 16px;
+    border: 1px solid #dddddd;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    border-bottom-width: 0;    
+  }  
 }
 
 .sg-swatch {