antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/cjs/components/result-page/result-page.css

@@ -0,0 +1,113 @@
+.adm-result-page {
+  --background-color: var(--adm-color-primary);
+  position: relative;
+  background-color: var(--adm-color-box);
+  min-height: 100vh;
+  width: 100%;
+}
+.adm-result-page-header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: transparent;
+  position: relative;
+  padding: 20px;
+  padding-bottom: 100px;
+  z-index: 1;
+  overflow: hidden;
+}
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 2px;
+  margin-bottom: 8px;
+}
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 32px;
+}
+.adm-result-page-title {
+  font-size: var(--adm-font-size-10);
+  color: var(--adm-color-background);
+  line-height: 1.4;
+  text-align: center;
+}
+.adm-result-page-description {
+  margin-top: 8px;
+  margin-bottom: 24px;
+  font-size: var(--adm-font-size-6);
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+  text-align: center;
+}
+.adm-result-page-details {
+  width: 100%;
+}
+.adm-result-page-detail {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  color: var(--adm-color-background);
+  font-size: var(--adm-font-size-6);
+}
+.adm-result-page-detail-bold {
+  font-weight: 600;
+}
+.adm-result-page-collapse {
+  opacity: 0.6;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  margin-bottom: 5px;
+  border-top: 2px solid var(--adm-color-background);
+  border-right: 2px solid var(--adm-color-background);
+  transform: rotate(135deg);
+}
+.adm-result-page-collapse-active {
+  transform: rotate(-45deg);
+}
+.adm-result-page-bgWrapper {
+  position: relative;
+  align-self: flex-start;
+  top: 54px;
+}
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 20px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+.adm-result-page-content {
+  position: relative;
+  padding: 12px;
+  top: -104px;
+  z-index: 2;
+}
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 12px;
+  padding-bottom: 24px;
+  display: flex;
+  justify-content: center;
+  background-color: var(--adm-color-box);
+  z-index: 3;
+}
+.adm-result-page-footer-btn {
+  flex: 1;
+  max-width: calc((100vw - 36px) / 2);
+}
+.adm-result-page-footer-space {
+  width: 12px;
+}
+.adm-result-page-card {
+  border-radius: 8px;
+  background-color: var(--adm-color-background);
+}

package/cjs/components/result-page/result-page.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+interface ResultPageDetail {
+    label: ReactNode;
+    value: ReactNode;
+    bold?: boolean;
+}
+declare type ResultPageDetails = ResultPageDetail[];
+declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+export declare type ResultPageProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    details?: ResultPageDetails;
+    children?: ReactNode;
+    primaryButtonText?: ReactNode;
+    secondaryButtonText?: ReactNode;
+    onPrimaryButtonClick?: OnClick;
+    onSecondaryButtonClick?: OnClick;
+} & NativeProps<'--background-color'>;
+export declare const ResultPage: FC<ResultPageProps>;
+export {};

package/cjs/components/result-page/result-page.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResultPage = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _isNodeWithContent = require("../../utils/is-node-with-content");
+
+var _button = _interopRequireDefault(require("../button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-result-page`;
+const iconRecord = {
+  success: _antdMobileIcons.CheckCircleFill,
+  error: _antdMobileIcons.CloseCircleFill,
+  info: _antdMobileIcons.InformationCircleFill,
+  waiting: _antdMobileIcons.ClockCircleFill,
+  warning: _antdMobileIcons.ExclamationCircleFill
+};
+const defaultProps = {
+  status: 'info',
+  details: []
+};
+
+const ResultPage = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    status,
+    title,
+    description,
+    details,
+    icon,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick
+  } = props;
+
+  const resultIcon = icon || _react.default.createElement(iconRecord[status]);
+
+  const [collapse, setCollapse] = (0, _react.useState)(true);
+  const showSecondaryButton = (0, _isNodeWithContent.isNodeWithContent)(secondaryButtonText);
+  const showPrimaryButton = (0, _isNodeWithContent.isNodeWithContent)(primaryButtonText);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), (0, _isNodeWithContent.isNodeWithContent)(description) ? _react.default.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null, details.length ? _react.default.createElement("div", {
+    className: `${classPrefix}-details`
+  }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
+      key: index
+    }, _react.default.createElement("span", null, detail.label), _react.default.createElement("span", null, detail.value));
+  }), details.length > 3 && _react.default.createElement("div", {
+    onClick: () => setCollapse(prev => !prev)
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
+  }))) : null, _react.default.createElement("div", {
+    className: `${classPrefix}-bgWrapper`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-bg`
+  }))), _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children), _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, showSecondaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'default',
+    fill: 'solid',
+    size: 'large',
+    onClick: onSecondaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, secondaryButtonText), showPrimaryButton && showSecondaryButton && _react.default.createElement("div", {
+    className: `${classPrefix}-footer-space`
+  }), showPrimaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'primary',
+    fill: 'solid',
+    size: 'large',
+    onClick: onPrimaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, primaryButtonText))));
+};
+
+exports.ResultPage = ResultPage;

package/cjs/components/safe-area/safe-area.css

@@ -1,10 +1,11 @@
 .adm-safe-area {
+  --multiple: var(--adm-safe-area-multiple, 1);
   display: block;
   width: 100%;
 }
 .adm-safe-area-position-top {
-  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
+  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
 }
 .adm-safe-area-position-bottom {
-  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
 }

package/cjs/components/scroll-mask/scroll-mask.css

@@ -9,9 +9,9 @@
 }
 .adm-scroll-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 .adm-scroll-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/cjs/components/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,6 @@
+.adm-scroll-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.adm-scroll-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/cjs/components/search-bar/search-bar.css

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 32px;
   --padding-left: 8px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -23,7 +23,7 @@
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
@@ -33,7 +33,7 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 15px;
+  --font-size: var(--adm-font-size-7);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
@@ -53,5 +53,5 @@
 }
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }

package/cjs/components/search-bar/search-bar.d.ts

@@ -31,4 +31,8 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<InputRef>>;

package/cjs/components/search-bar/search-bar.js

@@ -48,6 +48,7 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
+  const composingRef = (0, _react.useRef)(false);
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
       var _a;
@@ -74,7 +75,7 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
   }));
 
   const renderCancelButton = () => {
-    let isShowCancel = false;
+    let isShowCancel;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);
@@ -83,13 +84,7 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
     }
 
     return isShowCancel && _react.default.createElement("div", {
-      className: `${classPrefix}-suffix`,
-      onMouseDown: e => {
-        e.preventDefault();
-      },
-      onTouchStart: e => {
-        e.preventDefault();
-      }
+      className: `${classPrefix}-suffix`
     }, _react.default.createElement(_button.default, {
       fill: 'none',
       className: `${classPrefix}-cancel-button`,
@@ -102,6 +97,9 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
 
         (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
         (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      },
+      onMouseDown: e => {
+        e.preventDefault();
       }
     }, props.cancelText));
   };
@@ -143,8 +141,17 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
     onEnterPress: () => {
       var _a, _b;
 
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      if (!composingRef.current) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      }
+    },
+    "aria-label": locale.SearchBar.name,
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: () => {
+      composingRef.current = false;
     }
   })), renderCancelButton()));
 });

package/cjs/components/selector/selector.css

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: #f5f5f5;
+  --color: var(--adm-color-box);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -7,13 +7,22 @@
   --checked-border: none;
   --border-radius: 2px;
   --padding: 8px 16px;
+  --gap: 8px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 .adm-selector .adm-space.adm-space {
   --gap: 12px;
 }
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
 .adm-selector-item {
   padding: var(--padding);
   position: relative;
@@ -29,7 +38,7 @@
   vertical-align: top;
 }
 .adm-selector-item-description {
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 .adm-selector-item-active,

package/cjs/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/cjs/components/selector/selector.js

@@ -17,8 +17,6 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _grid = _interopRequireDefault(require("../grid"));
 
-var _convertPx = require("../../utils/convert-px");
-
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _checkMark = require("./check-mark");
@@ -84,8 +82,7 @@ const Selector = p => {
   }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
   }, items), props.columns && _react.default.createElement(_grid.default, {
-    columns: props.columns,
-    gap: (0, _convertPx.convertPx)(8)
+    columns: props.columns
   }, items)));
 };
 

package/cjs/components/side-bar/corner.js

@@ -22,7 +22,7 @@ const Corner = (0, _react.memo)(props => (0, _nativeProps.withNativeProps)(props
   fillRule: 'evenodd'
 }, _react.default.createElement("path", {
   d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
-  fill: 'var(--adm-color-white)',
+  fill: 'var(--adm-color-background)',
   transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
 })))));
 exports.Corner = Corner;

package/cjs/components/side-bar/side-bar.css

@@ -2,11 +2,11 @@
   --height: 100%;
   --width: 105px;
   --item-border-radius: 8px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -44,7 +44,7 @@
 }
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   position: relative;
 }
 .adm-side-bar-item-corner {
@@ -53,7 +53,8 @@
   position: absolute;
   z-index: 100;
   right: 0;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 .adm-side-bar-item-corner-top {

package/cjs/components/side-bar/side-bar.d.ts

@@ -1,10 +1,11 @@
 import { FC, ReactNode } from 'react';
 import React from 'react';
+import { BadgeProps } from '../badge';
 import { NativeProps } from '../../utils/native-props';
 export declare type SideBarItemProps = {
     title?: ReactNode;
     disabled?: boolean;
-    badge?: ReactNode;
+    badge?: BadgeProps['content'];
 } & NativeProps;
 export declare const SideBarItem: FC<SideBarItemProps>;
 export declare type SideBarProps = {

package/cjs/components/side-bar/side-bar.js

@@ -22,6 +22,7 @@ var _traverseReactNode = require("../../utils/traverse-react-node");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-side-bar`;
+/* istanbul ignore next */
 
 const SideBarItem = () => {
   return null;

package/cjs/components/slider/slider.css

@@ -1,8 +1,9 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 4px 12px;
+  padding: 5px 14px;
   list-style: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-track-container {
   padding: 8px 0;
@@ -10,54 +11,58 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: #f5f5f5;
+  height: 3px;
+  background-color: var(--adm-color-box);
+  border-radius: 3px;
 }
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 4px;
+  height: 3px;
+  border-radius: 3px;
   background-color: var(--fill-color);
 }
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 4px;
+  height: 3px;
   background: transparent;
 }
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 11px;
-  height: 11px;
-  margin-left: -5px;
-  background-color: #f5f5f5;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  margin-left: -3px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 .adm-slider-tick-active {
   background-color: var(--fill-color);
 }
 .adm-slider-thumb {
-  width: 22px;
-  height: 22px;
-  margin: 5px;
+  width: 28px;
+  height: 28px;
+  margin: 2px;
   border-radius: 50%;
   text-align: center;
-  line-height: 22px;
+  line-height: 28px;
   background: var(--adm-color-white);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.12), 0 1.5px 3px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 .adm-slider-thumb:focus {
   outline: none;
 }
 .adm-slider-thumb-icon {
-  width: 10px;
-  height: 10px;
-  margin: 6px;
-  user-select: none;
+  width: 12px;
+  height: 12px;
+  margin: 8px;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-thumb-container {
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
   position: absolute;
@@ -72,25 +77,39 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 12px;
-  height: 12px;
-  margin-top: 4px;
+  font-size: var(--adm-font-size-3);
+  height: 11px;
+  margin-top: 10px;
 }
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 16px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   transform: translateX(-50%);
 }
-.adm-slider-disabled {
+.adm-slider-disabled .adm-slider-mark,
+.adm-slider-disabled .adm-slider-thumb-icon {
   opacity: 0.4;
 }
+.adm-slider-disabled .adm-slider-tick-active::after,
+.adm-slider-disabled .adm-slider-fill::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.6);
+}
 .adm-slider-disabled .adm-slider-thumb {
   cursor: not-allowed;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06);
 }
 .adm-slider-disabled .adm-slider-mark-text,
 .adm-slider-disabled .adm-slider-tick {