amis-ui 2.7.2 → 2.8.0

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

@@ -2,9 +2,12 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: 0 var(--DatePicker-paddingX);
+  padding: 0 var(--inputDate-default-paddingRight) 0
+    var(--inputDate-default-paddingLeft);
   height: var(--DatePicker-height);
   outline: none;
   border-radius: var(--DatePicker-borderRadius);
@@ -20,6 +23,18 @@
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
+      border-style: var(--inputDate-hover-top-border-style)
+        var(--inputDate-hover-right-border-style)
+        var(--inputDate-hover-bottom-border-style)
+        var(--inputDate-hover-left-border-style);
+      border-width: var(--inputDate-hover-top-border-width)
+        var(--inputDate-hover-right-border-width)
+        var(--inputDate-hover-bottom-border-width)
+        var(--inputDate-hover-left-border-width);
+
+      .#{$ns}DateRangePicker-input {
+        color: var(--inputDate-hover-color);
+      }
 
       .#{$ns}DateRangePicker-clear {
         display: flex;
@@ -31,21 +46,36 @@
     }
 
     &.is-focused {
+      background: var(--inputDate-active-bg-color);
       border-color: var(--DatePicker-onFocused-borderColor);
-      box-shadow: var(--Form-input-boxShadow);
+      box-shadow: var(--inputDate-active-shadow);
+      border-style: var(--inputDate-active-top-border-style)
+        var(--inputDate-active-right-border-style)
+        var(--inputDate-active-bottom-border-style)
+        var(--inputDate-active-left-border-style);
+      border-width: var(--inputDate-active-top-border-width)
+        var(--inputDate-active-right-border-width)
+        var(--inputDate-active-bottom-border-width)
+        var(--inputDate-active-left-border-width);
+
+      .#{$ns}DateRangePicker-input {
+        color: var(--inputDate-active-color);
+      }
     }
   }
 
   .#{$ns}DateRangePicker-input {
     border: none;
-    border-bottom: 2px solid transparent;
+    border-bottom: var(--DateRangePicker-activeCursor-height) solid transparent;
     outline: none;
     padding: 0;
     background: 0;
     flex: 1;
     width: 50%;
     line-height: px2rem(30px);
-    font-size: var(--fonts-size-7);
+    font-size: var(--DatePicker-fontSize);
+    font-weight: var(--inputDate-default-fontWeight);
+    color: var(--inputDate-default-color);
 
     &::placeholder {
       color: var(--colors-neutral-text-6);
@@ -58,22 +88,34 @@
   }
 
   .#{$ns}DateRangePicker-input-separator {
-    margin: 0 var(--gap-sm);
+    margin: 0 var(--inputDate-range-separator-margin);
     display: flex;
     align-items: center;
 
     &-line {
-      width: var(--gap-sm);
+      width: var(--inputDate-range-separator-width);
       height: 1px;
-      background: #b8babf;
+      background: var(--inputDate-range-separator-color);
     }
   }
 
   &.is-disabled {
-    background: $gray200;
+    background: var(--inputDate-disabled-bg-color);
+    border-width: var(--inputDate-disabled-top-border-width)
+      var(--inputDate-disabled-right-border-width)
+      var(--inputDate-disabled-bottom-border-width)
+      var(--inputDate-disabled-left-border-width);
+    border-style: var(--inputDate-disabled-top-border-style)
+      var(--inputDate-disabled-right-border-style)
+      var(--inputDate-disabled-bottom-border-style)
+      var(--inputDate-disabled-left-border-style);
+    border-color: var(--inputDate-disabled-top-border-color)
+      var(--inputDate-disabled-right-border-color)
+      var(--inputDate-disabled-bottom-border-color)
+      var(--inputDate-disabled-left-border-color);
 
     > .#{$ns}DateRangePicker-input {
-      color: var(--text--muted-color);
+      color: var(--inputDate-disabled-color);
     }
   }
 
@@ -94,11 +136,29 @@
   &-toggler {
     @include input-clear();
     line-height: 1;
+
+    svg {
+      color: var(--inputDate-default-icon-color);
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
+  }
+
+  .DatePicker-toggler-clock {
+    content: var(--inputTime-default-icon);
+  }
+
+  .DatePicker-toggler-date {
+    content: var(--inputDate-default-icon);
   }
 
   &-clear {
     @include input-clear();
     line-height: 1;
+    svg {
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
   }
 
   &-activeCursor {
@@ -203,7 +263,9 @@
 
 .#{$ns}DateRangeCalendar {
   display: inline-block;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   background: var(--DatePicker-bg);
   border-radius: var(--DatePicker-borderRadius);
 }

package/scss/components/form/_date.scss

@@ -2,9 +2,13 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: var(--inputDate-default-paddingTop)
+    var(--inputDate-default-paddingRight) var(--inputDate-default-paddingBottom)
+    var(--inputDate-default-paddingLeft);
   height: var(--DatePicker-height);
   outline: none;
   white-space: nowrap;
@@ -19,6 +23,9 @@
     background: none;
     padding: 0;
     border: 0;
+    font-size: var(--DatePicker-fontSize);
+    font-weight: var(--inputDate-default-fontWeight);
+    color: var(--inputDate-default-color);
     &:focus {
       border: none;
       outline: none;
@@ -41,6 +48,18 @@
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
+      border-style: var(--inputDate-hover-top-border-style)
+        var(--inputDate-hover-right-border-style)
+        var(--inputDate-hover-bottom-border-style)
+        var(--inputDate-hover-left-border-style);
+      border-width: var(--inputDate-hover-top-border-width)
+        var(--inputDate-hover-right-border-width)
+        var(--inputDate-hover-bottom-border-width)
+        var(--inputDate-hover-left-border-width);
+
+      .#{$ns}DatePicker-input {
+        color: var(--inputDate-hover-color);
+      }
 
       .#{$ns}DatePicker-clear {
         display: flex;
@@ -52,20 +71,40 @@
     }
 
     &.is-focused {
+      background: var(--inputDate-active-bg-color);
       border-color: var(--DatePicker-onFocused-borderColor);
-      box-shadow: var(--Form-input-boxShadow);
+      box-shadow: var(--inputDate-active-shadow);
+      border-style: var(--inputDate-active-top-border-style)
+        var(--inputDate-active-right-border-style)
+        var(--inputDate-active-bottom-border-style)
+        var(--inputDate-active-left-border-style);
+      border-width: var(--inputDate-active-top-border-width)
+        var(--inputDate-active-right-border-width)
+        var(--inputDate-active-bottom-border-width)
+        var(--inputDate-active-left-border-width);
+      .#{$ns}DatePicker-input {
+        color: var(--inputDate-active-color);
+      }
     }
   }
 
-  .#{$ns}DatePicker-input {
-    font-size: var(--fonts-size-7);
-  }
-
   &.is-disabled {
-    background: $gray200;
+    background: var(--inputDate-disabled-bg-color);
+    border-width: var(--inputDate-disabled-top-border-width)
+      var(--inputDate-disabled-right-border-width)
+      var(--inputDate-disabled-bottom-border-width)
+      var(--inputDate-disabled-left-border-width);
+    border-style: var(--inputDate-disabled-top-border-style)
+      var(--inputDate-disabled-right-border-style)
+      var(--inputDate-disabled-bottom-border-style)
+      var(--inputDate-disabled-left-border-style);
+    border-color: var(--inputDate-disabled-top-border-color)
+      var(--inputDate-disabled-right-border-color)
+      var(--inputDate-disabled-bottom-border-color)
+      var(--inputDate-disabled-left-border-color);
 
     > .#{$ns}DatePicker-input {
-      color: var(--text--muted-color);
+      color: var(--inputDate-disabled-color);
     }
   }
 
@@ -87,11 +126,28 @@
   &-toggler {
     @include input-clear();
     line-height: 1;
+    svg {
+      color: var(--inputDate-default-icon-color);
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
+  }
+
+  .DatePicker-toggler-clock {
+    content: var(--inputTime-default-icon);
+  }
+
+  .DatePicker-toggler-date {
+    content: var(--inputDate-default-icon);
   }
 
   &-clear {
     @include input-clear();
     line-height: 1;
+    svg {
+      width: var(--inputDate-default-icon-size);
+      height: var(--inputDate-default-icon-size);
+    }
   }
 }
 
@@ -261,6 +317,7 @@
       background: var(--Calendar-cell-bg);
 
       &:hover span {
+        color: var(--inputDate-hover-option-color);
         background: var(--Calendar-cell-onHover-bg);
       }
     }
@@ -297,6 +354,7 @@
     td.rdtActive,
     td.rdtActive:hover {
       > span {
+        color: var(--inputDate-active-option-color);
         background: var(--Calendar-cell-onActive-bg);
       }
     }
@@ -365,8 +423,8 @@
   overflow: auto;
   .#{$ns}CalendarInput-sugs {
     list-style: none;
-    background: var(--Form-select-menu-bg);
-    color: var(--Form-select-menu-color);
+    background: var(--inputTime-default-bg-color);
+    color: var(--inputTime-default-color);
     left: px2rem(-1px);
     right: px2rem(-1px);
     top: 100%;
@@ -382,15 +440,17 @@
       text-align: center;
       height: 28px;
       line-height: 28px;
+      font-size: var(--inputTime-default-fontSize);
+      font-weight: var(--inputTime-default-fontWeight);
       cursor: pointer;
 
       &.is-highlight {
-        color: var(--Form-select-menu-onHover-color);
-        background: var(--Form-select-menu-onHover-bg);
+        color: var(--inputTime-active-color);
+        background: var(--inputTime-active-bg-color);
       }
       &:hover {
-        color: var(--Form-select-menu-onHover-color);
-        background: #f7f7f9;
+        color: var(--inputTime-hover-color);
+        background: var(--inputTime-hover-bg-color);
       }
     }
   }
@@ -573,7 +633,7 @@
 
   &:hover {
     text-decoration: none;
-    color: var(--DatePicker-color);
+    color: var(--inputDate-hover-title-arrow-color);
   }
 }
 
@@ -585,7 +645,7 @@
   text-align: center;
   cursor: pointer;
   font-weight: normal;
-  color: var(--DatePicker-color);
+  color: var(--inputDate-default-title-color);
 
   &:hover {
     color: var(--DatePicker-header-onHover-color);
@@ -639,6 +699,12 @@ td.rdtYear,
 td.rdtQuarter {
   > span {
     display: inline-block;
+    color: var(--inputDate-other-color);
+    background: var(--inputDate-other-bg-color);
+    border-radius: var(--inputDate-other-top-left-border-radius)
+      var(--inputDate-other-top-right-border-radius)
+      var(--inputDate-other-bottom-right-border-radius)
+      var(--inputDate-other-bottom-left-border-radius);
   }
 
   &.rdtBetween {
@@ -649,8 +715,8 @@ td.rdtQuarter {
     background: transparent;
 
     > span {
-      color: var(--Form-select-menu-onHover-color);
-      background: #f7f7f9;
+      color: var(--inputDate-other-hover-color);
+      background: var(--inputDate-other-hover-bg-color);
     }
   }
 
@@ -659,15 +725,19 @@ td.rdtQuarter {
     background: transparent;
 
     > span {
-      background: var(--info) !important;
-      color: var(--white);
+      background: var(--inputDate-other-active-bg-color) !important;
+      color: var(--inputDate-other-active-color) !important;
     }
   }
 
   &.rdtDisabled,
   &.rdtDisabled:hover {
-    background: var(--Calendar-cell-onDisabled-bg);
-    color: #b8babf;
+    background: var(--inputDate-other-disabled-bg-color);
+
+    > span {
+      background: var(--inputDate-other-disabled-bg-color);
+      color: var(--inputDate-other-disabled-color);
+    }
   }
 }
 

package/scss/components/form/_form.scss

@@ -262,7 +262,6 @@
       }
 
       > .#{$ns}Form-label {
-        height: px2rem(32px);
         line-height: px2rem(32px);
         margin: 0;
         margin-right: var(--Form--horizontal-label-gap);

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

@@ -156,3 +156,14 @@
 .#{$ns}InputGroup:not(.is-inline) {
   display: flex;
 }
+
+.#{$ns}InputGroup-validation--full.is-error > .#{$ns}Form-control {
+  border-color: var(--Form-input-onError-borderColor);
+  transition: all var(--animation-duration);
+}
+
+.#{$ns}InputGroup-validation--partial.is-error > .#{$ns}Form-control.is-error {
+  border-color: var(--Form-input-onError-borderColor);
+  background: var(--Form-input-onError-bg);
+  transition: all var(--animation-duration);
+}

package/scss/components/form/_location.scss

@@ -2,32 +2,32 @@
   position: relative;
   display: inline-flex;
   flex-wrap: nowrap;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
-  font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
-  height: var(--DatePicker-height);
+  border: var(--borders-width-2) solid var(--colors-neutral-line-8);
+  font-size: var(--fonts-size-7);
+  padding: var(--sizes-size-4) var(--sizes-size-7);
+  height: var(--sizes-base-16);
   outline: none;
   white-space: nowrap;
-  color: var(--DatePicker-color);
-  background: var(--DatePicker-bg);
+  color: var(--colors-neutral-text-2);
+  background: var(--colors-neutral-fill-11);
   border-radius: var(--LocationPicker-borderRadius);
 
   &:not(.is-disabled) {
     cursor: pointer;
 
     &:hover {
-      background: var(--DatePicker-onHover-bg);
-      border-color: var(--DatePicker-onHover-borderColor);
+      background: var(--colors-neutral-fill-11);
+      border-color: var(--colors-brand-5);
 
       .#{$ns}DatePicker-toggler:before {
-        color: var(--DatePicker-onHover-iconColor);
+        color: var(--colors-brand-5);
       }
     }
   }
 
   &.is-focused,
   &.is-active {
-    border-color: var(--DatePicker-onFocused-borderColor);
+    border-color: var(--colors-brand-5);
     box-shadow: var(--Form-input-boxShadow);
   }
 
@@ -40,7 +40,7 @@
   }
 
   &-placeholder {
-    color: var(--DatePicker-placeholderColor);
+    color: var(--colors-neutral-text-6);
     user-select: none;
     margin-right: var(--gap-base);
     flex-basis: 0;
@@ -55,10 +55,10 @@
 
   &-toggler {
     cursor: pointer;
-    color: var(--DatePicker-iconColor);
+    color: var(--colors-neutral-text-5);
 
     &:hover {
-      color: var(--DatePicker-onHover-iconColor);
+      color: var(--colors-brand-5);
     }
   }
 
@@ -73,9 +73,9 @@
   position: relative;
   width: 100%;
   .#{$ns}PopOver {
-      border: none;
-      box-shadow: var(--boxShadow);
-    }
+    border: none;
+    box-shadow: var(--boxShadow);
+  }
 }
 
 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {

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

@@ -62,10 +62,14 @@
     .#{$ns}NestedSelect-option {
       position: relative;
       padding-left: var(--gap-md);
-      min-height: var(--Form-input-height);
-      line-height: var(--Form-input-height);
+      min-height: var(--select-base-default-option-line-height);
+      line-height: var(--select-base-default-option-line-height);
       cursor: pointer;
       display: flex;
+      font-size: var(--select-base-default-option-fontSize);
+      font-weight: var(--select-base-default-option-fontWeight);
+      color: var(--select-base-default-option-color);
+      background: var(--select-base-default-option-bg-color);
 
       > .#{$ns}NestedSelect-optionLabel {
         flex: 1;

package/scss/components/form/_number.scss

@@ -10,6 +10,7 @@
   border: var(--Number-borderWidth) solid var(--Form-input-borderColor);
   border-radius: var(--Number-borderRadius);
   overflow: hidden;
+  position: relative;
 
   border-width: var(--inputNumber-base-default-top-border-width)
     var(--inputNumber-base-default-right-border-width)
@@ -47,6 +48,12 @@
       var(--inputNumber-base-hover-bottom-right-border-radius)
       var(--inputNumber-base-hover-bottom-left-border-radius);
     background: var(--inputNumber-base-hover-bg-color);
+    .#{$ns}Number-input {
+      padding-right: calc(
+        var(--Number-handler-width) +
+          var(--inputNumber-base-default-paddingRight)
+      );
+    }
   }
 
   &-focused {
@@ -190,7 +197,8 @@
   @if $Number-handler-mode==vertical {
     &-handler-wrap {
       display: none;
-      float: right;
+      position: absolute;
+      right: 0;
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
       height: 100%;
@@ -243,8 +251,6 @@
     .#{$ns}Number-input {
       opacity: 0.72;
       cursor: not-allowed;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
       color: var(--text--muted-color);
       background: var(--Form-input-onDisabled-bg);
       border-color: var(--Form-input-onDisabled-borderColor);
@@ -356,6 +362,9 @@
       var(--inputNumber-enhance-hover-top-right-border-radius)
       var(--inputNumber-enhance-hover-bottom-right-border-radius)
       var(--inputNumber-enhance-hover-bottom-left-border-radius);
+    .#{$ns}Number-input {
+      padding-right: var(--inputNumber-base-default-paddingRight);
+    }
     .#{$ns}Number--enhance-input {
       background: var(--inputNumber-enhance-hover-bg-color);
     }