From 5f20ad0b8ca7abe10129c6874ced0a2afa4145ac Mon Sep 17 00:00:00 2001
From: hsm-lv <80095014+hsm-lv@users.noreply.github.com>
Date: Tue, 16 Nov 2021 15:39:03 +0800
Subject: [PATCH] fix:popover&fieldset style (#2961)

---
 scss/components/_popover.scss   |  7 +++++++
 scss/themes/_cxd-variables.scss |  5 ++---
 scss/themes/cxd.scss            | 28 ++++++++++++++++------------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/scss/components/_popover.scss b/scss/components/_popover.scss
index 7606d5a85..ef01646ac 100644
--- a/scss/components/_popover.scss
+++ b/scss/components/_popover.scss
@@ -44,4 +44,11 @@
       background: rgba(0, 0, 0, 0.3);
     }
   }
+
+  &--leftBottomLeftTop {
+    transform: translateY(px2rem(4px));
+  }
+  &--leftTopLeftBottom {
+    transform: translateY(px2rem(-4px));
+  }
 }
diff --git a/scss/themes/_cxd-variables.scss b/scss/themes/_cxd-variables.scss
index 5de5f12fc..954d8f6a8 100644
--- a/scss/themes/_cxd-variables.scss
+++ b/scss/themes/_cxd-variables.scss
@@ -10,7 +10,7 @@ $primary: $B6;
 $success: $S6;
 $warning: $W6;
 $danger: $E6;
-$light: #1ac5ff;
+$light: #eaf6fe;
 $white: #fff;
 $secondary: $G6;
 
@@ -237,8 +237,7 @@ $R8: 50%;
   --Collapse-header-bg: #{$G10};
   --Collapse-header-onHover-bg: #{$G9};
   --Collapse-header-collapsed-border: none;
-  --Collapse-header-collapsed-borderTop: var(--borderWidth) solid
-    var(--Collapse-border-color);
+  --Collapse-header-collapsed-borderTop: none;
   --Collapse-header-collapsed-borderBottom: none;
   --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 1d734ee1f..4b571fa46 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -54,7 +54,6 @@
 
 .#{$ns}Select {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     .#{$ns}Select-menu {
       border-radius: #{$R3};
       .#{$ns}Select-option {
@@ -67,7 +66,6 @@
 
 .#{$ns}NestedSelectControl {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     .#{$ns}NestedSelect-menuOuter {
       .#{$ns}NestedSelect-menu {
         border-radius: #{$R3};
@@ -89,7 +87,6 @@
 
 .#{$ns}TreeSelectControl {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
     .#{$ns}Tree {
       border-radius: #{$R3};
@@ -100,7 +97,6 @@
 
 .#{$ns}DropDown {
   .#{$ns}DropDown-menu {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     border: none;
     > li {
       color: #{$G2};
@@ -155,7 +151,6 @@
 .#{$ns}ColorPicker {
   .#{$ns}PopOver {
     border: none;
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
   }
 }
@@ -164,7 +159,6 @@
   .#{$ns}IconPickerControl-input--withAC {
     .#{$ns}IconPickerControl-sugsPanel {
       border: none;
-      top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
       box-shadow: var(--boxShadow);
       border-radius: px2rem(3px);
     }
@@ -186,7 +180,6 @@
 .#{$ns}LocationControl {
   .#{$ns}PopOver {
     border: none;
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
   }
 }
@@ -244,6 +237,9 @@
 }
 
 .#{$ns}Drawer--right {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} 0 0 0;
+  }
   .#{$ns}Drawer-footer {
     justify-content: flex-end;
     .#{$ns}Button {
@@ -253,6 +249,9 @@
 }
 
 .#{$ns}Drawer--left {
+  .#{$ns}Drawer-header {
+    border-radius: 0 #{$R4} 0 0;
+  }
   .#{$ns}Drawer-footer {
     .#{$ns}Button {
       margin-left: #{px2rem(16px)};
@@ -260,8 +259,17 @@
   }
 }
 
-.#{$ns}Drawer--top,
+.#{$ns}Drawer--top {
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
 .#{$ns}Drawer--bottom {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} #{$R4} 0 0;
+  }
   .#{$ns}Drawer-footer {
     .#{$ns}Button {
       margin-left: #{px2rem(16px)};
@@ -354,10 +362,6 @@
 .#{$ns}Form {
   .#{$ns}Collapse {
     border: none;
-
-    &-arrow {
-      margin-left: px2rem(8px);
-    }
     &-header {
       background-color: var(--white);
       display: inline-flex;