spiderfw 0.6.26.pre1 → 0.6.26

data/apps/core/components/public/bootstrap/scss/_forms.scss

@@ -28,6 +28,12 @@ legend {
   color: $grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
+
+  // Small
+  small {
+    font-size: $baseLineHeight * .75;
+    color: $grayLight;
+  }
 }
 
 // Set font for forms
@@ -38,6 +44,12 @@ select,
 textarea {
   @include font-sans-serif($baseFontSize,normal,$baseLineHeight);
 }
+input,
+button,
+select,
+textarea {
+  @include font-sans-serif(); // And only set font-family here for those that need it (note the missing label element)
+}
 
 // Identify controls by their labels
 label {
@@ -75,22 +87,26 @@ label select {
 }
 
 // Mini reset for unique input types
-input[type=image],
-input[type=checkbox],
-input[type=radio] {
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
   width: auto;
   height: auto;
   padding: 0;
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: none;
   cursor: pointer;
-  border-radius: 0 #{"\0/"}; // Nuke border-radius for IE9 only
+  @include border-radius(0); // Nuke border-radius for IE9 only
+  border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+  border: 0;
 }
 
 // Reset the file input to browser defaults
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
+// Reset line-height for IE
+input[type="file"] {
+  line-height: 18px \9;
+}
+
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -132,6 +153,7 @@ input[type="image"] {
   @include box-shadow(none);
 }
 
+// Make textarea height behave
 textarea {
   height: auto;
 }
@@ -165,6 +187,7 @@ input[type="hidden"] {
 }
 
 // Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
@@ -175,11 +198,6 @@ input[type="hidden"] {
 .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;
-}
 
 
 
@@ -201,8 +219,8 @@ textarea:focus {
   outline: thin dotted \9; /* IE6-8 */
 }
 input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus,
-
 select:focus {
   @include box-shadow(none); // override for file inputs
   @include tab-focus();
@@ -261,33 +279,6 @@ textarea[readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Mixin for form field states
-@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label,
-  .help-block,
-  .help-inline {
-    color: $textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: $textColor;
-    border-color: $borderColor;
-    &:focus {
-      border-color: darken($borderColor, 10%);
-      @include box-shadow(0 0 6px lighten($borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: $textColor;
-    background-color: $backgroundColor;
-    border-color: $textColor;
-  }
-}
 // Warning
 .control-group.warning {
   @include formFieldState($warningText, $warningText, $warningBackground);
@@ -345,6 +336,7 @@ select:focus:required:invalid {
 // ---------
 
 .help-block {
+  display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 0;
   color: $grayLight;
@@ -413,6 +405,7 @@ select:focus:required:invalid {
     @include border-radius(3px 0 0 3px);
   }
   .uneditable-input {
+    border-left-color: #eee;
     border-right-color: #ccc;    
   }
   .add-on {
@@ -462,6 +455,10 @@ select:focus:required:invalid {
     display: inline-block;
     margin-bottom: 0;
   }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
 }
 .form-search label,
 .form-inline label,
@@ -478,21 +475,30 @@ select:focus:required:invalid {
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
   margin-bottom: $baseLineHeight / 2;
 }
 
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: $baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
+
 // 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;
@@ -513,4 +519,4 @@ select:focus:required:invalid {
   .form-actions {
     padding-left: 160px;
   }
-}
+}

data/apps/core/components/public/bootstrap/scss/_labels.scss

@@ -1,16 +1,32 @@
 // LABELS
 // ------
 
+// Base
 .label {
-  padding: 1px 3px 2px;
-  font-size: $baseFontSize * .75;
+  padding: 2px 4px 3px;
+  font-size: $baseFontSize * .85;
   font-weight: bold;
   color: $white;
-  text-transform: uppercase;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: $grayLight;
   @include border-radius(3px);
 }
-.label-important { background-color: $errorText; }
-.label-warning   { background-color: $orange; }
-.label-success   { background-color: $successText; }
-.label-info      { background-color: $infoText; }
+
+// Hover state
+.label:hover {
+  color: $white;
+  text-decoration: none;
+}
+
+// Colors
+.label-important        { background-color: $errorText; }
+.label-important:hover  { background-color: darken($errorText, 10%); }
+
+.label-warning          { background-color: $orange; }
+.label-warning:hover    { background-color: darken($orange, 10%); }
+
+.label-success          { background-color: $successText; }
+.label-success:hover    { background-color: darken($successText, 10%); }
+
+.label-info             { background-color: $infoText; }
+.label-info:hover       { background-color: darken($infoText, 10%); }

data/apps/core/components/public/bootstrap/scss/_mixins.scss

@@ -25,7 +25,7 @@
 // ------------------
 @mixin tab-focus() {
   // Default
-  outline: thin dotted;
+  outline: thin dotted #333;
   // Webkit
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
@@ -89,6 +89,15 @@
   }
 }
 
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 
 
 // FONTS
@@ -127,9 +136,6 @@
 
 
 
-
-
-
 // GRID SYSTEM
 // --------------------------------------------------
 
@@ -167,31 +173,16 @@
     @include gridSystem-gridColumn($gridGutterWidth);
   }
   // Default columns
-  .span1     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
-  .span2     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
-  .span3     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
-  .span4     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
-  .span5     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
-  .span6     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
-  .span7     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
-  .span8     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
-  .span9     { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
-  .span10    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
-  .span11    { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
-  .span12,
+  @for $i from 1 through $gridColumns {
+    .span#{$i} { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
+  }
+
   .container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
+  
   // Offset column options
-  .offset1   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
-  .offset2   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
-  .offset3   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
-  .offset4   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
-  .offset5   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
-  .offset6   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
-  .offset7   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
-  .offset8   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
-  .offset9   { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
-  .offset10  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
-  .offset11  { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
+  @for $i from 1 through $gridColumns - 1 {
+    .offset#{$i} { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, $i); }
+  }
 }
 
 // Fluid grid system
@@ -218,18 +209,9 @@
       margin-left: 0;
     }
     // Default columns
-    .span1     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
-    .span2     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
-    .span3     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
-    .span4     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
-    .span5     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
-    .span6     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
-    .span7     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
-    .span8     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
-    .span9     { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
-    .span10    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
-    .span11    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
-    .span12    { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
+    @for $i from 1 through $gridColumns {
+      > .span#{$i} { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
+    }
   }
 }
 
@@ -244,18 +226,9 @@
   input,
   textarea,
   .uneditable-input {
-    &.span1     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
-    &.span2     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
-    &.span3     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
-    &.span4     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
-    &.span5     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
-    &.span6     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
-    &.span7     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
-    &.span8     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
-    &.span9     { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
-    &.span10    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
-    &.span11    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
-    &.span12    { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
+    @for $i from 1 through $gridColumns {
+      &.span#{$i} { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
+    }
   }
 }
 
@@ -264,8 +237,52 @@
 
 
 
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+@mixin makeRow() {
+  margin-left: $gridGutterWidth * -1;
+  @include clearfix();
+}
+@mixin makeColumn($columns: 1) {
+  float: left;
+  margin-left: $gridGutterWidth;
+  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
+}
+
 
 
+// Form field states (used in forms.less)
+// --------------------------------------------------
+
+// Mixin for form field states
+@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline {
+    color: $textColor;
+  }
+  // Style inputs accordingly
+  input,
+  select,
+  textarea {
+    color: $textColor;
+    border-color: $borderColor;
+    &:focus {
+      border-color: darken($borderColor, 10%);
+      @include box-shadow(0 0 6px lighten($borderColor, 20%));
+    }
+  }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: $textColor;
+    background-color: $backgroundColor;
+    border-color: $textColor;
+  }
+}
+
 
 
 // CSS3 PROPERTIES
@@ -323,12 +340,12 @@
        -o-transform: translate($x, $y);
           transform: translate($x, $y);
 }
-@mixin 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);
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
+  -webkit-transform: translate($x, $y, $z);
+     -moz-transform: translate($x, $y, $z);
+      -ms-transform: translate($x, $y, $z);
+       -o-transform: translate($x, $y, $z);
+          transform: translate($x, $y, $z);
 }
 
 // Background clipping
@@ -405,27 +422,25 @@
 // Gradients
 @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
-  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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
 }
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
-  background-color: $endColor;
-  background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
+  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 left, $startColor, $endColor); // The standard
+  background-image: linear-gradient(top, $startColor, $endColor); // The standard
   background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
 }
 @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
@@ -437,7 +452,7 @@
   background-image: linear-gradient($deg, $startColor, $endColor); // The standard
 }
 @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
-  background-color: $endColor;
+  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);
@@ -445,10 +460,10 @@
   background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down, gets no color-stop at all the proper fallback
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
 }
 @mixin gradient-radial($centerColor: #555, $outsideColor: #333)  {
-  background-color: $outsideColor;
+  background-color: $outerColor;
   background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($centerColor), to($outsideColor));
   background-image: -webkit-radial-gradient(circle, $centerColor, $outsideColor);
   background-image: -moz-radial-gradient(circle, $centerColor, $outsideColor);

data/apps/core/components/public/bootstrap/scss/_modals.scss

@@ -1,6 +1,7 @@
 // MODALS
 // ------
 
+// Recalculate z-index where appropriate
 .modal-open {
   .dropdown-menu {  z-index: $zindexDropdown + $zindexModal; }
   .dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
@@ -8,6 +9,7 @@
   .tooltip       {  z-index: $zindexTooltip  + $zindexModal; }
 }
 
+// Background
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -25,6 +27,7 @@
   @include opacity(80);
 }
 
+// Base modal
 .modal {
   position: fixed;
   top: 50%;
@@ -53,9 +56,17 @@
   // Close icon
   .close { margin-top: 2px; }
 }
+
+// Body (where all modal content resises)
 .modal-body {
   padding: 15px;
 }
+// Remove bottom margin if need be
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;

data/apps/core/components/public/bootstrap/scss/_navbar.scss

@@ -81,7 +81,7 @@
     margin-top: 5px; // make buttons vertically centered in navbar
   }
   .btn-group .btn {
-    margin-top: 0;
+    margin-top: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -104,6 +104,14 @@
   input[type="radio"] {
     margin-top: 3px;
   }
+  .input-append,
+  .input-prepend {
+    margin-top: 6px;
+    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
+    input {
+      margin-top: 0; // remove the margin on top since it's on the parent
+    }
+  }
 }
 
 // Navbar search
@@ -133,7 +141,7 @@
       background-color: $grayLight;
       background-color: rgba(255,255,255,.5);
     }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
@@ -194,7 +202,7 @@
 }
 // Hover
 .navbar .nav > li > a:hover {
-  background-color: transparent;
+  background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
   color: $navbarLinkColorHover;
   text-decoration: none;
 }

data/apps/core/components/public/bootstrap/scss/_navs.scss

@@ -21,6 +21,21 @@
   background-color: $grayLighter;
 }
 
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  color: $grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 // NAV LIST
@@ -33,28 +48,20 @@
 }
 .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 > li > a {
+  padding: 3px 15px;
 }
-.nav-list .active > a {
+.nav-list .active > a,
+.nav-list .active > a:hover {
   color: $white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: $linkColor;
 }
-.nav-list .icon {
+.nav-list [class^="icon-"] {
   margin-right: 2px;
 }
 
@@ -204,7 +211,7 @@
 // -------------------------
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
-  border-top-color: #333;
+  border-top-color: $grayDark;
 }
 
 // Active:hover dropdown links
@@ -232,7 +239,7 @@
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover {
-  border-color: #999;
+  border-color: $grayLight;
 }
 
 
@@ -248,6 +255,9 @@
 .tabbable {
   @include clearfix();
 }
+.tab-content {
+  overflow: hidden; // prevent content from running below tabs
+}
 
 // Remove border on bottom, left, right
 .tabs-below .nav-tabs,
@@ -284,8 +294,8 @@
     border-top-color: #ddd;
   }
 }
-.tabs-below .tabs .active > a,
-.tabs-below .tabs .active > a:hover {
+.tabs-below .nav-tabs .active > a,
+.tabs-below .nav-tabs .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }