Merge pull request #128 from pivotal-cf/notifications

feat(dropdown-notifications): add notification dropdown component
pivotal-cf · Jan 27, 2015 · 1f70e97 · 1f70e97
2 parents 173873d + e968a9d
commit 1f70e97
Showing 1 changed file with 106 additions and 0 deletions.
diff --git a/src/pivotal-ui/components/dropdowns.scss b/src/pivotal-ui/components/dropdowns.scss
@@ -164,3 +164,109 @@ Here are all the different dropdown styles:
 .dropdown-menu {
   @include box-shadow(0 2px 2px rgba(0,0,0,.15));
 }
+
+
+/*doc
+---
+title: Notifications 
+name: dropdown_notification 
+parent: dropdown
+---
+
+This is a notification dropdown with no notifications.
+
+```html_example
+<div class="dropdown btn-group">
+  <a data-toggle="dropdown" class="dropdown-toggle btn btn-link" type="button">
+    <i class="fa fa-bell type-neutral-6 h2 mvn mrm"></i>
+  </a>
+  <ul class="dropdown-menu" role="menu">
+    <li role="presentation">
+      <div class="dropdown-notifications-none">
+        <i class="fa fa-bell type-neutral-6"></i>
+        <p class="type-neutral-4 em-alt mbn">No notifications</p>
+      </div>
+    </li>
+  </ul>
+</div>
+```
+
+This is a notification dropdown with notifications.
+
+```html_example
+<div class="dropdown btn-group">
+  <a data-toggle="dropdown" class="dropdown-toggle btn btn-link" type="button">
+    <i class="fa fa-bell type-neutral-6 h2 mvn"></i>
+    <span class="dropdown-notifications-badge">2</span>
+  </a>
+  <ul class="dropdown-menu dropdown-notifications-list" role="menu">
+    <li role="presentation">
+      <a role="menuitem" href="https://twitter.com/fat">
+        <div class="media man pan">
+          <div class="media-left media-middle">
+            <h3 class="label label-primary mrm">New</h3>
+          </div>
+          <div class="media-body media-middle">
+            <h5 class="media-heading mbn type-dark-1">Notification</h5>
+            <p class="type-sm type-neutral-5 mvn">News for you</p>
+          </div>
+        </div>
+      </a>
+    </li>
+    <li role="presentation">
+      <a role="menuitem" href="https://twitter.com/fat">
+        <div class="media man pan">
+          <div class="media-left media-middle">
+            <h3 class="label label-primary mrm">New</h3>
+          </div>
+          <div class="media-body media-middle">
+            <h5 class="media-heading mbn type-dark-1">Pivotal-CF</h5>
+            <p class="type-sm type-neutral-5 mvn">1 New File Available</p>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+```
+
+*/
+
+.dropdown-notifications-none {
+  width: 200px;
+  text-align: center;
+  padding: 20px;
+
+  text-align: center;
+  i {
+    font-size: 42px;
+    padding-bottom: 7px;
+  }
+}
+
+.dropdown-notifications-badge {
+  position: absolute;
+  border-radius: 1000em;
+  background-color: $brand-3;
+  text-align: center;
+  color: white;
+  font-size: 0.75em;
+  padding: 0 4px;
+  height: 14px;
+  line-height: 14px;
+  top: 6px;
+  right: 9px;
+}
+
+.dropdown-notifications-list {
+  li {
+    a {
+      padding-bottom: 10px;
+    }
+    &:last-child {
+      a {
+        padding-bottom: 0;
+      }
+    }
+  }
+}