style: 优化部分组件样式

qkiroc · Nov 9, 2023 · 8c99b91 · 8c99b91
1 parent 8532e6d
commit 8c99b91
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 124 deletions.
diff --git a/packages/amis-editor/src/plugin/Form/Picker.tsx b/packages/amis-editor/src/plugin/Form/Picker.tsx
@@ -50,7 +50,7 @@ export class PickerControlPlugin extends BasePlugin {
         value: 'B'
       }
     ],
-    modalClassName: 'app-popover'
+    modalClassName: 'app-popover :AMISCSSWrapper'
   };
   previewSchema: any = {
     type: 'form',

diff --git a/packages/amis-editor/src/plugin/Images.tsx b/packages/amis-editor/src/plugin/Images.tsx
@@ -20,7 +20,7 @@ export class ImagesPlugin extends BasePlugin {
   pluginIcon = 'images-plugin';
   scaffold = {
     type: 'images',
-    imageGallaryClassName: 'app-popover'
+    imageGallaryClassName: 'app-popover :AMISCSSWrapper'
   };
   previewSchema = {
     ...this.scaffold,

diff --git a/packages/amis-editor/src/plugin/Nav.tsx b/packages/amis-editor/src/plugin/Nav.tsx
@@ -29,6 +29,7 @@ export class NavPlugin extends BasePlugin {
   scaffold = {
     type: 'nav',
     stacked: true,
+    popupClassName: 'app-popover :AMISCSSWrapper',
     links: [
       {
         label: '页面1',

diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx
@@ -3212,7 +3212,7 @@ export const getEventControlConfig = (
           showCloseButton: true,
           showErrorMsg: true,
           showLoading: true,
-          className: 'app-popover',
+          className: 'app-popover :AMISCSSWrapper',
           actions: [
             {
               type: 'button',
@@ -3239,7 +3239,7 @@ export const getEventControlConfig = (
               inline: false
             }
           ],
-          className: 'app-popover',
+          className: 'app-popover :AMISCSSWrapper',
           actions: [
             {
               type: 'button',

diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss
@@ -274,22 +274,18 @@ $Table-strip-bg: transparent;
   --DropDown-menu-borderColor: var(--borderColor);
   --DropDown-menu-borderRadius: var(--borderRadius);
   --DropDown-menu-borderWidth: var(--borderWidth);
-  --DropDown-menu-boxShadow: var(--shadows-shadow-normal);
-  --DropDown-menu-height: #{px2rem(34px)};
+  --DropDown-menu-boxShadow: var(--Form-select-outer-boxShadow);
+  --DropDown-menu-height: #{px2rem(32px)};
   --DropDown-menu-minWidth: #{px2rem(160px)};
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
-  --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
+  --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg);
   --DropDown-group-color: #848b99;
   --DropDown-menuItem-color: #151a26;
-  --DropDown-menuItem-onHover-color: var(--colors-brand-5);
+  --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color);
   --DropDown-menuItem-onActive-color: var(--colors-brand-5);
   --DropDown-menuItem-onDisabled-color: #b4b6ba;
-  --DropDown-menuItem-paddingX: var(--gap-sm);
-  --DropDown-menuItem-paddingY: calc(
-    (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) /
-      2
-  );
+  --DropDown-menuItem-paddingX: var(--select-base-default-option-paddingRight);
 
   --Fieldset-legend-bgColor: var(--colors-neutral-fill-11);
 

diff --git a/packages/amis-ui/scss/components/_dropdown.scss b/packages/amis-ui/scss/components/_dropdown.scss
@@ -57,6 +57,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: px2rem(300px);
+      margin-top: px2rem(4px);
     }
   }
 
@@ -67,10 +68,11 @@
 
   &-menuItem,
   &-menu > li {
-    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    padding: 0 var(--DropDown-menuItem-paddingX);
     white-space: nowrap;
     box-sizing: border-box;
     height: var(--DropDown-menu-height);
+    line-height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
     color: var(--DropDown-menuItem-color);
@@ -95,7 +97,7 @@
 
     &.#{$ns}DropDown-divider {
       height: px2rem(1px);
-      margin: px2rem(9px) 0;
+      margin: px2rem(4px) 0;
       overflow: hidden;
       background: var(--DropDown-menu-borderColor);
       padding: 0;

diff --git a/packages/amis-ui/scss/components/_menu.scss b/packages/amis-ui/scss/components/_menu.scss
@@ -519,14 +519,13 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       display: inline-block;
       font-size: px2rem(9px);
-      vertical-align: middle;
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
       margin-left: px2rem(5px);
 
       & > svg {
-        top: auto;
+        top: 0;
       }
     }
 

diff --git a/packages/amis-ui/scss/components/_pagination.scss b/packages/amis-ui/scss/components/_pagination.scss
@@ -74,7 +74,7 @@
     }
   }
   &-simple {
-    >ul >li {
+    > ul > li {
       &:hover,
       &:focus {
         outline: none;
@@ -94,8 +94,6 @@
     }
   }
 
-
-
   &-next {
     > span {
       cursor: pointer;
@@ -113,55 +111,54 @@
     align-items: center;
     height: var(--Pagination-height);
 
-      &-left {
-        color: var(--Pagination-light-color);
-      }
-      input {
-        min-width: px2rem(50px);
-        width: px2rem(50px);
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        // height: var(--Pagination-height);
-        border: none;
-        border: var(--borderWidth) solid var(--borderColor);
-        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
-        padding: var(--Pagination-padding);
-        margin-left: px2rem(8px);
-        text-align: center;
-
-        &:focus,
-        &:hover {
-          outline: none;
-          // border: var(--borderWidth) solid var(--primary);
-          border-color: var(--primary);
-        }
+    &-left {
+      color: var(--Pagination-light-color);
+    }
+    input {
+      min-width: px2rem(50px);
+      width: px2rem(50px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      // height: var(--Pagination-height);
+      border: none;
+      border: var(--borderWidth) solid var(--borderColor);
+      border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+      padding: var(--Pagination-padding);
+      margin-left: px2rem(8px);
+      text-align: center;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        // border: var(--borderWidth) solid var(--primary);
+        border-color: var(--primary);
       }
-      &-right {
-        display: inline-block;
-        width: px2rem(32px);
-        cursor: pointer;
-        text-align: center;
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        border: var(--borderWidth) solid var(--borderColor);
-        border-left: none;
-        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-        font-size: var(--fontSizeSm);
-        &:hover {
-          color: var(--primary);
-          border-color: var(--primary);
-          border-left: var(--borderWidth) solid var(--primary);
-          margin-left: -1px;
-        }
+    }
+    &-right {
+      display: inline-block;
+      width: px2rem(32px);
+      cursor: pointer;
+      text-align: center;
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: var(--borderWidth) solid var(--borderColor);
+      border-left: none;
+      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+      font-size: var(--fontSizeSm);
+      &:hover {
+        color: var(--primary);
+        border-color: var(--primary);
+        border-left: var(--borderWidth) solid var(--primary);
+        margin-left: -1px;
       }
+    }
   }
 }
 
 .#{$ns}Pagination-wrap {
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }
@@ -198,4 +195,4 @@
   }
 
   text-align: right;
-}
+}
diff --git a/packages/amis-ui/scss/components/_tabs.scss b/packages/amis-ui/scss/components/_tabs.scss
@@ -18,10 +18,10 @@
 
     .#{$ns}Tabs-addable {
       display: flex;
-      margin-left: var(--Tabs-add-margin);
       align-items: center;
-      justify-content: flex-start;
-      padding: var(--Tabs--line-addPadding);
+      margin-left: var(--Tabs-add-margin);
+      margin-bottom: px2rem(3px);
+      padding-bottom: px2rem(8px);
       white-space: nowrap;
       cursor: pointer;
 
@@ -60,23 +60,29 @@
       // }
 
       &-arrow {
-        margin: var(--Tabs--line-addPadding);
         width: 16px;
         height: 100%;
         display: flex;
         align-items: center;
         cursor: pointer;
         box-sizing: content-box;
+        margin-bottom: px2rem(3px);
+        padding-bottom: px2rem(8px);
 
-        .iconfont {
-          font-size: var(--Remark-icon-fontSize);
+        .icon {
+          top: 0;
+          width: var(--Remark-icon-fontSize);
+          height: var(--Remark-icon-fontSize);
         }
         &:hover {
           color: var(--icon-onHover-color);
         }
 
         &--left {
           padding-right: 16px;
+          svg {
+            transform: rotate(180deg);
+          }
         }
 
         &--right {
@@ -672,6 +678,7 @@
       .#{$ns}Tabs-addable {
         padding: 0 var(--Tabs--tiled-add-gap);
         margin-left: 0;
+        margin-bottom: 0;
         white-space: nowrap;
         border-style: solid;
         border-color: var(--Tabs-borderColor);
@@ -1112,6 +1119,7 @@
       & > .#{$ns}Tabs-linksContainer {
         > .#{$ns}Tabs-linksContainer-arrow {
           margin-bottom: 0;
+          padding: 0;
         }
 
         > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
@@ -1224,21 +1232,6 @@
       > .#{$ns}Tabs-linksContainer {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
 
-        &.#{$ns}Tabs-linksContainer--overflow
-          > .#{$ns}Tabs-linksContainer-main
-          > .#{$ns}Tabs-links
-          > .#{$ns}Tabs-link {
-          &:first-of-type {
-            border-left-width: 0;
-            border-top-left-radius: 0;
-          }
-
-          &:last-of-type {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-          }
-        }
-
         .#{$ns}Tabs-linksContainer-arrow {
           width: var(--Tabs--strong-arrow-size);
           margin-bottom: 0;
@@ -1250,14 +1243,14 @@
 
           &--left {
             padding-right: 0;
-            border-right-width: 0;
             border-top-left-radius: var(--Tabs-borderRadius);
+            margin-right: px2rem(8px);
           }
 
           &--right {
             padding-left: 0;
-            border-left-width: 0;
-            border-top-right-radius: var(--Tabs-borderRadius);
+            border-top-left-radius: var(--Tabs-borderRadius);
+            margin-left: px2rem(8px);
           }
         }
 

diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss
@@ -257,12 +257,9 @@
 }
 
 .#{$ns}DateRangePicker-popover {
-  margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 .#{$ns}DateRangePicker-popup {

diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss
@@ -200,11 +200,9 @@
 
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 // 移动端输入框样式