organize pre/code tags styles

src/client/styles/scss/_override-bootstrap.scss

@@ -39,11 +39,6 @@
     line-height: 14px;
   }
 
-  code {
-    padding: 2px 4px;
-    font-size: 90%;
-  }
-
   // Navs
   .nav-tabs {
     .nav-item {

src/client/styles/scss/atoms/_code.scss

@@ -3,6 +3,7 @@
  */
 :not(pre) {
   > code {
+    padding: 2px 4px;
     font-family: $font-family-monospace-not-strictly;
     border: 1px solid;
     border-radius: 2px;

src/client/styles/scss/atoms/_pre.scss

@@ -0,0 +1,4 @@
+pre {
+  padding: 0.5em;
+  border-radius: 2px;
+}

src/client/styles/scss/style-app.scss

@@ -18,6 +18,7 @@
 @import 'atoms/buttons';
 @import 'atoms/code';
 @import 'atoms/nav';
+@import 'atoms/pre';
 @import 'atoms/spinners';
 @import 'atoms/custom_control';
 

src/client/styles/scss/theme/_apply-colors.scss

@@ -34,6 +34,23 @@ $input-focus-color: $color-global;
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
 
+:not(pre) {
+  > code {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+    border-color: $bordercolor-inline-code;
+  }
+}
+
+pre {
+  background-color: $bgcolor-inline-code;
+  border-color: $bordercolor-inline-code;
+}
+
+//
+//== Apply to Bootstrap Elements
+//
+
 // Link buttons
 .btn-link {
   color: $link-color;
@@ -179,17 +196,6 @@ $input-focus-color: $color-global;
   fill: $color-editor-icons;
 }
 
-/*
- * style of inline-code
- */
-:not(pre) {
-  > code {
-    color: $color-inline-code;
-    background-color: $bgcolor-inline-code;
-    border-color: $bordercolor-inline-code;
-  }
-}
-
 /*
  * Modal
  */