_code.scss in flipper-ui-0.13.0.beta1

- old
+ new
@@ -1,65 +1,52 @@
-//
-// Code (inline and block)
-// --------------------------------------------------
-
-
 // Inline and block code styles
 code,
 kbd,
 pre,
 samp {
   font-family: $font-family-monospace;
 }
 
 // Inline code
 code {
-  padding: 2px 4px;
-  font-size: 90%;
+  font-size: $code-font-size;
   color: $code-color;
-  background-color: $code-bg;
-  border-radius: $border-radius-base;
+  word-break: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
 }
 
 // User input typically entered via keyboard
 kbd {
-  padding: 2px 4px;
-  font-size: 90%;
+  padding: $kbd-padding-y $kbd-padding-x;
+  font-size: $kbd-font-size;
   color: $kbd-color;
   background-color: $kbd-bg;
-  border-radius: $border-radius-small;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
 
   kbd {
     padding: 0;
     font-size: 100%;
-    font-weight: bold;
-    box-shadow: none;
+    font-weight: $nested-kbd-font-weight;
+    @include box-shadow(none);
   }
 }
 
 // Blocks of code
 pre {
   display: block;
-  padding: (($line-height-computed - 1) / 2);
-  margin: 0 0 ($line-height-computed / 2);
-  font-size: ($font-size-base - 1); // 14px to 13px
-  line-height: $line-height-base;
-  word-break: break-all;
-  word-wrap: break-word;
+  font-size: $code-font-size;
   color: $pre-color;
-  background-color: $pre-bg;
-  border: 1px solid $pre-border-color;
-  border-radius: $border-radius-base;
 
   // Account for some code outputs that place code tags in pre tags
   code {
-    padding: 0;
     font-size: inherit;
     color: inherit;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border-radius: 0;
+    word-break: normal;
   }
 }
 
 // Enable scrollable blocks of code
 .pre-scrollable {