amis-ui 3.1.1 → 3.3.0

package/scss/components/form/_location.scss

@@ -39,6 +39,16 @@
     }
   }
 
+  &.is-mobile {
+    border: none;
+
+    .#{$ns}LocationPicker-toggler {
+      svg {
+        top: 0.125rem;
+      }
+    }
+  }
+
   &-placeholder {
     color: var(--colors-neutral-text-6);
     user-select: none;
@@ -51,6 +61,8 @@
     margin-right: var(--gap-base);
     flex-basis: 0;
     flex-grow: 1;
+    overflow-x: auto;
+    max-width: calc(100% - px2rem(20px));
   }
 
   &-toggler {
@@ -72,6 +84,27 @@
       top: 0;
     }
   }
+
+  &-popup {
+    height: px2rem(460px);
+
+    &-inner {
+      flex: 1;
+      padding: 0 px2rem(16px);
+
+      .#{$ns}MapPicker-search {
+        padding-top: 0;
+        margin-bottom: px2rem(16px);
+
+        .#{$ns}TextControl-input {
+          border-radius: 0;
+          border-top: none;
+          border-right: none;
+          border-left: none;
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}LocationControl {
@@ -81,6 +114,12 @@
     border: none;
     box-shadow: var(--boxShadow);
   }
+
+  &.is-mobile {
+    flex: 1;
+    text-align: right;
+    overflow: hidden;
+  }
 }
 
 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {

package/scss/components/form/_matrix.scss

@@ -1,4 +1,6 @@
 .#{$ns}MatrixControl {
+  max-width: 100%;
+
   &-error {
     margin-bottom: 0;
   }

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

@@ -11,15 +11,21 @@
 .#{$ns}NestedSelect {
   position: relative;
   @include input-border();
+
+  &.is-mobile {
+    text-align: right;
+  }
+
   &-optionArrowRight {
     display: inline-block;
     padding-right: var(--Form-select-icon-rigin);
 
     svg {
-      width: px2rem(12px);
-      height: px2rem(12px);
+      width: px2rem(10px);
+      height: px2rem(10px);
       fill: var(--Form-input-iconColor);
       color: var(--default-icon-color);
+      top: 0;
     }
   }
 
@@ -113,6 +119,6 @@
     }
   }
   &-popup {
-    height: px2rem(460px);
+    height: px2rem(340px);
   }
 }

package/scss/components/form/_number.scss

@@ -71,6 +71,14 @@
     box-shadow: var(--inputNumber-base-active-shadow);
   }
 
+  &.is-mobile {
+    border: none;
+
+    &-focused {
+      border: none;
+    }
+  }
+
   &-disabled {
     border-width: var(--inputNumber-base-disabled-top-border-width)
       var(--inputNumber-base-disabled-right-border-width)

package/scss/components/form/_picker.scss

@@ -206,3 +206,15 @@
     min-width: px2rem(150px);
   }
 }
+
+.#{$ns}PickerControl.is-mobile {
+  width: 100%;
+
+  .#{$ns}Form-item {
+    padding: 0;
+  }
+
+  .#{$ns}Picker-input {
+    border: none;
+  }
+}

package/scss/components/form/_range.scss

@@ -1,12 +1,12 @@
 .#{$ns}InputRange {
   display: flex;
   justify-content: space-between;
-  padding: var(--InputRange-padding) 0;
   width: 100%;
 
   &-wrap {
     position: relative;
     flex: auto;
+    padding: var(--InputRange-padding) 0;
   }
 
   &-input {
@@ -33,6 +33,22 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}InputRange-input {
+      width: var(--InputRange-input-mobile-width);
+      // margin-left: 0;
+
+      .#{$ns}Number-handler-wrap {
+        display: none !important;
+      }
+
+      input {
+        padding: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+
   &-clear {
     display: flex;
     align-items: center;
@@ -97,6 +113,11 @@
     width: var(--InputRange-handle-width);
     height: var(--InputRange-handle-height);
 
+    &.is-mobile {
+      width: var(--InputRange-handle-mobile-width);
+      height: var(--InputRange-handle-mobile-height);
+    }
+
     &-icon,
     &-drage {
       width: 100%;
@@ -126,10 +147,12 @@
       }
     }
 
-    &-drage {
-      transform: var(--InputRange-handle-onActive-transform);
-      box-shadow: var(--InputRange-handle-onFocus-boxShadow);
-      border-width: var(--InputRange-handle-onDrage-border-width);
+    &:not(.is-mobile) {
+      .#{$ns}InputRange-handle-drage {
+        transform: var(--InputRange-handle-onActive-transform);
+        box-shadow: var(--InputRange-handle-onFocus-boxShadow);
+        border-width: var(--InputRange-handle-onDrage-border-width);
+      }
     }
 
     .input-range--disabled & {
@@ -279,6 +302,13 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}InputRange-label {
+      display: block;
+      white-space: nowrap;
+    }
+  }
+
   // marks
   &-marks {
     position: relative;
@@ -304,4 +334,16 @@
       }
     }
   }
+
+  &.is-mobile {
+    .#{$ns}InputRange-marks {
+      div {
+        top: 0;
+
+        &:nth-child(2n) {
+          top: px2rem(-30px);
+        }
+      }
+    }
+  }
 }

package/scss/components/form/_select.scss

@@ -150,11 +150,17 @@
   .#{$ns}PopOver.#{$ns}Select-popover {
     margin-top: px2rem(4px);
     .#{$ns}Select-menu {
+      .#{$ns}Checkbox span {
+        line-height: var(--select-base-default-option-line-height);
+        height: var(--select-base-default-option-line-height);
+      }
       .#{$ns}Select-option {
         line-height: var(--select-base-default-option-line-height);
+        height: var(--select-base-default-option-line-height);
       }
       .#{$ns}Select-addBtn {
         line-height: var(--select-base-default-option-line-height);
+        height: var(--select-base-default-option-line-height);
       }
     }
   }
@@ -269,7 +275,7 @@
   }
 
   &.is-mobile {
-    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    min-height: var(--Form-select-height);
     border: none;
     padding: 0;
     font-size: var(--fontSizeLg);
@@ -436,6 +442,38 @@
       // display: inline-block;
       max-width: 100%;
     }
+
+    &.is-mobile {
+      position: relative;
+
+      & > a {
+        margin-right: calc(
+          20px + var(--select-base-default-option-paddingRight)
+        );
+      }
+
+      .#{$ns}Select-option-item-check {
+        flex: 1;
+        text-align: left;
+        border-bottom: px2rem(1px) solid var(--borderColor);
+      }
+
+      .#{$ns}Select-option-mcheck {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: var(--select-base-default-option-paddingRight);
+        flex: none;
+        width: px2rem(16px);
+        color: var(--Form-select-mobile-icon-check-color);
+      }
+
+      &:last-child {
+        .#{$ns}Select-option-item-check {
+          border-bottom: none;
+        }
+      }
+    }
   }
 
   &-noResult {

package/scss/components/form/_selection.scss

@@ -189,6 +189,14 @@
 }
 
 .#{$ns}TreeSelection {
+  &.is-scrollable {
+    max-height: px2rem(300px);
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding: var(--gap-xs) 0;
+  }
+
   .#{$ns}Table-expandBtn {
     color: var(--icon-color);
     margin-right: var(--gap-xs);
@@ -196,7 +204,7 @@
 
   &-sublist {
     position: relative;
-    margin: 0 0 0 px2rem(35px);
+    margin: 0 0 0 px2rem(30px);
     display: none;
   }
 
@@ -249,7 +257,7 @@
     }
 
     .#{$ns}TreeSelection-itemLabel {
-      margin-left: var(--gap-xs);
+      // margin-left: var(--gap-xs);
     }
   }
 
@@ -417,3 +425,39 @@
     cursor: pointer;
   }
 }
+
+.#{$ns}ChainedDropdownSelection {
+  display: inline-block;
+
+  &-item {
+    display: inline-block;
+  }
+}
+
+.#{$ns}DropDownSelection {
+  position: relative;
+  display: inline-block;
+  margin: 0.1875rem;
+  vertical-align: middle;
+
+  &-caret {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
+
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0;
+      transform: rotate(90deg);
+    }
+  }
+
+  &-input.is-active &-caret {
+    transform: rotate(180deg);
+  }
+}

package/scss/components/form/_text.scss

@@ -314,16 +314,15 @@
     }
   }
 
-  &-sugs {
-    position: absolute;
+  &-popover {
+    margin-top: px2rem(4px);
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
     border-radius: px2rem(2px);
     box-shadow: var(--menu-box-shadow);
-    left: px2rem(-1px);
-    right: px2rem(-1px);
-    top: calc(100% + #{px2rem(4px)});
-    z-index: 10;
+  }
+
+  &-sugs {
     max-height: px2rem(300px);
     overflow: auto;
   }

package/scss/components/form/_transfer.scss

@@ -189,7 +189,7 @@
       var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
       var(--transfer-search-paddingLeft);
     width: 100%;
-    .#{$ns}InputBox {
+    .#{$ns}InputBox:not(.is-mobile) {
       font-size: var(--transfer-search-fontSize);
       font-weight: var(--transfer-search-fontWeight);
       line-height: var(--transfer-search-lineHeight);
@@ -237,6 +237,16 @@
         color: var(--transfer-search-placeholder-font-color);
       }
     }
+
+    &.is-mobile {
+      .#{$ns}InputBox {
+        border: none;
+        border-bottom: var(--transfer-search-bottom-border-width)
+          var(--transfer-search-bottom-border-style)
+          var(--transfer-search-bottom-border-color);
+        border-radius: 0;
+      }
+    }
   }
 
   &-mid {
@@ -244,6 +254,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    &.is-mobile {
+      display: none;
+    }
   }
 
   &-arrow {
@@ -363,6 +377,25 @@
       height: auto;
     }
   }
+
+  .#{$ns}Transfer-result {
+    .#{$ns}Transfer-title {
+      height: px2rem(40px);
+      line-height: px2rem(40px);
+    }
+
+    &.is-mobile {
+      .#{$ns}Transfer-search {
+        .#{$ns}InputBox {
+          border: none;
+          border-bottom: var(--transfer-search-bottom-border-width)
+            var(--transfer-search-bottom-border-style)
+            var(--transfer-search-bottom-border-color);
+          border-radius: 0;
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}TabsTransfer {
@@ -463,6 +496,16 @@
           }
         }
       }
+
+      .#{$ns}TabsTransfer-search {
+        &.is-mobile {
+          .#{$ns}InputBox {
+            border: none;
+            border-bottom: 1px solid var(--TabsTransfer-border-color);
+            border-radius: 0;
+          }
+        }
+      }
     }
   }
 }
@@ -528,7 +571,13 @@
 
   &.is-mobile {
     width: 100%;
+    min-width: auto;
+
+    .#{$ns}Table-table > thead > tr > th:first-child.#{$ns}Table-checkCell {
+      padding-left: var(--select-table-option-paddingLeft);
+    }
   }
+
   & > .#{$ns}Transfer-selection {
     flex-grow: 1;
     max-height: var(--Transfer-selection-maxHeight);

package/scss/components/form/_tree.scss

@@ -147,9 +147,10 @@
 
     &:hover {
       .#{$ns}Tree {
-        &-itemLabel-item {
-          background-color: var(--Tree-item-onHover-bg-pure);
-        }
+        // &-itemLabel-item:not(.is-mobile) {
+        //  background-color: var(--Tree-item-onHover-bg-pure);
+        // }
+
         &-item-icons {
           visibility: visible;
         }
@@ -162,6 +163,10 @@
   }
 
   &-item {
+    &:hover {
+      background-color: var(--Tree-item-onHover-bg-pure);
+    }
+
     .is-checked {
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
       .#{$ns}Tree {
@@ -210,7 +215,7 @@
   }
 
   &-itemInput {
-    padding-left: var(--Tree-itemArrowWidth);
+    // padding-left: var(--Tree-itemArrowWidth);
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -255,6 +260,15 @@
         background: var(--Form-input-onFocused-bg);
       }
     }
+
+    &.is-mobile {
+      > input {
+        border-radius: 0;
+        border: none;
+        border-bottom: var(--Form-input-borderWidth) solid
+          var(--Form-input-borderColor);
+      }
+    }
   }
 
   &-addTopBtn {
@@ -398,3 +412,19 @@
     }
   }
 }
+
+.#{$ns}PopUp {
+  .#{$ns}Tree {
+    flex: 1;
+
+    .#{$ns}Tree-itemLabel {
+      &:hover {
+        .#{$ns}Tree {
+          &-itemLabel-item {
+            background-color: none !important;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/react-datetime.scss

@@ -15,6 +15,14 @@
   background: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f9f9f9;
+
+  &.is-mobile-year {
+    width: px2rem(184px);
+  }
+
+  &.is-mobile-embed {
+    width: px2rem(240px);
+  }
 }
 
 .rdtPickerNotDays {