From b462f1c6c4d9022b20b81ec512534a759a9c288c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 16 Oct 2018 09:41:33 +0200
Subject: [PATCH] styling tooltips and popovers

---
 assets/styles/imports/_tooltip.scss | 110 ++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 assets/styles/imports/_tooltip.scss

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
new file mode 100644
index 000000000..04060b86c
--- /dev/null
+++ b/assets/styles/imports/_tooltip.scss
@@ -0,0 +1,110 @@
+@import 'vue-cion-design-system/src/system/tokens/generated/tokens.scss';
+
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: white;
+    color: $text-color-base;
+    border-radius: $border-radius-large;
+    padding: $space-x-small $space-small;
+    box-shadow: $box-shadow-large;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: white;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    .popover-inner {
+      background: white;
+      color: $text-color-base;
+      border-radius: $border-radius-large;
+      padding: $space-x-small $space-small;
+      box-shadow: $box-shadow-large;
+    }
+
+    .popover-arrow {
+      border-color: white;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}