anjlab-bootstrap-rails 3.0.0.0.alpha1 → 3.0.0.rc1

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_modals.scss

@@ -23,14 +23,13 @@
   bottom: 0;
   left: 0;
   z-index: $zindex-modal-background;
-  -webkit-overflow-scrolling: touch;
 
   // When fading in the modal, animate it to slide down
-  &.fade {
-    top: -25%;
-    @include transition((opacity 0.3s linear, top 0.3s ease-out));
+  &.fade .modal-dialog {
+    @include translate(0, -25%);
+    @include transition-transform(0.3s ease-out);
   }
-  &.fade.in { top: 0; }
+  &.fade.in  .modal-dialog { @include translate(0, 0)}
 }
 
 // Shell div to position the modal with bottom padding
@@ -47,10 +46,10 @@
 // Actual modal
 .modal-content {
   position: relative;
-  background-color: #fff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.2);
-  border-radius: 6px;
+  background-color: $modal-content-bg;
+  border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+  border: 1px solid $modal-content-border-color;
+  border-radius: $border-radius-large;
   @include box-shadow(0 3px 9px rgba(0,0,0,.5));
   @include background-clip(padding-box);
   // Remove focus outline from opened modal
@@ -65,7 +64,7 @@
   bottom: 0;
   left: 0;
   z-index: ($zindex-modal-background - 10);
-  background-color: #000;
+  background-color: $modal-backdrop-bg;
   // Fade for backdrop
   &.fade { @include opacity(0); }
   &.fade.in { @include opacity(.5); }
@@ -75,7 +74,7 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   padding: $modal-title-padding;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid $modal-header-border-color;
   min-height: ($modal-title-padding + $modal-title-line-height);
 }
 // Close icon
@@ -101,7 +100,7 @@
   margin-top: 15px;
   padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
   text-align: right; // right align buttons
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid $modal-footer-border-color;
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navbar.scss

@@ -5,9 +5,10 @@
 // Wrapper and base class
 .navbar {
   position: relative;
+  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: 20px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: $navbar-padding-horizontal;
+  padding-right: $navbar-padding-horizontal;
   background-color: $navbar-bg;
   border-radius: $border-radius-base;
 
@@ -20,7 +21,6 @@
 
 .navbar-nav {
   // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
-  // and outdent nav links so text lines up with logo.
   margin-top: 10px;
   margin-bottom: 15px;
 
@@ -30,23 +30,33 @@
     color: $navbar-link-color;
     line-height: 20px;
     border-radius: $border-radius-base;
+    &:hover,
+    &:focus {
+      color: $navbar-link-hover-color;
+      background-color: $navbar-link-hover-bg;
+    }
   }
-  > li > a:hover,
-  > li > a:focus {
-    color: $navbar-link-hover-color;
-    background-color: $navbar-link-hover-bg;
+  > .active > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $navbar-link-active-color;
+      background-color: $navbar-link-active-bg;
+    }
   }
-  > .active > a,
-  > .active > a:hover,
-  > .active > a:focus {
-    color: $navbar-link-active-color;
-    background-color: $navbar-link-active-bg;
+  > .disabled > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $navbar-link-disabled-color;
+      background-color: $navbar-link-disabled-bg;
+    }
   }
-  > .disabled > a,
-  > .disabled > a:hover,
-  > .disabled > a:focus {
-    color: $navbar-link-disabled-color;
-    background-color: $navbar-link-disabled-bg;
+
+  // Right aligned contents
+  // Make them full width first so that they align properly on mobile
+  &.pull-right {
+    width: 100%;
   }
 }
 
@@ -90,7 +100,7 @@
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 15px;
+  padding: $navbar-padding-vertical $navbar-padding-horizontal;
   font-size: $font-size-large;
   font-weight: 500;
   line-height: $line-height-computed;
@@ -107,16 +117,18 @@
 // Collapsible navbar toggle
 .navbar-toggle {
   position: absolute;
-  top: 10px;
+  top: floor(($navbar-height - 32) / 2);
   right: 10px;
+  width: 48px;
+  height: 32px;
   padding: 8px 12px;
   background-color: transparent;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: 1px solid $navbar-toggle-border-color;
+  border-radius: $border-radius-base;
 
   &:hover,
   &:focus {
-    background-color: #ddd;
+    background-color: $navbar-toggle-hover-bg;
   }
 
   // Bars
@@ -124,7 +136,7 @@
     display: block;
     width: 22px;
     height: 2px;
-    background-color: #ccc;
+    background-color: $navbar-toggle-icon-bar-bg;
     border-radius: 1px;
   }
   .icon-bar + .icon-bar {
@@ -162,22 +174,22 @@
   }
 
   // Remove background color from open dropdown
-  > .open > a,
-  > .open > a:hover,
-  > .open > a:focus {
-    background-color: $navbar-link-active-bg;
-    color: $navbar-link-active-color;
+  > .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: $navbar-link-active-bg;
+      color: $navbar-link-active-color;
+      .caret {
+        border-top-color: $navbar-link-active-color;
+        border-bottom-color: $navbar-link-active-color;
+      }
+    }
   }
   > .dropdown > a .caret {
     border-top-color: $navbar-link-color;
     border-bottom-color: $navbar-link-color;
   }
-  > .open > a .caret,
-  > .open > a:hover .caret,
-  > .open > a:focus .caret {
-    border-top-color: $navbar-link-active-color;
-    border-bottom-color: $navbar-link-active-color;
-  }
 }
 
 // Right aligned menus need alt position
@@ -211,45 +223,52 @@
   .navbar-nav {
     > li > a {
       color: $navbar-inverse-link-color;
+
+      &:hover,
+      &:focus {
+        color: $navbar-inverse-link-hover-color;
+        background-color: $navbar-inverse-link-hover-bg;
+      }
     }
-    > li > a:hover,
-    > li > a:focus {
-      color: $navbar-inverse-link-hover-color;
-      background-color: $navbar-inverse-link-hover-bg;
-    }
-    > .active > a,
-    > .active > a:hover,
-    > .active > a:focus {
-      color: $navbar-inverse-link-active-color;
-      background-color: $navbar-inverse-link-active-bg;
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $navbar-inverse-link-active-color;
+        background-color: $navbar-inverse-link-active-bg;
+      }
     }
-    > .disabled > a,
-    > .disabled > a:hover,
-    > .disabled > a:focus {
-      color: $navbar-inverse-link-disabled-color;
-      background-color: $navbar-inverse-link-disabled-bg;
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $navbar-inverse-link-disabled-color;
+        background-color: $navbar-inverse-link-disabled-bg;
+      }
     }
   }
 
   // Darken the responsive nav toggle
   .navbar-toggle {
-    border-color: #333;
+    border-color: $navbar-inverse-toggle-border-color;
     &:hover,
     &:focus {
-      background-color: #333;
+      background-color: $navbar-inverse-toggle-hover-bg;
     }
     .icon-bar {
-      background-color: #fff;
+      background-color: $navbar-inverse-toggle-icon-bar-bg;
     }
   }
 
   // Dropdowns
   .navbar-nav {
-    > .open > a,
-    > .open > a:hover,
-    > .open > a:focus {
-      background-color: $navbar-inverse-link-active-bg;
-      color: $navbar-inverse-link-active-color;
+    > .open > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $navbar-inverse-link-active-bg;
+        color: $navbar-inverse-link-active-color;
+      }
     }
     > .dropdown > a:hover .caret {
       border-top-color: $navbar-inverse-link-hover-color;
@@ -259,13 +278,16 @@
       border-top-color: $navbar-inverse-link-color;
       border-bottom-color: $navbar-inverse-link-color;
     }
-    > .open > a .caret,
-    > .open > a:hover .caret,
-    > .open > a:focus .caret {
-      border-top-color: $navbar-inverse-link-active-color;
-      border-bottom-color: $navbar-inverse-link-active-color;
+    > .open > a {
+      &,
+      &:hover,
+      &:focus {
+        .caret {
+          border-top-color: $navbar-inverse-link-active-color;
+          border-bottom-color: $navbar-inverse-link-active-color;
+        }
+      }
     }
-
   }
 }
 
@@ -274,14 +296,14 @@
 // Responsive navbar
 // --------------------------------------------------
 
-@media screen and (min-width: $screen-tablet) {
+@media screen and (min-width: $grid-float-breakpoint) {
 
   .navbar-brand {
     float: left;
-    margin-left: -5px;
+    margin-left: -($navbar-padding-horizontal);
     margin-right: 5px;
   }
-  .navbar .nav {
+  .navbar-nav {
     float: left;
     // undo margin to make nav extend full height of navbar
     margin-top: 0;
@@ -296,6 +318,7 @@
 
     &.pull-right {
       float: right;
+      width: auto;
     }
   }
 
@@ -307,6 +330,7 @@
     display: none;
   }
   .nav-collapse.collapse {
+    display: block !important;
     height: auto !important;
     overflow: visible !important;
   }

data/{vendor → app}/assets/stylesheets/twitter/bootstrap/_navs.scss

@@ -7,7 +7,6 @@
 // --------------------------------------------------
 
 .nav {
-  margin-left: 0;
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
@@ -24,20 +23,21 @@
       &:hover,
       &:focus {
         text-decoration: none;
-        background-color: $gray-lighter;
+        background-color: $nav-link-hover-bg;
       }
     }
 
     // Disabled state sets text to gray and nukes hover/tab effects
     &.disabled > a {
-      color: $gray-light;
-    }
-    &.disabled > a:hover,
-    &.disabled > a:focus {
-      color: $gray-light;
-      text-decoration: none;
-      background-color: transparent;
-      cursor: default;
+      color: $nav-disabled-link-color;
+
+      &:hover,
+      &:focus {
+        color: $nav-disabled-link-hover-color;
+        text-decoration: none;
+        background-color: transparent;
+        cursor: not-allowed;
+      }
     }
 
     // Space the headers out when they follow another list item (link)
@@ -47,19 +47,21 @@
   }
 
   // Open dropdowns
-  &.open > a,
-  &.open > a:hover,
-  &.open > a:focus {
-    color: #fff;
-    background-color: $link-color;
-    border-color: $link-color;
-    .caret {
-      border-top-color: #fff;
-      border-bottom-color: #fff;
+  &.open > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $nav-open-link-hover-color;
+      background-color: $link-color;
+      border-color: $link-color;
+      .caret {
+        border-top-color: $nav-open-caret-border-color;
+        border-bottom-color: $nav-open-caret-border-color;
+      }
     }
   }
 
-  // Redeclare pull classes because of specifity
+  // Redeclare pull classes because of specificity
   // Todo: consider making these utilities !important to avoid this bullshit
   > .pull-right {
     float: right;
@@ -71,11 +73,6 @@
   }
 }
 
-
-
-// Nav variations
-// --------------------------------------------------
-
 // Justified nav links
 // -------------------------
 
@@ -92,27 +89,30 @@
 }
 
 // Move borders to anchors instead of bottom of list
-@mixin nav-tabs-justified () {
+@mixin nav-tabs-justified {
   border-bottom: 0;
   > li > a {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $nav-tabs-justified-link-border-color;
 
     // Override margin from .nav-tabs
     margin-right: 0;
   }
   > .active > a {
-    border-bottom-color: $body-bg;
+    border-bottom-color: $nav-tabs-justified-active-link-border-color;
   }
 
 }
 
 
+// Nav variations
+// --------------------------------------------------
+
 // Tabs
 // -------------------------
 
 // Give the tabs something to sit on
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid $nav-tabs-border-color;
   > li {
     float: left;
     // Make the list-items overlay the bottom border
@@ -125,25 +125,27 @@
       border: 1px solid transparent;
       border-radius: $border-radius-base $border-radius-base 0 0;
       &:hover {
-        border-color: $gray-lighter $gray-lighter #ddd;
+        border-color: $nav-tabs-link-hover-border-color;
       }
     }
 
     // Active state, and it's :hover to override normal :hover
-    &.active > a,
-    &.active > a:hover,
-    &.active > a:focus {
-      color: $gray;
-      background-color: $body-bg;
-      border: 1px solid #ddd;
-      border-bottom-color: transparent;
-      cursor: default;
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $nav-tabs-active-link-hover-color;
+        background-color: $nav-tabs-active-link-hover-bg;
+        border: 1px solid $nav-tabs-active-link-hover-border-color;
+        border-bottom-color: transparent;
+        cursor: default;
+      }
     }
   }
   // pulling this in mainly for less shorthand
   &.nav-justified {
-    @include nav-justified;
-    @include nav-tabs-justified;
+    @include nav-justified();
+    @include nav-tabs-justified();
   }
 }
 
@@ -159,17 +161,17 @@
       border-radius: 5px;
     }
     + li {
-      > a {
-        margin-left: 2px;
-      }
+      margin-left: 2px;
     }
 
     // Active state
-    &.active > a,
-    &.active > a:hover,
-    &.active > a:focus {
-      color: #fff;
-      background-color: $component-active-bg;
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $nav-pills-active-link-hover-color;
+        background-color: $nav-pills-active-link-hover-bg;
+      }
     }
   }
 }
@@ -188,23 +190,7 @@
   }
 }
 
-.nav-justified { @include nav-justified }
-
-
-// Nav headers (for dropdowns and lists)
-// -------------------------
-
-.nav-header {
-  display: block;
-  padding: 3px 15px;
-  font-size: $font-size-mini;
-  font-weight: bold;
-  line-height: $line-height-base;
-  color: $gray-light;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  text-transform: uppercase;
-}
-
+.nav-justified { @include nav-justified; }
 
 
 // Tabbable tabs
@@ -220,9 +206,11 @@
 .pill-content > .pill-pane {
   display: none;
 }
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
+.tab-content,
+.pill-content {
+  > .active {
+    display: block;
+  }
 }