u

code/base-project/base-vue/packages/ao-design/src/popup/index.scss

@@ -1,10 +1,58 @@
-@use '../_styles/_variables.scss' as *;
+.popup-reference {
+  display: inline-block; /* keeps reference size */
+}
 
-$popup-prefix: #{$prefix}-popup;
+.popup {
+  position: absolute;
+  background: #333;
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+
+  .popup-content {
+    pointer-events: none;
+  }
+
+  .popup-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  &.popup-top .popup-arrow {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px 6px 0 6px;
+    border-color: #333 transparent transparent transparent;
+  }
 
-.#{$popup-prefix} {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
+  &.popup-bottom .popup-arrow {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 6px 6px 6px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.popup-left .popup-arrow {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 0 6px 6px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.popup-right .popup-arrow {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 6px 6px 0;
+    border-color: transparent #333 transparent transparent;
+  }
 }