amis-ui 2.7.2 → 2.8.0

package/scss/components/_menu.scss

@@ -40,6 +40,14 @@
         .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-dark-fontColor);
         }
+
+        &:hover {
+          .#{$ns}Nav-Menu-item-label,
+          .#{$ns}Nav-Menu-item-icon,
+          .#{$ns}Nav-Menu-submenu-arrow {
+            color: var(--Menu-dark-fontColor-onHover);
+          }
+        }
       }
     }
 
@@ -104,7 +112,7 @@
   --Menu-light-fontColor-onHover: var(--Layout-fontColor--onHover);
   --Menu-light-ancestor-fontColor-onActive: var(--Layout-light-fontColor);
   --Menu-light-fontColor-onActive: var(--Layout-fontColor--onActive);
-  --Menu-light-groupTitle-fontColor: #d8d8d8;
+  --Menu-light-groupTitle-fontColor: #84868c;
   --Menu-light-selectedIndicator-color: var(--Layout-fontColor--info);
 
   --Menu-dark-backgroundColor: var(--Layout-dark-backgroundColor);
@@ -113,7 +121,7 @@
   --Menu-dark-fontColor-onHover: var(--Layout-fontColor--onHover);
   --Menu-dark-ancestor-fontColor-onActive: var(--Layout-fontColor--onActive);
   --Menu-dark-fontColor-onActive: var(--Layout-dark-fontColor);
-  --Menu-dark-groupTitle-fontColor: #d8d8d8;
+  --Menu-dark-groupTitle-fontColor: #84868c;
   --Menu-dark-selectedIndicator-color: var(--Layout-dark-selected-color);
 
   outline: none;
@@ -124,6 +132,8 @@
   list-style: none;
   color: var(--Menu-light-fontColor);
   background-color: var(--Menu-light-backgroundColor);
+  transition: all 0.3s;
+  width: 100%;
 
   &.#{$ns}Nav-Menu-dark {
     color: var(--Menu-dark-fontColor);
@@ -172,16 +182,19 @@
   }
 
   &-root.#{$ns}Nav-Menu-collapsed {
-    .#{$ns}Nav-Menu-item {
+    .#{$ns}Nav-Menu-item,
+    .#{$ns}Nav-Menu-submenu-title {
       padding: 0;
       text-align: center;
     }
   }
 
   &-item-link {
-    display: block;
+    display: flex;
+    align-items: center;
     height: var(--Nav-Item-height);
     flex-grow: 1;
+    overflow: hidden;
   }
 
   &-item-divider {
@@ -195,12 +208,7 @@
   &-item-icon {
     margin-right: var(--gap-sm);
     font-size: var(--Menu-icon-size);
-    width: var(--Menu-icon-size);
     color: var(--Menu-light-fontColor);
-    display: inline-block;
-    line-height: var(--Menu-item-height--vertical);
-    position: relative;
-    top: 1.5px;
 
     img {
       height: var(--Tabs-linkFontSize);
@@ -209,13 +217,13 @@
 
     &-collapsed {
       font-size: var(--Menu-fontSize--collapsed);
-      margin-right: 0;
+      margin: 0 auto;
     }
 
     &-svg {
       &-collapsed {
         font-size: var(--Menu-fontSize--collapsed);
-        margin-right: 0;
+        margin: 0 auto;
         height: var(--Menu-item-height--vertical);
       }
     }
@@ -241,11 +249,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    vertical-align: middle;
     user-select: none;
 
     &-collapsed {
       font-size: var(--Menu-fontSize--collapsed);
+      margin: 0 auto;
       font-weight: 600;
     }
 
@@ -272,9 +280,10 @@
 
   &-item-group-title {
     color: var(--Menu-light-groupTitle-fontColor);
-    line-height: 1.5;
-    padding: 8px 10px;
-    border-bottom: 1px solid #dedede;
+    line-height: px2rem(20px);
+    padding: 0 var(--Menu-Submenu-item-paddingX) 0 px2rem(16px);
+    font-size: px2rem(12px);
+    margin: px2rem(12px) 0 px2rem(4px) 0;
 
     &.#{$ns}Nav-Menu-dark {
       color: var(--Menu-dark-groupTitle-fontColor);
@@ -334,6 +343,9 @@
   &-submenu {
     .#{$ns}Badge {
       position: static;
+      flex: 1;
+      width: 0;
+      display: flex;
     }
     .#{$ns}Nav-Menu-item-wrap {
       display: flex;
@@ -343,6 +355,16 @@
 
   &-item-extra {
     position: relative;
+
+    .#{$ns}DropDown {
+      > .#{$ns}Button {
+        padding: 0;
+
+        > i {
+          margin: 0;
+        }
+      }
+    }
   }
 
   &-inline {
@@ -374,10 +396,21 @@
         @include selected-indicator(var(--Menu-light-selectedIndicator-color));
 
         .#{$ns}Nav-Menu-item-icon,
-        .#{$ns}Nav-Menu-item-label {
+        .#{$ns}Nav-Menu-item-label,
+        .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-light-fontColor-onActive) !important;
         }
       }
+
+      .#{$ns}Nav-Menu-submenu-selected {
+        > .#{$ns}Nav-Menu-submenu-title {
+          .#{$ns}Nav-Menu-item-icon,
+          .#{$ns}Nav-Menu-item-label,
+          .#{$ns}Nav-Menu-submenu-arrow {
+            color: var(--Menu-light-fontColor-onActive) !important;
+          }
+        }
+      }
     }
   }
 
@@ -405,8 +438,7 @@
 
       > .#{$ns}Nav-Menu-submenu-selected {
         & > .#{$ns}Nav-Menu-submenu-title {
-          background-color: var(--Menu-dark-backgroundColor-onHover);
-          @include selected-indicator(var(--Menu-dark-selectedIndicator-color));
+          color: var(--Menu-dark-fontColor-onActive);
         }
 
         .#{$ns}Nav-Menu-item-icon,
@@ -429,10 +461,7 @@
 
       > .#{$ns}Nav-Menu-submenu-selected {
         & > .#{$ns}Nav-Menu-submenu-title {
-          background-color: var(--Menu-light-backgroundColor-onHover);
-          @include selected-indicator(
-            var(--Menu-light-selectedIndicator-color)
-          );
+          color: var(--Menu-dark-fontColor-onActive);
         }
 
         .#{$ns}Nav-Menu-item-icon,
@@ -525,7 +554,7 @@
   &-submenu-title {
     margin: 0;
     position: relative;
-    padding: 0;
+    padding: 0 px2rem(16px);
     line-height: var(--Nav-Item-height);
     display: block;
     white-space: nowrap;
@@ -535,7 +564,8 @@
 
     &:hover {
       .#{$ns}Nav-Menu-item-label,
-      .#{$ns}Nav-Menu-item-icon {
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-submenu-arrow {
         color: var(--Menu-light-fontColor-onHover);
       }
 
@@ -550,7 +580,8 @@
 
       &:hover {
         .#{$ns}Nav-Menu-item-label,
-        .#{$ns}Nav-Menu-item-icon {
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-dark-fontColor-onHover);
         }
       }
@@ -562,7 +593,8 @@
 
       &:hover {
         .#{$ns}Nav-Menu-item-label,
-        .#{$ns}Nav-Menu-item-icon {
+        .#{$ns}Nav-Menu-item-icon,
+        .#{$ns}Nav-Menu-submenu-arrow {
           color: var(--Menu-light-fontColor-onHover);
         }
       }
@@ -579,6 +611,10 @@
     }
   }
 
+  &-item-tooltip-wrap {
+    padding: 0;
+  }
+
   &-collapsed > &-item,
   &-collapsed > &-submenu-title,
   &-collapsed > .#{$ns}Nav-Menu-submenu > &-submenu-title {
@@ -598,10 +634,6 @@
     &-popup {
       position: absolute;
       z-index: 1500;
-
-      .#{$ns}Nav-Menu-item {
-        padding: 0 var(--Menu-Submenu-item-paddingX);
-      }
     }
 
     > .#{$ns}Nav-Menu {
@@ -678,7 +710,7 @@
 
     & > .#{$ns}Nav-Menu-item-tooltip-wrap > .#{$ns}Nav-Menu-item,
     & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
-      padding: 0 20px;
+      padding: 0 px2rem(16px);
       height: var(--Menu-item-height--horizontal);
 
       .#{$ns}Nav-Menu-item-link {
@@ -689,11 +721,6 @@
       .#{$ns}Nav-Menu-item-label {
         line-height: var(--Menu-item-height--horizontal);
       }
-
-      .#{$ns}Nav-Menu-item-label {
-        padding: 0;
-        top: 0;
-      }
     }
 
     .#{$ns}Nav-Menu-item.#{$ns}Nav-Menu-item-selected {
@@ -741,8 +768,8 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       display: inline-block;
       font-size: px2rem(9px);
-      vertical-align: baseline;
       text-align: center;
+      vertical-align: middle;
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
@@ -750,11 +777,14 @@
       color: var(--Menu-light-fontColor);
 
       & > svg {
-        text-align: center;
-        vertical-align: middle;
+        top: auto;
       }
     }
 
+    .#{$ns}Nav-Menu-item-label {
+      vertical-align: middle;
+    }
+
     &.#{$ns}Nav-Menu-dark {
       & > .#{$ns}Nav-Menu-submenu,
       & > .#{$ns}Nav-Menu-item {
@@ -790,7 +820,8 @@
           border-bottom: 2px solid var(--Menu-light-selectedIndicator-color);
 
           .#{$ns}Nav-Menu-item-icon,
-          .#{$ns}Nav-Menu-item-label {
+          .#{$ns}Nav-Menu-item-label,
+          .#{$ns}Nav-Menu-submenu-arrow {
             color: var(--Menu-light-fontColor-onActive);
           }
         }
@@ -821,15 +852,12 @@
       text-transform: none;
       text-rendering: auto;
       position: absolute;
-      right: 0;
+      right: var(--Menu-Submenu-item-paddingX);
       top: 0;
-      width: var(--Menu-Submenu-title-paddingX);
       line-height: var(--Menu-item-height--vertical);
-      transform: rotate(-90deg);
 
       & > svg {
-        text-align: center;
-        vertical-align: middle;
+        top: auto;
       }
 
       .#{$ns}Nav-Menu-rtl &,
@@ -843,7 +871,7 @@
       .#{$ns}Nav-Menu-submenu-title {
         .#{$ns}Nav-Menu-item-wrap {
           padding-right: 0;
-          padding-left: var(--Menu-Submenu-title-paddingX);
+          padding-left: px2rem(16px);
         }
       }
 
@@ -865,11 +893,9 @@
     }
   }
 
-  &-vertical-right,
-  &-horizontal {
-    .#{$ns}Nav-Menu-item {
-      padding: 0 var(--Menu-Submenu-title-paddingX) 0
-        calc(var(--Menu-Submenu-title-paddingX) - 1px);
+  &-vertical-right {
+    .#{$ns}Nav-Menu-submenu-arrow {
+      right: px2rem(10px);
     }
   }
 
@@ -878,12 +904,12 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       cursor: pointer;
       transition: transform 0.3s;
-      transform: rotate(0deg);
+      transform: rotate(90deg);
     }
 
     & .#{$ns}Nav-Menu-submenu-open > .#{$ns}Nav-Menu-submenu-title {
       .#{$ns}Nav-Menu-submenu-arrow {
-        transform: rotate(180deg);
+        transform: rotate(270deg);
       }
     }
   }
@@ -895,24 +921,20 @@
       }
     }
 
-    // .#{$ns}Nav-Menu-submenu {
-    //   .#{$ns}Nav-Menu-submenu-title {
-    //     padding: 0 var(--Menu-Submenu-title-paddingX) 0
-    //       calc(var(--Menu-Submenu-title-paddingX) - 1px);
-    //     text-align: center;
-    //   }
-    // }
+    .#{$ns}Nav-Menu-submenu-arrow {
+      display: none !important;
+    }
 
-    .#{$ns}Nav-Menu-submenu-vertical.#{$ns}Nav-Menu-submenu {
-      .#{$ns}Nav-Menu-submenu-title {
-        padding: 0 var(--Menu-Submenu-title-paddingX) 0
-          calc(var(--Menu-Submenu-title-paddingX) - 1px);
-        text-align: center;
-      }
+    .#{$ns}Nav-Menu-item-group-title {
+      display: none;
     }
 
-    .#{$ns}Nav-Menu-submenu-arrow {
-      display: none !important;
+    .#{$ns}Nav-Menu-item-group-list {
+      .#{$ns}Nav-Menu-item-divider {
+        height: 1px;
+        width: 60%;
+        margin: 0 auto;
+      }
     }
   }
 
@@ -921,10 +943,6 @@
   &-submenu-vertical-right.#{$ns}Nav-Menu-submenu {
     padding: 0;
 
-    .#{$ns}Nav-Menu-submenu-title {
-      padding: 0 var(--Menu-Submenu-item-paddingX);
-    }
-
     .#{$ns}Nav-Menu-submenu-rtl & {
       direction: rtl;
     }
@@ -940,7 +958,6 @@
     & > .#{$ns}Nav-Menu-submenu > .#{$ns}Nav-Menu-submenu-title {
       padding-top: 0;
       padding-bottom: 0;
-      padding-right: 0;
       display: block;
       white-space: nowrap;
       overflow: hidden;
@@ -957,7 +974,8 @@
       color: var(--Menu-dark-ancestor-fontColor-onActive);
 
       .#{$ns}Nav-Menu-item-label,
-      .#{$ns}Nav-Menu-item-icon {
+      .#{$ns}Nav-Menu-item-icon,
+      .#{$ns}Nav-Menu-submenu-arrow {
         color: var(--Menu-dark-ancestor-fontColor-onActive);
       }
     }
@@ -966,7 +984,7 @@
   @mixin item-disabled {
     cursor: not-allowed;
     color: var(--Menu-fontColor-onDisabled) !important;
-    pointer-events: none;
+    // pointer-events: none;
   }
 
   .#{$ns}Nav-Menu-item-disabled,

package/scss/components/_result-box.scss

@@ -7,6 +7,22 @@
   align-items: center;
   border-radius: 3px;
   position: relative;
+  color: var(--Form-select-color);
+  font-size: var(--select-base-default-fontSize);
+  font-weight: var(--select-base-default-fontWeight);
+  border-width: var(--Form-select-borderWidth);
+  border-style: var(--select-base-default-top-border-style)
+    var(--select-base-default-right-border-style)
+    var(--select-base-default-bottom-border-style)
+    var(--select-base-default-left-border-style);
+  border-color: var(--Form-select-borderColor);
+  background: var(--Form-select-bg);
+  border-radius: var(--Form-select-borderRadius);
+  min-height: var(--Form-selectOption-height);
+  padding: var(--select-base-default-paddingTop)
+    var(--select-base-default-paddingRight)
+    var(--select-base-default-paddingBottom)
+    var(--select-base-default-paddingLeft);
 
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
@@ -14,21 +30,58 @@
   }
 
   &.is-focused,
-  &.is-active,
   &:focus {
     outline: none;
-    border-color: var(--Form-input-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
-    background: var(--Form-input-onFocused-bg);
+    background: var(--Form-select-onHover-bg);
+    border-width: var(--select-base-hover-top-border-width)
+      var(--select-base-hover-right-border-width)
+      var(--select-base-hover-bottom-border-width)
+      var(--select-base-hover-left-border-width);
+    border-style: var(--select-base-hover-top-border-style)
+      var(--select-base-hover-right-border-style)
+      var(--select-base-hover-bottom-border-style)
+      var(--select-base-hover-left-border-style);
+    border-color: var(--select-base-hover-top-border-color)
+      var(--select-base-hover-right-border-color)
+      var(--select-base-hover-bottom-border-color)
+      var(--select-base-hover-left-border-color);
+  }
+
+  &.is-active,
+  &.is-opened {
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
   }
 
   &.is-clickable:not(.is-disabled) {
     cursor: pointer;
 
     &:hover {
-      border-color: var(--Form-input-onFocused-borderColor);
-      box-shadow: var(--Form-input-boxShadow);
-      background: var(--Form-input-onFocused-bg);
+      background: var(--Form-select-onHover-bg);
+      border-width: var(--select-base-hover-top-border-width)
+        var(--select-base-hover-right-border-width)
+        var(--select-base-hover-bottom-border-width)
+        var(--select-base-hover-left-border-width);
+      border-style: var(--select-base-hover-top-border-style)
+        var(--select-base-hover-right-border-style)
+        var(--select-base-hover-bottom-border-style)
+        var(--select-base-hover-left-border-style);
+      border-color: var(--select-base-hover-top-border-color)
+        var(--select-base-hover-right-border-color)
+        var(--select-base-hover-bottom-border-color)
+        var(--select-base-hover-left-border-color);
     }
   }
 
@@ -38,10 +91,20 @@
 
   &.is-disabled {
     color: var(--text--muted-color);
-    background: var(--Form-input-onDisabled-bg);
-    border-color: var(--Form-input-onDisabled-borderColor);
     pointer-events: none;
-    background: var(--TabsTransfer-title-bg);
+    border-width: var(--select-base-disabled-top-border-width)
+      var(--select-base-disabled-right-border-width)
+      var(--select-base-disabled-bottom-border-width)
+      var(--select-base-disabled-left-border-width);
+    border-style: var(--select-base-disabled-top-border-style)
+      var(--select-base-disabled-right-border-style)
+      var(--select-base-disabled-bottom-border-style)
+      var(--select-base-disabled-left-border-style);
+    border-color: var(--select-base-disabled-top-border-color)
+      var(--select-base-disabled-right-border-color)
+      var(--select-base-disabled-bottom-border-color)
+      var(--select-base-disabled-left-border-color);
+    background: var(--select-base-disabled-bg-color);
 
     div.#{$ns}ResultBox-value {
       background: var(--TabsTransfer-border-color);
@@ -137,16 +200,21 @@
   &-value {
     background: var(--ResultBox-value-bg);
     color: var(--ResultBox-value-color);
-    font-size: var(--Form-input-fontSize);
-    padding: 0 var(--gap-xs);
+    font-size: var(--select-multiple-fontSize);
     min-height: var(--ResultBox-tag-height);
     flex-wrap: nowrap;
     display: inline-flex;
     align-items: center;
-    margin-right: var(--gap-xs);
-    margin-bottom: var(--ResultBox-tag-marginBottom);
+    padding: var(--select-multiple-paddingTop)
+      var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
+      var(--select-multiple-paddingLeft);
+    margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight)
+      var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft);
     user-select: none;
-    border-radius: #{px2rem(2px)};
+    border-radius: var(--select-multiple-top-left-border-radius)
+      var(--select-multiple-top-right-border-radius)
+      var(--select-multiple-bottom-right-border-radius)
+      var(--select-multiple-bottom-left-border-radius);
 
     > a {
       cursor: pointer;
@@ -197,8 +265,6 @@
   }
 
   &.#{$ns}TransferDropDown {
-    padding: 0 var(--gap-base);
-
     &.is-group {
       > .#{$ns}TransferDropDown-icon {
         margin-right: var(--gap-sm);

package/scss/components/_table.scss

@@ -1044,11 +1044,6 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
-
-  .#{$ns}Button {
-    border-color: transparent;
-    color: var(--button-link-default-font-color);
-  }
 }
 
 .#{$ns}InputTable-pager {

package/scss/components/_tabs.scss

@@ -856,6 +856,10 @@
       }
     }
 
+    > .#{$ns}Tabs-linksWrapper + .#{$ns}Tabs-content {
+      width: calc(100% - var(--Tabs--vertical-width));
+    }
+
     > .#{$ns}Tabs-content {
       border: none;
       flex-grow: 1;

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

@@ -2,4 +2,9 @@
   .#{$ns}Select {
     margin-right: var(--gap-xs);
   }
+
+  &-spinner {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }

package/scss/components/form/_checks.scss

@@ -241,10 +241,6 @@
     &:active {
       input:checked + i {
         background: var(--Checkbox-checked-onHover-bgColor);
-
-        &:before {
-          background: var(--Checkbox-checked-onHover-bgColor);
-        }
       }
     }