From d447898bf251cfa4cc6b1c8f9cb4c238ad12ef52 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Tue, 3 May 2011 18:09:25 -0700
Subject: rearranging everything

---
 lib/patterns.less | 526 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 526 insertions(+)
 create mode 100644 lib/patterns.less

(limited to 'lib/patterns.less')

diff --git a/lib/patterns.less b/lib/patterns.less
new file mode 100644
index 000000000..ddad5271d
--- /dev/null
+++ b/lib/patterns.less
@@ -0,0 +1,526 @@
+/*
+	Patterns.less
+	Repeatable UI elements outside the base styles provided from the scaffolding
+*/
+
+
+/* Top bar
+-------------------------------------------------- */
+
+/*
+div.topbar {
+  #gradient > .vertical(#333, #222);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 40px;
+  .box-shadow(0 1px 3px rgba(0,0,0,.5));
+  a {
+    color: #999;
+    &:hover {
+      color: @white;
+      text-decoration: none;
+      background-color: rgba(255,255,255,.05);
+    }
+  }
+  a.logo,
+  ul li a {
+    float: left;
+    padding: 0 10px;
+    line-height: 40px;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+  // Logo
+  a.logo {
+    margin-left: -10px;
+    margin-right: 10px;
+    color: @gray-light;
+    font-size: 20px;
+    font-weight: 200;
+    img {
+      float: left;
+      margin-top: 9px;
+      margin-right: 6px;
+    }
+    &:hover {
+      color: @white;
+    }
+  }
+  // Nav items
+  ul {
+    float: left;
+    margin: 0;
+    li {
+      display: inline;
+      &.active a {
+        color: #fff;
+        background-color: rgba(0,0,0,.5);
+      }
+    }
+  }
+}
+*/
+
+// Topbar for Branding and Nav
+div.topbar {
+  #gradient > .vertical(#333, #222);
+  height: 40px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  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: @gray-light;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+    .transition(all linear .1s);
+  }
+  // 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 {
+      display: inline;
+      float: left;
+      margin-right: 6px;
+    }
+  }
+  // Search Form
+  form {
+    float: left;
+    margin: 4px 0 0 0;
+    opacity: 1;
+    position: relative;
+    input {
+      background-color: @gray-light;
+      background-color: rgba(255,255,255,.3);
+      .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: @gray-lighter;
+      }
+      &::-webkit-input-placeholder {
+        color: @gray-lighter;
+      }
+      &:hover {
+        background-color: #444;
+        background-color: rgba(255,255,255,.5);
+        color: #fff;
+      }
+      &:focus,
+      &.focused {
+        outline: none;
+        background-color: #fff;
+        color: @gray-dark;
+        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;
+    &.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);
+        font-weight: bold;
+      }
+      // Vertical rule
+      &.vr {
+        border-left: 1px solid #008db8;
+        border-right: 1px solid #00a0d1;
+        height: 26px;
+        margin: 6px 3px 1px 3px;
+      }
+    }
+    // Dropdowns
+    &.primary-nav li ul {
+      left: 0;
+    }
+    &.secondary-nav li ul {
+      right: 0;
+    }
+    li.menu {
+      position: relative;
+      a.menu {
+        &:after {
+          width: 7px;
+          height: 7px;
+          display: inline-block;
+          background: transparent url(assets/img/dropdown-arrow.gif) no-repeat top center;
+          content: "&darr;";
+          text-indent: -99999px;
+          vertical-align: top;
+          margin-top: 8px;
+          margin-left: 4px;
+          opacity: .5;
+        }
+      }
+      &.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: #666;
+          border-top: 1px solid rgba(0,0,0,.2);
+        }
+      }
+    }
+  }
+}
+
+/* Page Headers
+-------------------------------------------------- */
+
+div.page-header {
+  margin-bottom: @baseline - 1;
+  border-bottom: 1px solid #ddd;
+  .border-radius(6px 6px 0 0);
+  .box-shadow(0 1px 0 rgba(255,255,255,.5));
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+
+/* Error Styles
+-------------------------------------------------- */
+
+// One-liner alert bars
+div.alert-message {
+  #gradient > .vertical(transparent, rgba(0,0,0,0.15));
+  background-color: @gray-lighter;
+  margin-bottom: @baseline;
+  padding: 10px 15px 9px;
+  .border-radius(6px);
+  color: #fff;
+  border-bottom: 1px solid rgba(0,0,0,.25);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  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;
+    opacity: .5;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    text-shadow: 0 1px 0 rgba(0,0,0,.5);
+    .border-radius(3px);
+    &:hover {
+      opacity: 1;
+      text-decoration: none;
+    }
+  }
+}
+
+// Block-level Alerts
+div.block-message {
+  margin-bottom: @baseline;
+  padding: 14px 19px;
+  color: #333;
+  color: rgba(0,0,0,.8);
+  text-shadow: 0 1px 0 rgba(255,255,255,.25);
+  .border-radius(6px);
+  p {
+    font-size: 13px;
+    line-height: 18px;
+    color: #333;
+    color: rgba(0,0,0,.8);
+    margin-right: 30px;
+    margin-bottom: 0;
+  }
+  ul {
+    margin-bottom: 0;
+  }
+  strong {
+    display: block;
+  }
+  a.close {
+    display: block;
+    color: #333;
+    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 {
+      display: inline;
+      float: left;
+      width: auto;
+    }
+  }
+}
+// Basic Tabs
+ul.tabs {
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+  li {
+    a {
+      margin-bottom: -1px;
+      margin-right: 2px;
+      padding: 0 15px;
+      line-height: (@baseline * 2) - 1;
+      .border-radius(3px 3px 0 0);
+      &:hover {
+        background: #f5f5f5;
+        border-bottom: 1px solid #ccc;
+      }
+    }
+    &.active a {
+      background: #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: @link-hover-color;
+        color: #fff;
+        text-decoration: none;
+        text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      }
+    }
+    &.active a {
+      background: @link-color;
+      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 {
+        display: inline;
+        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: @gray-light;
+      }
+      &.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,.075);
+}
-- 
cgit v1.2.3