]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
update property order and do some misc cleanup
authorMark Otto <mark.otto@twitter.com>
Thu, 17 Nov 2011 09:28:42 +0000 (01:28 -0800)
committerMark Otto <mark.otto@twitter.com>
Thu, 17 Nov 2011 09:28:42 +0000 (01:28 -0800)
13 files changed:
lib/breadcrumbs.less
lib/forms.less
lib/mixins.less
lib/modals.less
lib/pagination.less
lib/patterns.less
lib/popovers.less
lib/reset.less
lib/scaffolding.less
lib/tables.less
lib/tabs-pills.less
lib/twipsy.less
lib/type.less

index 89a7aef13ad09883758beb9a7f8a423fa5150e7d..2fa9921ac8a172daebc78b61811ca5e0b463f023 100644 (file)
@@ -2,8 +2,8 @@
 // -----------
 
 .breadcrumb {
-  margin: 0 0 @baseLineHeight;
   padding: 7px 14px;
+  margin: 0 0 @baseLineHeight;
   #gradient > .vertical(#ffffff, #f5f5f5);
   border: 1px solid #ddd;
   .border-radius(3px);
index f590101cd09aa5571fbe37ae3a2b912a22282f21..845eec185e844fec4a9bdb9cb536d0f24661d5aa 100644 (file)
@@ -69,11 +69,11 @@ input[type=radio] {
 
 // Reset the file input to browser defaults
 input[type=file] {
-  background-color: @white;
-  background-color: initial;
   padding: initial;
-  border: initial;
   line-height: initial;
+  border: initial;
+  background-color: @white;
+  background-color: initial;
   .box-shadow(none);
 }
 
@@ -89,14 +89,14 @@ input[type=submit] {
 select,
 input[type=file] {
   height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
-  line-height: @baseLineHeight * 1.5;
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+  line-height: @baseLineHeight * 1.5;
 }
 
 // Make multiple select elements height not fixed
 select[multiple] {
-  background-color: @white; // Fixes Chromium bug?
   height: inherit;
+  background-color: @white; // Fixes Chromium bug?
 }
 
 textarea {
@@ -110,16 +110,16 @@ textarea {
 
 input,
 textarea {
+  .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
   @transition: border linear .2s, box-shadow linear .2s;
   .transition(@transition);
-  .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
 }
 input:focus,
 textarea:focus {
-  outline: 0;
   border-color: rgba(82,168,236,.8);
   @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
   .box-shadow(@shadow);
+  outline: 0;
 }
 input[type=file]:focus,
 input[type=checkbox]:focus,
@@ -248,8 +248,8 @@ form .clearfix.success {
 
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  background-color: @white;
   display: block;
+  background-color: @white;
   border-color: #eee;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
   cursor: not-allowed;
@@ -275,10 +275,10 @@ form .clearfix.success {
 }
 
 .help-inline {
-  display: inline;
-  padding-left: 5px;
   *position: relative; /* IE6-7 */
   *top: -5px; /* IE6-7 */
+  display: inline;
+  padding-left: 5px;
 }
 
 // Big blocks of help text
@@ -321,25 +321,25 @@ form .clearfix.success {
   }
   .add-on {
     position: relative;
-    background: #f5f5f5;
-    border: 1px solid #ccc;
     z-index: 2;
     float: left;
     display: block;
     width: auto;
     min-width: 16px;
     height: @baseLineHeight;
-    padding: 4px 4px 4px 5px;
     margin-right: -1px;
+    padding: 4px 4px 4px 5px;
     font-weight: normal;
     line-height: @baseLineHeight;
     color: @grayLight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
     .border-radius(3px 0 0 3px);
   }
   .active {
-    background: lighten(@green, 30);
+    background-color: lighten(@green, 30);
     border-color: @green;
   }
 }
@@ -354,9 +354,9 @@ form .clearfix.success {
     .border-radius(3px 0 0 3px);
   }
   .add-on {
-    .border-radius(0 3px 3px 0);
     margin-right: 0;
     margin-left: -1px;
+    .border-radius(0 3px 3px 0);
   }
 }
 
index 670b17384b67b02f31c199e8fab31d8078770a91..d77ecf6215de0f4be024e010976c83565c6a71fe 100644 (file)
@@ -9,9 +9,9 @@
   &:before,
   &:after {
     display: table;
+    *display: inline;
     content: "";
     zoom: 1;
-    *display: inline;
   }
   &:after {
     clear: both;
@@ -27,8 +27,8 @@
 
 // Sizing shortcuts
 .size(@height: 5px, @width: 5px) {
-  height: @height;
   width: @width;
+  height: @height;
 }
 .square(@size: 5px) {
   .size(@size, @size);
   }
   .border(@color: @white, @alpha: 1) {
     border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+       -moz-background-clip: padding;
+            background-clip: padding-box;
   }
 }
 
 // Gradient Bar Colors for buttons and alerts
 .gradientBar(@primaryColor, @secondaryColor) {
-  #gradient > .vertical(@primaryColor, @secondaryColor);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  #gradient > .vertical(@primaryColor, @secondaryColor);
   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
 // Opacity
 .opacity(@opacity: 100) {
   filter: e(%("alpha(opacity=%d)", @opacity));
-  -khtml-opacity: @opacity / 100;
     -moz-opacity: @opacity / 100;
          opacity: @opacity / 100;
 }
index 672431beb6bef83cd247132370191a096b87fe49..53d6cd40899ab0dc05b4afb2c51e8eb0fc365dab 100644 (file)
@@ -2,13 +2,13 @@
 // ------
 
 .modal-backdrop {
-  background-color: @black;
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   z-index: 10000;
+  background-color: @black;
   // Fade for backdrop
   &.fade { opacity: 0; }
 }
   &.fade.in { top: 50%; }
 }
 .modal-header {
-  border-bottom: 1px solid #eee;
   padding: 5px 15px;
+  border-bottom: 1px solid #eee;
 }
 .modal-body {
   padding: 15px;
 }
 .modal-footer {
-  background-color: #f5f5f5;
   padding: 14px 15px 15px;
+  margin-bottom: 0;
+  background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   .border-radius(0 0 6px 6px);
   .box-shadow(inset 0 1px 0 @white);
   .clearfix();
-  margin-bottom: 0;
   .btn {
     float: right;
     margin-left: 5px;
index d97a1bab3b0c09fe73620c0bb88e10093f06a8ce..d82a0bbd07db0cf98b1b17c0eabe0b67e56eae7f 100644 (file)
     float: left;
     padding: 0 14px;
     line-height: (@baseLineHeight * 2) - 2;
+    text-decoration: none;
     border-right: 1px solid;
     border-right-color: #ddd;
     border-right-color: rgba(0,0,0,.15);
     *border-right-color: #ddd; /* IE6-7 */
-    text-decoration: none;
   }
   a:hover,
   .active a {
@@ -31,8 +31,8 @@
   }
   .disabled a,
   .disabled a:hover {
-    background-color: transparent;
     color: @grayLight;
+    background-color: transparent;
   }
   .next a {
     border: 0;
index bc1229bd9035fc417dfed0dfe24995639e1e6494..2fcc4f2b380d14bc148d3be12b746fb513593e9c 100644 (file)
   // Hover and active states
   .brand a:hover,
   ul .active > a {
-    background-color: @navBarBgStart;
-    background-color: rgba(255,255,255,.05);
     color: @white;
     text-decoration: none;
+    background-color: @navBarBgStart;
+    background-color: rgba(255,255,255,.05);
   }
   // Website or project name
   .brand {
     display: block;
     padding: 8px 20px 12px;
     margin-left: -20px; // negative indent to left-align the text down the page
-    color: @white;
     font-size: 20px;
     font-weight: 200;
     line-height: 1;
+    color: @white;
   }
   // Plain text in topbar
   p {
     margin: 0;
     line-height: 40px;
     a:hover {
-      background-color: transparent;
       color: @white;
+      background-color: transparent;
     }
   }
 }
 // Navbar search
 .navbar-search {
   position: relative;
+  float: left;
   margin-top: 6px;
   margin-bottom: 0;
-  float: left;
   .search-query {
-    background-color: #444;
-    background-color: rgba(255,255,255,.3);
-    #font > .sans-serif(13px, normal, 1);
     padding: 4px 9px;
+    #font > .sans-serif(13px, normal, 1);
     color: @white;
     color: rgba(255,255,255,.75);
+    background-color: #444;
+    background-color: rgba(255,255,255,.3);
     border: 1px solid #111;
     @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
     .box-shadow(@shadow);
     }
     // Hover states
     &:hover {
+      color: @white;
       background-color: @grayLight;
       background-color: rgba(255,255,255,.5);
-      color: @white;
     }
     // Focus states (we use .focused since IE8 and down doesn't support :focus)
     &:focus,
     &.focused {
-      outline: 0;
-      background-color: @white;
+      padding: 5px 10px;
       color: @grayDark;
       text-shadow: 0 1px 0 @white;
+      background-color: @white;
       border: 0;
-      padding: 5px 10px;
       .box-shadow(0 0 3px rgba(0,0,0,.15));
+      outline: 0;
     }
   }
 }
 .navbar-fixed {
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   z-index: 10000;
 }
 
 // Nav for navbar and topbar
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
 .nav {
+  position: relative;
+  left: 0;
   display: block;
   float: left;
   margin: 0 10px 0 0;
-  position: relative;
-  left: 0;
   > li {
     display: block;
     float: left;
 }
 // The link that is clicked to toggle the dropdown
 .dropdown-toggle:after {
+  display: inline-block;
   width: 0;
   height: 0;
-  display: inline-block;
-  content: "&darr;";
-  text-indent: -99999px;
-  vertical-align: top;
   margin-top: 8px;
   margin-left: 6px;
+  text-indent: -99999px;
+  vertical-align: top;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid @white;
   .opacity(30);
+  content: "&darr;";
 }
 .dropdown:hover .dropdown-toggle:after {
   .opacity(100);
 }
 // The dropdown menu (ul)
 .dropdown-menu {
-  background-color: @white;
-  float: left;
-  display: none; // None by default, but block on "open" of the menu
   position: absolute;
   top: 40px;
   z-index: 900;
+  float: left;
+  display: none; // None by default, but block on "open" of the menu
   min-width: 160px;
   max-width: 220px;
   _width: 160px;
+  padding: 6px 0;
   margin-left: 0; // override default ul styles
   margin-right: 0;
-  padding: 6px 0;
-  zoom: 1; // do we need this?
+  background-color: @white;
   border-color: #999;
   border-color: rgba(0,0,0,.2);
   border-style: solid;
   .border-radius(0 0 6px 6px);
   .box-shadow(0 2px 4px rgba(0,0,0,.2));
   .background-clip(padding-box);
+  zoom: 1; // do we need this?
 
   // Unfloat any li's to make them stack
   li {
     text-shadow: 0 1px 0 @white;
     // Hover state
     &:hover {
-      #gradient > .vertical(#eeeeee, #dddddd);
       color: @grayDark;
       text-decoration: none;
+      #gradient > .vertical(#eeeeee, #dddddd);
       @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
       .box-shadow(@shadow);
     }
 // ------------
 
 .hero-unit {
-  background-color: #f5f5f5;
-  margin-bottom: 30px;
   padding: 60px;
+  margin-bottom: 30px;
+  background-color: #f5f5f5;
   .border-radius(6px);
   h1 {
     margin-bottom: 0;
   }
 }
 footer {
-  margin-top: @baseLineHeight - 1;
   padding-top: @baseLineHeight - 1;
+  margin-top: @baseLineHeight - 1;
   border-top: 1px solid #eee;
 }
 
@@ -380,24 +380,24 @@ footer {
 // Base .btn styles
 .btn {
   // Button Base
-  cursor: pointer;
   display: inline-block;
-  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
   padding: 5px 14px 6px;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  color: #333;
   font-size: @baseFontSize;
   line-height: normal;
+  color: #333;
+  text-shadow: 0 1px 1px rgba(255,255,255,.75);
+  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   .border-radius(4px);
   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   .box-shadow(@shadow);
+  cursor: pointer;
 
   &:hover {
-    background-position: 0 -15px;
     color: #333;
     text-decoration: none;
+    background-position: 0 -15px;
   }
 
   // Focus state for keyboard and accessibility
@@ -438,9 +438,9 @@ footer {
 
   // Button Sizes
   &.large {
+    padding: 9px 14px 9px;
     font-size: @baseFontSize + 2px;
     line-height: normal;
-    padding: 9px 14px 9px;
     .border-radius(6px);
   }
   &.small {
@@ -516,10 +516,10 @@ input[type=submit].btn {
 // -----------
 .close {
   float: right;
-  color: @black;
   font-size: 20px;
   font-weight: bold;
   line-height: @baseLineHeight * .75;
+  color: @black;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
   &:hover {
@@ -539,8 +539,8 @@ input[type=submit].btn {
   padding: 7px 15px;
   margin-bottom: @baseLineHeight;
   color: @grayDark;
-  .gradientBar(#fceec1, #eedc94); // warning by default
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  .gradientBar(#fceec1, #eedc94); // warning by default
   border-width: 1px;
   border-style: solid;
   .border-radius(4px);
@@ -569,10 +569,10 @@ input[type=submit].btn {
   }
 
   &.block-message {
+    padding: 14px;
     background-image: none;
     background-color: lighten(#fceec1, 5%);
-    .reset-filter();
-    padding: 14px;
+    .reset-filter(); // undo gradient for IE9
     border-color: #fceec1;
     .box-shadow(none);
     ul, p {
@@ -615,10 +615,10 @@ input[type=submit].btn {
 // -----
 
 .well {
-  background-color: #f5f5f5;
-  margin-bottom: 20px;
-  padding: 19px;
   min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
   border: 1px solid #eee;
   border: 1px solid rgba(0,0,0,.05);
   .border-radius(4px);
@@ -655,11 +655,11 @@ input[type=submit].btn {
 
 .label {
   padding: 1px 3px 2px;
-  background-color: @grayLight;
   font-size: @baseFontSize * .75;
   font-weight: bold;
   color: @white;
   text-transform: uppercase;
+  background-color: @grayLight;
   .border-radius(3px);
   &.important { background-color: #c43c35; }
   &.warning   { background-color: @orange; }
@@ -667,14 +667,3 @@ input[type=submit].btn {
   &.notice    { background-color: lighten(@blue, 25%); }
 }
 
-
-
-
-// MISC
-// ----
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
\ No newline at end of file
index ed335eeedf6ec5fef334cfe0e5eda1bb8b51c249..570bc906c46f4044af68457927eb01f89ad0d006 100644 (file)
@@ -6,8 +6,8 @@
   top: 0;
   left: 0;
   z-index: 1000;
-  padding: 5px;
   display: none;
+  padding: 5px;
   &.above .arrow { #popoverArrow > .above(); }
   &.right .arrow { #popoverArrow > .right(); }
   &.below .arrow { #popoverArrow > .below(); }
     height: 0;
   }
   .inner {
-    background-color: @black;
-    background-color: rgba(0,0,0,.8);
     padding: 3px;
-    overflow: hidden;
     width: 280px;
+    overflow: hidden;
+    background-color: @black;
+    background-color: rgba(0,0,0,.8);
     .border-radius(6px);
     .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   }
   .title {
-    background-color: #f5f5f5;
     padding: 9px 15px;
     line-height: 1;
-    .border-radius(3px 3px 0 0);
+    background-color: #f5f5f5;
     border-bottom:1px solid #eee;
+    .border-radius(3px 3px 0 0);
   }
   .content {
-    background-color: @white;
     padding: 14px;
+    background-color: @white;
     .border-radius(0 0 3px 3px);
     .background-clip(padding-box);
     p, ul, ol {
index 983f14f3dc7fe88c2cd8eb6652a93b18a4d5d88b..8bff573352dd592c8be2e31be17a01bc500283e4 100644 (file)
@@ -75,9 +75,9 @@ audio:not([controls]) {
 // Source: http://github.com/necolas/normalize.css
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 sup {
@@ -91,8 +91,8 @@ sub {
 // -------------------------
 // Source: http://github.com/necolas/normalize.css
 img {
-    border: 0;
-    -ms-interpolation-mode: bicubic;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
 }
 
 // Forms
@@ -104,20 +104,20 @@ button,
 input,
 select,
 textarea {
-  font-size: 100%;
   margin: 0;
+  font-size: 100%;
   vertical-align: baseline;
   *vertical-align: middle;
 }
 button,
 input {
-  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
   *overflow: visible; // Inner spacing ie IE6/7
+  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
 }
 button::-moz-focus-inner,
 input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
-  border: 0;
   padding: 0;
+  border: 0;
 }
 button,
 input[type="button"],
index 7b8aa369a40a494e27d2c9d73116866f31f5b4ea..179ef263878f2e08e78ba4151889c0e0a3d222b6 100644 (file)
@@ -8,12 +8,12 @@
 // -----------------
 
 body {
-  background-color: @white;
   margin: 0;
   font-family: @baseFontFamily;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @grayDark;
+  background-color: @white;
 }
 
 // Container (centered, fixed-width layouts)
@@ -52,10 +52,10 @@ body {
 
 // Links
 a {
+  font-weight: inherit;
+  line-height: inherit;
   color: @linkColor;
   text-decoration: none;
-  line-height: inherit;
-  font-weight: inherit;
   &:hover {
     color: @linkColorHover;
     text-decoration: underline;
index b02087fbd2d8b2cd58299ba5e20f0f9531ad7d6f..4aed466b11230c12a951f39e2d7cedd2d53d6cab 100644 (file)
@@ -130,32 +130,32 @@ table {
   .header {
     cursor: pointer;
     &:after {
-      content: "";
       float: right;
       margin-top: 7px;
       border-width: 0 4px 4px;
       border-style: solid;
       border-color: #000 transparent;
+      content: "";
       visibility: hidden;
     }
   }
   // Style the sorted column headers (THs)
   .headerSortUp,
   .headerSortDown {
-    background-color: rgba(141,192,219,.25);
     text-shadow: 0 1px 1px rgba(255,255,255,.75);
+    background-color: rgba(141,192,219,.25);
   }
   // Style the ascending (reverse alphabetical) column header
   .header:hover {
     &:after {
-      visibility:visible;
+      visibility: visible;
     }
   }
   // Style the descending (alphabetical) column header
   .headerSortDown,
   .headerSortDown:hover {
     &:after {
-      visibility:visible;
+      visibility: visible;
       .opacity(60);
     }
   }
index 7e6c0bf39e919ed24e26e9579a396c1a566aeed9..3ff08a67667014203870fc8d7a9c4da3113c5053 100644 (file)
@@ -1,8 +1,8 @@
 // Tabs and Pills
 .tabs,
 .pills {
-  margin: 0 0 20px;
   padding: 0;
+  margin: 0 0 20px;
   list-style: none;
   .clearfix();
   > li {
 // Pills
 .pills {
   a {
-    margin: 5px 3px 5px 0;
     padding: 0 15px;
+    margin: 5px 3px 5px 0;
     line-height: 30px;
     text-shadow: 0 1px 1px @white;
     .border-radius(15px);
 }
 
 // Tabbable areas
-.tab-content,
-.pill-content {
-}
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
index 5d168db3e6395cc7fc44eb81aeace94380b0e826..4193eda5fb983a01fbb33930f2b5502896bb0769 100644 (file)
@@ -2,12 +2,12 @@
 // ------
 
 .twipsy {
-  display: block;
   position: absolute;
+  z-index: 1000;
+  display: block;
   visibility: visible;
   padding: 5px;
   font-size: 11px;
-  z-index: 1000;
   .opacity(80);
   &.fade.in {
     .opacity(80);
   &.right .twipsy-arrow   { #popoverArrow > .right(); }
 }
 .twipsy-inner {
+  max-width: 200px;
   padding: 3px 8px;
-  background-color: @black;
   color: white;
   text-align: center;
-  max-width: 200px;
   text-decoration: none;
+  background-color: @black;
   .border-radius(4px);
 }
 .twipsy-arrow {
index f5b5ff272d353df479d5ffdb0c2a9db22cfd987e..8e25fd9c51067cef23b705f200d5906b3fb31def 100644 (file)
@@ -7,10 +7,10 @@
 // ---------
 
 p {
+  margin-bottom: @baseLineHeight / 2;
   font-family: @baseFontFamily;
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
-  margin-bottom: @baseLineHeight / 2;
   small {
     font-size: @baseFontSize - 2;
     color: @grayLight;
@@ -93,8 +93,8 @@ li {
   color: @grayDark;
 }
 ul.unstyled {
-  list-style: none;
   margin-left: 0;
+  list-style: none;
 }
 
 // Description Lists
@@ -145,12 +145,12 @@ abbr {
 
 // Blockquotes
 blockquote {
+  padding-left: 15px;
   margin-bottom: @baseLineHeight;
   border-left: 5px solid #eee;
-  padding-left: 15px;
   p {
-    #font > .shorthand(300,16px,@baseLineHeight * 1.25);
     margin-bottom: 0;
+    #font > .shorthand(300,16px,@baseLineHeight * 1.25);
   }
   small {
     display: block;
@@ -174,8 +174,8 @@ blockquote {
 // Addresses
 address {
   display: block;
-  line-height: @baseLineHeight;
   margin-bottom: @baseLineHeight;
+  line-height: @baseLineHeight;
 }
 
 // Inline and block code styles
@@ -188,16 +188,16 @@ pre {
   .border-radius(3px);
 }
 code {
-  background-color: lighten(@orange, 40%);
   padding: 1px 3px;
+  background-color: lighten(@orange, 40%);
 }
 pre {
-  background-color: #f5f5f5;
   display: block;
   padding: (@baseLineHeight - 1) / 2;
   margin: 0 0 @baseLineHeight / 2;
-  line-height: @baseLineHeight;
   font-size: 12px;
+  line-height: @baseLineHeight;
+  background-color: #f5f5f5;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.15);
   .border-radius(3px);