Added a new theme that make the popover looks like a tooltip.0.5.2

2 files changed, 142 insertions, 16 deletions

diff --git a/example/index.html b/example/index.html
index 7b46b64..8460374 100644
--- a/example/index.html
+++ b/example/index.html
@@ -12,14 +12,17 @@
   <script src="index.js"></script>

 

   <script type="text/ng-template" id="menu">

-    <ul>

-      <li ng-repeat="item in items"><a>{{item.name}}</a></li>

-    </ul>

+    <div class="triangle"></div>

+    <div class="ns-popover-tooltip">

+      <ul>

+        <li ng-repeat="item in items"><a>{{item.name}}</a></li>

+      </ul>

+    </div>

   </script>

 

   <script type="text/ng-template" id="tooltip">

-    <div class="arrow-up"></div>

-    <div class="tooltip">

+    <div class="triangle"></div>

+    <div class="ns-popover-tooltip">

       Cool! The <b>nsPopover</b> could be used as a tooptip.

     </div>

   </script>

@@ -29,31 +32,35 @@
 

 <section viewport-width>

   <h1> Popovers </h1>

-  <article>

+    <article>

     <button ns-popover

             ns-popover-template="menu"

-            ns-popover-trigger="click">

+            ns-popover-trigger="click"

+            ns-popover-theme="ns-popover-tooltip-theme">

       Popover on bottom

     </button>

 

     <button ns-popover

             ns-popover-template="menu"

             ns-popover-trigger="click"

-            ns-popover-placement="top|left">

+            ns-popover-placement="top|left"

+            ns-popover-theme="ns-popover-tooltip-theme">

       Popover on top

     </button>

 

     <button ns-popover

             ns-popover-template="tooltip"

             ns-popover-trigger="click"

-            ns-popover-placement="left">

+            ns-popover-placement="left"

+            ns-popover-theme="ns-popover-tooltip-theme">

       Popover on left

     </button>

 

     <button ns-popover

             ns-popover-template="tooltip"

             ns-popover-trigger="click"

-            ns-popover-placement="right">

+            ns-popover-placement="right"

+            ns-popover-theme="ns-popover-tooltip-theme">

       Popover on right

     </button>

   </article>

diff --git a/sass/ns-popover.scss b/sass/ns-popover.scss
index c79e37f..bf6f7da 100644
--- a/sass/ns-popover.scss
+++ b/sass/ns-popover.scss
@@ -1,9 +1,15 @@
+$popover-triangle-size: 0.6875rem !default;

+$popover-triangle-color: #fff;

+

 .ns-popover-list-theme {

   box-sizing: border-box;

   border: solid 1px #d2d2d2;

   border-radius: 3px;

   z-index: 100;

   background-color: #fff;

+  -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

+     -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

+          box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

 

   ul, .list {

     padding: 0;

@@ -25,16 +31,129 @@
   }

 }

 

+// @mixins

+//

+// We use this to create equilateral triangles

+// $triangle-size - Used to set border-size. No default, set a px or em size.

+// $triangle-color - Used to set border-color which makes up triangle. No default

+// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right

+@mixin triangle($triangle-direction, $triangle-size:$popover-triangle-size, $triangle-color:$popover-triangle-color) {

+  content: "";

+  display: block;

+  width: 0;

+  height: 0;

+  border: solid $triangle-size;

+  border-color: transparent;

+  position: absolute;

+

+  &:after {

+    content: " ";

+    display: block;

+    width:0;

+    height:0;

+    border: solid ($triangle-size - 0.0625rem);

+    border-color: transparent;

+    position: absolute;

+  }

+

+  @if ($triangle-direction == top) {

+    border-top-color: rgba(0,0,0,0.25);

+    left:50%;

+    bottom: -$triangle-size;

+    margin-left: -$triangle-size;

+

+    &:after {

+      border-top-color: $triangle-color;

+      border-bottom-width: 0;

+      bottom: 0.0625rem;

+      margin-left: -($triangle-size - 0.0625rem);

+    }

+  }

+

+  @if ($triangle-direction == bottom) {

+    border-bottom-color: rgba(0,0,0,0.25);

+    left:50%;

+    top: -$triangle-size;

+    margin-left: -$triangle-size;

+

+    &:after {

+      border-bottom-color: $triangle-color;

+      border-top-width: 0;

+      top: 0.0625rem;

+      margin-left: -($triangle-size - 0.0625rem);

+    }

+  }

+

+  @if ($triangle-direction == left) {

+    border-left-color: rgba(0,0,0,0.25);

+    top:50%;

+    right: -$triangle-size;

+    margin-top: -$triangle-size;

+

+    &:after {

+      border-left-color: $triangle-color;

+      border-right-width: 0;

+      right: 0.0625rem;

+      bottom: -($triangle-size - 0.0625rem);

+    }

+  }

+

+  @if ($triangle-direction == right) {

+    border-right-color: rgba(0,0,0,0.25);

+    top:50%;

+    left: -$triangle-size;

+    margin-top: -$triangle-size;

+

+    &:after {

+      border-right-color: $triangle-color;

+      border-left-width: 0;

+      left: 0.0625rem;

+      bottom: -($triangle-size - 0.0625rem);

+    }

+  }

+}

+

 .ns-popover-tooltip-theme {

   box-sizing: border-box;

   z-index: 100;

   background-color: transparent;

 

-  &.ns-popover-center-align {

-    width: 0;

-    height: 0;

-    border-style: none solid solid solid;

-    border-width: 0 0.3125rem 0.3125rem 0.3125rem;

-    border-color: #fff transparent transparent transparent;

+  .ns-popover-tooltip {

+    box-sizing: border-box;

+    border: solid 1px #d2d2d2;

+    border-radius: 3px;

+    z-index: 100;

+    background-color: #fff;

+    padding: 0.5625rem 0.875rem;

+    max-width: 20rem;

+    font-size: 0.875rem;

+    -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

+       -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

+            box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);

+    margin: $popover-triangle-size - 0.0625rem;

+  }

+

+  &.ns-popover-bottom-placement {

+    .triangle {

+      @include triangle("bottom");

+    }

+  }

+

+  &.ns-popover-top-placement {

+    .triangle {

+      @include triangle("top");

+    }

+  }

+

+  &.ns-popover-right-placement {

+    .triangle {

+      @include triangle("right");

+    }

+  }

+

+  &.ns-popover-left-placement {

+    .triangle {

+      @include triangle("left");

+    }

   }

 }
\ No newline at end of file