amis 1.10.0 → 1.10.1

package/scss/_properties.scss

@@ -494,10 +494,12 @@
   --Checkbox-size: #{px2rem(16px)};
   --Checkbox-inner-size: calc(var(--Checkbox-size) / 2);
   --Checkbox-onHover-color: var(--info);
-  --Checkbox-onDisabled-bg: #e5e7eb;
-  --Checkbox-onDisabled-color: var(--text--muted-color);
+  --Checkbox-onDisabled-bg: #f7f7f9;
+  --Checkbox-onDisabled-color: #b8babf;
   --Checkbox-inner-onDisabled-bg: #d4d6d9;
-  --Checkbox-disabled-unchecked-bg: #f2f3f3;
+  --Checkbox-inner-onDisabled-color: #ffffff;
+  --Checkbox-disabled-unchecked-bg: #f7f7f9;
+  --Checkbox-inner-disabled-checked-bg: #e8e9eb;
   --Checkbox-border-width: var(--Form-input-borderWidth);
   --Checkbox-paddingX: #{px2rem(12px)};
   --Checkbox-button-height: #{px2rem(32px)};

package/scss/components/_condition-builder.scss

@@ -278,3 +278,14 @@
   display: inline-block;
   user-select: none;
 }
+
+.#{$ns}CBPicker-trigger {
+  cursor: pointer;
+  transition: transform var(--animation-duration) ease-out;
+  display: flex;
+  color: var(--Form-select-caret-iconColor);
+
+  &:hover {
+    color: var(--primary);
+  }
+}

package/scss/components/_crud.scss

@@ -67,7 +67,6 @@
   }
 
   &-toolbar-item {
-    margin-left: var(--Crud-toolbar-gap);
     margin-top: var(--Crud-toolbar-gap);
     line-height: var(--Crud-toolbar-lineHeight);
     height: var(--Crud-toolbar-height);
@@ -75,6 +74,10 @@
     display: inline-flex;
     align-items: center;
 
+    &:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
     &--left {
       float: left;
     }
@@ -119,7 +122,6 @@
 @include media-breakpoint-up(sm) {
   .#{$ns}Crud {
     &-toolbar {
-      margin-left: calc(var(--Crud-toolbar-gap) * -1);
       margin-top: calc(var(--Crud-toolbar-gap) * -1);
       flex-basis: 0;
       flex-grow: 1;
@@ -127,11 +129,14 @@
     }
 
     &-toolbar-item {
-      margin-left: var(--Crud-toolbar-gap);
       line-height: var(--Crud-toolbar-lineHeight);
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
+      &:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
       &--left {
         float: left;
       }

package/scss/components/_crud2.scss

@@ -0,0 +1,148 @@
+.#{$ns}Crud2 {
+  position: relative;
+
+  &-selection,
+  &-toolbar,
+  &-body {
+    margin-bottom: var(--gap-base);
+  }
+
+  &-selectionLabel {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: var(--gap-xs);
+  }
+
+  &-value {
+    cursor: pointer;
+    vertical-align: middle;
+    user-select: none;
+    line-height: calc(
+      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
+    );
+    display: inline-block;
+    font-size: var(--Form-selectValue-fontSize);
+    color: var(--Form-selectValue-color);
+    background: var(--Form-selectValue-bg);
+    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
+    border-radius: 2px;
+    margin-right: var(--gap-xs);
+    margin-top: var(--gap-xs);
+
+    &:hover {
+      background: var(--Form-selectValue-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: var(--Button-onDisabled-opacity);
+    }
+  }
+
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
+    padding: 1px 5px;
+
+    &:hover {
+      background: var(--Form-selectValue-onHover-bg);
+    }
+  }
+
+  &-valueLabel {
+    padding: 0 var(--gap-xs);
+  }
+
+  &-selectionClear {
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+    margin-left: var(--gap-xs);
+    margin-top: var(--gap-xs);
+    vertical-align: middle;
+  }
+
+  &-toolbar-item {
+    margin-top: var(--Crud-toolbar-gap);
+    line-height: var(--Crud-toolbar-lineHeight);
+    height: var(--Crud-toolbar-height);
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+
+    &:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--left {
+      float: left;
+    }
+
+    &--right {
+      float: right;
+    }
+  }
+
+  &-actions {
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-statistics {
+    line-height: var(--Crud-toolbar-height);
+    vertical-align: middle;
+  }
+
+  &-pageSwitch {
+    .#{$ns}Select {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-pager {
+    align-self: flex-start;
+  }
+
+  &-filter {
+    margin-bottom: var(--gap-base);
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .#{$ns}Crud {
+    &-toolbar {
+      margin-top: calc(var(--Crud-toolbar-gap) * -1);
+      flex-basis: 0;
+      flex-grow: 1;
+      @include clearfix();
+    }
+
+    &-toolbar-item {
+      line-height: var(--Crud-toolbar-lineHeight);
+      height: var(--Crud-toolbar-height);
+      vertical-align: middle;
+
+      &:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--left {
+        float: left;
+      }
+
+      &--right {
+        float: right;
+      }
+    }
+
+    &-actions {
+      > * + .#{$ns}Button,
+      > * + .#{$ns}Button--disabled-wrap {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+    }
+  }
+}

package/scss/components/_formula.scss

@@ -424,9 +424,8 @@
   background-color: #fff;
   height: var(--Form-input-height);
   .#{$ns}FormulaPicker-input {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    align-items: center;
     background: none;
     padding: 0;
     border: 0;

package/scss/components/_result-box.scss

@@ -8,10 +8,6 @@
   border-radius: 3px;
   position: relative;
 
-  &.is-clearable {
-    padding-right: px2rem(55px);
-  }
-
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);
@@ -60,7 +56,31 @@
     padding-left: var(--gap-base);
   }
 
+  &-value-wrap {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    > * {
+      &:first-child {
+        margin-left: px2rem(5px);
+      }
+
+      &:not(:last-child) {
+        margin-right: px2rem(5px);
+      }
+    }
+  }
+
   &-singleValue {
+    padding: 0 calc(var(--Form-input-paddingX) - #{px2rem(3px)});
+    flex-grow: 1;
     display: inline-block;
     max-width: 100%;
     overflow: hidden;
@@ -91,10 +111,7 @@
   &-clear {
     @include input-clear();
     height: 100%;
-    padding: px2rem(4px);
     margin: auto 0;
-    position: absolute;
-    right: 10px;
     background-color: unset;
 
     &-wrap {
@@ -168,6 +185,7 @@
 
   &-placeholder {
     color: var(--Form-input-placeholderColor);
+    flex-grow: 1;
     user-select: none;
   }
 

package/scss/components/_steps.scss

@@ -93,15 +93,14 @@
       overflow: hidden !important;
       &-container {
         &Icon:after {
-            content: '';
-            position: absolute;
-            right: 0;
-            top: px2rem(32px);
-            height: 9999px;
-            left: px2rem(11px);
-            width: 1px;
-            background-color: var(--Steps-line-bg);
-        
+          content: '';
+          position: absolute;
+          right: 0;
+          top: px2rem(32px);
+          height: 9999px;
+          left: px2rem(11px);
+          width: 1px;
+          background-color: var(--Steps-line-bg);
         }
         &Wrapper > .#{$ns}StepsItem-body > .#{$ns}StepsItem-title {
           &:after {
@@ -146,9 +145,8 @@
               }
             }
           }
-          &-title>span {
+          &-title > span {
             display: inline-block !important;
-            
           }
           &-vertical-ProgressDot {
             right: px2rem(10px);
@@ -159,8 +157,8 @@
         }
         &:last-child {
           .#{$ns}StepsItem {
-            &-containerProgressDot:after{
-                display: none;
+            &-containerProgressDot:after {
+              display: none;
             }
           }
         }
@@ -181,8 +179,8 @@
     padding: 0;
     .#{$ns}StepsItem {
       flex: 1;
-      padding: 0; 
-      overflow: visible ;
+      padding: 0;
+      overflow: visible;
       &-container {
         display: flex;
         flex-direction: column;
@@ -197,7 +195,7 @@
           width: calc(100% - 55px);
           background-color: var(--Steps-line-bg);
         }
-        &Icon{
+        &Icon {
           margin-left: px2rem(90px);
         }
         &Wrapper {
@@ -207,7 +205,7 @@
             .#{$ns}StepsItem-title {
               padding: 0 px2rem(10px);
               width: 100%;
-              >span {
+              > span {
                 display: block;
                 position: relative;
                 left: px2rem(10px);
@@ -219,7 +217,7 @@
                 left: px2rem(10px);
               }
             }
-            .#{$ns}StepsItem-title:after  {
+            .#{$ns}StepsItem-title:after {
               display: none;
             }
             .#{$ns}StepsItem-description {
@@ -242,10 +240,10 @@
           }
         }
       }
-    } 
+    }
     .is-finish {
       .#{$ns}StepsItem {
-        &-containerTail:after{
+        &-containerTail:after {
           background: var(--Steps-status-success);
         }
       }
@@ -266,7 +264,7 @@
           height: px2rem(8px);
           margin-left: px2rem(96px);
           border: 1px solid var(--Steps-line-success-bg);
-          border-radius: 100% ;
+          border-radius: 100%;
         }
       }
     }
@@ -302,7 +300,6 @@
       }
     }
   }
-  
 
   .#{$ns}StepsItem.is-wait {
     .#{$ns}StepsItem-icon {
@@ -333,10 +330,8 @@
   }
 }
 
-
 .#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
   .#{$ns}StepsItem {
-
     &-container {
       &Wrapper {
         .#{$ns}StepsItem-body {
@@ -347,7 +342,7 @@
           }
         }
 
-        .#{$ns}StepsItem-body{
+        .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {
             .#{$ns}StepsItem-subTitle {
               padding-left: px2rem(5px);
@@ -391,4 +386,4 @@
       }
     }
   }
-}
+}

package/scss/components/_table-v2.scss

@@ -645,7 +645,7 @@
 
         .#{$ns}Table-thead-resizable {
           position: absolute;
-          width: 1px;
+          width: 3px;
           right: 0;
           top: 0;
           bottom: 0;
@@ -712,8 +712,6 @@
 
   .#{$ns}TableCell-searchBtn {
     cursor: pointer;
-    position: static;
-    transform: translateY(-50%);
     color: var(--text--muted-color);
     margin-left: var(--TableCell-icon-gap);
 

package/scss/components/form/_checks.scss

@@ -164,24 +164,20 @@
       }
 
       &[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-        background: var(--FileControl-onDisabled-bg);
+        border-color: var(--Checkbox-color);
+        background: var(--Checkbox-onDisabled-bg);
       }
 
       &[disabled]:checked + i {
         &:before {
           border-color: var(--Checkbox-onDisabled-color);
+          background: var(--Checkbox-onDisabled-bg);
         }
       }
 
       &:checked[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-        background: var(--FileControl-onDisabled-bg);
-
-        &:before {
-          background: var(--FileControl-onDisabled-bg);
-          border-color: var(--Checkbox-inner-onDisabled-bg);
-        }
+        border-color: var(--Checkbox-color);
+        background: var(--Checkbox-onDisabled-bg);
       }
     }
 
@@ -256,6 +252,7 @@
 
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
+      border-color: var(--Checkbox-onHover-color);
     }
 
     &:hover {
@@ -292,7 +289,7 @@
           left: 0;
           width: var(--Checkbox--full-inner-size);
           height: calc(var(--Checkbox--full-inner-size) / 2);
-          transform: translate(-80%, -160%) rotate(-50deg);
+          transform: translate(-80%, -160%) rotate(-50deg) scale(0.8);
           background: transparent;
         }
       }
@@ -307,9 +304,13 @@
 
       &:checked[disabled] + i {
         background: transparent;
-        border-width: px2rem(8px);
-        border-color: var(--Checkbox-onHover-color) transparent transparent
-          var(--Checkbox-onHover-color);
+        border-width: px2rem(7px);
+        border-color: var(--Checkbox-inner-disabled-checked-bg) transparent
+          transparent var(--Checkbox-inner-disabled-checked-bg);
+          &:before {
+            background: transparent;
+            border-color: var(--Checkbox-inner-onDisabled-color) !important;
+          }
       }
     }
     > i {
@@ -342,9 +343,18 @@
       color: var(--Switch-checked-onHover-bgColor);
     }
   }
-  &--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
-    i {
-      background: var(--FileControl-onDisabled-bg);
+  &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
+    background: var(--Checkbox-disabled-unchecked-bg);
+    border-color: var(--Checkbox-color);
+    &:hover {
+      border-color: var(--Checkbox-color) !important;
+    }
+  }
+  &--button--disabled--checked.#{$ns}Checkbox--checkbox {
+    background: var(--Checkbox-onDisabled-bg);
+    border-color: var(--Checkbox-color) !important;
+    &:hover {
+      border-color: var(--Checkbox-color) !important;
     }
   }
   &--radio {

package/scss/components/form/_select.scss

@@ -81,10 +81,13 @@
 
   .#{$ns}PopOver.#{$ns}Select-popover {
     .#{$ns}Select-menu {
+      overflow-x: hidden;
+
       .#{$ns}Select-option {
         height: px2rem(32px);
         line-height: px2rem(22px);
       }
+
       .#{$ns}Select-addBtn {
         height: px2rem(32px);
         line-height: px2rem(30px);
@@ -242,6 +245,7 @@
     overflow: hidden;
     max-height: max-content;
   }
+
   &-input {
     cursor: pointer;
     outline: none;

package/scss/themes/_common.scss

@@ -48,6 +48,7 @@
 @import '../components/context-menu';
 @import '../components/wizard';
 @import '../components/crud';
+@import '../components/crud2';
 @import '../components/table';
 @import '../components/table-v2';
 @import '../components/column-toggler';

package/scss/themes/_cxd-variables.scss

@@ -217,8 +217,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Number-handler--up-transform: rotate(180deg);
   --Number-handler--down-content: '\e6dd';
 
-  --Checkbox-onDisabled-color: #ebebeb;
-  --Checkbox-onDisabled-bg: #cccccc;
+  --Checkbox-onDisabled-bg: #F7F7F9;
+  --Checkbox-onDisabled-color: #B8BABF;
 
   --Checkbox-inner-size: #{px2rem(8px)};
   --Checkbox--full-inner-size: #{px2rem(8px)};