ace-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ma...@apache.org
Subject svn commit: r1242114 [2/3] - in /ace/site/trunk/content: css/ img/ js/ lib/
Date Wed, 08 Feb 2012 21:39:30 GMT
Modified: ace/site/trunk/content/lib/forms.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/forms.less?rev=1242114&r1=1242113&r2=1242114&view=diff
==============================================================================
--- ace/site/trunk/content/lib/forms.less (original)
+++ ace/site/trunk/content/lib/forms.less Wed Feb  8 21:39:28 2012
@@ -1,66 +1,51 @@
-/* Forms.less
- * Base styles for various input types, form layouts, and states
- * ------------------------------------------------------------- */
+// Forms.less
+// Base styles for various input types, form layouts, and states
+// -------------------------------------------------------------
 
 
-// FORM STYLES
-// -----------
+// GENERAL STYLES
+// --------------
 
+// Make all forms have space below them
 form {
-  margin-bottom: @baseline;
+  margin: 0 0 @baseLineHeight;
 }
 
-// Groups of fields with labels on top (legends)
 fieldset {
-  margin-bottom: @baseline;
-  padding-top: @baseline;
-  legend {
-    display: block;
-    padding-left: 150px;
-    font-size: @basefont * 1.5;
-    line-height: 1;
-    color: @grayDark;
-    *padding: 0 0 5px 145px; /* IE6-7 */
-    *line-height: 1.5; /* IE6-7 */
-  }
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
-// Parent element that clears floats and wraps labels and fields together
-form .clearfix {
-  margin-bottom: @baseline;
-  .clearfix()
+// Groups of fields with labels on top (legends)
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: @baseLineHeight * 1.5;
+  font-size: @baseFontSize * 1.5;
+  line-height: @baseLineHeight * 2;
+  color: @grayDark;
+  border: 0;
+  border-bottom: 1px solid #eee;
 }
 
 // Set font for forms
 label,
 input,
+button,
 select,
 textarea {
-  #font > .sans-serif(normal,13px,normal);
+  #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
 }
 
-// Float labels left
+// Identify controls by their labels
 label {
-  padding-top: 6px;
-  font-size: @basefont;
-  line-height: @baseline;
-  float: left;
-  width: 130px;
-  text-align: right;
+  display: block;
+  margin-bottom: 5px;
   color: @grayDark;
 }
 
-// Shift over the inside div to align all label's relevant content
-form .input {
-  margin-left: 150px;
-}
-
-// Checkboxs and radio buttons
-input[type=checkbox],
-input[type=radio] {
-  cursor: pointer;
-}
-
 // Inputs, Textareas, Selects
 input,
 textarea,
@@ -68,104 +53,210 @@ select,
 .uneditable-input {
   display: inline-block;
   width: 210px;
-  height: @baseline;
+  height: @baseLineHeight;
   padding: 4px;
-  font-size: @basefont;
-  line-height: @baseline;
+  margin-bottom: 9px;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
   color: @gray;
   border: 1px solid #ccc;
   .border-radius(3px);
 }
+.uneditable-textarea {
+  width: auto;
+  height: auto;
+}
 
-// remove padding from select
-select {
-  padding: initial;
+// Inputs within a label
+label input,
+label textarea,
+label select {
+  display: block;
 }
 
-// mini reset for non-html5 file types
-input[type=checkbox],
-input[type=radio] {
+// Mini reset for unique input types
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
   width: auto;
   height: auto;
   padding: 0;
   margin: 3px 0;
-  *margin-top: 0; /* IE6-7 */
+  *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: none;
+  border: 0;
+  cursor: pointer;
+  border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
 }
 
-input[type=file] {
-  background-color: @white;
+// Reset the file input to browser defaults
+input[type="file"] {
   padding: initial;
-  border: initial;
   line-height: initial;
+  border: initial;
+  background-color: @white;
+  background-color: initial;
   .box-shadow(none);
 }
 
-input[type=button],
-input[type=reset],
-input[type=submit] {
+// Help out input buttons
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
   width: auto;
   height: auto;
 }
 
+// Set the height of select and file controls to match text inputs
 select,
-input[type=file] {
-  height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
-  *height: auto; // Reset for IE7
-  line-height: @baseline * 1.5;
+input[type="file"] {
+  height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+  line-height: 28px;
+}
+
+// Chrome on Linux and Mobile Safari need background-color
+select {
+  width: 220px; // default input width + 10px of padding that doesn't get applied
+  background-color: @white;
 }
 
 // Make multiple select elements height not fixed
-select[multiple] {
-  height: inherit;
-  background-color: @white; // Fixes Chromium bug of unreadable items
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Remove shadow from image inputs
+input[type="image"] {
+  .box-shadow(none);
 }
 
+// Make textarea height behave
 textarea {
   height: auto;
 }
 
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
-  background-color: @white;
-  display: block;
-  border-color: #eee;
-  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-  cursor: not-allowed;
+// Hidden inputs
+input[type="hidden"] {
+  display: none;
 }
 
-// Placeholder text gets special styles; can't be bundled together though for some reason
-:-moz-placeholder {
-  color: @grayLight;
+
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+  padding-left: 18px;
 }
-::-webkit-input-placeholder {
-  color: @grayLight;
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: -18px;
 }
 
-// Focus states
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 5px; // has to be padding because margin collaspes
+}
+
+// Radios and checkboxes on same line
+.radio.inline,
+.checkbox.inline {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+  margin-left: 10px; // space out consecutive inline controls
+}
+// But don't forget to remove their padding on first-child
+.controls > .radio.inline:first-child,
+.controls > .checkbox.inline:first-child {
+  padding-top: 0;
+}
+
+
+
+// FOCUS STATE
+// -----------
+
 input,
 textarea {
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   @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);
+  @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   .box-shadow(@shadow);
+  outline: 0;
+  outline: thin dotted \9; /* IE6-8 */
 }
-input[type=file]:focus,
-input[type=checkbox]:focus,
+input[type="file"]:focus,
+input[type="checkbox"]:focus,
 select:focus {
   .box-shadow(none); // override for file inputs
-  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
+  .tab-focus();
+}
+
+
+
+// INPUT SIZES
+// -----------
+
+// General classes for quick sizes
+.input-mini       { width: 60px; }
+.input-small      { width: 90px; }
+.input-medium     { width: 150px; }
+.input-large      { width: 210px; }
+.input-xlarge     { width: 270px; }
+.input-xxlarge    { width: 530px; }
+
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input {
+  float: none;
+  margin-left: 0;
+}
+
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+
+
+
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f5f5f5;
+  border-color: #ddd;
+  cursor: not-allowed;
 }
 
 
+
+
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
@@ -179,6 +270,7 @@ select:focus {
   }
   // Style inputs accordingly
   input,
+  select,
   textarea {
     color: @textColor;
     border-color: @borderColor;
@@ -195,177 +287,116 @@ select:focus {
     border-color: @textColor;
   }
 }
-// Error
-form .clearfix.error {
-  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
-}
 // Warning
-form .clearfix.warning {
-  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+.control-group.warning {
+  .formFieldState(@warningText, @warningText, @warningBackground);
+}
+// Error
+.control-group.error {
+  .formFieldState(@errorText, @errorText, @errorBackground);
 }
 // Success
-form .clearfix.success {
-  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+.control-group.success {
+  .formFieldState(@successText, @successText, @successBackground);
 }
 
-
-// Form element sizes
-// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
-.input-mini,
-input.mini,
-textarea.mini,
-select.mini {
-  width: 60px;
-}
-.input-small,
-input.small,
-textarea.small,
-select.small {
-  width: 90px;
-}
-.input-medium,
-input.medium,
-textarea.medium,
-select.medium {
-  width: 150px;
-}
-.input-large,
-input.large,
-textarea.large,
-select.large {
-  width: 210px;
-}
-.input-xlarge,
-input.xlarge,
-textarea.xlarge,
-select.xlarge {
-  width: 270px;
-}
-.input-xxlarge,
-input.xxlarge,
-textarea.xxlarge,
-select.xxlarge {
-  width: 530px;
-}
-textarea.xxlarge {
-  overflow-y: auto;
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:required:invalid,
+textarea:focus:required:invalid,
+select:focus:required:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));    
+  }
 }
 
-// Grid style input sizes
-// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
-.formColumns(@columnSpan: 1) {
-  display: inline-block;
-  float: none;
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
-  margin-left: 0;
-}
-input,
-textarea {
-  // Default columns
-  &.span1     { .formColumns(1); }
-  &.span2     { .formColumns(2); }
-  &.span3     { .formColumns(3); }
-  &.span4     { .formColumns(4); }
-  &.span5     { .formColumns(5); }
-  &.span6     { .formColumns(6); }
-  &.span7     { .formColumns(7); }
-  &.span8     { .formColumns(8); }
-  &.span9     { .formColumns(9); }
-  &.span10    { .formColumns(10); }
-  &.span11    { .formColumns(11); }
-  &.span12    { .formColumns(12); }
-  &.span13    { .formColumns(13); }
-  &.span14    { .formColumns(14); }
-  &.span15    { .formColumns(15); }
-  &.span16    { .formColumns(16); }
-}
 
-// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
+  margin-top: @baseLineHeight;
+  margin-bottom: @baseLineHeight;
   background-color: #f5f5f5;
-  border-color: #ddd;
-  cursor: not-allowed;
+  border-top: 1px solid #ddd;
 }
 
-// Actions (the buttons)
-.actions {
-  background: #f5f5f5;
-  margin-top: @baseline;
-  margin-bottom: @baseline;
-  padding: (@baseline - 1) 20px @baseline 150px;
-  border-top: 1px solid #ddd;
-  .border-radius(0 0 3px 3px);
-  .secondary-action {
-    float: right;
-    a {
-      line-height: 30px;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+  display: block;
+  background-color: @white;
+  border-color: #eee;
+  .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
 }
 
-// Help Text
-// TODO: Do we need to set basefont and baseline here?
-.help-inline,
+// Placeholder text gets special styles; can't be bundled together though for some reason
+.placeholder(@grayLight);
+
+
+
+// HELP TEXT
+// ---------
+
 .help-block {
-  font-size: @basefont;
-  line-height: @baseline;
+  margin-top: 5px;
+  margin-bottom: 0;
   color: @grayLight;
 }
+
 .help-inline {
+  display: inline-block;
+  .ie7-inline-block();
+  margin-bottom: 9px;
+  vertical-align: middle;
   padding-left: 5px;
-  *position: relative; /* IE6-7 */
-  *top: -5px; /* IE6-7 */
 }
 
-// Big blocks of help text
-.help-block {
-  display: block;
-  max-width: 600px;
-}
 
-// Inline Fields (input fields that appear as inline objects
-.inline-inputs {
-  color: @gray;
-  span {
-    padding: 0 2px 0 1px;
-  }
-}
+
+// INPUT GROUPS
+// ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
 .input-append {
-  input {
+  margin-bottom: 5px;
+  .clearfix(); // Clear the float to prevent wrapping
+  input,
+  .uneditable-input {
     .border-radius(0 3px 3px 0);
+    &:focus {
+      position: relative;
+      z-index: 2;
+    }
+  }
+  .uneditable-input {
+    border-left-color: #ccc;
   }
   .add-on {
-    position: relative;
-    background: #f5f5f5;
-    border: 1px solid #ccc;
-    z-index: 2;
     float: left;
     display: block;
     width: auto;
     min-width: 16px;
-    height: 18px;
-    padding: 4px 4px 4px 5px;
+    height: @baseLineHeight;
     margin-right: -1px;
+    padding: 4px 5px;
     font-weight: normal;
-    line-height: 18px;
+    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;
   }
 }
@@ -375,105 +406,110 @@ textarea[readonly] {
   }
 }
 .input-append {
-  input {
+  input,
+  .uneditable-input {
     float: left;
     .border-radius(3px 0 0 3px);
   }
+  .uneditable-input {
+    border-right-color: #ccc;    
+  }
   .add-on {
-    .border-radius(0 3px 3px 0);
     margin-right: 0;
     margin-left: -1px;
+    .border-radius(0 3px 3px 0);
   }
-}
+  input:first-child {
+    // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
+    // inherit the sum of its ancestors' margins.
+    *margin-left: -160px;
 
-// Stacked options for forms (radio buttons or checkboxes)
-.inputs-list {
-  margin: 0 0 5px;
-  width: 100%;
-  li {
-    display: block;
-    padding: 0;
-    width: 100%;
-  }
-  label {
-    display: block;
-    float: none;
-    width: auto;
-    padding: 0;
-    margin-left: 20px;
-    line-height: @baseline;
-    text-align: left;
-    white-space: normal;
-    strong {
-      color: @gray;
-    }
-    small {
-      font-size: @basefont - 2;
-      font-weight: normal;
+    &+.add-on {
+      *margin-left: -21px;
     }
   }
-  .inputs-list {
-    margin-left: 25px;
-    margin-bottom: 10px;
-    padding-top: 0;
-  }
-  &:first-child {
-    padding-top: 6px;
-  }
-  li + li {
-    padding-top: 2px;
-  }
-  input[type=radio],
-  input[type=checkbox] {
+}
+
+
+
+// SEARCH FORM
+// -----------
+
+.search-query {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0; // remove the default margin on all inputs
+  .border-radius(14px);
+}
+
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+// Common properties
+// -----------------
+
+.form-search,
+.form-inline,
+.form-horizontal {
+  input,
+  textarea,
+  select,
+  .help-inline,
+  .uneditable-input {
+    display: inline-block;
     margin-bottom: 0;
-    margin-left: -20px;
-    float: left;
   }
 }
+.form-search label,
+.form-inline label,
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend {
+  display: inline-block;
+}
+// Make the prepend and append add-on vertical-align: middle;
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on,
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on {
+  vertical-align: middle;
+}
 
-// Stacked forms
-.form-stacked {
-  padding-left: 20px;
-  fieldset {
-    padding-top: @baseline / 2;
-  }
-  legend {
-    padding-left: 0;
-  }
-  label {
-    display: block;
-    float: none;
-    width: auto;
-    font-weight: bold;
-    text-align: left;
-    line-height: 20px;
-    padding-top: 0;
-  }
-  .clearfix {
-    margin-bottom: @baseline / 2;
-    div.input {
-      margin-left: 0;
-    }
-  }
-  .inputs-list {
-    margin-bottom: 0;
-    li {
-      padding-top: 0;
-      label {
-        font-weight: normal;
-        padding-top: 0;
-      }
-    }
+// Margin to space out fieldsets
+.control-group {
+  margin-bottom: @baseLineHeight / 2;
+}
+
+// Horizontal-specific styles
+// --------------------------
+
+.form-horizontal {
+  // Legend collapses margin, so we're relegated to padding
+  legend + .control-group {
+    margin-top: @baseLineHeight;
+    -webkit-margin-top-collapse: separate;
+  }
+  // Increase spacing between groups
+  .control-group {
+    margin-bottom: @baseLineHeight;
+    .clearfix();
   }
-  div.clearfix.error {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    margin-top: 0;
-    margin-left: -10px;
-  }
-  .actions {
-    margin-left: -20px;
-    padding-left: 20px;
+  // Float the labels left
+  .control-group > label {
+    float: left;
+    width: 140px;
+    padding-top: 5px;
+    text-align: right;
+  }
+  // Move over all input controls and content
+  .controls {
+    margin-left: 160px;
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-actions {
+    padding-left: 160px;
   }
 }

Added: ace/site/trunk/content/lib/grid.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/grid.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/grid.less (added)
+++ ace/site/trunk/content/lib/grid.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,8 @@
+// GRID SYSTEM
+// -----------
+
+// Fixed (940px)
+#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+
+// Fluid (940px)
+#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);

Added: ace/site/trunk/content/lib/hero-unit.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/hero-unit.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/hero-unit.less (added)
+++ ace/site/trunk/content/lib/hero-unit.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,20 @@
+// HERO UNIT
+// ---------
+
+.hero-unit {
+  padding: 60px;
+  margin-bottom: 30px;
+  background-color: #f5f5f5;
+  .border-radius(6px);
+  h1 {
+    margin-bottom: 0;
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+  p {
+    font-size: 18px;
+    font-weight: 200;
+    line-height: @baseLineHeight * 1.5;
+  }
+}

Added: ace/site/trunk/content/lib/labels.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/labels.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/labels.less (added)
+++ ace/site/trunk/content/lib/labels.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,16 @@
+// LABELS
+// ------
+
+.label {
+  padding: 1px 3px 2px;
+  font-size: @baseFontSize * .75;
+  font-weight: bold;
+  color: @white;
+  text-transform: uppercase;
+  background-color: @grayLight;
+  .border-radius(3px);
+}
+.label-important { background-color: @errorText; }
+.label-warning   { background-color: @orange; }
+.label-success   { background-color: @successText; }
+.label-info      { background-color: @infoText; }

Added: ace/site/trunk/content/lib/layouts.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/layouts.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/layouts.less (added)
+++ ace/site/trunk/content/lib/layouts.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,17 @@
+//
+// Layouts
+// Fixed-width and fluid (with sidebar) layouts
+// --------------------------------------------
+
+
+// Container (centered, fixed-width layouts)
+.container {
+  .container-fixed();
+}
+
+// Fluid layouts (left aligned, with sidebar, min- & max-width content)
+.container-fluid {
+  padding-left: @gridGutterWidth;
+  padding-right: @gridGutterWidth;
+  .clearfix();
+}
\ No newline at end of file

Modified: ace/site/trunk/content/lib/mixins.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/mixins.less?rev=1242114&r1=1242113&r2=1242114&view=diff
==============================================================================
--- ace/site/trunk/content/lib/mixins.less (original)
+++ ace/site/trunk/content/lib/mixins.less Wed Feb  8 21:39:28 2012
@@ -1,40 +1,86 @@
-/* Mixins.less
- * Snippets of reusable CSS to develop faster and keep code readable
- * ----------------------------------------------------------------- */
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
 
 
-// Clearfix for clearing floats like a boss h5bp.com/q
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
 .clearfix() {
-  zoom: 1;
+  *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
-    zoom: 1;
   }
   &:after {
     clear: both;
   }
 }
 
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+  // Default
+  outline: thin dotted;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
 // Center-align a block level element
+// ----------------------------------
 .center-block() {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
+// IE7 inline-block
+// ----------------
+.ie7-inline-block() {
+  *display: inline; /* IE7 inline-block hack */
+  *zoom: 1;
+}
+
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+.ie7-restore-left-whitespace() {
+  *margin-left: .3em;
+
+  &:first-child {
+    *margin-left: 0;
+  }
+}
+
+.ie7-restore-right-whitespace() {
+  *margin-right: .3em;
+
+  &:last-child {
+    *margin-left: 0;
+  }
+}
+
 // Sizing shortcuts
+// -------------------------
 .size(@height: 5px, @width: 5px) {
-  height: @height;
   width: @width;
+  height: @height;
 }
 .square(@size: 5px) {
   .size(@size, @size);
 }
 
-// Input placeholder text
-.placeholder(@color: @grayLight) {
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeholderText) {
   :-moz-placeholder {
     color: @color;
   }
@@ -43,58 +89,185 @@
   }
 }
 
-// Font Stacks
+
+
+// FONTS
+// --------------------------------------------------
+
 #font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
+  #family {
+    .serif() {
+      font-family: Georgia, "Times New Roman", Times, serif;
+    }
+    .sans-serif() {
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+    .monospace() {
+      font-family: Menlo, Monaco, "Courier New", monospace;
+    }
   }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Georgia", Times New Roman, Times, serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
+  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+    #font > #family > .serif;
+    #font > .shorthand(@size, @weight, @lineHeight);
   }
-  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
-    font-family: "Monaco", Courier New, monospace;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
+  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+    #font > #family > .sans-serif;
+    #font > .shorthand(@size, @weight, @lineHeight);
+  }
+  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
+    #font > #family > .monospace;
+    #font > .shorthand(@size, @weight, @lineHeight);
   }
 }
 
-// Grid System
-.fixed-container() {
-  width: @siteWidth;
+
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
+.container-fixed() {
+  width: @gridRowWidth;
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-.offset(@columnOffset: 1) {
-  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+
+// Le grid system
+// -------------------------
+#gridSystem {
+  // Setup the mixins to be used
+  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  } 
+  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
+    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+  }
+  .gridColumn(@gridGutterWidth) {
+    float: left;
+    margin-left: @gridGutterWidth;
+  }
+  // Take these values and mixins, and make 'em do their thang
+  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+    // Row surrounds the columns
+    .row {
+      margin-left: @gridGutterWidth * -1;
+      .clearfix();
+    }
+    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+    [class*="span"] {
+      #gridSystem > .gridColumn(@gridGutterWidth);
+    }
+    // Default columns
+    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+    .span12,
+    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+    // Offset column options
+    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
+    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
+    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
+    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
+    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
+    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
+    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
+    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
+    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
+    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
+    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
+  }
+}
+
+// Fluid grid system
+// -------------------------
+#fluidGridSystem {
+  // Setup the mixins to be used
+  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
+    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+  } 
+  .gridColumn(@fluidGridGutterWidth) {
+    float: left;
+    margin-left: @fluidGridGutterWidth;
+  }
+  // Take these values and mixins, and make 'em do their thang
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
+    // Row surrounds the columns
+    .row-fluid {
+      width: 100%;
+      .clearfix();
+
+      // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+      > [class*="span"] {
+        #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
+      }
+      > [class*="span"]:first-child {
+        margin-left: 0;
+      }
+      // Default columns
+      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+    }
+  }
 }
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
-  display: inline;
-  float: left;
-  margin-left: @gridGutterWidth;
-}
-// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
-.makeColumn(@columnSpan: 1) {
-  .gridColumn();
-  .columns(@columnSpan);
+
+
+
+// Input grid system
+// -------------------------
+#inputGridSystem {
+  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+  }
+  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+    input,
+    textarea,
+    .uneditable-input {
+      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+    }
+  }
 }
 
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
 // Border Radius
 .border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
@@ -111,22 +284,91 @@
 
 // Transitions
 .transition(@transition) {
-     -webkit-transition: @transition;
-        -moz-transition: @transition;
-         -ms-transition: @transition;
-          -o-transition: @transition;
-             transition: @transition;
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+      -ms-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+
+// Transformations
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+     -moz-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+       -o-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+.scale(@ratio) {
+  -webkit-transform: scale(@ratio);
+     -moz-transform: scale(@ratio);
+      -ms-transform: scale(@ratio);
+       -o-transform: scale(@ratio);
+          transform: scale(@ratio);
+}
+.translate(@x: 0, @y: 0) {
+  -webkit-transform: translate(@x, @y);
+     -moz-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y);
+       -o-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+.skew(@x: 0, @y: 0) {
+  -webkit-transform: translate(@x, @y);
+     -moz-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y);
+       -o-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+.skew(@x: 0, @y: 0) {
+  -webkit-transform: skew(@x, @y);
+     -moz-transform: skew(@x, @y);
+      -ms-transform: skew(@x, @y);
+       -o-transform: skew(@x, @y);
+          transform: skew(@x, @y);
 }
 
 // Background clipping
+// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 .background-clip(@clip) {
   -webkit-background-clip: @clip;
      -moz-background-clip: @clip;
           background-clip: @clip;
 }
 
+// Background sizing
+.background-size(@size){
+  -webkit-background-size: @size;
+     -moz-background-size: @size;
+       -o-background-size: @size;
+          background-size: @size;
+}
+
+
+// Box sizing
+.box-sizing(@boxmodel) {
+  -webkit-box-sizing: @boxmodel;
+     -moz-box-sizing: @boxmodel;
+          box-sizing: @boxmodel;
+}
+
+// User select
+// For selecting text on the page
+.user-select(@select) {
+  -webkit-user-select: @select;
+     -moz-user-select: @select;
+       -o-user-select: @select;
+          user-select: @select;
+}
+
+// Resize anything
+.resizable(@direction: both) {
+  resize: @direction; // Options: horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: 20px) {
+.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
   -webkit-column-count: @columnCount;
      -moz-column-count: @columnCount;
           column-count: @columnCount;
@@ -135,12 +377,17 @@
           column-gap: @columnGap;
 }
 
-// Make any element resizable for prototyping
-.resizable(@direction: both) {
-  resize: @direction; // Options are horizontal, vertical, both
-  overflow: auto; // Safari fix
+// Opacity
+.opacity(@opacity: 100) {
+  opacity: @opacity / 100;
+   filter: e(%("alpha(opacity=%d)", @opacity));
 }
 
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   .background(@color: @white, @alpha: 1) {
@@ -148,45 +395,42 @@
   }
   .border(@color: @white, @alpha: 1) {
     border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
-    background-clip: padding-box;
+    .background-clip(padding-box);
   }
 }
 
-// Gradient Bar Colors for buttons and allerts
+// Gradient Bar Colors for buttons and alerts
 .gradientBar(@primaryColor, @secondaryColor) {
   #gradient > .vertical(@primaryColor, @secondaryColor);
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   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%);
 }
 
 // Gradients
 #gradient {
-  .horizontal (@startColor: #555, @endColor: #333) {
+  .horizontal(@startColor: #555, @endColor: #333) {
     background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
     background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
     background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
     background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+    background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
   }
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+  .vertical(@startColor: #555, @endColor: #333) {
+    background-color: mix(@startColor, @endColor, 60%);
     background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
     background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
     background-image: linear-gradient(top, @startColor, @endColor); // The standard
+    background-repeat: repeat-x;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
   }
-  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
     background-color: @endColor;
     background-repeat: repeat-x;
     background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
@@ -196,27 +440,98 @@
     background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
   }
   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
+    background-color: mix(@midColor, @endColor, 80%);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
     background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
     background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
     background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
   }
+  .radial(@innerColor: #555, @outerColor: #333)  {
+    background-color: @outerColor;
+    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
+    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
+    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
+    background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
+    background-repeat: no-repeat;
+    // Opera cannot do radial gradients yet
+  }
+  .striped(@color, @angle: -45deg) {
+    background-color: @color;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
+  }
 }
-
 // Reset filters for IE
 .reset-filter() {
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
-// Opacity
-.opacity(@opacity: 100) {
-  filter: e(%("alpha(opacity=%d)", @opacity));
-  -khtml-opacity: @opacity / 100;
-    -moz-opacity: @opacity / 100;
-         opacity: @opacity / 100;
-}
\ No newline at end of file
+
+// Mixin for generating button backgrounds
+// ---------------------------------------
+.buttonBackground(@startColor, @endColor) {
+  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+  .gradientBar(@startColor, @endColor);
+  .reset-filter();
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:active, &.active, &.disabled, &[disabled] {
+    background-color: @endColor;
+  }
+
+  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
+  &:active,
+  &.active {
+    background-color: darken(@endColor, 10%) e("\9");
+  }
+}
+
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// POPOVER ARROWS
+// -------------------------
+// For tipsies and popovers
+#popoverArrow {
+  .top(@arrowWidth: 5px) {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@arrowWidth;
+    border-left: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid transparent;
+    border-top: @arrowWidth solid @black;
+  }
+  .left(@arrowWidth: 5px) {
+    top: 50%;
+    right: 0;
+    margin-top: -@arrowWidth;
+    border-top: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid transparent;
+    border-left: @arrowWidth solid @black;
+  }
+  .bottom(@arrowWidth: 5px) {
+    top: 0;
+    left: 50%;
+    margin-left: -@arrowWidth;
+    border-left: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid @black;
+  }
+  .right(@arrowWidth: 5px) {
+    top: 50%;
+    left: 0;
+    margin-top: -@arrowWidth;
+    border-top: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid transparent;
+    border-right: @arrowWidth solid @black;
+  }
+}

Added: ace/site/trunk/content/lib/modals.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/modals.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/modals.less (added)
+++ ace/site/trunk/content/lib/modals.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,72 @@
+// MODALS
+// ------
+
+.modal-open {
+  .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
+  .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
+  .popover       {  z-index: @zindexPopover  + @zindexModal; }
+  .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindexModalBackdrop;
+  background-color: @black;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  .opacity(80);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: @zindexModal;
+  max-height: 500px;
+  overflow: auto;
+  width: 560px;
+  margin: -250px 0 0 -280px;
+  background-color: @white;
+  border: 1px solid #999;
+  border: 1px solid rgba(0,0,0,.3);
+  *border: 1px solid #999; /* IE6-7 */
+  .border-radius(6px);
+  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  .background-clip(padding-box);
+  &.fade {
+    .transition(e('opacity .3s linear, top .3s ease-out'));
+    top: -25%;
+  }
+  &.fade.in { top: 50%; }
+}
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+  // Close icon
+  .close { margin-top: 2px; }
+}
+.modal-body {
+  padding: 15px;
+}
+.modal-footer {
+  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();
+  .btn {
+    float: right;
+    margin-left: 5px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+}

Added: ace/site/trunk/content/lib/navbar.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/navbar.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/navbar.less (added)
+++ ace/site/trunk/content/lib/navbar.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,292 @@
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
+
+
+// COMMON STYLES
+// -------------
+
+.navbar {
+  overflow: visible;
+  margin-bottom: @baseLineHeight;
+}
+
+// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
+.navbar-inner {
+  padding-left:  20px;
+  padding-right: 20px;
+  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+  .border-radius(4px);
+  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+}
+
+// Navbar button for toggling navbar items in responsive layouts
+.btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
+  .box-shadow(@shadow);
+}
+.btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  .border-radius(1px);
+  .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
+// Override the default collapsed state
+.nav-collapse.collapse {
+  height: auto;
+}
+
+
+// Brand, links, text, and buttons
+.navbar {
+  // Hover and active states
+  .brand:hover {
+    text-decoration: none;
+  }
+  // Website or project name
+  .brand {
+    float: left;
+    display: block;
+    padding: 8px 20px 12px;
+    margin-left: -20px; // negative indent to left-align the text down the page
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+    color: @white;
+  }
+  // Plain text in topbar
+  .navbar-text {
+    margin-bottom: 0;
+    line-height: 40px;
+    color: @navbarText;
+    a:hover {
+      color: @white;
+      background-color: transparent;
+    }
+  }
+  // Buttons in navbar
+  .btn,
+  .btn-group {
+    margin-top: 5px; // make buttons vertically centered in navbar
+  }
+  .btn-group .btn {
+    margin-top: 0;
+  }
+}
+
+// Navbar forms
+.navbar-form {
+  margin-bottom: 0; // remove default bottom margin
+  .clearfix();
+  input,
+  select {
+    display: inline-block;
+    margin-top: 5px;
+    margin-bottom: 0;
+  }
+  .radio,
+  .checkbox {
+    margin-top: 5px;
+  }
+  input[type="image"],
+  input[type="checkbox"],
+  input[type="radio"] {
+    margin-top: 3px;
+  }
+}
+
+// Navbar search
+.navbar-search {
+  position: relative;
+  float: left;
+  margin-top: 6px;
+  margin-bottom: 0;
+  .search-query {
+    padding: 4px 9px;
+    #font > .sans-serif(13px, normal, 1);
+    color: @white;
+    color: rgba(255,255,255,.75);
+    background: #666;
+    background: 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);
+    .transition(none);
+
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    .placeholder(@grayLighter);
+
+    // Hover states
+    &:hover {
+      color: @white;
+      background-color: @grayLight;
+      background-color: rgba(255,255,255,.5);
+    }
+    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    &:focus,
+    &.focused {
+      padding: 5px 10px;
+      color: @grayDark;
+      text-shadow: 0 1px 0 @white;
+      background-color: @white;
+      border: 0;
+      .box-shadow(0 0 3px rgba(0,0,0,.15));
+      outline: 0;
+    }
+  }
+}
+
+
+// FIXED NAVBAR
+// ------------
+
+.navbar-fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: @zindexFixedNavbar;
+}
+.navbar-fixed-top .navbar-inner {
+  padding-left:  0;
+  padding-right: 0;
+  .border-radius(0);
+}
+
+
+// NAVIGATION
+// ----------
+
+.navbar .nav {
+  position: relative;
+  left: 0;
+  display: block;
+  float: left;
+  margin: 0 10px 0 0;
+}
+.navbar .nav.pull-right {
+  float: right; // redeclare due to specificity
+}
+.navbar .nav > li {
+  display: block;
+  float: left;
+}
+
+// Links
+.navbar .nav > li > a {
+  float: none;
+  padding: 10px 10px 11px;
+  line-height: 19px;
+  color: @navbarLinkColor;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+}
+// Hover
+.navbar .nav > li > a:hover {
+  background-color: transparent;
+  color: @navbarLinkColorHover;
+  text-decoration: none;
+}
+
+// Active nav items
+.navbar .nav .active > a,
+.navbar .nav .active > a:hover {
+  color: @navbarLinkColorHover;
+  text-decoration: none;
+  background-color: @navbarBackground;
+  background-color: rgba(0,0,0,.5);
+}
+
+// Dividers (basically a vertical hr)
+.navbar .divider-vertical {
+  height: @navbarHeight;
+  width: 1px;
+  margin: 0 9px;
+  overflow: hidden;
+  background-color: @navbarBackground;
+  border-right: 1px solid @navbarBackgroundHighlight;
+}
+
+// Secondary (floated right) nav in topbar
+.navbar .nav.pull-right {
+  margin-left: 10px;
+  margin-right: 0;
+}
+
+
+
+// Dropdown menus
+// --------------
+
+// Menu position and menu carets
+.navbar .dropdown-menu {
+  margin-top: 1px;
+  .border-radius(4px);
+  &:before {
+    content: '';
+    display: inline-block;
+    border-left:   7px solid transparent;
+    border-right:  7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-bottom-color: rgba(0,0,0,.2);
+    position: absolute;
+    top: -7px;
+    left: 9px;
+  }
+  &:after {
+    content: '';
+    display: inline-block;
+    border-left:   6px solid transparent;
+    border-right:  6px solid transparent;
+    border-bottom: 6px solid @white;
+    position: absolute;
+    top: -6px;
+    left: 10px;
+  }
+}
+
+// Dropdown toggle caret
+.navbar .nav .dropdown-toggle .caret,
+.navbar .nav .open.dropdown .caret {
+  border-top-color: @white;
+}
+.navbar .nav .active .caret {
+  .opacity(100);
+}
+
+// Remove background color from open dropdown
+.navbar .nav .open > .dropdown-toggle,
+.navbar .nav .active > .dropdown-toggle,
+.navbar .nav .open.active > .dropdown-toggle {
+  background-color: transparent;
+}
+
+// Dropdown link on hover
+.navbar .nav .active > .dropdown-toggle:hover {
+  color: @white;
+}
+
+// Right aligned menus need alt position
+.navbar .nav.pull-right .dropdown-menu {
+  left: auto;
+  right: 0;
+  &:before {
+    left: auto;
+    right: 12px;
+  }
+  &:after {
+    left: auto;
+    right: 13px;
+  }
+}
\ No newline at end of file

Added: ace/site/trunk/content/lib/navs.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/navs.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/navs.less (added)
+++ ace/site/trunk/content/lib/navs.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,343 @@
+// NAVIGATIONS
+// -----------
+
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+  margin-left: 0;
+  margin-bottom: @baseLineHeight;
+  list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+  display: block;
+}
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: @grayLighter;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav-list {
+  padding-left: 14px;
+  padding-right: 14px;
+  margin-bottom: 0;
+}
+.nav-list > li > a,
+.nav-list .nav-header {
+  display: block;
+  padding: 3px 15px;
+  margin-left:  -15px;
+  margin-right: -15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav-list .nav-header {
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-transform: uppercase;
+}
+.nav-list > li + .nav-header {
+  margin-top: 9px;
+}
+.nav-list .active > a {
+  color: @white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  background-color: @linkColor;
+}
+.nav-list .icon {
+  margin-right: 2px;
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.nav-tabs,
+.nav-pills {
+  .clearfix();
+}
+.nav-tabs > li,
+.nav-pills > li {
+  float: left;
+}
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+
+// Make the list-items overlay the bottom border
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+
+// Actual tabs (as links)
+.nav-tabs > li > a {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  border: 1px solid transparent;
+  .border-radius(4px 4px 0 0);
+  &:hover {
+    border-color: @grayLighter @grayLighter #ddd;
+  }
+}
+// Active state, and it's :hover to override normal :hover
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+  color: @gray;
+  background-color: @white;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.nav-pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  .border-radius(5px);
+}
+
+// Active state
+.nav-pills .active > a,
+.nav-pills .active > a:hover {
+  color: @white;
+  background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li > a {
+  margin-right: 0; // no need for the gap between nav items
+}
+
+// Tabs
+.nav-tabs.nav-stacked {
+  border-bottom: 0;
+}
+.nav-tabs.nav-stacked > li > a {
+  border: 1px solid #ddd;
+  .border-radius(0);
+}
+.nav-tabs.nav-stacked > li:first-child > a {
+  .border-radius(4px 4px 0 0);
+}
+.nav-tabs.nav-stacked > li:last-child > a {
+  .border-radius(0 0 4px 4px);
+}
+.nav-tabs.nav-stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
+
+// Pills
+.nav-pills.nav-stacked > li > a {
+  margin-bottom: 3px;
+}
+.nav-pills.nav-stacked > li:last-child > a {
+  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+// Position the menu
+.nav-tabs .dropdown-menu,
+.nav-pills .dropdown-menu {
+  margin-top: 1px;
+  border-width: 1px;
+}
+.nav-pills .dropdown-menu {
+  .border-radius(4px);
+}
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
+.nav-tabs .dropdown-toggle .caret,
+.nav-pills .dropdown-toggle .caret {
+  border-top-color: @linkColor;
+  margin-top: 6px;
+}
+.nav-tabs .dropdown-toggle:hover .caret,
+.nav-pills .dropdown-toggle:hover .caret {
+  border-top-color: @linkColorHover;
+}
+
+// Active dropdown links
+// -------------------------
+.nav-tabs .active .dropdown-toggle .caret,
+.nav-pills .active .dropdown-toggle .caret {
+  border-top-color: @grayDark;
+}
+
+// Active:hover dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover {
+  color: @black;
+  cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > .open.active > a:hover {
+  color: @white;
+  background-color: @grayLight;
+  border-color: @grayLight;
+}
+.nav .open .caret,
+.nav .open.active .caret,
+.nav .open a:hover .caret {
+  border-top-color: @white;
+  .opacity(100);
+}
+
+// Dropdowns in stacked tabs
+.tabs-stacked .open > a:hover {
+  border-color: @grayLight;
+}
+
+
+
+// TABBABLE
+// --------
+
+
+// COMMON STYLES
+// -------------
+
+// Clear any floats
+.tabbable {
+  .clearfix();
+}
+
+// Remove border on bottom, left, right
+.tabs-below .nav-tabs,
+.tabs-right .nav-tabs,
+.tabs-left .nav-tabs {
+  border-bottom: 0;
+}
+
+// Show/hide tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+  display: block;
+}
+
+
+// BOTTOM
+// ------
+
+.tabs-below .nav-tabs {
+  border-top: 1px solid #ddd;
+}
+.tabs-below .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+.tabs-below .nav-tabs > li > a {
+  .border-radius(0 0 4px 4px);
+  &:hover {
+    border-bottom-color: transparent;
+    border-top-color: #ddd;
+  }
+}
+.tabs-below .nav-tabs .active > a,
+.tabs-below .nav-tabs .active > a:hover {
+  border-color: transparent #ddd #ddd #ddd;
+}
+
+// LEFT & RIGHT
+// ------------
+
+// Common styles
+.tabs-left .nav-tabs > li,
+.tabs-right .nav-tabs > li {
+  float: none;
+}
+.tabs-left .nav-tabs > li > a,
+.tabs-right .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
+
+// Tabs on the left
+.tabs-left .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+.tabs-left .nav-tabs > li > a {
+  margin-right: -1px;
+  .border-radius(4px 0 0 4px);
+}
+.tabs-left .nav-tabs > li > a:hover {
+  border-color: @grayLighter #ddd @grayLighter @grayLighter;
+}
+.tabs-left .nav-tabs .active > a,
+.tabs-left .nav-tabs .active > a:hover {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: @white;
+}
+
+// Tabs on the right
+.tabs-right .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  border-left: 1px solid #ddd;
+}
+.tabs-right .nav-tabs > li > a {
+  margin-left: -1px;
+  .border-radius(0 4px 4px 0);
+}
+.tabs-right .nav-tabs > li > a:hover {
+  border-color: @grayLighter @grayLighter @grayLighter #ddd;
+}
+.tabs-right .nav-tabs .active > a,
+.tabs-right .nav-tabs .active > a:hover {
+  border-color: #ddd #ddd #ddd transparent;
+  *border-left-color: @white;
+}

Added: ace/site/trunk/content/lib/pager.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/pager.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/pager.less (added)
+++ ace/site/trunk/content/lib/pager.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,30 @@
+// PAGER
+// -----
+
+.pager {
+  margin-left: 0;
+  margin-bottom: @baseLineHeight;
+  list-style: none;
+  text-align: center;
+  .clearfix();
+}
+.pager li {
+  display: inline;
+}
+.pager a {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  .border-radius(15px);
+}
+.pager a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+.pager .next a {
+  float: right;
+}
+.pager .previous a {
+  float: left;
+}

Added: ace/site/trunk/content/lib/pagination.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/pagination.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/pagination.less (added)
+++ ace/site/trunk/content/lib/pagination.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,55 @@
+// PAGINATION
+// ----------
+
+.pagination {
+  height: @baseLineHeight * 2;
+  margin: @baseLineHeight 0;
+ }
+.pagination ul {
+  display: inline-block;
+  .ie7-inline-block();
+  margin-left: 0;
+  margin-bottom: 0;
+  .border-radius(3px);
+  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+.pagination li {
+    display: inline;
+  }
+.pagination a {
+  float: left;
+  padding: 0 14px;
+  line-height: (@baseLineHeight * 2) - 2;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-left-width: 0;
+}
+.pagination a:hover,
+.pagination .active a {
+  background-color: #f5f5f5;
+}
+.pagination .active a {
+  color: @grayLight;
+  cursor: default;
+}
+.pagination .disabled a,
+.pagination .disabled a:hover {
+  color: @grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination li:first-child a {
+  border-left-width: 1px;
+  .border-radius(3px 0 0 3px);
+}
+.pagination li:last-child a {
+  .border-radius(0 3px 3px 0);
+}
+
+// Centered
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}

Modified: ace/site/trunk/content/lib/patterns.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/patterns.less?rev=1242114&r1=1242113&r2=1242114&view=diff
==============================================================================
--- ace/site/trunk/content/lib/patterns.less (original)
+++ ace/site/trunk/content/lib/patterns.less Wed Feb  8 21:39:28 2012
@@ -1,1063 +1,13 @@
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ---------------------------------------------------------------------------- */
-
-
-// TOPBAR
-// ------
-
-// Topbar for Branding and Nav
-.topbar {
-  height: 40px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  overflow: visible;
-
-  // Links get text shadow
-  a {
-    color: @grayLight;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  }
-
-  // Hover and active states
-  // h3 for backwards compatibility
-  h3 a:hover,
-  .brand:hover,
-  ul .active > a {
-    background-color: #333;
-    background-color: rgba(255,255,255,.05);
-    color: @white;
-    text-decoration: none;
-  }
-
-  // Website name
-  // h3 left for backwards compatibility
-  h3 {
-    position: relative;
-  }
-  h3 a,
-  .brand {
-    float: left;
-    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;
-  }
-
-  // Plain text in topbar
-  p {
-    margin: 0;
-    line-height: 40px;
-    a:hover {
-      background-color: transparent;
-      color: @white;
-    }
-  }
-
-  // Search Form
-  form {
-    float: left;
-    margin: 5px 0 0 0;
-    position: relative;
-    .opacity(100);
-  }
-  // Todo: remove from v2.0 when ready, added for legacy
-  form.pull-right {
-    float: right;
-  }
-  input {
-    background-color: #444;
-    background-color: rgba(255,255,255,.3);
-    #font > .sans-serif(13px, normal, 1);
-    padding: 4px 9px;
-    color: @white;
-    color: rgba(255,255,255,.75);
-    border: 1px solid #111;
-    .border-radius(4px);
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
-    .box-shadow(@shadow);
-    .transition(none);
-
-    // Placeholder text gets special styles; can't be bundled together though for some reason
-    &:-moz-placeholder {
-      color: @grayLighter;
-    }
-    &::-webkit-input-placeholder {
-      color: @grayLighter;
-    }
-    // Hover states
-    &:hover {
-      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;
-      color: @grayDark;
-      text-shadow: 0 1px 0 @white;
-      border: 0;
-      padding: 5px 10px;
-      .box-shadow(0 0 3px rgba(0,0,0,.15));
-    }
-  }
-}
-
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-// For backwards compatibility, include .topbar .fill
-.topbar-inner,
-.topbar .fill {
-  background-color: #222;
-  #gradient > .vertical(#333, #222);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
-}
-
-
-// NAVIGATION
-// ----------
-
-// Topbar Nav
-// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-// For backwards compatibility, leave in .topbar div > ul
-.topbar div > ul,
-.nav {
-  display: block;
-  float: left;
-  margin: 0 10px 0 0;
-  position: relative;
-  left: 0;
-  > li {
-    display: block;
-    float: left;
-  }
-  a {
-    display: block;
-    float: none;
-    padding: 10px 10px 11px;
-    line-height: 19px;
-    text-decoration: none;
-    &:hover {
-      color: @white;
-      text-decoration: none;
-    }
-  }
-  .active > a {
-    background-color: #222;
-    background-color: rgba(0,0,0,.5);
-  }
-
-  // Secondary (floated right) nav in topbar
-  &.secondary-nav {
-    float: right;
-    margin-left: 10px;
-    margin-right: 0;
-    // backwards compatibility
-    .menu-dropdown,
-    .dropdown-menu {
-      right: 0;
-      border: 0;
-    }
-  }
-  // Dropdowns within the .nav
-  // a.menu:hover and li.open .menu for backwards compatibility
-  a.menu:hover,
-  li.open .menu,
-  .dropdown-toggle:hover,
-  .dropdown.open .dropdown-toggle {
-    background: #444;
-    background: rgba(255,255,255,.05);
-  }
-  // .menu-dropdown for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu {
-    background-color: #333;
-    // a.menu for backwards compatibility
-    a.menu,
-    .dropdown-toggle {
-      color: @white;
-      &.open {
-        background: #444;
-        background: rgba(255,255,255,.05);
-      }
-    }
-    li a {
-      color: #999;
-      text-shadow: 0 1px 0 rgba(0,0,0,.5);
-      &:hover {
-        #gradient > .vertical(#292929,#191919);
-        color: @white;
-      }
-    }
-    .active a {
-      color: @white;
-    }
-    .divider {
-      background-color: #222;
-      border-color: #444;
-    }
-  }
-}
-
-// For backwards compatibility with new dropdowns, redeclare dropdown link padding
-.topbar ul .menu-dropdown li a,
-.topbar ul .dropdown-menu li a {
-  padding: 4px 15px;
-}
-
-// Dropdown Menus
-// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-// li.menu for backwards compatibility
-li.menu,
-.dropdown {
-  position: relative;
-}
-// The link that is clicked to toggle the dropdown
-// a.menu for backwards compatibility
-a.menu:after,
-.dropdown-toggle:after {
-  width: 0;
-  height: 0;
-  display: inline-block;
-  content: "&darr;";
-  text-indent: -99999px;
-  vertical-align: top;
-  margin-top: 8px;
-  margin-left: 4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid @white;
-  .opacity(50);
-}
-// The dropdown menu (ul)
-// .menu-dropdown for backwards compatibility
-.menu-dropdown,
-.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;
-  min-width: 160px;
-  max-width: 220px;
-  _width: 160px;
-  margin-left: 0; // override default ul styles
-  margin-right: 0;
-  padding: 6px 0;
-  zoom: 1; // do we need this?
-  border-color: #999;
-  border-color: rgba(0,0,0,.2);
-  border-style: solid;
-  border-width: 0 1px 1px;
-  .border-radius(0 0 6px 6px);
-  .box-shadow(0 2px 4px rgba(0,0,0,.2));
-  .background-clip(padding-box);
-
-  // Unfloat any li's to make them stack
-  li {
-    float: none;
-    display: block;
-    background-color: none;
-  }
-  // Dividers (basically an hr) within the dropdown
-  .divider {
-    height: 1px;
-    margin: 5px 0;
-    overflow: hidden;
-    background-color: #eee;
-    border-bottom: 1px solid @white;
-  }
-}
-
-.topbar .dropdown-menu,
-.dropdown-menu {
-  // Links within the dropdown menu
-  a {
-    display: block;
-    padding: 4px 15px;
-    clear: both;
-    font-weight: normal;
-    line-height: 18px;
-    color: @gray;
-    text-shadow: 0 1px 0 @white;
-    // Hover state
-    &:hover,
-    &.hover {
-      #gradient > .vertical(#eeeeee, #dddddd);
-      color: @grayDark;
-      text-decoration: none;
-      @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
-      .box-shadow(@shadow);
-    }
-  }
-}
-
-// Open state for the dropdown
-// .open for backwards compatibility
-.open,
-.dropdown.open {
-  // .menu for backwards compatibility
-  .menu,
-  .dropdown-toggle {
-    color: @white;
-    background: #ccc;
-    background: rgba(0,0,0,.3);
-  }
-  // .menu-dropdown for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu {
-    display: block;
-  }
-}
-
-
-// TABS AND PILLS
-// --------------
-
-// Common styles
-.tabs,
-.pills {
-  margin: 0 0 @baseline;
-  padding: 0;
-  list-style: none;
-  .clearfix();
-  > li {
-    float: left;
-    > a {
-      display: block;
-    }
-  }
-}
-
-// Tabs
-.tabs {
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
-  > li {
-    position: relative; // For the dropdowns mostly
-    margin-bottom: -1px;
-    > a {
-      padding: 0 15px;
-      margin-right: 2px;
-      line-height: (@baseline * 2) - 2;
-      border: 1px solid transparent;
-      .border-radius(4px 4px 0 0);
-      &:hover {
-        text-decoration: none;
-        background-color: #eee;
-        border-color: #eee #eee #ddd;
-      }
-    }
-  }
-  // Active state, and it's :hover to override normal :hover
-  .active > a,
-  .active > a:hover {
-    color: @gray;
-    background-color: @white;
-    border: 1px solid #ddd;
-    border-bottom-color: transparent;
-    cursor: default;
-  }
-}
-
-// Dropdowns in tabs
-.tabs {
-  // first one for backwards compatibility
-  .menu-dropdown,
-  .dropdown-menu {
-    top: 35px;
-    border-width: 1px;
-    .border-radius(0 6px 6px 6px);
-  }
-  // first one for backwards compatibility
-  a.menu:after,
-  .dropdown-toggle:after {
-    border-top-color: #999;
-    margin-top: 15px;
-    margin-left: 5px;
-  }
-  // first one for backwards compatibility
-  li.open.menu .menu,
-  .open.dropdown .dropdown-toggle {
-    border-color: #999;
-  }
-  // first one for backwards compatibility
-  li.open a.menu:after,
-  .dropdown.open .dropdown-toggle:after {
-    border-top-color: #555;
-  }
-}
-
-// Pills
-.pills {
-  a {
-    margin: 5px 3px 5px 0;
-    padding: 0 15px;
-    line-height: 30px;
-    text-shadow: 0 1px 1px @white;
-    .border-radius(15px);
-    &:hover {
-      color: @white;
-      text-decoration: none;
-      text-shadow: 0 1px 1px rgba(0,0,0,.25);
-      background-color: @linkColorHover;
-    }
-  }
-  .active a {
-    color: @white;
-    text-shadow: 0 1px 1px rgba(0,0,0,.25);
-    background-color: @linkColor;
-  }
-}
-
-// Stacked pills
-.pills-vertical > li {
-  float: none;
-}
-
-// Tabbable areas
-.tab-content,
-.pill-content {
-}
-.tab-content > .tab-pane,
-.pill-content > .pill-pane,
-.tab-content > div,
-.pill-content > div {
-  display: none;
-}
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
-}
-
-
-// BREADCRUMBS
-// -----------
-
-.breadcrumb {
-  padding: 7px 14px;
-  margin: 0 0 @baseline;
-  #gradient > .vertical(#ffffff, #f5f5f5);
-  border: 1px solid #ddd;
-  .border-radius(3px);
-  .box-shadow(inset 0 1px 0 @white);
-  li {
-    display: inline;
-    text-shadow: 0 1px 0 @white;
-  }
-  .divider {
-    padding: 0 5px;
-    color: @grayLight;
-  }
-  .active a {
-    color: @grayDark;
-  }
-}
+// Patterns.less
+// Repeatable UI elements outside the base styles provided from the scaffolding
+// ----------------------------------------------------------------------------
 
 
 // PAGE HEADERS
 // ------------
 
-.hero-unit {
-  background-color: #f5f5f5;
-  margin-bottom: 30px;
-  padding: 60px;
-  .border-radius(6px);
-  h1 {
-    margin-bottom: 0;
-    font-size: 60px;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-  p {
-    font-size: 18px;
-    font-weight: 200;
-    line-height: @baseline * 1.5;
-  }
-}
 footer {
-  margin-top: @baseline - 1;
-  padding-top: @baseline - 1;
+  padding-top: @baseLineHeight - 1;
+  margin-top: @baseLineHeight - 1;
   border-top: 1px solid #eee;
 }
-
-
-// PAGE HEADERS
-// ------------
-
-.page-header {
-  margin-bottom: @baseline - 1;
-  border-bottom: 1px solid #ddd;
-  .box-shadow(0 1px 0 rgba(255,255,255,.5));
-  h1 {
-    margin-bottom: (@baseline / 2) - 1px;
-  }
-}
-
-
-// BUTTON STYLES
-// -------------
-
-// Shared colors for buttons and alerts
-.btn,
-.alert-message {
-  // Set text color
-  &.danger,
-  &.danger:hover,
-  &.error,
-  &.error:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover {
-    color: @white
-  }
-  // Sets the close button to the middle of message
-  .close{
-    font-family: Arial, sans-serif;
-    line-height: 18px;
-  }
-  // Danger and error appear as red
-  &.danger,
-  &.error {
-    .gradientBar(#ee5f5b, #c43c35);
-  }
-  // Success appears as green
-  &.success {
-    .gradientBar(#62c462, #57a957);
-  }
-  // Info appears as a neutral blue
-  &.info {
-    .gradientBar(#5bc0de, #339bb9);
-  }
-}
-
-// 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: @basefont;
-  line-height: normal;
-  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);
-
-  &:hover {
-    background-position: 0 -15px;
-    color: #333;
-    text-decoration: none;
-  }
-
-  // Focus state for keyboard and accessibility
-  &:focus {
-    outline: 1px dotted #666;
-  }
-
-  // Primary Button Type
-  &.primary {
-    color: @white;
-    .gradientBar(@blue, @blueDark)
-  }
-
-   // Transitions
-  .transition(.1s linear all);
-
-  // Active and Disabled states
-  &.active,
-  &:active {
-    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
-  }
-  &.disabled {
-    cursor: default;
-    background-image: none;
-    .reset-filter();
-    .opacity(65);
-    .box-shadow(none);
-  }
-  &[disabled] {
-    // disabled pseudo can't be included with .disabled
-    // def because IE8 and below will drop it ;_;
-    cursor: default;
-    background-image: none;
-    .reset-filter();
-    .opacity(65);
-    .box-shadow(none);
-  }
-
-  // Button Sizes
-  &.large {
-    font-size: @basefont + 2px;
-    line-height: normal;
-    padding: 9px 14px 9px;
-    .border-radius(6px);
-  }
-  &.small {
-    padding: 7px 9px 7px;
-    font-size: @basefont - 2px;
-  }
-}
-// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
-:root .alert-message,
-:root .btn {
-  border-radius: 0 \0;
-}
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-button.btn,
-input[type=submit].btn {
-  &::-moz-focus-inner {
-  	padding: 0;
-  	border: 0;
-  }
-}
-
-
-// CLOSE ICONS
-// -----------
-.close {
-  float: right;
-  color: @black;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: @baseline * .75;
-  text-shadow: 0 1px 0 rgba(255,255,255,1);
-  .opacity(25);
-  &:hover {
-    color: @black;
-    text-decoration: none;
-    .opacity(40);
-  }
-}
-
-
-// ERROR STYLES
-// ------------
-
-// Base alert styles
-.alert-message {
-  position: relative;
-  padding: 7px 15px;
-  margin-bottom: @baseline;
-  color: @grayDark;
-  .gradientBar(#fceec1, #eedc94); // warning by default
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  border-width: 1px;
-  border-style: solid;
-  .border-radius(4px);
-  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
-
-  // Adjust close icon
-  .close {
-    margin-top: 1px;
-    *margin-top: 0; // For IE7
-  }
-
-  // Make links same color as text and stand out more
-  a {
-    font-weight: bold;
-    color: @grayDark;
-  }
-  &.danger p a,
-  &.error p a,
-  &.success p a,
-  &.info p a {
-    color: @white;
-  }
-
-  // Remove extra margin from content
-  h5 {
-    line-height: @baseline;
-  }
-  p {
-    margin-bottom: 0;
-  }
-  div {
-    margin-top: 5px;
-    margin-bottom: 2px;
-    line-height: 28px;
-  }
-  .btn {
-    // Provide actions with buttons
-    .box-shadow(0 1px 0 rgba(255,255,255,.25));
-  }
-
-  &.block-message {
-    background-image: none;
-    background-color: lighten(#fceec1, 5%);
-    .reset-filter();
-    padding: 14px;
-    border-color: #fceec1;
-    .box-shadow(none);
-    ul, p {
-      margin-right: 30px;
-    }
-    ul {
-      margin-bottom: 0;
-    }
-    li {
-      color: @grayDark;
-    }
-    .alert-actions {
-      margin-top: 5px;
-    }
-    &.error,
-    &.success,
-    &.info {
-      color: @grayDark;
-      text-shadow: 0 1px 0 rgba(255,255,255,.5);
-    }
-    &.error {
-      background-color: lighten(#f56a66, 25%);
-      border-color: lighten(#f56a66, 20%);
-    }
-    &.success {
-      background-color: lighten(#62c462, 30%);
-      border-color: lighten(#62c462, 25%);
-    }
-    &.info {
-      background-color: lighten(#6bd0ee, 25%);
-      border-color: lighten(#6bd0ee, 20%);
-    }
-    // Change link color back
-    &.danger p a,
-    &.error p a,
-    &.success p a,
-    &.info p a {
-      color: @grayDark;
-    }
-
-  }
-}
-
-
-// PAGINATION
-// ----------
-
-.pagination {
-  height: @baseline * 2;
-  margin: @baseline 0;
-  ul {
-    float: left;
-    margin: 0;
-    border: 1px solid #ddd;
-    border: 1px solid rgba(0,0,0,.15);
-    .border-radius(3px);
-    .box-shadow(0 1px 2px rgba(0,0,0,.05));
-  }
-  li {
-    display: inline;
-  }
-  a {
-    float: left;
-    padding: 0 14px;
-    line-height: (@baseline * 2) - 2;
-    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 {
-    background-color: lighten(@blue, 45%);
-  }
-  .disabled a,
-  .disabled a:hover {
-    background-color: transparent;
-    color: @grayLight;
-  }
-  .next a {
-    border: 0;
-  }
-}
-
-
-// WELLS
-// -----
-
-.well {
-  background-color: #f5f5f5;
-  margin-bottom: 20px;
-  padding: 19px;
-  min-height: 20px;
-  border: 1px solid #eee;
-  border: 1px solid rgba(0,0,0,.05);
-  .border-radius(4px);
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-  blockquote {
-    border-color: #ddd;
-    border-color: rgba(0,0,0,.15);
-  }
-}
-
-
-// MODALS
-// ------
-
-.modal-backdrop {
-  background-color: @black;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10000;
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
-  .opacity(80);
-}
-
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 11000;
-  max-height: 500px;
-  overflow: auto;
-  width: 560px;
-  margin: -250px 0 0 -280px;
-  background-color: @white;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.3);
-  *border: 1px solid #999; /* IE6-7 */
-  .border-radius(6px);
-  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  .background-clip(padding-box);
-  .close { margin-top: 7px; }
-  &.fade {
-    .transition(e('opacity .3s linear, top .3s ease-out'));
-    top: -25%;
-  }
-  &.fade.in { top: 50%; }
-}
-.modal-header {
-  border-bottom: 1px solid #eee;
-  padding: 5px 15px;
-}
-.modal-body {
-  padding: 15px;
-}
-.modal-body form {
-  margin-bottom: 0;
-}
-.modal-footer {
-  background-color: #f5f5f5;
-  padding: 14px 15px 15px;
-  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;
-  }
-}
-
-// Fix the stacking of these components when in modals
-.modal .popover,
-.modal .twipsy {
-  z-index: 12000;
-}
-
-
-// POPOVER ARROWS
-// --------------
-
-#popoverArrow {
-  .above(@arrowWidth: 5px) {
-    bottom: 0;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-top: @arrowWidth solid @black;
-  }
-  .left(@arrowWidth: 5px) {
-    top: 50%;
-    right: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid @black;
-  }
-  .below(@arrowWidth: 5px) {
-    top: 0;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid @black;
-  }
-  .right(@arrowWidth: 5px) {
-    top: 50%;
-    left: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid @black;
-  }
-}
-
-// TWIPSY
-// ------
-
-.twipsy {
-  display: block;
-  position: absolute;
-  visibility: visible;
-  padding: 5px;
-  font-size: 11px;
-  z-index: 1000;
-  .opacity(80);
-  &.fade.in {
-    .opacity(80);
-  }
-  &.above .twipsy-arrow   { #popoverArrow > .above(); }
-  &.left .twipsy-arrow    { #popoverArrow > .left(); }
-  &.below .twipsy-arrow   { #popoverArrow > .below(); }
-  &.right .twipsy-arrow   { #popoverArrow > .right(); }
-}
-.twipsy-inner {
-  padding: 3px 8px;
-  background-color: @black;
-  color: white;
-  text-align: center;
-  max-width: 200px;
-  text-decoration: none;
-  .border-radius(4px);
-}
-.twipsy-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-
-// POPOVERS
-// --------
-
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  padding: 5px;
-  display: none;
-  &.above .arrow { #popoverArrow > .above(); }
-  &.right .arrow { #popoverArrow > .right(); }
-  &.below .arrow { #popoverArrow > .below(); }
-  &.left .arrow  { #popoverArrow > .left(); }
-  .arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-  .inner {
-    background: @black;
-    background: rgba(0,0,0,.8);
-    padding: 3px;
-    overflow: hidden;
-    width: 280px;
-    .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);
-    border-bottom:1px solid #eee;
-  }
-  .content {
-    background-color: @white;
-    padding: 14px;
-    .border-radius(0 0 3px 3px);
-    .background-clip(padding-box);
-    p, ul, ol {
-      margin-bottom: 0;
-    }
-  }
-}
-
-
-// PATTERN ANIMATIONS
-// ------------------
-
-.fade {
-  .transition(opacity .15s linear);
-  opacity: 0;
-  &.in {
-    opacity: 1;
-  }
-}
-
-
-// LABELS
-// ------
-
-.label {
-  padding: 1px 3px 2px;
-  font-size: @basefont * .75;
-  font-weight: bold;
-  color: @white;
-  text-transform: uppercase;
-  white-space: nowrap;
-  background-color: @grayLight;
-  .border-radius(3px);
-  text-shadow: none;
-  &.important { background-color: #c43c35; }
-  &.warning   { background-color: @orange; }
-  &.success   { background-color: @green; }
-  &.notice    { background-color: lighten(@blue, 25%); }
-}
-
-
-// MEDIA GRIDS
-// -----------
-
-.media-grid {
-  margin-left: -@gridGutterWidth;
-  margin-bottom: 0;
-  .clearfix();
-  li {
-    display: inline;
-  }
-  a {
-    float: left;
-    padding: 4px;
-    margin: 0 0 @baseline @gridGutterWidth;
-    border: 1px solid #ddd;
-    .border-radius(4px);
-    .box-shadow(0 1px 1px rgba(0,0,0,.075));
-    img {
-      display: block;
-    }
-    &:hover {
-      border-color: @linkColor;
-      .box-shadow(0 1px 4px rgba(0,105,214,.25));
-    }
-  }
-}

Added: ace/site/trunk/content/lib/popovers.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/popovers.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/popovers.less (added)
+++ ace/site/trunk/content/lib/popovers.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,49 @@
+// POPOVERS
+// --------
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: @zindexPopover;
+  display: none;
+  padding: 5px;
+  &.top    { margin-top:  -5px; }
+  &.right  { margin-left:  5px; }
+  &.bottom { margin-top:   5px; }
+  &.left   { margin-left: -5px; }
+  &.top .arrow    { #popoverArrow > .top(); }
+  &.right .arrow  { #popoverArrow > .right(); }
+  &.bottom .arrow { #popoverArrow > .bottom(); }
+  &.left .arrow   { #popoverArrow > .left();  }
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+}
+.popover-inner {
+  padding: 3px;
+  width: 280px;
+  overflow: hidden;
+  background: @black; // has to be full background declaration for IE fallback
+  background: rgba(0,0,0,.8);
+  .border-radius(6px);
+  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+}
+.popover-title {
+  padding: 9px 15px;
+  line-height: 1;
+  background-color: #f5f5f5;
+  border-bottom:1px solid #eee;
+  .border-radius(3px 3px 0 0);
+}
+.popover-content {
+  padding: 14px;
+  background-color: @white;
+  .border-radius(0 0 3px 3px);
+  .background-clip(padding-box);
+  p, ul, ol {
+    margin-bottom: 0;
+  }
+}

Added: ace/site/trunk/content/lib/print.less
URL: http://svn.apache.org/viewvc/ace/site/trunk/content/lib/print.less?rev=1242114&view=auto
==============================================================================
--- ace/site/trunk/content/lib/print.less (added)
+++ ace/site/trunk/content/lib/print.less Wed Feb  8 21:39:28 2012
@@ -0,0 +1,18 @@
+/*!
+ * Bootstrap @VERSION for Print
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+ */
+
+
+// HIDE UNECESSARY COMPONENTS
+// --------------------------
+
+.navbar-fixed {
+  display: none;
+}
\ No newline at end of file



Mime
View raw message