diff options
| author | nohros | 2014-02-06 20:06:45 -0200 |
|---|---|---|
| committer | nohros | 2014-02-06 20:06:45 -0200 |
| commit | 13d4234f89d9045e3ee2352f1c359b560e198000 (patch) | |
| tree | d78f11652cd8e58b6eb1077d55cf626062d89a1b /sass/ns-popover.scss | |
| parent | 70469eef704a7ad1fdd23fdc3ff37fa3db0e1343 (diff) | |
| download | nsPopover-13d4234f89d9045e3ee2352f1c359b560e198000.tar.bz2 | |
Added a new theme that make the popover looks like a tooltip.0.5.2
Diffstat (limited to 'sass/ns-popover.scss')
| -rw-r--r-- | sass/ns-popover.scss | 131 |
1 files changed, 125 insertions, 6 deletions
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 |