Better code snippets on mobile in docs

1 files changed, 22 insertions, 16 deletions

diff --git a/assets/css/docs.css b/assets/css/docs.css
index dea0bd721..ecf1d8501 100644
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -313,26 +313,25 @@ body {
 /* Base class */
 .bs-example {
   position: relative;
-  padding: 39px 14px 14px;
-  margin-bottom: -1px;
-  border: 1px solid #ddd;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  padding: 45px 15px 15px;
+  margin: 0 -15px -1px;
+  background-color: #fafafa;
+  box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
+  border-color: #e5e5e5 #eee #eee;
+  border-style: solid;
+  border-width: 1px 0;
 }
 /* Echo out a label for the example */
 .bs-example:after {
   content: "Example";
   position: absolute;
-  top: -1px;
-  left: -1px;
-  padding: 3px 7px;
+  top:  15px;
+  left: 15px;
   font-size: 12px;
   font-weight: bold;
-  color: #9da0a4;
-  background-color: #f5f5f5;
-  border: 1px solid #ddd;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  color: #bbb;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 /* Tweak display of the examples */
@@ -715,9 +714,6 @@ input.focused {
 
 /* Hide code snippets on mobile devices */
 @media screen and (max-width: 480px) {
-  .bs-example {
-    border-radius: 4px;
-  }
   .highlight {
     display: none;
   }
@@ -756,6 +752,16 @@ input.focused {
     line-height: 1;
   }
 
+  .bs-example {
+    margin-left: 0;
+    margin-right: 0;
+    background-color: #fff;
+    border-width: 1px;
+    border-color: #ddd;
+    border-radius: 4px 4px 0 0;
+    box-shadow: none;
+  }
+
   .carbonad {
     margin: 0 !important;
     border: 1px solid #e5e5e5 !important;