amis-ui 2.3.2-beta.1 → 2.4.0

package/scss/components/form/_icon-select.scss

@@ -0,0 +1,216 @@
+.#{$ns}IconSelectControl {
+  @include input-text();
+
+  &-clear {
+    position: absolute;
+    right: var(--Form-input-paddingX);
+  }
+
+  &-Modal {
+    &-search.#{$ns}SearchBox {
+      width: var(--IconSelect-searchBox-width);
+    }
+
+    &-refresh {
+      display: inline-block;
+      vertical-align: baseline;
+      margin-left: var(--IconSelect-base-margin);
+    }
+
+    &-content {
+      display: flex;
+      position: relative;
+      margin-top: var(--IconSelect-base-margin);
+      height: var(--IconSelect-dialog-height);
+      align-items: stretch;
+      border: 1px solid var(--IconSelect-border-color);
+      border-radius: var(--IconSelect-base-border-radius);
+
+      &-aside {
+        border-right: 1px solid var(--IconSelect-border-color);
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+
+      &-main {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+
+  &-input {
+    overflow: hidden;
+
+    &-area {
+      min-height: var(--IconSelect-preivew-icon-size);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      overflow: hidden;
+    }
+
+    &-wrapper {
+      width: 100%;
+    }
+
+    &-icon {
+      &-show {
+        width: var(--IconSelect-preivew-icon-size);
+        height: var(--IconSelect-preivew-icon-size);
+        margin-right: var(--IconSelect-xs-margin);
+
+        & > svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-id {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &-placeholder {
+        color: var(--IconSelect-icon-placeholder-color);
+        user-select: none;
+      }
+    }
+  }
+
+  &-type-list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    width: var(--IconSelect-type-width);
+    flex-direction: column;
+    list-style: none;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    overflow: auto;
+    font-size: var(--IconSelect-type-font-size);
+
+    li {
+      line-height: var(--IconSelect-type-li-height);
+      padding: 0;
+      padding-left: var(--IconSelect-type-li-padding);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        color: var(--IconSelect-active-bg-color);
+      }
+
+      &.active {
+        background-color: #e6f0ff;
+      }
+    }
+  }
+
+  &-icon-list {
+    position: relative;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    overflow: hidden;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--IconSelect-sm-padding);
+
+    &-empty {
+      text-align: center;
+    }
+
+    > li {
+      padding: var(--IconSelect-sm-padding);
+      width: 20%;
+    }
+
+    &-item {
+      position: relative;
+      // padding: 8px;
+      padding-left: var(--IconSelect-base-margin);
+      height: var(--IconSelect-type-item-height);
+      // flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border: 1px solid #e8e9eb;
+      border-radius: var(--IconSelect-base-border-radius);
+
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        border-color: var(--IconSelect-active-bg-color);
+      }
+
+      &.active {
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: var(--IconSelect-type-font-size);
+          height: var(--IconSelect-type-font-size);
+          border-bottom-left-radius: var(--IconSelect-base-border-radius);
+          background-color: var(--IconSelect-active-bg-color);
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 2px;
+          top: 3px;
+          width: 7px;
+          height: 4px;
+          border-style: solid;
+          border-color: var(--IconSelect-active-badge-color);
+          border-width: 0 0 1px 1px;
+          transform: rotate(-45deg);
+        }
+      }
+
+      & > svg {
+        width: var(--IconSelect-list-icon-size);
+        height: var(--IconSelect-list-icon-size);
+      }
+
+      &-info {
+        margin-left: var(--IconSelect-base-margin);
+        overflow: hidden;
+        flex: 1;
+
+        > p {
+          line-height: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &-name {
+          margin: 0;
+          margin-bottom: var(--IconSelect-xs-margin);
+          font-size: var(--IconSelect-type-font-size);
+          color: var(--IconSelect-icon-name-color);
+        }
+
+        &-id {
+          margin: 0;
+          font-size: var(--IconSelect-type-font-size);
+          color: var(--IconSelect-icon-id-color);
+        }
+      }
+    }
+  }
+}

package/scss/components/form/_image.scss

@@ -20,14 +20,47 @@
 
     @include button-variant(
       var(--ImageControl-addBtn-bg),
-      var(--ImageControl-addBtn-border),
       var(--ImageControl-addBtn-color),
+      var(--ImageControl-addBtn-border),
+      var(--ImageControl-addBtn-border),
+      var(--ImageControl-addBtn-border),
+      var(--ImageControl-addBtn-border),
+      var(--button-default-default-top-border-width),
+      var(--button-default-default-right-border-width),
+      var(--button-default-default-bottom-border-width),
+      var(--button-default-default-left-border-width),
+      var(--button-default-default-top-border-style),
+      var(--button-default-default-right-border-style),
+      var(--button-default-default-bottom-border-style),
+      var(--button-default-default-left-border-style),
+      var(--button-default-default-shadow),
       var(--ImageControl-addBtn-onHover-bg),
-      var(--ImageControl-addBtn-onHover-border),
       var(--ImageControl-addBtn-onHover-color),
+      var(--ImageControl-addBtn-onHover-border),
+      var(--ImageControl-addBtn-onHover-border),
+      var(--ImageControl-addBtn-onHover-border),
+      var(--ImageControl-addBtn-onHover-border),
+      var(--button-default-hover-top-border-width),
+      var(--button-default-hover-right-border-width),
+      var(--button-default-hover-bottom-border-width),
+      var(--button-default-hover-left-border-width),
+      var(--button-default-hover-top-border-style),
+      var(--button-default-hover-right-border-style),
+      var(--button-default-hover-bottom-border-style),
+      var(--button-default-hover-left-border-style),
+      var(--button-default-hover-shadow),
       var(--ImageControl-addBtn-onActive-bg),
-      var(--ImageControl-addBtn-onActive-border),
       var(--ImageControl-addBtn-onActive-color)
+        var(--ImageControl-addBtn-onActive-border),
+      var(--button-default-active-top-border-width),
+      var(--button-default-active-right-border-width),
+      var(--button-default-active-bottom-border-width),
+      var(--button-default-active-left-border-width),
+      var(--button-default-active-top-border-style),
+      var(--button-default-active-right-border-style),
+      var(--button-default-active-bottom-border-style),
+      var(--button-default-active-left-border-style),
+      var(--button-default-active-shadow)
     );
 
     > svg {
@@ -76,13 +109,15 @@
     color: var(--ImageControl-addBtn-onHover-color) !important;
   }
 
-  &-dropzone:hover &-addBtn {
-    border-color: var(--ImageControl-addBtn-onHover-border);
-    background: var(--ImageControl-addBtn-onHover-bg);
-    color: var(--ImageControl-addBtn-onHover-color);
-    border-color: var(--ImageControl-addBtn-onHover-border);
-    &-text {
+  &-dropzone:hover {
+    &-addBtn:not(.is-disabled) {
+      border-color: var(--ImageControl-addBtn-onHover-border);
+      background: var(--ImageControl-addBtn-onHover-bg);
       color: var(--ImageControl-addBtn-onHover-color);
+      border-color: var(--ImageControl-addBtn-onHover-border);
+      .#{$ns}ImageControl-addBtn-text {
+        color: var(--ImageControl-addBtn-onHover-color);
+      }
     }
   }
 

package/scss/components/form/_input-group.scss

@@ -148,6 +148,9 @@
       color: var(--primary);
     }
   }
+  .#{$ns}Form-static {
+    margin-right: var(--gap-xs);
+  }
 }
 
 .#{$ns}InputGroup:not(.is-inline) {

package/scss/components/form/_list.scss

@@ -1,4 +1,5 @@
-.#{$ns}ListControl {
+.#{$ns}ListControl,
+.#{$ns}ListControl-static {
   &-items {
     display: block;
     margin: calc(var(--ListControl-gutterWidth) / -2);
@@ -24,13 +25,39 @@
     max-width: calc(#{px2rem(200px)} + 2 * var(--ListControl-item-paddingX));
     border-radius: var(--ListControl-item-borderRadius);
 
-    &:not(.is-disabled) {
-      cursor: pointer;
-    }
-
     .b-inherit {
       border-color: var(--ListControl-item-color);
     }
+  }
+
+  &-itemImage {
+    margin: calc(var(--ListControl-item-paddingY) * -1)
+      calc(var(--ListControl-item-paddingX) * -1);
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+  }
+
+  &-itemLabel {
+    text-align: center;
+  }
+
+  &-itemImage + &-itemLabel {
+    margin-top: var(--ListControl-item-paddingY);
+  }
+
+  &-placeholder {
+    color: var(--Form-input-placeholderColor);
+  }
+}
+
+.#{$ns}ListControl {
+  &-item {
+    &:not(.is-disabled) {
+      cursor: pointer;
+    }
 
     @include hover {
       background: var(--ListControl-item-onHover-bg);
@@ -97,26 +124,4 @@
       }
     }
   }
-
-  &-itemImage {
-    margin: calc(var(--ListControl-item-paddingY) * -1)
-      calc(var(--ListControl-item-paddingX) * -1);
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
-  }
-
-  &-itemLabel {
-    text-align: center;
-  }
-
-  &-itemImage + &-itemLabel {
-    margin-top: var(--ListControl-item-paddingY);
-  }
-
-  &-placeholder {
-    color: var(--Form-input-placeholderColor);
-  }
-}
+}

package/scss/components/form/_location.scss

@@ -72,6 +72,10 @@
 .#{$ns}LocationControl {
   position: relative;
   width: 100%;
+  .#{$ns}PopOver {
+      border: none;
+      box-shadow: var(--boxShadow);
+    }
 }
 
 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {

package/scss/components/form/_nested-select.scss

@@ -13,7 +13,7 @@
   @include input-border();
   &-optionArrowRight {
     display: inline-block;
-    padding-right: px2rem(40px);
+    padding-right: var(--Form-select-icon-rigin);
 
     svg {
       width: px2rem(12px);

package/scss/components/form/_range.scss

@@ -132,6 +132,10 @@
       width: var(--InputRange-handle-icon-width);
       height: var(--InputRange-handle-icon-height);
       top: 0;
+
+      g path {
+        fill: var(--colors-brand-9);
+      }
     }
   }
 

package/scss/components/form/_select.scss

@@ -104,8 +104,9 @@
     position: relative;
     flex-grow: 1;
     line-height: 1;
-    // width: 0;
+    width: auto;
     max-width: 100%;
+    overflow: hidden;
   }
   &-valuesNoWrap {
     white-space: nowrap;

package/scss/components/form/_switch.scss

@@ -67,6 +67,19 @@
       color: var(--white);
       margin: 0 var(--Switch-text-marginLeft) 0 var(--Switch-text-marginRight);
     }
+
+    &:hover {
+      background: var(--Switch-checked-onHover-bgColor);
+    }
+
+    &:active {
+      background: var(--Switch-checked-onActive-bgColor);
+      .slider::before {
+        left: calc(
+          100% - (var(--Switch-height) + #{px2rem(2px)}) - #{px2rem(2px)}
+        );
+      }
+    }
   }
 
   &.is-checked.is-disabled {
@@ -113,6 +126,40 @@
       }
     }
   }
+
+  .text {
+    margin: 0 px2rem(8px) 0 px2rem(25px);
+    vertical-align: super;
+  }
+  .slider {
+    &:before {
+      width: calc(var(--Switch-height) - #{px2rem(4px)});
+      top: px2rem(2px);
+      bottom: px2rem(2px);
+      left: px2rem(2px);
+      transition: all 0.5s ease;
+    }
+  }
+  &:active {
+    .slider::before {
+      width: calc(var(--Switch-height) + #{px2rem(2px)});
+      border-radius: 10px;
+    }
+  }
+  &.is-checked {
+    background: var(--Switch-checked-bgColor);
+
+    .slider::before {
+      right: auto;
+      left: calc(
+        100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
+      );
+    }
+
+    .text {
+      margin: 0 px2rem(25px) 0 px2rem(8px);
+    }
+  }
 }
 
 .#{$ns}Switch-option {
@@ -129,6 +176,13 @@
   }
 }
 
+.#{$ns}Form-static {
+  .#{$ns}Switch-option {
+    vertical-align: initial;
+    color: var(--text--muted-color);
+  }
+}
+
 .#{$ns}SwitchControl {
   padding-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
 

package/scss/components/form/_tag.scss

@@ -51,12 +51,17 @@
       border: var(--TagControl-sugBtn-borderWidth) solid transparent;
 
       @include button-size(
-        var(--TagControl-sugBtn-paddingY),
-        var(--TagControl-sugBtn-paddingX),
         var(--TagControl-sugBtn-fontSize),
         var(--TagControl-sugBtn-lineHeight),
         var(--TagControl-sugBtn-borderRadius),
-        var(--TagControl-sugBtn-height)
+        var(--TagControl-sugBtn-borderRadius),
+        var(--TagControl-sugBtn-borderRadius),
+        var(--TagControl-sugBtn-borderRadius),
+        var(--TagControl-sugBtn-height),
+        var(--TagControl-sugBtn-paddingY),
+        var(--TagControl-sugBtn-paddingY),
+        var(--TagControl-sugBtn-paddingX),
+        var(--TagControl-sugBtn-paddingX)
       );
 
       @include button-variant(

package/scss/components/form/_text.scss

@@ -169,8 +169,8 @@
     position: absolute;
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
-    border: var(--Form-input-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+    border-radius: px2rem(2px);
+    box-shadow: var(--menu-box-shadow);
     left: px2rem(-1px);
     right: px2rem(-1px);
     top: calc(100% + #{px2rem(4px)});

package/scss/components/form/_textarea.scss

@@ -66,3 +66,11 @@
     top: var(--Form-input-paddingY);
   }
 }
+
+.#{$ns}Form-static {
+  .#{$ns}TextareaControl > textarea {
+    border: 0;
+    padding: 0;
+    resize: none;
+  }
+}