twitter-bootstrap-rails 0.0.3 → 0.0.4

data/vendor/assets/stylesheets/bootstrap/patterns.less

@@ -1,639 +0,0 @@
-/* Patterns.less
- * Repeatable UI elements outside the base styles provided from the scaffolding
- * ---------------------------------------------------------------------------- */
-
-
-// TOPBAR
-// ------
-
-// Topbar for Branding and Nav
-div.topbar {
-  #gradient > .vertical(#333, #222);
-  height: 40px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  overflow: visible;
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
-
-  // Links get text shadow
-  a {
-    color: @grayLight;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  }
-
-  // Hover and active states for links
-  ul li a:hover,
-  ul li.active a,
-  a.logo:hover {
-    background-color: #333;
-    background-color: rgba(255,255,255,.15);
-    color: @white;
-    text-decoration: none;
-  }
-
-  // Logo
-  a.logo {
-    float: left;
-    display: block;
-    padding: 8px 20px 12px;
-    margin-left: -20px;
-    color: @white;
-    font-size: 20px;
-    font-weight: 200;
-    line-height: 1;
-    img {
-      float: left;
-      margin-right: 6px;
-    }
-  }
-
-  // Search Form
-  form {
-    float: left;
-    margin: 5px 0 0 0;
-    position: relative;
-    .opacity(100);
-    input {
-      background-color: @grayLight;
-      background-color: rgba(255,255,255,.3);
-      #font > .sans-serif(13px, normal, 1);
-      width: 220px;
-      padding: 4px 9px;
-      color: #fff;
-      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 {
-        background-color: #444;
-        background-color: rgba(255,255,255,.5);
-        color: #fff;
-      }
-      &:focus,
-      &.focused {
-        outline: none;
-        background-color: #fff;
-        color: @grayDark;
-        text-shadow: 0 1px 0 #fff;
-        border: 0;
-        padding: 5px 10px;
-        .box-shadow(0 0 3px rgba(0,0,0,.15));
-      }
-    }
-  }
-
-  // Navigation
-  ul {
-    display: block;
-    float: left;
-    margin: 0 10px 0 0;
-    position: relative;
-    &.secondary-nav {
-      float: right;
-      margin-left: 10px;
-      margin-right: 0;
-    }
-    li {
-      display: block;
-      float: left;
-      font-size: 13px;
-      a {
-        display: block;
-        float: none;
-        padding: 10px 10px 11px;
-        line-height: 19px;
-        text-decoration: none;
-        &:hover {
-          color: #fff;
-          text-decoration: none;
-        }
-      }
-      &.active a {
-        background-color: #222;
-        background-color: rgba(0,0,0,.5);
-      }
-    }
-
-    // Dropdowns
-    &.primary-nav li ul {
-      left: 0;
-    }
-    &.secondary-nav li ul {
-      right: 0;
-    }
-    li.menu {
-      position: relative;
-      a.menu {
-        &:after {
-          width: 0px;
-          height: 0px;
-          display: inline-block;
-          content: "↓";
-          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 #fff;
-          .opacity(50);
-        }
-      }
-      &.open {
-        a.menu,
-        a:hover {
-          background-color: lighten(#00a0d1,5);
-          background-color: rgba(255,255,255,.1);
-          color: #fff;
-        }
-        ul {
-          display: block;
-          li {
-            a {
-              background-color: transparent;
-              font-weight: normal;
-              &:hover {
-                background-color: rgba(255,255,255,.1);
-                color: #fff;
-              }
-            }
-            &.active a {
-              background-color: rgba(255,255,255,.1);
-              font-weight: bold;
-            }
-          }
-        }
-      }
-    }
-    li ul {
-      background-color: #333;
-      float: left;
-      display: none;
-      position: absolute;
-      top: 40px;
-      min-width: 160px;
-      max-width: 220px;
-      _width: 160px;
-      margin-left: 0;
-      margin-right: 0;
-      padding: 0;
-      text-align: left;
-      border: 0;
-      zoom: 1;
-      .border-radius(0 0 5px 5px);
-      .box-shadow(0 1px 2px rgba(0,0,0,0.6));
-      li {
-        float: none;
-        clear: both;
-        display: block;
-        background: none;
-        font-size: 12px;
-        a {
-          display: block;
-          padding: 6px 15px;
-          clear: both;
-          font-weight: normal;
-          line-height: 19px;
-          color: #bbb;
-          &:hover {
-            background-color: #333;
-            background-color: rgba(255,255,255,.25);
-            color: #fff;
-          }
-        }
-
-        // Dividers (basically an hr)
-        &.divider {
-          height: 1px;
-          overflow: hidden;
-          background: rgba(0,0,0,.2);
-          border-bottom: 1px solid rgba(255,255,255,.1);
-          margin: 5px 0;
-        }
-
-        // Section separaters
-        span {
-          clear: both;
-          display: block;
-          background: rgba(0,0,0,.2);
-          padding: 6px 15px;
-          cursor: default;
-          color: @gray;
-          border-top: 1px solid rgba(0,0,0,.2);
-        }
-      }
-    }
-  }
-}
-
-
-// PAGE HEADERS
-// ------------
-
-div.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;
-  }
-}
-
-
-// ERROR STYLES
-// ------------
-
-// One-liner alert bars
-div.alert-message {
-  #gradient > .vertical(transparent, rgba(0,0,0,0.15));
-  background-color: @grayLighter;
-  margin-bottom: @baseline;
-  padding: 8px 15px;
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  border-bottom: 1px solid rgba(0,0,0,.25);
-  .border-radius(4px);
-  p {
-    color: #fff;
-    margin-bottom: 0;
-    + p {
-      margin-top: 5px;
-    }
-  }
-  &.error {
-    background-color: lighten(@red, 25%);
-  }
-  &.warning {
-    background-color: lighten(@yellow, 15%);
-  }
-  &.success {
-    background-color: lighten(@green, 15%);
-  }
-  &.info {
-    background-color: lighten(@blue, 15%);
-  }
-  a.close {
-    float: right;
-    margin-top: -2px;
-    color: #fff;
-    font-size: 20px;
-    font-weight: bold;
-    text-shadow: 0 1px 0 rgba(0,0,0,.5);
-    .opacity(50);
-    .border-radius(3px);
-    &:hover {
-      text-decoration: none;
-      .opacity(50);
-    }
-  }
-}
-
-// Block-level Alerts
-div.block-message {
-  margin-bottom: @baseline;
-  padding: 14px;
-  color: @grayDark;
-  color: rgba(0,0,0,.8);
-  text-shadow: 0 1px 0 rgba(255,255,255,.25);
-  .border-radius(6px);
-  p {
-    color: @grayDark;
-    color: rgba(0,0,0,.8);
-    margin-right: 30px;
-    margin-bottom: 0;
-  }
-  ul {
-    margin-bottom: 0;
-  }
-  strong {
-    display: block;
-  }
-  a.close {
-    display: block;
-    color: @grayDark;
-    color: rgba(0,0,0,.5);
-    text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  }
-  &.error {
-    background: lighten(@red, 55%);
-    border: 1px solid lighten(@red, 50%);
-  }
-  &.warning {
-    background: lighten(@yellow, 35%);
-    border: 1px solid lighten(@yellow, 25%)
-  }
-  &.success {
-    background: lighten(@green, 45%);
-    border: 1px solid lighten(@green, 35%)
-  }
-  &.info {
-    background: lighten(@blue, 45%);
-    border: 1px solid lighten(@blue, 40%);
-  }
-}
-
-
-// NAVIGATION
-// ----------
-
-// Common tab and pill styles
-ul.tabs,
-ul.pills {
-  margin: 0 0 20px;
-  padding: 0;
-  .clearfix();
-  li {
-    display: inline;
-    a {
-      float: left;
-      width: auto;
-    }
-  }
-}
-
-// Basic Tabs
-ul.tabs {
-  width: 100%;
-  border-bottom: 1px solid @grayLight;
-  li {
-    a {
-      margin-bottom: -1px;
-      margin-right: 2px;
-      padding: 0 15px;
-      line-height: (@baseline * 2) - 1;
-      .border-radius(3px 3px 0 0);
-      &:hover {
-        background-color: @grayLighter;
-        border-bottom: 1px solid @grayLight;
-      }
-    }
-    &.active a {
-      background-color: #fff;
-      padding: 0 14px;
-      border: 1px solid #ccc;
-      border-bottom: 0;
-      color: @gray;
-    }
-  }
-}
-
-// Basic pill nav
-ul.pills {
-  li {
-    a {
-      margin: 5px 3px 5px 0;
-      padding: 0 15px;
-      text-shadow: 0 1px 1px #fff;
-      line-height: 30px;
-      .border-radius(15px);
-      &:hover {
-        background: @linkColorHover;
-        color: #fff;
-        text-decoration: none;
-        text-shadow: 0 1px 1px rgba(0,0,0,.25);
-      }
-    }
-    &.active a {
-      background: @linkColor;
-      color: #fff;
-      text-shadow: 0 1px 1px rgba(0,0,0,.25);
-    }
-  }
-}
-
-
-// PAGINATION
-// ----------
-
-div.pagination {
-  height: @baseline * 2;
-  margin: @baseline 0;
-  ul {
-    float: left;
-    margin: 0;
-    border: 1px solid rgba(0,0,0,.15);
-    .border-radius(3px);
-    .box-shadow(0 1px 2px rgba(0,0,0,.075));
-    li {
-      display: inline;
-      a {
-        float: left;
-        padding: 0 14px;
-        line-height: (@baseline * 2) - 2;
-        border-right: 1px solid rgba(0,0,0,.15);
-        text-decoration: none;
-      }
-      a:hover,
-      &.active a {
-        background-color: lighten(@blue, 45%);
-      }
-      &.disabled a,
-      &.disabled a:hover {
-        background-color: none;
-        color: @grayLight;
-      }
-      &.next a,
-      &:last-child a {
-        border: 0;
-      }
-    }
-  }
-}
-
-
-// WELLS
-// -----
-
-div.well {
-  background: #f5f5f5;
-  margin-bottom: 20px;
-  padding: 19px;
-  min-height: 20px;
-  border: 1px solid #ddd;
-  .border-radius(4px);
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-}
-
-
-// MODALS
-// ------
-
-div.modal-backdrop {
-  background-color: rgba(0,0,0,.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-}
-div.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 2000;
-  width: 560px;
-  margin: -280px 0 0 -250px;
-  background-color: @white;
-  border: 1px solid rgba(0,0,0,.3);
-  .border-radius(6px);
-  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  .background-clip(padding);
-  .modal-header {
-    border-bottom: 1px solid #eee;
-    padding: 5px 20px;
-    a.close {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      color: #999;
-      line-height:10px;
-      font-size: 18px;
-    }
-  }
-  .modal-body {
-    padding: 20px;
-  }
-  .modal-footer {
-    background-color: #f5f5f5;
-    padding: 14px 20px 15px;
-    border-top: 1px solid #ddd;
-    .border-radius(0 0 6px 6px);
-    .box-shadow(inset 0 1px 0 #fff);
-    .clearfix();
-    .btn {
-      float: right;
-      margin-left: 10px;
-    }
-  }
-}
-
-
-// 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 #000;
-  }
-  .left(@arrowWidth: 5px) {
-    top: 50%;
-    right: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid #000;
-  }
-  .below(@arrowWidth: 5px) {
-    top: 0;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid #000;
-  }
-  .right(@arrowWidth: 5px) {
-    top: 50%;
-    left: 0;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid #000;
-  }
-}
-
-// TWIPSY
-// ------
-
-div.twipsy {
-  display: block;
-  position: absolute;
-  visibility: visible;
-  padding: 5px;
-  font-size: 11px;
-  z-index: 1000;
-  .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: #000;
-    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: 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: #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);
-    p, ul, ol {
-      margin-bottom: 0;
-    }
-  }
-}