optimize the style of the popover component

Author: tangjinzhou

components/popover/style/index.less

@@ -9,16 +9,16 @@
   top: 0;
   left: 0;
   z-index: @zindex-popover;
-  cursor: auto;
-  user-select: text;
-  white-space: normal;
   font-weight: normal;
+  white-space: normal;
   text-align: left;
+  cursor: auto;
+  user-select: text;
 
-  &:after {
-    content: '';
+  &::after {
     position: absolute;
-    background: rgba(255, 255, 255, 0.01);
+    background: fade(@white, 1%);
+    content: '';
   }
 
   &-hidden {
@@ -55,16 +55,24 @@
     background-clip: padding-box;
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
+    box-shadow: ~'0 0 8px @{shadow-color} \9';
+  }
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* IE10+ */
+    &-inner {
+      box-shadow: @box-shadow-base;
+    }
   }
 
   &-title {
     min-width: @popover-min-width;
+    min-height: 32px;
     margin: 0; // reset heading margin
     padding: 5px @padding-md 4px;
-    min-height: 32px;
-    border-bottom: 1px solid @border-color-split;
     color: @heading-color;
     font-weight: 500;
+    border-bottom: 1px solid @border-color-split;
   }
 
   &-inner-content {
@@ -73,10 +81,10 @@
   }
 
   &-message {
+    position: relative;
     padding: 4px 0 12px;
-    font-size: @font-size-base;
     color: @popover-color;
-    position: relative;
+    font-size: @font-size-base;
     > .@{iconfont-css-prefix} {
       position: absolute;
       top: 8px; // 4px for padding-top, 4px for vertical middle;
@@ -89,8 +97,8 @@
   }
 
   &-buttons {
-    text-align: right;
     margin-bottom: 4px;
+    text-align: right;
     button {
       margin-left: 8px;
     }
@@ -100,22 +108,25 @@
   // .popover-arrow is outer, .popover-arrow:after is inner
 
   &-arrow {
-    background: @popover-bg;
-    background-color: inherit;
-    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
-    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
-    transform: rotate(45deg);
     position: absolute;
     display: block;
-    border-color: transparent;
+    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    background: transparent;
+    border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
     border-style: solid;
+    transform: rotate(45deg);
   }
 
   &-placement-top > &-content > &-arrow,
   &-placement-topLeft > &-content > &-arrow,
   &-placement-topRight > &-content > &-arrow {
-    bottom: @popover-distance - @popover-arrow-width + 1.5px;
-    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+    bottom: @popover-distance - @popover-arrow-width + 2.2px;
+    border-top-color: transparent;
+    border-right-color: @popover-bg;
+    border-bottom-color: @popover-bg;
+    border-left-color: transparent;
+    box-shadow: 3px 3px 7px fade(@black, 7%);
   }
   &-placement-top > &-content > &-arrow {
     left: 50%;
@@ -132,7 +143,11 @@
   &-placement-rightTop > &-content > &-arrow,
   &-placement-rightBottom > &-content > &-arrow {
     left: @popover-distance - @popover-arrow-width + 2px;
-    box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: @popover-bg;
+    border-left-color: @popover-bg;
+    box-shadow: -3px 3px 7px fade(@black, 7%);
   }
   &-placement-right > &-content > &-arrow {
     top: 50%;
@@ -149,7 +164,11 @@
   &-placement-bottomLeft > &-content > &-arrow,
   &-placement-bottomRight > &-content > &-arrow {
     top: @popover-distance - @popover-arrow-width + 2px;
-    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+    border-top-color: @popover-bg;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: @popover-bg;
+    box-shadow: -2px -2px 5px fade(@black, 6%);
   }
   &-placement-bottom > &-content > &-arrow {
     left: 50%;
@@ -166,7 +185,11 @@
   &-placement-leftTop > &-content > &-arrow,
   &-placement-leftBottom > &-content > &-arrow {
     right: @popover-distance - @popover-arrow-width + 2px;
-    box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+    border-top-color: @popover-bg;
+    border-right-color: @popover-bg;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    box-shadow: 3px -3px 7px fade(@black, 7%);
   }
   &-placement-left > &-content > &-arrow {
     top: 50%;

components/style/themes/default.less

@@ -13,6 +13,8 @@
 @highlight-color : @red-6;
 @warning-color : @gold-6;
 @normal-color : #d9d9d9;
+@white: #fff;
+@black: #000;
 
 // Color used by default to control hover and active backgrounds and for
 // alert info backgrounds.
@@ -292,20 +294,20 @@
 
 // Popover
 // ---
-//** Popover body background color
+// Popover body background color
 @popover-bg: #fff;
-//** Popover text color
+// Popover text color
 @popover-color: @text-color;
-//** Popover maximum width
+// Popover maximum width
 @popover-min-width: 177px;
-//** Popover arrow width
+// Popover arrow width
 @popover-arrow-width: 6px;
-//** Popover arrow color
+// Popover arrow color
 @popover-arrow-color: @popover-bg;
-//** Popover outer arrow width
-//** Popover outer arrow color
+// Popover outer arrow width
+// Popover outer arrow color
 @popover-arrow-outer-color: @popover-bg;
-//** Popover distance with trigger
+// Popover distance with trigger
 @popover-distance: @popover-arrow-width + 4px;
 
 // Modal