From 13d4234f89d9045e3ee2352f1c359b560e198000 Mon Sep 17 00:00:00 2001
From: nohros
Date: Thu, 6 Feb 2014 20:06:45 -0200
Subject: Added a new theme that make the popover looks like a tooltip.

---
 sass/ns-popover.scss | 131 ++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 125 insertions(+), 6 deletions(-)

(limited to 'sass')

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
-- 
cgit v1.2.3