amis-ui 6.9.0-rc.1 → 6.9.0-rc.11

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.1
+ * amis-ui v6.9.0-rc.11
  * Copyright 2018-2024 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.1
+ * amis-ui v6.9.0-rc.11
  * Copyright 2018-2024 fex
  */
 

package/package.json

@@ -3,11 +3,11 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.9.0-rc.1",
+  "version": "6.9.0-rc.11",
   "description": "",
   "scripts": {
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "dev": "rollup -c -w",
     "test": "jest",
     "gen-doc": "ts-node ./scripts/genDoc.ts",
@@ -36,8 +36,9 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.9.0-rc.1",
-    "amis-formula": "^6.9.0-rc.1",
+    "amis-core": "^6.9.0-rc.11",
+    "amis-formula": "^6.9.0-rc.11",
+    "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -87,6 +88,7 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "autoprefixer": "^10.4.12",
+    "cross-env": "^7.0.3",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
     "moment-timezone": "^0.5.34",

package/scss/_components.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 :root,
 .AMISCSSWrapper {
   --button-default-default-top-border-color: var(--colors-neutral-line-8);
@@ -2893,18 +2894,21 @@
   );
   --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
   --Form-selectOption-height: var(--Form-select-height);
-  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
+  --Form-selectValue-bg: #{color.adjust(
+      color.adjust($info, $lightness: 40%),
+      $saturation: 2.5%
+    )};
   --Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
   --Form-selectValue-borderColor: var(--colors-brand-7);
   --Form-selectValue-color: var(--colors-brand-5);
   --Form-selectValue-fontSize: var(--select-multiple-fontSize);
-  --Form-selectValue-onDisable-bg: #{lighten(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onDisable-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: 5%
     )};
-  --Form-selectValue-onHover-bg: #{darken(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onHover-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: -5%
     )};
   --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
   --Form-selectValue-onInvalid-color: var(--danger);
@@ -3932,9 +3936,9 @@
 
   --table-border-width: var(--borders-width-2);
   --table-border-color: var(--colors-neutral-line-8);
-  --table-paddingTop: var(--sizes-size-3);
+  --table-paddingTop: var(--sizes-size-6);
   --table-paddingRight: var(--sizes-size-6);
-  --table-paddingBottom: var(--sizes-size-3);
+  --table-paddingBottom: var(--sizes-size-6);
   --table-paddingLeft: var(--sizes-size-6);
   --table-paddingX: var(--sizes-size-7);
   --table-header-color: var(--colors-neutral-text-2);
@@ -4020,7 +4024,7 @@
   --Table-onHover-boxShadow: var(--shadows-shadow-normal);
   --Table-onHover-color: var(--table-body-hover-color);
   --Table-onModified-bg: #e8f0fe;
-  --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
+  --Table-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -5%)};
   --Table-onModified-color: #4285f4;
   --Table-placeholder-height: #{px2rem(200px)};
   --Table-strip-bg: transparent;

package/scss/_mixins.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 // 媒体查询最小阈值
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
@@ -53,14 +54,16 @@
   }
 }
 
-// @deprecated 不建议用了
 @mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: saturate(darken($bg-color, $percent), $sat-percent);
+  background: color.adjust(
+    color.adjust($bg-color, $lightness: -$percent),
+    $saturation: $sat-percent
+  );
 }
 
-// @deprecated 不建议用了
 @mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: desaturate(lighten($bg-color, $percent), $sat-percent);
+  $lightened-color: color.adjust($bg-color, $lightness: $percent);
+  background: color.adjust($lightened-color, $saturation: $sat-percent);
 }
 
 // @deprecated 不建议用了
@@ -101,8 +104,14 @@
 
 // @deprecated 不建议用了
 @mixin font-variant($bg-color) {
-  $font-color: desaturate(lighten($bg-color, 40%), 10%);
-  $link-color: desaturate(lighten($bg-color, 50%), 10%);
+  $font-color: color.adjust(
+    color.adjust($bg-color, $lightness: 40%),
+    $saturation: -10%
+  );
+  $link-color: color.adjust(
+    color.adjust($bg-color, $lightness: 50%),
+    $saturation: -10%
+  );
   $hover-color: #fff;
   color: $font-color;
 
@@ -124,11 +133,11 @@
   }
 
   & .text-muted {
-    color: darken($text-color, 10%) !important;
+    color: color.adjust($text-color, $lightness: -10%) !important;
   }
 
   & .text-lt {
-    color: lighten($text-color, 25%) !important;
+    color: color.adjust($text-color, $lightness: 25%) !important;
   }
 
   // &.auto,
@@ -150,11 +159,11 @@
 // @deprecated 不建议用了
 @mixin text-wariant($bg-color, $name) {
   a.bg-#{'' + $name}:hover {
-    background: darken($bg-color, 5%);
+    background: color.adjust($bg-color, $lightness: -5%);
   }
 
   a.text-#{'' + $name}:hover {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name} {
@@ -162,19 +171,19 @@
   }
 
   .text-#{'' + $name}-lt {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-lter {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 
   .text-#{'' + $name}-dk {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-dker {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 }
 

package/scss/_properties.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import './functions';
 @import './variables';
 $remFactor: 16px;
@@ -209,14 +210,17 @@ $Table-strip-bg: transparent;
   --Card-onChecked-bg: var(--colors-neutral-fill-11);
   --Card-onChecked-borderColor: var(--colors-brand-5);
   --Card-onChecked-color: var(--colors-brand-5);
-  --Card-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)};
+  --Card-onChecked-fieldLabel-color: #{color.adjust(
+      color.adjust(#d9f3fb, $lightness: -40%),
+      $lightness: 20%
+    )};
   --Card-onDragging-opacity: 0.1;
   --Card-onModified-bg: var(--colors-neutral-fill-8);
   --Card-onModified-borderColor: var(--colors-brand-5);
   --Card-onModified-color: var(--colors-brand-6);
   --Card-onModified-fieldLabel-color: var(--colors-brand-8);
-  --Card-onModified-onHover-bg: #{darken(#e8f0fe, 5%)};
-  --Card-onModified-onHover-color: #{darken(#4285f4, 10%)};
+  --Card-onModified-onHover-bg: #{color.adjust(#e8f0fe, $lightness: -5%)};
+  --Card-onModified-onHover-color: #{color.adjust(#4285f4, $lightness: -10%)};
   --Cards--unsaved-heading-bg: #e8f0fe;
   --Cards--unsaved-heading-color: #4285f4;
   --Cards-fixedTop-boxShadow: var(--shadows-shadow-normal);
@@ -405,16 +409,28 @@ $Table-strip-bg: transparent;
   --Layout-aside--md-width: #{px2rem(250px)};
   --Layout-aside--sm-width: #{px2rem(150px)};
   --Layout-aside-bg: var(--colors-neutral-fill-2);
-  --Layout-aside-color: #{desaturate(lighten($dark, 40%), 10%)};
-  --Layout-aside-onAcitve-bg: #{saturate(darken($dark, 5%), 2.5%)};
-  --Layout-aside-onHover-bg: #{saturate(darken($dark, 3%), 2.5%)};
+  --Layout-aside-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
+  --Layout-aside-onAcitve-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -5%),
+      $saturation: 2.5%
+    )};
+  --Layout-aside-onHover-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -3%),
+      $saturation: 2.5%
+    )};
   --Layout-aside-subList-bg: var(--colors-neutral-fill-2);
   --Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg);
   --Layout-aside-width: #{px2rem(180px)};
   --Layout-aside-width-collapsed: #{px2rem(60px)};
   --Layout-asideDivider-bg: var(--colors-neutral-line-3);
   --Layout-asideDivider-margin: 0 var(--sizes-size-6);
-  --Layout-asideLabel-color: #{darken(desaturate(lighten($dark, 40%), 10%), 10%)};
+  --Layout-asideLabel-color: #{color.adjust(
+      color.adjust(color.adjust($dark, $lightness: 40%), $saturation: -10%),
+      $lightness: -10%
+    )};
   --Layout-asideLink-color: var(--colors-neutral-text-11);
   --Layout-asideLink-fontSize: var(--fonts-size-8);
   --Layout-asideLink-arrowFontSize: var(--fonts-size-8);
@@ -430,7 +446,10 @@ $Table-strip-bg: transparent;
   --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
   --Layout-brand-bg: var(--colors-neutral-fill-2);
   --Layout-brand-color: var(--colors-neutral-text-11);
-  --Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)};
+  --Layout-brandBar-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
   --Layout-header-bg: var(--colors-neutral-fill-10);
   --Layout-header-boxShadow: none;
   --Layout-header-height: #{px2rem(50px)};
@@ -498,9 +517,12 @@ $Table-strip-bg: transparent;
   --ListItem-onChecked-fieldLabel-color: var(--colors-brand-4);
   --ListItem-onDragging-opacity: 0.1;
   --ListItem-onModified-bg: #e8f0fe;
-  --ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)};
+  --ListItem-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -10%)};
   --ListItem-onModified-color: #4285f4;
-  --ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)};
+  --ListItem-onModified-fieldLabel-color: #{color.adjust(
+      #4285f4,
+      $lightness: 20%
+    )};
   --ListItem-paddingX: var(--gap-base);
   --ListItem-paddingY: var(--gap-sm);
   --ListItem--onHover-bg: rgba(0, 126, 255, 0.08);
@@ -705,7 +727,7 @@ $Table-strip-bg: transparent;
   --Tooltip-arrow-color: var(--Tooltip-bg);
   --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-arrow-height: #{px2rem(4px)};
-  --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
+  --Tooltip-arrow-outerColor: #{color.adjust($borderColor, $alpha: 0.05)};
   --Tooltip-arrow-width: #{px2rem(8px)};
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
@@ -723,8 +745,11 @@ $Table-strip-bg: transparent;
   --Tooltip-maxWidth: #{px2rem(240px)};
   --Tooltip-minWidth: auto;
   --Tooltip-title-fontWeight: bold;
-  --Tooltip-title-bg: #{darken($white, 3%)};
-  --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
+  --Tooltip-title-bg: #{color.adjust($white, $lightness: -3%)};
+  --Tooltip-title-borderBottom-color: #{color.adjust(
+      color.adjust($white, $lightness: -3%),
+      $lightness: -5%
+    )};
   --Tooltip-title-color: var(--text--loud-color);
   --Tooltip-title-color--dark: #fff;
   --Tooltip-title-paddingX: var(--gap-base);
@@ -853,4 +878,8 @@ $Table-strip-bg: transparent;
   :root {
     --fontSizeBase: var(--fontSizeLg);
   }
+  :root,
+  .AMISCSSWrapper {
+    --Page-body-padding: var(--gap-md);
+  }
 }

package/scss/_thirds.scss

@@ -7,5 +7,6 @@
 @import '../../../node_modules/video-react/dist/video-react';
 @import '../../../node_modules/cropperjs/dist/cropper';
 @import '../../../node_modules/office-viewer/dist/office';
+@import '../../../node_modules/animate.css/animate.min';
 
 @import './components/react-datetime';

package/scss/_variables.scss

@@ -1,5 +1,6 @@
 // 这里只放 sass 里的变量，因为有很多颜色计算，为了保持和之前的兼容性所以还保留这些变量，但后续会通过新增 css 自定义属性的方式逐渐替换
 // 类名前缀
+@use 'sass:color';
 $ns: '' !default;
 $remFactor: 16px !default;
 
@@ -433,6 +434,6 @@ $zindex-debug: 4000 !default;
 $zindex-spinner-overlay: 11 !default;
 
 $Form--horizontal-columns: 12;
-$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
+$Table-strip-bg: color.adjust(#f6f8f8, $lightness: 1%) !default;
 $Number-handler-mode: 'vertical';
 $Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

package/scss/components/_anchor-nav.scss

@@ -1,6 +1,6 @@
 .#{$ns}AnchorNav {
   display: flex;
-  height: px2rem(400px);
+  min-height: px2rem(400px);
 
   &--vertical {
     .#{$ns}AnchorNav-link-wrap {
@@ -8,11 +8,17 @@
       padding: 0;
       width: var(--Tabs--vertical-width);
       border-left: var(--AnchorNav-links-container-borderRight);
-      padding-bottom: px2rem(60px);
+      padding-bottom: px2rem(20px);
+      position: sticky;
+      top: var(--affix-offset-top);
+      height: fit-content;
+      max-height: 100%;
+      overflow-y: scroll;
 
       > .#{$ns}AnchorNav-link {
         position: relative;
         display: block;
+
         &.#{$ns}AnchorNav-link-child {
           margin-left: px2rem(16px);
         }
@@ -71,6 +77,10 @@
       padding: 0px;
       border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
       list-style: none;
+      position: sticky;
+      top: var(--affix-offset-top);
+      z-index: 1;
+      background-color: var(--background);
 
       > .#{$ns}AnchorNav-link {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
@@ -123,6 +133,12 @@
         }
       }
     }
+
+    .#{$ns}AnchorNav-section-wrap {
+      > .#{$ns}AnchorNav-section {
+        scroll-margin: calc(var(--affix-offset-top) + 50px);
+      }
+    }
   }
 
   &-section-wrap {
@@ -136,6 +152,7 @@
     > .#{$ns}AnchorNav-section {
       display: block;
       padding: var(--gap-base);
+      scroll-margin: var(--affix-offset-top);
     }
   }
 }

package/scss/components/_array-input.scss

@@ -48,13 +48,13 @@
   &-toolbar {
     margin-top: var(--gap-sm);
 
-    &--dnd {
-      padding-left: 29px;
-    }
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    &--dnd {
+      padding-left: 29px;
+    }
   }
 
   &-sortTip {

package/scss/components/_card.scss

@@ -118,6 +118,19 @@
     min-width: 0;
     text-overflow: ellipsis;
     overflow: hidden;
+    @media (max-width: 767px) {
+      .#{$ns}Form-item {
+        padding-top: 0;
+        padding-bottom: 0;
+        &:after {
+          display: none;
+        }
+        .#{$ns}Form-static {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
   }
 
   &-fieldLabel {

package/scss/components/_collapse-group.scss

@@ -41,6 +41,17 @@
     }
   }
 
+  &.icon-position-right {
+    .#{$ns}Collapse-header {
+      &.noTitle {
+        text-align: right;
+        .#{$ns}Collapse-arrow-wrap {
+          float: none;
+        }
+      }
+    }
+  }
+
   &.is-mobile {
     &.icon-position-right {
       .#{$ns}Collapse-header {

package/scss/components/_collapse.scss

@@ -45,6 +45,15 @@
       color: var(--collapse-default-header-hover-color);
     }
 
+    &.noTitle {
+      padding: 0;
+      background-color: unset;
+      &:hover {
+        background: unset;
+        color: inherit;
+      }
+    }
+
     &.is-mobile {
       background: none;
       border-radius: 0 !important;

package/scss/components/_crud2.scss

@@ -30,21 +30,21 @@
     font-weight: var(--Pick-base-value-fontWeight);
     background: var(--Pick-base-value-bgColor);
     border-width: var(--Pick-base-value-top-border-width)
-        var(--Pick-base-value-right-border-width)
-        var(--Pick-base-value-bottom-border-width)
-        var(--Pick-base-value-left-border-width);
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
     border-style: var(--Pick-base-value-top-border-style)
-        var(--Pick-base-value-right-border-style)
-        var(--Pick-base-value-bottom-border-style)
-        var(--Pick-base-value-left-border-style);
+      var(--Pick-base-value-right-border-style)
+      var(--Pick-base-value-bottom-border-style)
+      var(--Pick-base-value-left-border-style);
     border-color: var(--Pick-base-value-top-border-color)
-        var(--Pick-base-value-right-border-color)
-        var(--Pick-base-value-bottom-border-color)
-        var(--Pick-base-value-left-border-color);
+      var(--Pick-base-value-right-border-color)
+      var(--Pick-base-value-bottom-border-color)
+      var(--Pick-base-value-left-border-color);
     border-radius: var(--Pick-base-top-left-border-radius)
-        var(--Pick-base-top-right-border-radius)
-        var(--Pick-base-bottom-right-border-radius)
-        var(--Pick-base-bottom-left-border-radius);
+      var(--Pick-base-top-right-border-radius)
+      var(--Pick-base-bottom-right-border-radius)
+      var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -130,9 +130,177 @@
     align-self: flex-start;
   }
 
-  &-filter {
+  &-filter:not(:empty) {
     margin-bottom: var(--gap-base);
   }
+
+  &.is-mobile.is-mobile-cards {
+    // 移动端卡片模式不需要列选择器
+    .#{$ns}ColumnToggler {
+      display: none;
+    }
+
+    .#{$ns}SearchBox {
+      border-radius: var(--Form-input-borderRadius);
+      width: 100%;
+    }
+
+    .#{$ns}Cards-placeholder {
+      font-size: var(--fonts-size-7);
+    }
+
+    .#{$ns}Card {
+      --Card-borderRadius: var(--sizes-size-5);
+      --gap-base: var(--sizes-size-9);
+      --fontSizeBase: var(--fonts-size-7);
+      --body-lineHeight: var(--sizes-base-11);
+      --Card-actions-borderColor: #f2f2f4;
+      --Card-actions-fontSize: var(--fontSizeBase);
+      font-size: var(--fontSizeBase);
+      border: 0;
+      box-shadow: var(--boxShadowSm);
+      &-field {
+        margin-bottom: var(--sizes-size-3);
+      }
+      &-fieldLabel {
+        color: var(--colors-neutral-text-5);
+        font-size: var(--fontSizeBase);
+        flex-basis: var(--sizes-base-28);
+        line-height: var(--body-lineHeight);
+        margin-right: var(--sizes-size-6);
+      }
+      &-fieldValue {
+        color: var(--colors-neutral-text-2);
+      }
+
+      &-actions {
+        padding-top: var(--sizes-base-4);
+        padding-bottom: var(--sizes-base-4);
+        gap: var(--sizes-base-5);
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        &-wrapper {
+          padding-left: var(--gap-md);
+          padding-right: var(--gap-md);
+        }
+        & > a {
+          line-height: var(--sizes-base-14);
+          background: var(--colors-link-10);
+          border-radius: var(--sizes-base-7);
+          font-size: var(--fontSizeBase);
+          color: var(--colors-link-5);
+          flex-grow: 0;
+          text-align: center;
+          padding: 0 var(--sizes-base-10);
+          &.text-danger {
+            background-color: var(--colors-error-10);
+            color: var(--colors-error-5);
+          }
+        }
+      }
+
+      .#{$ns}Form-item {
+        .#{$ns}Form-value,
+        .#{$ns}Form-control {
+          font-size: var(--fontSizeBase);
+        }
+      }
+
+      &-multiMedia {
+        &--right {
+          align-items: flex-start;
+        }
+        &-img {
+          width: var(--sizes-base-45);
+          height: var(--sizes-base-45);
+        }
+      }
+
+      .#{$ns}Image {
+        border: 0;
+
+        &--thumb {
+          padding-left: 0;
+          img {
+            border-radius: var(--sizes-size-5);
+          }
+        }
+      }
+    }
+
+    .#{$ns}Panel {
+      --Panel-bodyPadding: var(--gap-md);
+      --Panel-headingPadding: var(--gap-sm) var(--gap-md);
+      --Panel-body-paddingTop: var(--gap-md);
+      --Panel-body-paddingBottom: var(--gap-md);
+      --Panel-body-paddingLeft: var(--gap-md);
+      --Panel-body-paddingRight: var(--gap-md);
+      &--form {
+        margin: 0;
+        margin-bottom: var(--gap-md);
+        border-radius: var(--sizes-size-5);
+        box-shadow: var(--boxShadowSm);
+      }
+      &-body {
+        padding-top: 0;
+      }
+      .#{$ns}Form {
+        &--column {
+          margin-left: 0;
+          margin-right: 0;
+        }
+        &-item {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+
+    .#{$ns}Button.is-fixed-right-bottom {
+      position: fixed;
+      right: 12px;
+      bottom: 70px;
+      z-index: 1300;
+      width: 46px;
+      height: 46px;
+      border-radius: 50%;
+      background: #528eff;
+      box-shadow: 0 2px 12px 0 rgba(22, 27, 67, 0.2);
+      border: 0 !important;
+      .#{$ns}Button-icon {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .is-fixed-right-bottom-wrapper {
+      flex: 0 !important;
+      & + div {
+        position: sticky !important;
+        top: 0;
+        margin-top: 0;
+        .#{$ns}SearchBox {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .#{$ns}Crud2-header-toolbar.is-sticky {
+      position: sticky;
+      top: 0;
+      z-index: 1300;
+      background-color: #fff;
+      padding: 5px 16px;
+      margin-top: calc(-1 * var(--Page-body-padding));
+      margin-left: calc(-1 * var(--Page-body-padding));
+      margin-right: calc(-1 * var(--Page-body-padding));
+      .#{$ns}SearchBox {
+        background: #f7f7f9;
+        border-radius: 4px;
+        border-bottom: 0;
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {