u

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

@@ -1,58 +1,31 @@
-.popup-reference {
-  display: inline-block; /* keeps reference size */
-}
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
 
-.popup {
+$popup-prefix: "#{$prefix}-popup";
+
+.#{$popup-prefix} {
   position: absolute;
-  background: #333;
+  background-color: #333;
   color: #fff;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 13px;
-  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 2px;
   z-index: 1000;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
 
-  .popup-content {
-    pointer-events: none;
-  }
-
-  .popup-arrow {
+  &-arrow {
     position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
+    width: 8px;
+    height: 8px;
   }
 
-  &.popup-top .popup-arrow {
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 6px 6px 0 6px;
-    border-color: #333 transparent transparent transparent;
-  }
-
-  &.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;
+  &-arrow::before {
+    position: absolute;
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: #333;
+    transform: rotate(45deg);
+    box-sizing: border-box;
   }
 }