amis-ui 2.8.0 → 3.0.0

package/scss/components/_button-group.scss

@@ -6,13 +6,13 @@
   > .#{$ns}Button {
     position: relative;
     flex: 0 1 auto;
-    max-width: px2rem(140px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  > .#{$ns}Button {
+  > .#{$ns}Button,
+  .#{$ns}Badge {
     @include hover {
       z-index: 1;
     }
@@ -25,10 +25,22 @@
     }
   }
 
+  .#{$ns}Badge {
+    .#{$ns}Badge-text,
+    .#{$ns}Badge-dot,
+    .#{$ns}Badge-ribbon,
+    .#{$ns}Badge-dot {
+      z-index: 2;
+    }
+  }
+
   .#{$ns}Button + .#{$ns}Button,
   .#{$ns}Button + .#{$ns}ButtonGroup,
+  .#{$ns}Button + .#{$ns}Badge,
   .#{$ns}ButtonGroup + .#{$ns}Button,
-  .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+  .#{$ns}ButtonGroup + .#{$ns}ButtonGroup,
+  .#{$ns}Badge + .#{$ns}Badge,
+  .#{$ns}Badge + .#{$ns}Button {
     margin-left: calc(var(--ButtonGroup-borderWidth) * -1);
   }
 
@@ -51,7 +63,8 @@
 }
 
 .#{$ns}ButtonGroup {
-  > .#{$ns}Button:first-child {
+  > .#{$ns}Button:first-child,
+  > .#{$ns}Badge .#{$ns}Button {
     margin-left: 0;
   }
 
@@ -62,13 +75,15 @@
   }
 
   > .#{$ns}Button:not(:last-child),
-  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
+  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button,
+  > .#{$ns}Badge:not(:last-child) > .#{$ns}Button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
   > .#{$ns}Button:not(:first-child),
-  > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
+  > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button,
+  > .#{$ns}Badge:not(:first-child) > .#{$ns}Button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -90,33 +105,39 @@
 
   > .#{$ns}Button + .#{$ns}Button,
   > .#{$ns}Button + .#{$ns}ButtonGroup,
+  > .#{$ns}Button + .#{$ns}Badge,
   > .#{$ns}ButtonGroup + .#{$ns}Button,
-  > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
+  > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup,
+  > .#{$ns}Badge + .#{$ns}Badge,
+  > .#{$ns}Badge + .#{$ns}Button {
     margin-top: calc(var(--ButtonGroup-borderWidth) * -1);
     margin-left: 0;
   }
-
   > .#{$ns}Button:not(:last-child),
-  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
+  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button,
+  > .#{$ns}Badge:not(:last-child) > .#{$ns}Button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
   > .#{$ns}Button:not(:first-child),
-  > .#{$ns}ButtonGroup:not(:first-child) > .btn {
+  > .#{$ns}ButtonGroup:not(:first-child) > .btn,
+  > .#{$ns}Badge:not(:first-child) > .btn {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
   /* 修正头尾的圆角 */
   > .#{$ns}Button:first-child,
-  > .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child {
-    border-top-right-radius: var(--Button-borderRadius);
+  > .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child,
+  > .#{$ns}Badge:first-child > .#{$ns}Button:first-child {
+    border-top-right-radius: var(--borders-radius-3);
   }
 
   > .#{$ns}Button:last-child,
-  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child {
-    border-bottom-left-radius: var(--Button-borderRadius);
+  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child,
+  > .#{$ns}Badge:last-child > .#{$ns}Button:last-child {
+    border-bottom-left-radius: var(--borders-radius-3);
   }
 }
 

package/scss/components/_calendar.scss

@@ -41,6 +41,7 @@
       background: transparent;
       color: var(--Calendar-color);
       > span {
+        color: var(--Calendar-color) !important;
         background: transparent !important;
       }
     }
@@ -64,6 +65,14 @@
     }
   }
 
+  .rdtHeader {
+    margin-top: 0;
+  }
+
+  .rdtPicker .dow {
+    height: px2rem(40px);
+  }
+
   .rdtDay {
     height: var(--Calendar-rdt-day);
     vertical-align: top;
@@ -83,6 +92,11 @@
       padding: var(--Calendar-schedule-content-padding);
       height: var(--Calendar-schedule-content-height);
       color: var(--Calendar-schedule-content-color);
+      text-shadow: none;
+    }
+    .#{$ns}ScheduleCalendar-large-schedule-header,
+    .#{$ns}ScheduleCalendar-large-schedule-footer {
+      text-shadow: none;
     }
   }
 
@@ -249,7 +263,9 @@
       height: px2rem(36px);
       margin: px2rem(7px) 0;
       border-radius: var(--borderRadiusMd);
-      display: block;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
     .is-disabled {
       opacity: 0.5;

package/scss/components/_carousel.scss

@@ -176,6 +176,15 @@
     right: 0;
   }
 
+  &.#{$ns}Carousel-arrow--always {
+    .#{$ns}Carousel-leftArrow {
+      display: block;
+    }
+    .#{$ns}Carousel-rightArrow {
+      display: block;
+    }
+  }
+
   &:hover {
     .#{$ns}Carousel-leftArrow {
       display: block;

package/scss/components/_collapse.scss

@@ -76,7 +76,7 @@
   //   display: inline-block;
   // }
 
-  &.is-active &-arrow {
+  &.is-active > &-header > &-arrow-wrap > &-arrow {
     transform: rotate(var(--collapse-icon-rotate));
     transform-origin: 50% 50%;
   }

package/scss/components/_column-toggler.scss

@@ -55,7 +55,9 @@
 
   &-menuItem,
   &-menu > li {
-    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    padding: var(--table-togglable-paddingTop)
+      var(--table-togglable-paddingRight) var(--table-togglable-paddingBottom)
+      var(--table-togglable-paddingLeft);
     white-space: nowrap;
     box-sizing: border-box;
     height: var(--DropDown-menu-height);
@@ -63,9 +65,10 @@
     user-select: none;
     color: var(--link-color);
     text-decoration: var(--link-decoration);
+    background: var(--table-togglable-bg-color);
 
     &:hover {
-      background: var(--DropDown-menuItem-onHover-bg);
+      background: var(--table-togglable-hover-bg-color);
       color: var(--DropDown-menuItem-onHover-color);
     }
 

package/scss/components/_condition-builder.scss

@@ -28,9 +28,9 @@
       width: px2rem(20px);
       height: px2rem(20px);
       border-radius: 50%;
-      background: #d4e5ff;
+      background: var(--conditionBuilder-toolbar-bg-color);
       text-align: center;
-      color: #0832a6;
+      color: var(--conditionBuilder-toolbar-color);
       cursor: pointer;
       transition: transform 0.3s ease;
 
@@ -39,26 +39,39 @@
       }
 
       &:hover {
-        background: #2468f2;
-        color: $white;
+        background: var(--conditionBuilder-toolbar-hover-bg-color);
+        color: var(--conditionBuilder-toolbar-hover-color);
       }
     }
 
     .#{$ns}Select {
-      font-size: px2rem(12px);
-      height: px2rem(28px);
-      width: px2rem(28px);
-      background: #d4e5ff;
+      font-size: var(--conditionBuilder-toolbar-fontSize);
+      height: var(--conditionBuilder-toolbar-height);
+      width: var(--conditionBuilder-toolbar-width);
+      background: var(--conditionBuilder-toolbar-bg-color);
       border: none;
-      color: #0832a6;
-      font-weight: 500;
+      color: var(--conditionBuilder-toolbar-color);
+      font-weight: var(--conditionBuilder-toolbar-fontWeight);
       padding: 0;
-      padding-left: px2rem(8px);
-      min-height: px2rem(28px);
+      text-align: center;
+      min-height: var(--conditionBuilder-toolbar-height);
+
+      &.is-focused {
+        color: var(--conditionBuilder-toolbar-color) !important;
+        font-size: var(--conditionBuilder-toolbar-fontSize);
+        font-weight: var(--conditionBuilder-toolbar-fontWeight);
+        background: var(--conditionBuilder-toolbar-bg-color) !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
 
       &:hover {
-        color: $white;
-        background: #2468f2;
+        color: var(--conditionBuilder-toolbar-hover-color) !important;
+        font-size: var(--conditionBuilder-toolbar-hover-fontSize);
+        font-weight: var(--conditionBuilder-toolbar-hover-fontWeight);
+        background: var(--conditionBuilder-toolbar-hover-bg-color) !important;
+        border: none !important;
+        box-shadow: none !important;
       }
 
       &-arrow {
@@ -83,8 +96,8 @@
       position: absolute;
       top: px2rem(5px);
       bottom: px2rem(5px);
-      width: 2px;
-      background-color: #d4e5ff;
+      width: var(--conditionBuilder-line-width);
+      background-color: var(--conditionBuilder-line-bg-color);
     }
   }
 
@@ -193,9 +206,10 @@
   &-placeholder {
     color: var(--text--muted-color);
     position: relative;
-    padding: 10px;
-    background: rgba(0, 0, 0, 0.03);
-    border-radius: 5px;
+    padding: var(--conditionBuilder-body-paddingTop)
+      var(--conditionBuilder-body-paddingRight)
+      var(--conditionBuilder-body-paddingBottom) px2rem(10px);
+    background: var(--conditionBuilder-body-bg-color);
     &.simple {
       margin-left: 0;
     }
@@ -276,10 +290,12 @@
     }
 
     &-item {
-      background-color: #f7f7f9;
+      background-color: var(--conditionBuilder-body-bg-color);
       width: 100%;
-      padding: px2rem(12px);
-      padding-left: px2rem(28px);
+      padding: var(--conditionBuilder-body-paddingTop)
+        var(--conditionBuilder-body-paddingRight)
+        var(--conditionBuilder-body-paddingBottom)
+        var(--conditionBuilder-body-paddingLeft);
       display: flex;
       flex-direction: row;
       align-items: center;

package/scss/components/_crud.scss

@@ -25,11 +25,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -44,6 +59,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;

package/scss/components/_crud2.scss

@@ -21,11 +21,26 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+        var(--Pick-base-value-right-border-width)
+        var(--Pick-base-value-bottom-border-width)
+        var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+        var(--Pick-base-value-right-border-style)
+        var(--Pick-base-value-bottom-border-style)
+        var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+        var(--Pick-base-value-right-border-color)
+        var(--Pick-base-value-bottom-border-color)
+        var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+        var(--Pick-base-top-right-border-radius)
+        var(--Pick-base-bottom-right-border-radius)
+        var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -40,6 +55,7 @@
   }
 
   &-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;

package/scss/components/_drawer.scss

@@ -50,9 +50,10 @@
   }
 
   &-title {
-    font-size: var(--Drawer-title-fontSize);
-    font-weight: 500;
-    color: var(--Drawer-title-fontColor);
+    font-size: var(--drawer-header-fontSize);
+    font-weight: var(--drawer-header-fontWeight);
+    color: var(--drawer-header-color);
+    height: var(--drawer-header-height);
   }
 
   &-close {
@@ -63,9 +64,14 @@
 
     svg {
       margin-top: px2rem(2px);
-      width: var(--Drawer-close-size);
-      height: var(--Drawer-close-size);
+      width: var(--drawer-header-icon-size);
+      height: var(--drawer-header-icon-size);
       fill: var(--Drawer-close-color);
+      color: var(--drawer-header-icon-color);
+    }
+
+    .Drawer-close {
+      content: var(--drawer-header-icon-icon);
     }
 
     &:not(.is-disabled) {
@@ -83,7 +89,8 @@
   }
 
   &-body {
-    padding: var(--Drawer-body-padding);
+    padding: var(--drawer-content-paddingTop) var(--drawer-content-paddingRight)
+      var(--drawer-content-paddingBottom) var(--drawer-content-paddingLeft);
     flex-basis: 0;
     flex-grow: 1;
     overflow: auto;
@@ -92,6 +99,7 @@
   &-footer {
     display: flex;
     align-items: flex-end;
+    height: var(--drawer-footer-height);
     justify-content: flex-end;
     padding: var(--Drawer-footer-padding);
     border-top: var(--Drawer-content-borderWidth) solid
@@ -140,27 +148,27 @@
   }
 
   .#{$ns}Drawer--xs .#{$ns}Drawer-content {
-    width: var(--Drawer-widthXs);
+    width: var(--drawer-size-xs-width);
     height: var(--Drawer-widthXs);
   }
 
   .#{$ns}Drawer--sm .#{$ns}Drawer-content {
-    width: var(--Drawer-widthSm);
+    width: var(--drawer-size-sm-width);
     height: var(--Drawer-widthSm);
   }
 
   .#{$ns}Drawer--md .#{$ns}Drawer-content {
-    width: var(--Drawer-widthMd);
+    width: var(--drawer-size-md-width);
     height: var(--Drawer-widthMd);
   }
 
   .#{$ns}Drawer--lg .#{$ns}Drawer-content {
-    width: var(--Drawer-widthLg);
+    width: var(--drawer-size-lg-width);
     height: var(--Drawer-widthLg);
   }
 
   .#{$ns}Drawer--xl .#{$ns}Drawer-content {
-    width: var(--Drawer-widthXl);
+    width: var(--drawer-size-xl-width);
     height: var(--Drawer-widthXl);
   }
 
@@ -283,7 +291,7 @@
     justify-content: flex-end;
 
     .#{$ns}Button {
-      margin-left: var(--Drawer-footer-margin);
+      margin-left: var(--drawer-footer-margin-left);
       margin-right: var(--gap-xs);
     }
 

package/scss/components/_dropdown.scss

@@ -137,6 +137,11 @@
   &-popover {
     border: none;
     box-shadow: none;
+    // 如果是在PopOver position: absolute会使overlayNode没有高度 定位不正确
+    // 改成static z-index不生效 无法点击操作
+    > .#{$ns}DropDown-menu-root {
+      position: relative;
+    }
   }
 
   > .#{$ns}Button {

package/scss/components/_image-gallery.scss

@@ -66,15 +66,15 @@
   &-prevBtn,
   &-nextBtn {
     > svg {
-      width: px2rem(48px);
-      height: px2rem(48px);
+      width: var(--image-images-item-size);
+      height: var(--image-images-item-size);
     }
 
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
-    color: #999;
+    color: var(--image-images-item-color);
     text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
 
     &:hover {
@@ -206,11 +206,14 @@
 }
 
 .#{$ns}ImageGallery-toolbar {
-  background-color: var(--white);
-  border-radius: px2rem(4px);
+  background-color: var(--image-images-preview-bgColor);
+  border-radius: var(--image-images-preview-radius);
   display: flex;
   align-items: flex-start;
-  padding: px2rem(4px) px2rem(16px);
+  padding: var(--image-images-preview-paddingTop)
+    var(--image-images-preview-paddingRight)
+    var(--image-images-preview-paddingBottom)
+    var(--image-images-preview-paddingLeft);
   position: absolute;
   bottom: px2rem(20px);
   left: 50%;

package/scss/components/_images.scss

@@ -7,7 +7,9 @@
 
   &-item {
     display: flex;
-    margin: var(--gap-xs);
+    margin: var(--image-images-item-marginTop)
+      var(--image-images-item-marginRight) var(--image-images-item-marginBottom)
+      var(--image-images-item-marginLeft);
   }
 }
 
@@ -16,7 +18,10 @@
 
   &--thumb {
     display: inline-block;
-    padding: var(--gap-xs);
+    padding: var(--image-image-normal-paddingTop)
+      var(--image-image-normal-paddingRight)
+      var(--image-image-normal-paddingBottom)
+      var(--image-image-normal-paddingLeft);
   }
 
   &-thumbWrap {
@@ -132,12 +137,15 @@
   }
 
   &-caption {
-    font-size: var(--fontSizeSm);
+    font-size: var(--image-image-description-fontSize);
+    color: var(--image-image-description-color);
+    margin-top: var(--image-image-description-marginTop);
   }
 
   &-title {
-    font-size: var(--fontSizeBase);
-    color: var(--text--loud-color);
+    font-size: var(--image-image-normal-fontSize);
+    color: var(--image-image-normal-color);
+    margin-top: var(--image-image-normal-title-marginTop);
   }
 
   &-overlay {

package/scss/components/_link.scss

@@ -16,5 +16,7 @@
     height: var(--link-icon-size);
     width: var(--link-icon-size);
     margin: 0 var(--link-icon-margin);
+    display: inline-block;
+    vertical-align: text-top;
   }
 }