amis 1.4.1 → 1.4.2-beta.13

package/scss/components/_portlet.scss

@@ -0,0 +1,51 @@
+.#{$ns}Portlet {
+    border: var(--Portlet-borderWidth) var(--Portlet-borderStyle) var(--Portlet-borderColor);
+    border-radius: var(--Portlet-borderRadius);
+
+    padding: var(--gap-base);
+
+    &-tab.unactive-select {
+        .is-active {
+            a:first-child,
+            &:hover > a:first-child,
+            > a:first-child:focus {
+                border: none !important;
+                color: inherit !important;
+                cursor: auto !important;
+            }
+        }
+    }
+
+    &-tab.no-divider {
+        .#{$ns}Tabs-links {
+            border-bottom: none;
+        }
+    }
+
+    .#{$ns}Tabs-pane {
+        padding: unset;
+    }
+
+    &-toolbar {
+        display: inline-flex;
+        float: right;
+        justify-content: flex-end;
+
+        .#{$ns}Button {
+            margin-left: calc(var(--gap-xs));
+        }
+    }
+
+    &-header-desc {
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        margin-left: var(--gap-base);
+    }
+}
+
+.#{$ns}Portlet.no-header {
+    .#{$ns}Portlet-tab .#{$ns}Tabs-links {
+        display: none;
+    }
+}

package/scss/components/_progress.scss

@@ -2,6 +2,7 @@
   height: 10px;
   background: #ebebeb;
   overflow: hidden;
+  border-radius: var(--Progress-borderRadius);
 
   &-bar {
     float: left;
@@ -13,6 +14,7 @@
     text-align: center;
     background: var(--primary);
     transition: width var(--animation-duration) ease;
+    border-radius: var(--Progress-borderRadius);
 
     &--stripe {
       background-image: linear-gradient(

package/scss/components/_result-box.scss

@@ -1,5 +1,6 @@
 .#{$ns}ResultBox {
   @include input-input();
+  @include input-border();
   flex-wrap: wrap;
   padding: 0 px2rem(3px);
   min-height: var(--Form-input-height);

package/scss/components/_status.scss

@@ -8,7 +8,7 @@
 
   &-label {
     font-size: var(--fontSizeSm);
-    margin-left: var(--gap-sm);
+    margin-left: var(--gap-xs);
   }
 
   @keyframes animation-rolling_red {

package/scss/components/_steps.scss

@@ -45,7 +45,7 @@
               height: 1px;
               left: 100%;
               width: 9999px;
-              padding-right: 10px;
+              padding-right: px2rem(10px);
               background-color: var(--Steps-line-bg);
             }
           }

package/scss/components/_table.scss

@@ -136,6 +136,22 @@
     }
   }
 
+  &-searchableForm {
+    background: var(--Table-searchableForm-backgroundColor);
+    border-radius: var(--Table-searchableForm-borderRadius);
+
+    &-footer {
+      padding: var(--Panel-footerPadding);
+      clear: both;
+    }
+
+    &-checkbox {
+      & > div > .#{$ns}CheckboxControl {
+        padding-top: 0;
+      }
+    }
+  }
+
   &-header {
     padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
 
@@ -268,6 +284,12 @@
       }
     }
 
+    &--checkOnItemClick {
+      > tbody > tr {
+        cursor: pointer;
+      }
+    }
+
     > thead > tr {
       > th {
         background: var(--Table-thead-bg);
@@ -317,6 +339,8 @@
     }
 
     > tbody > tr {
+      position: relative;
+
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
         > th {
@@ -754,7 +778,7 @@
     top: var(--Table-borderWidth);
     bottom: 0;
     right: 0;
-    padding-left: px2rem(50px);
+    padding-left: px2rem(80px);
     padding-right: var(--TableCell-paddingX);
     display: flex;
     align-items: center;
@@ -867,6 +891,32 @@
     visibility: hidden;
     position: absolute;
   }
+
+  &-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &--autoFillHeight {
+    margin-bottom: 0;
+    > .#{$ns}Table-contentWrap {
+      > .#{$ns}Table-content table {
+        border-top: none; // 不然会导致拖动时顶部露出内容
+      }
+      > .#{$ns}Table-content table thead {
+        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
+        top: 0;
+        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+      }
+    }
+    > .#{$ns}Table-fixedTop {
+      display: none;
+    }
+    > .#{$ns}Table-footToolbar {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .#{$ns}InputTable-toolbar {

package/scss/components/form/_checks.scss

@@ -283,354 +283,3 @@
     color: #999;
   }
 }
-
-.#{$ns}Checkboxes {
-  > .#{$ns}Checkbox {
-    display: block;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm)
-      calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      calc(var(--gap-sm) + var(--Checkbox-size));
-  }
-
-  &--inline > .#{$ns}Checkbox {
-    display: inline-block;
-  }
-
-  &-addBtn {
-    display: block;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    > svg {
-      width: px2rem(14px);
-      height: px2rem(14px);
-      margin-right: var(--Checkbox-gap);
-    }
-  }
-}
-
-.#{$ns}ListCheckboxes,
-.#{$ns}ListRadios {
-  &-group:not(:first-child) > &-itemLabel {
-    border-top: px2rem(1px) solid var(--ListMenu-divider-color);
-  }
-
-  &-group > &-itemLabel {
-    font-size: var(--fontSizeSm);
-    padding: var(--gap-xs) var(--gap-xs);
-    color: var(--text--muted-color);
-  }
-
-  &-item {
-    display: flex;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-    }
-    cursor: pointer;
-    user-select: none;
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
-    &:hover {
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-group > &-items > &-item {
-    padding-left: var(--gap-base);
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-
-    span {
-      white-space: nowrap; // 避免在条件组合中折行
-    }
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}TableCheckboxes {
-  .#{$ns}Table-content {
-    border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
-  }
-
-  .#{$ns}Table-table > thead > tr > th,
-  .#{$ns}Table-table > tbody > tr > td {
-    font-size: var(--fontSizeSm);
-    padding-top: var(--gap-xs);
-    padding-bottom: px2rem(6px);
-    vertical-align: middle;
-  }
-
-  .#{$ns}Table-table > thead > tr > th {
-    padding-top: px2rem(6px);
-  }
-
-  .#{$ns}Table-table > thead > tr > th:first-child,
-  .#{$ns}Table-table > tbody > tr > td:first-child {
-    padding-left: px2rem(10px);
-    padding-right: 0;
-  }
-
-  .#{$ns}Table-table > thead > tr > th:last-child,
-  .#{$ns}Table-table > tbody > tr > td:last-child {
-    padding-right: var(--gap-md);
-  }
-
-  .#{$ns}Table-table > tbody > tr {
-    cursor: pointer;
-  }
-}
-
-.#{$ns}TreeCheckboxes,
-.#{$ns}TreeRadios {
-  .#{$ns}Table-expandBtn {
-    color: var(--icon-color);
-    margin-right: 5px;
-  }
-
-  &-sublist {
-    position: relative;
-    margin: 0 0 0 px2rem(35px);
-    display: none;
-
-    &:before {
-      width: 1px;
-      content: '';
-      display: block;
-      position: absolute;
-      top: calc(var(--gap-xs) * -1);
-      bottom: calc(var(--Form-input-height) / 2);
-      left: -19px;
-      border-left: dashed 1px var(--icon-color);
-    }
-  }
-
-  &-item {
-    position: relative;
-  }
-  &-item.is-expanded > &-sublist {
-    display: block;
-  }
-
-  &-item:not(:last-child) > &-sublist:before {
-    bottom: 0;
-  }
-
-  &-sublist &-item:before {
-    height: 1px;
-    content: '';
-    display: block;
-    position: absolute;
-    top: calc(var(--Form-input-height) / 2);
-    width: 19px;
-    left: -19px;
-    border-top: dashed 1px var(--icon-color);
-  }
-
-  &-itemInner {
-    display: flex;
-    align-items: center;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-      margin-left: var(--gap-sm);
-    }
-    cursor: pointer;
-    user-select: none;
-
-    position: relative;
-    & > * {
-      position: relative;
-      z-index: 2;
-    }
-
-    &:hover:after {
-      position: absolute;
-      content: '';
-      z-index: 1;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: -99999px;
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}ChainedCheckboxes {
-  display: flex;
-  flex-direction: row;
-
-  &-col {
-    flex-grow: 1;
-    min-width: 150px;
-  }
-
-  &-col:not(:last-child) {
-    border-right: 1px solid var(--borderColor);
-  }
-
-  &-subTitle {
-    font-size: var(--fontSizeSm);
-    padding: var(--gap-xs) var(--gap-xs);
-    color: var(--text--muted-color);
-  }
-
-  &-item {
-    display: flex;
-    height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
-    flex-direction: row;
-
-    > .#{$ns}Checkbox {
-      margin-right: 0;
-    }
-    cursor: pointer;
-    user-select: none;
-
-    &.is-active {
-      color: var(--Form-select-menu-onActive-color);
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
-    &:hover {
-      background: var(--Tree-item-onHover-bg);
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-      color: var(--text--muted-color);
-    }
-  }
-
-  &-itemLabel {
-    flex-grow: 1;
-  }
-
-  &-placeholder {
-    @include checkboxes-placeholder();
-  }
-}
-
-.#{$ns}AssociatedCheckboxes {
-  display: flex;
-  flex-direction: row;
-
-  &-left,
-  &-right {
-    flex-grow: 1;
-    width: 0;
-    height: px2rem(175px);
-    overflow: auto;
-  }
-
-  &-left {
-    border-right: 1px solid var(--borderColor);
-  }
-
-  &-reload {
-    text-align: center;
-    color: var(--info);
-    margin: 20px 0 0;
-
-    &.is-clickable {
-      cursor: pointer;
-    }
-  }
-
-  &-box {
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--fontSizeSm);
-    color: var(--text--muted-color);
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    > p {
-      text-align: center;
-      margin: 10px 0 20px;
-      color: var(--text--muted-color);
-    }
-  }
-}

package/scss/components/form/_color.scss

@@ -8,6 +8,7 @@
   padding: var(--ColorPicker-paddingY) var(--ColorPicker-paddingX);
   background: var(--ColorPicker-bg);
   color: var(--ColorPicker-color);
+  border-radius: var(--borderRadius);
 
   &:not(.is-disabled) {
     cursor: pointer;

package/scss/components/form/_date-range.scss

@@ -57,6 +57,8 @@
   &-toggler {
     cursor: pointer;
     color: var(--DatePicker-iconColor);
+    display: inline-flex;
+    align-items: center;
 
     &:hover {
       color: var(--DatePicker-onHover-iconColor);

package/scss/components/form/_date.scss

@@ -58,6 +58,8 @@
   &-toggler {
     cursor: pointer;
     color: var(--DatePicker-iconColor);
+    display: inline-flex;
+    align-items: center;
 
     &:hover {
       color: var(--DatePicker-onHover-iconColor);

package/scss/components/form/_fieldset.scss

@@ -41,11 +41,14 @@ fieldset.#{$ns}Collapse {
     margin: var(--gap-base) 0;
     padding: 0 0 0 14px;
     cursor: pointer;
-    border-bottom: 0;
+    border-bottom: none !important;
+    background: transparent;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
+    // width: 100%;
+    &:hover {
+      background: transparent;
+    }
   }
 
   &--xs {

package/scss/components/form/_file.scss

@@ -1,15 +1,26 @@
 .#{$ns}FileControl {
+  &-templateInfo {
+    display: block;
+    margin-bottom: var(--gap-base);
+    padding: var(--Button-paddingY) var(--Button-paddingX);
+    cursor: pointer;
+
+    > svg {
+      margin-right: var(--gap-xs);
+    }
+  }
+
   &-dropzone {
     outline: none;
   }
 
   &-selectBtn {
-    width: px2rem(120px);
+    display: flex;
+    align-items: center;
 
     > svg {
-      margin-right: 10px;
-      width: pxrem(16px);
-      height: pxrem(16px);
+      width: px2rem(14px);
+      height: px2rem(14px);
     }
   }
 
@@ -136,6 +147,7 @@
     > span {
       display: block;
       background: var(--info);
+      border-radius: var(--FileControl-progress-borderRadius);
       height: 100%;
       min-width: 10%;
       transition: ease-out width var(--animation-duration);

package/scss/components/form/_form.scss

@@ -358,3 +358,51 @@
 .#{$ns}Form--quickEdit {
   min-width: var(--Form-control-widthSm);
 }
+
+.#{$ns}Form--column {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--Form-group-gutterWidth) / -2);
+  margin-right: calc(var(--Form-group-gutterWidth) / -2);
+  > .#{$ns}Form-item {
+    flex-grow: 1;
+    padding-left: calc(var(--Form-group-gutterWidth) / 2);
+    padding-right: calc(var(--Form-group-gutterWidth) / 2);
+  }
+}
+
+.#{$ns}Form--column-2 > .#{$ns}Form-item {
+  width: 50%;
+}
+
+.#{$ns}Form--column-3 > .#{$ns}Form-item {
+  width: 33%;
+}
+
+.#{$ns}Form--column-4 > .#{$ns}Form-item {
+  width: 25%;
+}
+
+.#{$ns}Form--column-5 > .#{$ns}Form-item {
+  width: 20%;
+}
+
+.#{$ns}Form--column-6 > .#{$ns}Form-item {
+  width: 16.6%;
+}
+
+.#{$ns}Form--column-7 > .#{$ns}Form-item {
+  width: 14.2%;
+}
+
+.#{$ns}Form--column-8 > .#{$ns}Form-item {
+  width: 12.5%;
+}
+
+.#{$ns}Form-column-9 > .#{$ns}Form-item {
+  width: 11.1%;
+}
+
+.#{$ns}Form-column-10 > .#{$ns}Form-item {
+  width: 10%;
+}

package/scss/components/form/_image.scss

@@ -10,9 +10,11 @@
     width: px2rem(120px);
     height: px2rem(120px);
     display: inline-flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     border: var(--borderWidth) solid var(--borderColor);
+    border-radius: var(--ImageControl-addBtn-borderRadius);
     cursor: pointer;
     margin-right: var(--gap-base);
 
@@ -29,9 +31,10 @@
     );
 
     > svg {
-      width: px2rem(40px);
-      height: px2rem(40px);
+      width: px2rem(24px);
+      height: px2rem(24px);
       top: 0;
+      margin-bottom: px2rem(8px);
     }
 
     &.is-disabled {
@@ -71,6 +74,7 @@
 
   &-item {
     border: var(--borderWidth) solid var(--borderColor);
+    border-radius: var(--ImageControl-addBtn-borderRadius);
     vertical-align: top;
     padding: var(--gap-xs);
     display: inline-block;
@@ -129,6 +133,7 @@
 
   &-progressValue {
     height: 5px;
+    border-radius: var(--ImageControl-progress-borderRadius);
     display: block;
     background: var(--info);
     min-width: 10%;