amis-ui 2.0.0 → 2.1.0

package/scss/components/_collapse-group.scss

@@ -1,15 +1,27 @@
 .#{$ns}CollapseGroup {
-
   .#{$ns}Collapse {
     border-radius: 0;
   }
 
   .#{$ns}Collapse:first-child {
     border-radius: 4px 4px 0 0;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px 4px 0 0;
+    }
   }
 
   .#{$ns}Collapse:last-child {
     border-radius: 0 0 4px 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .#{$ns}Collapse:first-child:nth-last-child(1) {
+    border-radius: 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px;
+    }
   }
 
   .#{$ns}Collapse:not(:last-child) {

package/scss/components/_collapse.scss

@@ -31,6 +31,7 @@
   &-arrow {
     display: inline-block;
     width: px2rem(16px);
+    height: px2rem(16px);
     text-align: center;
     margin-right: var(--gap-sm);
 
@@ -41,7 +42,7 @@
       width: px2rem(6px);
       height: px2rem(6px);
       top: px2rem(-2px);
-      border-color: #84868C;
+      border-color: #84868c;
       border-style: solid;
       border-width: px2rem(1px) px2rem(1px) 0 0;
       transform: rotate(45deg);

package/scss/components/_crud.scss

@@ -74,7 +74,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -133,7 +137,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }
 

package/scss/components/_crud2.scss

@@ -70,7 +70,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -125,7 +129,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }
 

package/scss/components/_image-gallery.scss

@@ -59,6 +59,7 @@
       display: block;
       max-width: 100%;
       max-height: 100%;
+      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
     }
   }
 
@@ -203,3 +204,64 @@
     }
   }
 }
+
+.#{$ns}ImageGallery-toolbar {
+  background-color: var(--white);
+  border-radius: px2rem(4px);
+  display: flex;
+  align-items: flex-start;
+  padding: px2rem(4px) px2rem(16px);
+  position: absolute;
+  bottom: px2rem(20px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  &-action {
+    padding: px2rem(13px);
+    border-radius: px2rem(4px);
+    width: px2rem(40px);
+    height: px2rem(40px);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-icon {
+      display: block;
+      color: var(--black);
+
+      & > svg {
+        fill: var(--black);
+      }
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--icon-onDisabled-color);
+
+      .#{$ns}ImageGallery-toolbar-action-icon {
+        color: var(--icon-onDisabled-color);
+
+        & > svg {
+          color: var(--icon-onDisabled-color);
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #f2f3f5;
+
+      .#{$ns}ImageGallery-toolbar-action-icon {
+        color: var(--primary);
+
+        & > svg {
+          fill: var(--primary);
+        }
+      }
+    }
+  }
+}

package/scss/components/_input-box.scss

@@ -46,6 +46,7 @@
     display: inline-block;
     width: 14px;
     color: var(--icon-color);
+    margin-top: px2rem(2px);
   }
 
   > a {

package/scss/components/_log.scss

@@ -26,27 +26,55 @@
       font-style: italic;
       margin-right: 5px;
     }
+    &-highlight {
+      background: #ffffb6;
+      display: inline-block;
+      color: #000;
+    }
   }
 
   &-operation {
-    position: absolute;
-    top: 0;
-    left: -16px;
-    .#{$ns}Button {
-      margin-right: var(--gap-xs);
+    position: relative;
+    background: rgba(28, 28, 28, 0.5);
+    & > a {
+      display: inline-flex;
+      flex-direction: row;
+      line-height: var(--Form-input-lineHeight);
+      font-size: var(--Form-input-fontSize);
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      height: 30px;
+      width: 30px;
+      padding-left: 8px;
+      transition: all var(--animation-duration) ease-in-out;
+      border: var(--Form-input-borderWidth) solid transparent;
+      border-radius: var(--Form-input-borderRadius);
+      overflow: hidden;
+      height: 30px;
+      width: 30px;
     }
-    &-hidden {
-      background: #f0f2f5;
-      width: 24px;
-      height: 48px;
-      box-shadow: 0 4px 6px 0 rgb(8 14 26 / 4%), 0 1px 10px 0 rgb(8 14 26 / 5%),
-        0 2px 4px -1px rgb(8 14 26 / 6%);
-      border-radius: 0 2px 2px 0;
-      padding-top: 14px;
-      padding-left: 6px;
-      cursor: pointer;
+    a {
       color: #000;
-      transition: all 0.3s;
+    }
+    & > a:hover {
+      background: var(--Form-input-onHover-bg);
+      color: var(--link-color);
+    }
+
+    & > a > svg {
+      margin-right: 8px;
+    }
+
+    & > a.is-disabled {
+      cursor: not-allowed;
+      color: #6b7280;
+    }
+
+    & > a.is-disabled:hover {
+      cursor: not-allowed;
+      background: transparent;
+      color: #6b7280;
     }
   }
 

package/scss/components/_modal.scss

@@ -10,14 +10,19 @@
 @keyframes modalIn {
   from {
     opacity: 0;
-    transform: translate3d(0, -300px, 0) scale(0.2);
+    width: 0;
+    height: 0;
+    bottom: -999px;
   }
 }
 
 @keyframes modalOut {
   to {
     opacity: 0;
-    transform: translate3d(0, -300px, 0) scale(0.2);
+    opacity: 0;
+    width: 0;
+    height: 0;
+    bottom: -999px;
   }
 }
 
@@ -51,8 +56,6 @@
 
     &.in,
     &.out {
-      // opacity: 1;
-      // transform: translateY(0) scale(1);
       animation-duration: var(--animation-duration);
       animation-fill-mode: both;
     }
@@ -88,7 +91,7 @@
   }
 
   &-header {
-    padding: var(--Modal-header-paddingY) var(--Modal-header-paddingX);
+    padding: var(--Modal-header-paddingY) #{px2rem(24px)};
     background: var(--Modal-header-bg);
     @include clearfix();
     border-bottom: var(--Modal-body-borderTop);
@@ -137,21 +140,20 @@
   }
 
   &-body {
-    padding: var(--Modal-body--noHeader-paddingTop) var(--Modal-body-paddingX)
-      var(--Modal-body-paddingY);
+    margin: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
     flex-grow: 1;
-  }
-
-  &-header + &-body {
-    padding-top: var(--Modal-body-paddingY);
+    height: auto;
+    // overflow-y: auto;
+    padding: 0 #{px2rem(24px)};
   }
 
   &-footer {
     // @include clearfix();
+
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: var(--Modal-footer-padding);
+    padding: var(--Modal-footer-padding) #{px2rem(24px)};
     border-top: var(--Modal-body-borderBottom);
     margin: var(--Modal-footer-marginY) var(--Modal-footer-marginX);
     border-bottom-left-radius: var(--Modal-content-borderRadius);

package/scss/components/_pagination.scss

@@ -1,7 +1,7 @@
 .#{$ns}Pagination {
   display: inline-block;
   padding: 0;
-  margin: 0 0 px2rem(-10px);
+  margin: 0 0 px2rem(-8px);
   border-radius: px2rem(4px);
 
   > li {
@@ -126,7 +126,7 @@
         border: var(--borderWidth) solid var(--borderColor);
         border-radius: var(--borderRadius) 0 0 var(--borderRadius);
         padding: var(--Pagination-padding);
-        margin-left: px2rem(10px);
+        margin-left: px2rem(8px);
         text-align: center;
 
         &:focus,
@@ -151,6 +151,7 @@
           color: var(--primary);
           border-color: var(--primary);
           border-left: var(--borderWidth) solid var(--primary);
+          margin-left: -1px;
         }
       }
   }
@@ -160,7 +161,7 @@
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(10px);
+    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }

package/scss/components/_progress.scss

@@ -29,9 +29,10 @@
     &-bar {
       float: left;
       width: 0;
-      height: 10px;
+      height: 8px;
       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

@@ -2,7 +2,7 @@
   @include input-input();
   @include input-border();
   flex-wrap: nowrap;
-  padding: 0 px2rem(5px);
+  padding: 0 px2rem(12px);
   min-height: var(--Form-input-height);
   align-items: center;
   border-radius: 3px;
@@ -67,12 +67,9 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    padding-left: px2rem(5px);
 
     > * {
-      &:first-child {
-        margin-left: px2rem(5px);
-      }
-
       &:not(:last-child) {
         margin-right: px2rem(5px);
       }
@@ -91,16 +88,15 @@
   &-pc-arrow {
     height: 100%;
     margin: auto 0;
-    position: absolute;
-    right: 10px;
     display: flex;
     align-items: center;
     transition: transform var(--animation-duration) ease;
     transform: rotate(90deg);
+
     > svg {
       width: px2rem(10px);
       height: px2rem(10px);
-      top: 0.125em;
+      top: 0;
       color: var(--default-icon-color);
     }
   }
@@ -157,6 +153,7 @@
       cursor: pointer;
       margin-left: px2rem(10px);
       color: var(--ResultBox-icon-color);
+
       &:hover {
         color: var(--ResultBox-icon--onHover-color);
       }
@@ -164,6 +161,7 @@
       > svg {
         width: px2rem(10px);
         height: px2rem(10px);
+
         &.icon {
           top: 0;
         }

package/scss/components/_search-box.scss

@@ -24,7 +24,7 @@
   &.is-active {
     background: var(--Form-input-bg);
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-    width: 150px;
+    width: var(--SearchBox-width);
     > input {
       flex-grow: 1;
     }
@@ -39,17 +39,10 @@
   }
 
   &-searchBtn {
-    display: flex;
-    width: var(--SearchBox-height);
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      top: 0;
-    }
+    display: inline-block;
+    padding: #{px2rem(5px)} #{px2rem(10px)};
   }
 
-
   &-activeBtn,
   &-cancelBtn {
     margin-right: 8px;
@@ -125,6 +118,10 @@
     height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+
+    &:hover {
+      background: var(--Button--primary-onHover-bg);
+    }
   }
 
   &--enhance &-clearable {
@@ -136,3 +133,116 @@
     color: var(--SearchBox-enhonce-disabled-search-color);
   }
 }
+
+.#{$ns}SearchBox-history {
+  & > .is-history {
+    width: 100%;
+  }
+
+  .#{$ns}SearchBox-history-dropdown {
+    position: absolute;
+    left: 0;
+    z-index: 998;
+    padding: var(--gap-sm) 0;
+    width: 100%;
+    max-width: var(--SearchBox-history-dropdown-maxWidth);
+    min-height: #{px2rem(72px)};
+    max-height: var(--SearchBox-history-dropdown-maxHeight);
+    background: var(--white);
+    border: var(--borderWidth) solid var(--borderColor);
+    border-top: none;
+    border-radius: var(--borderRadius);
+    box-shadow: var(--boxShadow);
+    display: none;
+
+    &.is-active {
+      display: block;
+    }
+
+    header {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--gap-md);
+      margin-bottom: #{px2rem(10px)};
+
+      h4 {
+        font-size: var(--fontSizeBase);
+        height: #{px2rem(24px)};
+        line-height: #{px2rem(24px)};
+        font-weight: bold;
+        margin: 0;
+      }
+
+      a {
+        display: inline-block;
+        font-size: var(--fontSizeSm);
+        cursor: pointer;
+        padding: 0;
+      }
+    }
+  }
+
+  .#{$ns}SearchBox-history-content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 var(--gap-md);
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: calc(
+      var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2
+    );
+  }
+
+  .#{$ns}SearchBox-history-tag {
+    display: inlin-flex;
+    height: var(--Tag-height);
+    padding: 0 var(--gap-sm);
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--Tag-content-fontSize);
+    max-width: 160px;
+    border-radius: var(--Tag-borderRadius);
+    background-color: var(--Tag-default-color);
+    color: var(--Tag-fontColor);
+    margin-bottom: var(--gap-sm);
+    margin-right: var(--gap-sm);
+    max-width: 96px;
+    cursor: pointer;
+
+    &-text {
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      line-height: 24px;
+    }
+
+    &-close {
+      margin-left: var(--gap-sm);
+      margin-right: var(--gap-xs);
+      cursor: pointer;
+
+      i {
+        font-size: #{px2rem(8px)};
+      }
+
+      .icon {
+        width: #{px2rem(8px)};
+        height: #{px2rem(8px)};
+        position: inherit;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+      &:active {
+        opacity: 0.3;
+      }
+    }
+  }
+}

package/scss/components/_steps.scss

@@ -6,7 +6,7 @@
   .#{$ns}StepsItem {
     flex: 1;
     overflow: hidden;
-    padding: 0 px2rem(20px);
+    padding: 0 px2rem(8px);
     height: auto;
     line-height: px2rem(32px);
     &-container {
@@ -23,6 +23,10 @@
           border-radius: 50%;
           font-size: var(--Steps-icon-fontsize);
           text-align: center;
+          .icon {
+            width: px2rem(9px);
+            height: px2rem(9px);
+          }
         }
       }
       &Wrapper {
@@ -32,7 +36,7 @@
           .#{$ns}StepsItem-title {
             font-size: var(--Steps-title-fontsize);
             color: var(--Steps-title-color);
-            padding-right: px2rem(20px);
+            padding-right: px2rem(8px);
             position: relative;
             display: inline-block;
             > span {
@@ -70,7 +74,11 @@
             max-width: px2rem(140px);
             white-space: nowrap;
             position: relative;
-            bottom: px2rem(10px);
+            bottom: px2rem(20px);
+            >span {
+              color: var(--Steps-description-title-color);
+              font-size: var(--Steps-description-title-fontsize);
+            }
           }
         }
       }
@@ -96,7 +104,7 @@
           content: '';
           position: absolute;
           right: 0;
-          top: px2rem(32px);
+          top: px2rem(36px);
           height: 9999px;
           left: px2rem(11px);
           width: 1px;
@@ -204,17 +212,19 @@
             text-align: center;
             .#{$ns}StepsItem-title {
               padding: 0 px2rem(10px);
+              bottom: px2rem(9px);
               width: 100%;
               > span {
                 display: block;
                 position: relative;
-                left: px2rem(10px);
+                left: px2rem(12px);
               }
               .#{$ns}StepsItem-subTitle {
                 word-break: break-all;
                 padding: 0 px2rem(10px);
                 position: relative;
                 left: px2rem(10px);
+                bottom: px2rem(12px);
               }
             }
             .#{$ns}StepsItem-title:after {
@@ -223,7 +233,8 @@
             .#{$ns}StepsItem-description {
               min-width: px2rem(200px);
               word-break: break-all;
-              padding: 0 px2rem(10px);
+              padding: 0 px2rem(20px);
+              bottom: px2rem(44px);
             }
             .#{$ns}StepsItem-title.is-success {
               &:after {
@@ -307,18 +318,18 @@
       color: var(--Steps-bg);
       border: 1px solid var(--Steps-bg);
     }
+    .#{$ns}StepsItem-title,
+      .#{$ns}StepsItem-subTitle,
+      .#{$ns}StepsItem-description {
+        color: var(--Steps-status-wait);
+      }
   }
   .#{$ns}StepsItem.is-error {
     .#{$ns}StepsItem-icon {
-      background-color: var(--Steps-status-error);
+        background-color: var(--Steps-status-error);
       color: var(--white);
       border: 1px solid var(--Steps-status-error);
     }
-    .#{$ns}StepsItem-title,
-    .#{$ns}StepsItem-subTitle,
-    .#{$ns}StepsItem-description {
-      color: var(--Steps-status-error);
-    }
   }
   .#{$ns}StepsItem.is-finish,
   .#{$ns}StepsItem.is-process {