sass-twitter-bootstrap 0.1.0 → 2.0.1

data/vendor/assets/stylesheets/twitter/_modals.scss

@@ -33,6 +33,7 @@
   top: 50%;
   left: 50%;
   z-index: $zindexModal;
+  max-height: 500px;
   overflow: auto;
   width: 560px;
   margin: -250px 0 0 -280px;
@@ -44,7 +45,8 @@
   @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
   @include background-clip(padding-box);
   &.fade {
-    @include transition(#{opacity .3s linear, top .3s ease-out});
+    @include transition(opacity .3s linear);
+    // @include transition(top .3s ease-out);
     top: -25%;
   }
   &.fade.in { top: 50%; }
@@ -56,14 +58,12 @@
   .close { margin-top: 2px; }
 }
 
-// Body (where all modal content resides)
+// Body (where all modal content resises)
 .modal-body {
-  overflow-y: auto;
-  max-height: 400px;
   padding: 15px;
 }
 // Remove bottom margin if need be
-.modal-form {
+.modal-body .modal-form {
   margin-bottom: 0;
 }
 
@@ -71,20 +71,14 @@
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
-  text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   @include border-radius(0 0 6px 6px);
   @include box-shadow(inset 0 1px 0 $white);
-  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  .btn + .btn {
+  @include clearfix();
+  .btn {
+    float: right;
     margin-left: 5px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
 }

data/vendor/assets/stylesheets/twitter/_navbar.scss

@@ -6,30 +6,42 @@
 // -------------
 
 .navbar {
-  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
-  *position: relative;
-  *z-index: 2;
-
   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 {
-  min-height: $navbarHeight;
   padding-left:  20px;
   padding-right: 20px;
   @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
   @include border-radius(4px);
-  @include box-shadow(#{0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)});
+  $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  @include box-shadow($shadow);
 }
 
-// Set width to auto for default container
-// We then reset it for fixed navbars in the #gridSystem mixin
-.navbar .container {
-  width: auto;
+// Navbar button for toggling navbar items in responsive layouts
+.btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
+  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
+  @include box-shadow($shadow);
+}
+.btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  @include border-radius(1px);
+  @include 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;
@@ -38,7 +50,6 @@
 
 // Brand, links, text, and buttons
 .navbar {
-  color: $navbarText;
   // Hover and active states
   .brand:hover {
     text-decoration: none;
@@ -47,34 +58,30 @@
   .brand {
     float: left;
     display: block;
-    // Vertically center the text given $navbarHeight
-    $elementHeight: 20px;
-    padding: (($navbarHeight - $elementHeight) / 2 - 2) 20px (($navbarHeight - $elementHeight) / 2 + 2);
+    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: $navbarBrandColor;
+    color: $white;
   }
   // Plain text in topbar
   .navbar-text {
     margin-bottom: 0;
-    line-height: $navbarHeight;
-  }
-  // Janky solution for now to account for links outside the .nav
-  .navbar-link {
-    color: $navbarLinkColor;
-    &:hover {
-      color: $navbarLinkColorHover;
+    line-height: 40px;
+    color: $navbarText;
+    a:hover {
+      color: $white;
+      background-color: transparent;
     }
   }
   // Buttons in navbar
   .btn,
   .btn-group {
-    @include navbarVerticalAlign(30px); // Vertically center in navbar
+    margin-top: 5px; // make buttons vertically centered in navbar
   }
   .btn-group .btn {
-    margin: 0; // then undo the margin here so we don't accidentally double it
+    margin-top: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -83,16 +90,15 @@
   margin-bottom: 0; // remove default bottom margin
   @include clearfix();
   input,
-  select,
-  .radio,
-  .checkbox {
-    @include navbarVerticalAlign(30px); // Vertically center in navbar
-  }
-  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"] {
@@ -112,26 +118,36 @@
 .navbar-search {
   position: relative;
   float: left;
-  @include navbarVerticalAlign(28px); // Vertically center in navbar
+  margin-top: 6px;
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;
     @include font-sans-serif(13px, normal, 1);
     color: $white;
-    background-color: $navbarSearchBackground;
-    border: 1px solid $navbarSearchBorder;
-    @include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)});
+    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);
+    @include box-shadow($shadow);
     @include transition(none);
 
-    @include placeholder($navbarSearchPlaceholderColor);
+    // Placeholder text gets special styles; can't be bundled together though for some reason
+    @include placeholder($grayLighter);
 
+    // Hover states
+    &:hover {
+      color: $white;
+      background-color: $grayLight;
+      background-color: rgba(255,255,255,.5);
+    }
     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
       color: $grayDark;
       text-shadow: 0 1px 0 $white;
-      background-color: $navbarSearchBackgroundFocus;
+      background-color: $white;
       border: 0;
       @include box-shadow(0 0 3px rgba(0,0,0,.15));
       outline: 0;
@@ -140,42 +156,22 @@
 }
 
 
-
 // FIXED NAVBAR
 // ------------
 
-// Shared (top/bottom) styles
-.navbar-fixed-top,
-.navbar-fixed-bottom {
+.navbar-fixed-top {
   position: fixed;
+  top: 0;
   right: 0;
   left: 0;
   z-index: $zindexFixedNavbar;
-  margin-bottom: 0; // remove 18px margin for static navbar
 }
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
+.navbar-fixed-top .navbar-inner {
   padding-left:  0;
   padding-right: 0;
   @include border-radius(0);
 }
 
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  @include core-span($gridColumns);
-}
-
-// Fixed to top
-.navbar-fixed-top {
-  top: 0;
-}
-
-// Fixed to bottom
-.navbar-fixed-bottom {
-  bottom: 0;
-}
-
-
 
 // NAVIGATION
 // ----------
@@ -198,29 +194,12 @@
 // Links
 .navbar .nav > li > a {
   float: none;
-  // Vertically center the text given $navbarHeight
-  $elementHeight: 20px;
-  padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
+  padding: 10px 10px 11px;
   line-height: 19px;
   color: $navbarLinkColor;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 }
-// Buttons
-.navbar .btn {
-  display: inline-block;
-  padding: 4px 10px 4px;
-  // Vertically center the button given @navbarHeight
-  $elementHeight: 28px;
-  margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
-  line-height: $baseLineHeight;
-}
-.navbar .btn-group {
-  margin: 0;
-  // Vertically center the button given @navbarHeight
-  $elementHeight: 28px;
-  padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
-}
 // Hover
 .navbar .nav > li > a:hover {
   background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -231,9 +210,9 @@
 // Active nav items
 .navbar .nav .active > a,
 .navbar .nav .active > a:hover {
-  color: $navbarLinkColorActive;
+  color: $navbarLinkColorHover;
   text-decoration: none;
-  background-color: $navbarLinkBackgroundActive;
+  background-color: $navbarBackground;
 }
 
 // Dividers (basically a vertical hr)
@@ -252,28 +231,6 @@
   margin-right: 0;
 }
 
-// Navbar button for toggling navbar items in responsive layouts
-// These definitions need to come after '.navbar .btn'
-.navbar .btn-navbar {
-  display: none;
-  float: right;
-  padding: 7px 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
-  @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
-}
-.navbar .btn-navbar .icon-bar {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background-color: #f5f5f5;
-  @include border-radius(1px);
-  @include box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}
 
 
 // Dropdown menus
@@ -281,13 +238,15 @@
 
 // Menu position and menu carets
 .navbar .dropdown-menu {
+  margin-top: 1px;
+  @include 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: $dropdownBorder;
+    border-bottom-color: rgba(0,0,0,.2);
     position: absolute;
     top: -7px;
     left: 9px;
@@ -297,54 +256,36 @@
     display: inline-block;
     border-left:   6px solid transparent;
     border-right:  6px solid transparent;
-    border-bottom: 6px solid $dropdownBackground;
+    border-bottom: 6px solid $white;
     position: absolute;
     top: -6px;
     left: 10px;
   }
 }
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .dropdown-menu {
-  &:before {
-    border-top: 7px solid #ccc;
-    border-top-color: $dropdownBorder;
-    border-bottom: 0;
-    bottom: -7px;
-    top: auto;
-  }
-  &:after {
-    border-top: 6px solid $dropdownBackground;
-    border-bottom: 0;
-    bottom: -6px;
-    top: auto;
-  }
-}
+
 // Dropdown toggle caret
-.navbar .nav li.dropdown .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open .caret {
+.navbar .nav .dropdown-toggle .caret,
+.navbar .nav .open.dropdown .caret {
   border-top-color: $white;
-  border-bottom-color: $white;
 }
-.navbar .nav li.dropdown.active .caret {
+.navbar .nav .active .caret {
   @include opacity(100);
 }
 
 // Remove background color from open dropdown
-.navbar .nav li.dropdown.open > .dropdown-toggle,
-.navbar .nav li.dropdown.active > .dropdown-toggle,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+.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 li.dropdown.active > .dropdown-toggle:hover {
+.navbar .nav .active > .dropdown-toggle:hover {
   color: $white;
 }
 
 // Right aligned menus need alt position
-// TODO: rejigger this at some point to simplify the selectors
-.navbar .pull-right .dropdown-menu,
-.navbar .dropdown-menu.pull-right {
+.navbar .nav.pull-right .dropdown-menu {
   left: auto;
   right: 0;
   &:before {
@@ -355,4 +296,4 @@
     left: auto;
     right: 13px;
   }
-}
+}

data/vendor/assets/stylesheets/twitter/_navs.scss

@@ -21,11 +21,6 @@
   background-color: $grayLighter;
 }
 
-// Redeclare pull classes because of specifity
-.nav > .pull-right {
-  float: right;
-}
-
 // Nav headers (for dropdowns and lists)
 .nav .nav-header {
   display: block;
@@ -47,8 +42,8 @@
 // --------
 
 .nav-list {
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 14px;
+  padding-right: 14px;
   margin-bottom: 0;
 }
 .nav-list > li > a,
@@ -60,8 +55,8 @@
 .nav-list > li > a {
   padding: 3px 15px;
 }
-.nav-list > .active > a,
-.nav-list > .active > a:hover {
+.nav-list .active > a,
+.nav-list .active > a:hover {
   color: $white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: $linkColor;
@@ -69,10 +64,6 @@
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
-// Dividers (basically an hr) within the dropdown
-.nav-list .divider {
-  @include nav-divider();
-}
 
 
 
@@ -103,15 +94,16 @@
 .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: 8px;
-  padding-bottom: 8px;
-  line-height: $baseLineHeight;
+  padding-top: 9px;
+  padding-bottom: 9px;
   border: 1px solid transparent;
   @include border-radius(4px 4px 0 0);
   &:hover {
@@ -128,7 +120,6 @@
   cursor: default;
 }
 
-
 // PILLS
 // -----
 
@@ -142,8 +133,8 @@
 }
 
 // Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
+.nav-pills .active > a,
+.nav-pills .active > a:hover {
   color: $white;
   background-color: $linkColor;
 }
@@ -193,11 +184,14 @@
 // DROPDOWNS
 // ---------
 
-.nav-tabs .dropdown-menu {
-  @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
+// Position the menu
+.nav-tabs .dropdown-menu,
+.nav-pills .dropdown-menu {
+  margin-top: 1px;
+  border-width: 1px;
 }
 .nav-pills .dropdown-menu {
-  @include border-radius(4px); // make rounded corners match the pills
+  @include border-radius(4px);
 }
 
 // Default dropdown links
@@ -206,13 +200,11 @@
 .nav-tabs .dropdown-toggle .caret,
 .nav-pills .dropdown-toggle .caret {
   border-top-color: $linkColor;
-  border-bottom-color: $linkColor;
   margin-top: 6px;
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
   border-top-color: $linkColorHover;
-  border-bottom-color: $linkColorHover;
 }
 
 // Active dropdown links
@@ -220,7 +212,6 @@
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
   border-top-color: $grayDark;
-  border-bottom-color: $grayDark;
 }
 
 // Active:hover dropdown links
@@ -234,16 +225,15 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover {
+.nav > .open.active > a:hover {
   color: $white;
   background-color: $grayLight;
   border-color: $grayLight;
 }
-.nav li.dropdown.open .caret,
-.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret {
+.nav .open .caret,
+.nav .open.active .caret,
+.nav .open a:hover .caret {
   border-top-color: $white;
-  border-bottom-color: $white;
   @include opacity(100);
 }
 
@@ -266,13 +256,13 @@
   @include clearfix();
 }
 .tab-content {
-  overflow: auto; // prevent content from running below tabs
+  overflow: hidden; // prevent content from running below tabs
 }
 
 // Remove border on bottom, left, right
-.tabs-below > .nav-tabs,
-.tabs-right > .nav-tabs,
-.tabs-left > .nav-tabs {
+.tabs-below .nav-tabs,
+.tabs-right .nav-tabs,
+.tabs-left .nav-tabs {
   border-bottom: 0;
 }
 
@@ -290,22 +280,22 @@
 // BOTTOM
 // ------
 
-.tabs-below > .nav-tabs {
+.tabs-below .nav-tabs {
   border-top: 1px solid #ddd;
 }
-.tabs-below > .nav-tabs > li {
+.tabs-below .nav-tabs > li {
   margin-top: -1px;
   margin-bottom: 0;
 }
-.tabs-below > .nav-tabs > li > a {
+.tabs-below .nav-tabs > li > a {
   @include 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 {
+.tabs-below .nav-tabs .active > a,
+.tabs-below .nav-tabs .active > a:hover {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -313,51 +303,51 @@
 // ------------
 
 // Common styles
-.tabs-left > .nav-tabs > li,
-.tabs-right > .nav-tabs > li {
+.tabs-left .nav-tabs > li,
+.tabs-right .nav-tabs > li {
   float: none;
 }
-.tabs-left > .nav-tabs > li > a,
-.tabs-right > .nav-tabs > li > a {
+.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 {
+.tabs-left .nav-tabs {
   float: left;
   margin-right: 19px;
   border-right: 1px solid #ddd;
 }
-.tabs-left > .nav-tabs > li > a {
+.tabs-left .nav-tabs > li > a {
   margin-right: -1px;
   @include border-radius(4px 0 0 4px);
 }
-.tabs-left > .nav-tabs > li > a:hover {
+.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 {
+.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 {
+.tabs-right .nav-tabs {
   float: right;
   margin-left: 19px;
   border-left: 1px solid #ddd;
 }
-.tabs-right > .nav-tabs > li > a {
+.tabs-right .nav-tabs > li > a {
   margin-left: -1px;
   @include border-radius(0 4px 4px 0);
 }
-.tabs-right > .nav-tabs > li > a:hover {
+.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 {
+.tabs-right .nav-tabs .active > a,
+.tabs-right .nav-tabs .active > a:hover {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: $white;
 }