Add Popovers code

8 files changed, 84 insertions, 12 deletions

diff --git a/src/animations.less b/src/animations.less
index 1b7f2c0..594c51d 100644
--- a/src/animations.less
+++ b/src/animations.less
@@ -10,11 +10,11 @@
 
 @keyframes slide-down {
   0% {
-    transform: translateY(-3rem);
     opacity: 0;
+    transform: translateY(-3rem);
   }
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }
diff --git a/src/cards.less b/src/cards.less
index f237eb8..107bfb5 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -41,7 +41,7 @@
   }
 
   .card-subtitle {
-    color: @gray-color;
     font-size: @font-size-sm;
+    opacity: .5;
   }
 }
diff --git a/src/empty.less b/src/empty.less
index 9471227..a82a1da 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -12,7 +12,7 @@
   }
 
   .empty-subtitle {
-    color: @gray-color;
+    opacity: .5;
   }
 
   .empty-action {
diff --git a/src/menus.less b/src/menus.less
index 1204c36..e46a0b5 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -2,11 +2,11 @@
 .menu {
   background: @bg-color-light;
   border-radius: @border-radius;
+  box-shadow: @shadow-1;
   list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: 1rem;
-  box-shadow: @shadow-1;
   transform: translateY(.5rem);
   z-index: @zindex-1;
 
diff --git a/src/panels.less b/src/panels.less
index f696170..09a7c74 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -26,6 +26,6 @@
   }
 
   .panel-subtitle {
-    color: @gray-color;
+    opacity: .5;
   }
 }
diff --git a/src/popovers.less b/src/popovers.less
new file mode 100644
index 0000000..1e3e090
--- /dev/null
+++ b/src/popovers.less
@@ -0,0 +1,72 @@
+// Popovers
+.popover {
+  display: inline-block;
+  position: relative;
+
+  .popover-container {
+    content: attr(data-tooltip);
+    opacity: 0;
+    left: 50%;
+    padding: @layout-padding;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform .2s ease;
+    width: 32rem;
+    z-index: @zindex-4;
+  }
+
+  :focus + .popover-container,
+  &:hover .popover-container,
+  .popover-container:hover {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+
+  &.popover-right {
+    .popover-container {
+      left: 100%;
+      top: 50%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(0, -50%) scale(1);
+    }
+  }
+
+  &.popover-bottom {
+    .popover-container {
+      left: 50%;
+      top: 100%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(-50%, 0) scale(1);
+    }
+  }
+
+  &.popover-left {
+    .popover-container {
+      left: 0;
+      top: 50%;
+    }
+
+    :focus + .popover-container,
+    &:hover .popover-container,
+    .popover-container:hover {
+      transform: translate(-100%, -50%) scale(1);
+    }
+  }
+
+  .card {
+    background: fade(@dark-color, 95%);
+    border: 0;
+    box-shadow: @shadow-4;
+    color: @light-color;
+  }
+}
diff --git a/src/tiles.less b/src/tiles.less
index 2b8db28..cf1758d 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -21,8 +21,8 @@
     font-weight: 500;
   }
   .tile-subtitle {
-    color: @gray-color;
     line-height: 2rem;
+    opacity: .5;
   }
 
   &.tile-centered {
diff --git a/src/tooltips.less b/src/tooltips.less
index 29801a8..25e7bf6 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -17,8 +17,8 @@
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    transform: translate(-50%, 0);
-    transition: transform .2s ease;
+    transform: translate(-50%, 1rem);
+    transition: all .2s ease;
     white-space: nowrap;
     z-index: @zindex-2;
   }
@@ -38,7 +38,7 @@
     &::after {
       bottom: 50%;
       left: 100%;
-      transform: translate(0, 50%);
+      transform: translate(-1rem, 50%);
     }
     &:focus,
     &:hover {
@@ -51,7 +51,7 @@
     &::after {
       bottom: auto;
       top: 100%;
-      transform: translate(-50%, 0);
+      transform: translate(-50%, -1rem);
     }
     &:focus,
     &:hover {
@@ -65,7 +65,7 @@
       bottom: 50%;
       left: auto;
       right: 100%;
-      transform: translate(0, 50%);
+      transform: translate(1rem, 50%);
     }
     &:focus,
     &:hover {