bootstrap3-wip-rails 0.1.2

data/vendor/assets/stylesheets/modals.less

@@ -0,0 +1,137 @@
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: auto;
+  overflow-y: scroll;
+  position: fixed;
+  top: 0;
+  right: 0;
+  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%;
+    .transition(~"opacity 0.3s linear, top 0.3s ease-out");
+  }
+  &.fade.in { top: 0; }
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  padding: 10px;
+  z-index: (@zindex-modal-background + 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;
+  .box-shadow(0 3px 9px rgba(0,0,0,.5));
+  .background-clip(padding-box);
+  // Remove focus outline from opened modal
+  outline: none;
+}
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: (@zindex-modal-background - 10);
+  background-color: #000;
+  // Fade for backdrop
+  &.fade { .opacity(0); }
+  &.fade.in { .opacity(.5); }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  padding: @modal-title-padding;
+  border-bottom: 1px solid #e5e5e5;
+  min-height: (@modal-title-padding + @modal-title-line-height);
+}
+// Close icon
+.modal-header .close {
+  margin-top: -2px;
+}
+
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: @modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  padding: @modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+  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;
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    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;
+  }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-left: 0;
+  }
+}
+
+// Scale up the modal
+@media screen and (min-width: 768px) {
+
+  .modal-dialog {
+    left: 50%;
+    right: auto;
+    width: 560px;
+    margin-left: -280px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .modal-content {
+    .box-shadow(0 5px 15px rgba(0,0,0,.5));
+  }
+
+}

data/vendor/assets/stylesheets/navbar.less

@@ -0,0 +1,389 @@
+//
+// Navbars
+// --------------------------------------------------
+
+// Wrapper and base class
+.navbar {
+  position: relative;
+  padding: 10px 15px;
+  background-color: @navbar-bg;
+  border-radius: @border-radius-base;
+  // Prevent floats from breaking the navbar
+  .clearfix();
+}
+
+// Navbar nav links
+// -------------------------
+
+.navbar {
+  .nav {
+    // space out from .navbar .brand and .btn-navbar
+    margin-top: 15px;
+  }
+  .nav > li > a {
+    padding-top: ((@navbar-height - @line-height-base) / 2);
+    padding-bottom: ((@navbar-height - @line-height-base) / 2);
+    color: @navbar-link-color;
+    line-height: 20px;
+  }
+  .nav > li > a:hover,
+  .nav > li > a:focus {
+    color: @navbar-link-hover-color;
+    background-color: @navbar-link-hover-bg;
+  }
+  .nav > .active > a,
+  .nav > .active > a:hover,
+  .nav > .active > a:focus {
+    color: @navbar-link-active-color;
+    background-color: @navbar-link-active-bg;
+  }
+  .nav > .disabled > a,
+  .nav > .disabled > a:hover,
+  .nav > .disabled > a:focus {
+    color: @navbar-link-disabled-color;
+    background-color: @navbar-link-disabled-bg;
+  }
+}
+
+
+
+//
+// Navbar alignment options
+// --------------------------------------------------
+
+// Static navbar
+.navbar-static-top {
+  border-radius: 0;
+}
+
+// Fix the top/bottom navbars when screen real estate supports it
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: @zindex-navbar-fixed;
+  border-radius: 0;
+}
+.navbar-fixed-top    { top: 0; }
+.navbar-fixed-bottom { bottom: 0; }
+
+
+
+//
+// Navbar optional components
+// --------------------------------------------------
+
+// Brand/project name
+.navbar-brand {
+  display: block;
+  max-width: 200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 7px 15px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: @line-height-base;
+  color: @navbar-brand-color;
+  text-align: center;
+  &:hover,
+  &:focus {
+    color: @navbar-brand-hover-color;
+    text-decoration: none;
+    background-color: @navbar-brand-hover-bg;
+  }
+}
+
+// Collapsible navbar toggle
+.navbar-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus {
+    background-color: #ddd;
+  }
+
+  // Bars
+  .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background-color: #ccc;
+    border-radius: 1px;
+  }
+  .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+}
+
+// Dividers in navbar
+.navbar .nav > .divider {
+  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
+}
+
+// Navbar form
+.navbar-form {
+  .navbar-vertical-align(34px); // Vertically center in navbar
+}
+
+// Dropdown menus
+
+// Menu position and menu carets
+.navbar .nav > li > .dropdown-menu {
+  margin-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .nav > li > .dropdown-menu {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+// Dropdown menu items and carets
+.navbar .nav {
+  // Caret should match text color on hover
+  li.dropdown > a:hover .caret,
+  li.dropdown > a:focus .caret {
+    border-top-color: @navbar-link-hover-color;
+    border-bottom-color: @navbar-link-hover-color;
+  }
+
+  // Remove background color from open dropdown
+  li.dropdown.open > .dropdown-toggle,
+  li.dropdown.active > .dropdown-toggle,
+  li.dropdown.open.active > .dropdown-toggle {
+    background-color: @navbar-link-active-bg;
+    color: @navbar-link-active-color;
+  }
+  li.dropdown > .dropdown-toggle .caret {
+    border-top-color: @navbar-link-color;
+    border-bottom-color: @navbar-link-color;
+  }
+  li.dropdown.open > .dropdown-toggle .caret,
+  li.dropdown.active > .dropdown-toggle .caret,
+  li.dropdown.open.active > .dropdown-toggle .caret {
+    border-top-color: @navbar-link-active-color;
+    border-bottom-color: @navbar-link-active-color;
+  }
+}
+
+// Right aligned menus need alt position
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
+  left: auto;
+  right: 0;
+}
+
+
+
+// Inverse navbar
+// --------------------------------------------------
+
+.navbar-inverse {
+  background-color: @navbar-inverse-bg;
+
+  .navbar-brand {
+    color: @navbar-inverse-brand-color;
+    &:hover,
+    &:focus {
+      color: @navbar-inverse-brand-hover-color;
+      background-color: @navbar-inverse-brand-hover-bg;
+    }
+  }
+
+  .navbar-text {
+    color: @navbar-inverse-text;
+  }
+
+  .nav > li > a {
+    color: @navbar-inverse-link-color;
+  }
+  .nav > li > a:hover,
+  .nav > li > a:focus {
+    color: @navbar-inverse-link-hover-color;
+    background-color: @navbar-inverse-link-hover-bg;
+  }
+  .nav > .active > a,
+  .nav > .active > a:hover,
+  .nav > .active > a:focus {
+    color: @navbar-inverse-link-active-color;
+    background-color: @navbar-inverse-link-active-bg;
+  }
+  .nav > .disabled > a,
+  .nav > .disabled > a:hover,
+  .nav > .disabled > a:focus {
+    color: @navbar-inverse-link-disabled-color;
+    background-color: @navbar-inverse-link-disabled-bg;
+  }
+
+  // Darken the responsive nav toggle
+  .navbar-toggle {
+    border-color: #333;
+    &:hover,
+    &:focus {
+      background-color: #333;
+    }
+    .icon-bar {
+      background-color: #fff;
+    }
+  }
+
+  // Darken dividers
+  .nav > .divider {
+    background-color: darken(@navbar-inverse-bg, 5%);
+    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
+  }
+
+  // Dropdowns
+  .nav li.dropdown.open > .dropdown-toggle,
+  .nav li.dropdown.active > .dropdown-toggle,
+  .nav li.dropdown.open.active > .dropdown-toggle {
+    background-color: @navbar-inverse-link-active-bg;
+    color: @navbar-inverse-link-active-color;
+  }
+  .nav li.dropdown > a:hover .caret {
+    border-top-color: @navbar-inverse-link-hover-color;
+    border-bottom-color: @navbar-inverse-link-hover-color;
+  }
+  .nav li.dropdown > .dropdown-toggle .caret {
+    border-top-color: @navbar-inverse-link-color;
+    border-bottom-color: @navbar-inverse-link-color;
+  }
+  .nav li.dropdown.open > .dropdown-toggle .caret,
+  .nav li.dropdown.active > .dropdown-toggle .caret,
+  .nav li.dropdown.open.active > .dropdown-toggle .caret {
+    border-top-color: @navbar-inverse-link-active-color;
+    border-bottom-color: @navbar-inverse-link-active-color;
+  }
+}
+
+
+
+// Inverse navbar
+// --------------------------------------------------
+
+@media screen and (min-width: 768px) {
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .navbar-brand {
+    float: left;
+    padding-top: ((@navbar-height - @line-height-base) / 2);
+    padding-bottom: ((@navbar-height - @line-height-base) / 2);
+    margin-left: -10px;
+  }
+  .navbar .nav {
+    float: left;
+    margin-top: 0; // undo top margin to make nav extend full height of navbar
+    .clearfix();
+
+    &.pull-right {
+      float: right;
+    }
+  }
+  .navbar .nav > li {
+    float: left;
+  }
+
+  // Dividers go vertical
+  // Change the height and height, disable bottom border, then add right border
+  .navbar .nav > .divider {
+    width: 1px;
+    height: (@navbar-height * .6);
+    margin: (@navbar-height * .2) 9px;
+    border-bottom: 0;
+    border-right: 1px solid lighten(@navbar-bg, 5%);
+  }
+  // Since we override the border, we need to specify it again for inverted navbars
+  .navbar-inverse .nav > .divider {
+    border-right-color: lighten(@navbar-inverse-bg, 5%);
+  }
+
+  .navbar-fixed-left {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .navbar-fixed-left .navbar-brand,
+  .navbar-fixed-left .nav,
+  .navbar-fixed-left .nav > li {
+    float: none;
+  }
+
+  // Required to make the collapsing navbar work on regular desktops
+  .navbar-toggle {
+    position: relative;
+    top: auto;
+    left: auto;
+    display: none;
+  }
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+}
+
+/*
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
+  color: @navbar-link-color;
+  &:hover {
+    color: @navbar-link-hover-color;
+  }
+}
+
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
+  .navbarVerticalAlign(30px); // Vertically center in navbar
+}
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn {
+  margin-top: 0; // then undo the margin here so we don't accidentally double it
+}
+
+// Navbar forms
+// -------------------------
+.navbar-form {
+  margin-bottom: 0; // remove default bottom margin
+  .clearfix();
+  input,
+  select,
+  .radio,
+  .checkbox {
+    .navbarVerticalAlign(30px); // Vertically center in navbar
+  }
+  input,
+  select,
+  .btn {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+  input[type="image"],
+  input[type="checkbox"],
+  input[type="radio"] {
+    margin-top: 3px;
+  }
+  .input-append,
+  .input-prepend {
+    margin-top: 5px;
+    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
+    }
+  }
+}
+
+*/