antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/2x/cjs/utils/use-props-value.js

@@ -22,15 +22,13 @@ function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  const setState = (0, _ahooks.useMemoizedFn)(v => {
+  const setState = (0, _ahooks.useMemoizedFn)((v, forceTrigger = false) => {
+    // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
     const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
-
-    if (value === undefined) {
-      stateRef.current = nextValue;
-      update();
-    }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    if (!forceTrigger && nextValue === stateRef.current) return;
+    stateRef.current = nextValue;
+    update();
+    return onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];
 }

package/2x/cjs/utils/use-resize-effect.js

@@ -14,11 +14,13 @@ function useResizeEffect(effect, targetRef) {
     if (!target) return;
 
     if (window.ResizeObserver) {
+      let animationFrame;
       const observer = new ResizeObserver(() => {
-        fn(target);
+        animationFrame = window.requestAnimationFrame(() => fn(target));
       });
       observer.observe(target);
       return () => {
+        window.cancelAnimationFrame(animationFrame);
         observer.disconnect();
       };
     } else {

package/2x/cjs/utils/use-tab-list-scroll.js

@@ -45,7 +45,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
       from: {
         scrollLeft: containerScrollLeft
       },
-      immediate
+      immediate: immediate && !scrollLeft.isAnimating
     });
   }
 

package/2x/cjs/utils/with-default-props.js

@@ -5,20 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeProps = mergeProps;
 
-var _assign = _interopRequireDefault(require("lodash/assign"));
-
 var _assignWith = _interopRequireDefault(require("lodash/assignWith"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function mergeProps(...items) {
   function customizer(objValue, srcValue) {
-    return (0, _isUndefined.default)(srcValue) ? objValue : srcValue;
+    return srcValue === undefined ? objValue : srcValue;
   }
 
-  let ret = (0, _assign.default)({}, items[0]);
+  let ret = Object.assign({}, items[0]);
 
   for (let i = 1; i < items.length; i++) {
     ret = (0, _assignWith.default)(ret, items[i], customizer);

package/2x/es/components/action-sheet/action-sheet.css

@@ -8,34 +8,49 @@
   display: flex;
   justify-content: center;
   color: var(--adm-color-weak);
-  font-size: 30px;
-  padding: 36px 32px;
-  border-bottom: 2px solid var(--adm-border-color);
+  font-size: var(--adm-font-size-7);
+  padding: 36px 24px;
+  border-bottom: 2px solid var(--adm-color-border);
+}
+
+.adm-action-sheet-button-list {
+  border-bottom: 2px solid var(--adm-color-border);
 }
 
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 2px solid var(--adm-border-color);
+  border-bottom: 2px solid var(--adm-color-border);
 }
 
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 
 .adm-action-sheet-button-item {
-  padding: 28px;
   text-align: center;
+  display: block;
+  background-color: var(--adm-color-background);
+  padding: 32px;
+}
+
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 
 .adm-action-sheet-button-item-name {
   color: var(--adm-color-text);
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   color: var(--adm-color-weak);
-  padding-top: 8px;
+  padding-top: 4px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
@@ -43,6 +58,6 @@
 }
 
 .adm-action-sheet-cancel {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   padding-top: 16px;
 }

package/2x/es/components/action-sheet/action-sheet.d.ts

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { GetContainer } from '../../utils/render-to-container';
+import { PopupProps } from '../popup';
 export declare type Action = {
     key: string | number;
     text: ReactNode;
@@ -16,17 +16,15 @@ export declare type ActionSheetProps = {
     cancelText?: React.ReactNode;
     onAction?: (action: Action, index: number) => void;
     onClose?: () => void;
-    afterClose?: () => void;
     onMaskClick?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    getContainer?: GetContainer;
     safeArea?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-} & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;
 };
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible' | 'destroyOnClose' | 'forceRender'>): ActionSheetShowHandler;

package/2x/es/components/action-sheet/action-sheet.js

@@ -3,7 +3,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import Popup from '../popup';
-import Button from '../button';
 import SafeArea from '../safe-area';
 import { renderImperatively } from '../../utils/render-imperatively';
 const classPrefix = `adm-action-sheet`;
@@ -13,7 +12,9 @@ const defaultProps = {
   cancelText: '',
   closeOnAction: false,
   closeOnMaskClick: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 export const ActionSheet = p => {
   const props = mergeProps(defaultProps, p);
@@ -31,7 +32,9 @@ export const ActionSheet = p => {
     afterClose: props.afterClose,
     className: classNames(`${classPrefix}-popup`, props.popupClassName),
     style: props.popupStyle,
-    getContainer: props.getContainer
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, props.extra && React.createElement("div", {
@@ -41,11 +44,11 @@ export const ActionSheet = p => {
   }, props.actions.map((action, index) => React.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -55,10 +58,7 @@ export const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: classNames(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && React.createElement("div", {
@@ -67,11 +67,8 @@ export const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

package/2x/es/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }
@@ -15,11 +15,11 @@
 }
 
 .adm-badge-content {
-  color: #fff;
+  color: var(--adm-color-white);
   box-sizing: border-box;
   min-width: 16px;
   padding: 2px 8px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-1);
   line-height: 24px;
   white-space: nowrap;
   font-weight: normal;

package/2x/es/components/badge/badge.d.ts

@@ -1,10 +1,12 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare const dot: unique symbol;
+export declare const dot: JSX.Element;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/2x/es/components/badge/badge.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-badge`;
-export const dot = Symbol();
+export const dot = React.createElement(React.Fragment, null);
 export const Badge = props => {
   const {
     content,
@@ -20,6 +20,7 @@ export const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? React.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: classNames(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };

package/2x/es/components/badge/index.d.ts

@@ -2,6 +2,6 @@
 import './badge.less';
 export type { BadgeProps } from './badge';
 declare const _default: import("react").FC<import("./badge").BadgeProps> & {
-    dot: symbol;
+    dot: JSX.Element;
 };
 export default _default;

package/2x/es/components/button/button.css

@@ -1,11 +1,11 @@
 .adm-button {
   --color: var(--adm-color-white);
   --text-color: var(--adm-button-text-color, var(--adm-color-text));
-  --background-color: var(--adm-button-background-color, var(--adm-color-white));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
   --border-radius: var(--adm-button-border-radius, 8px);
   --border-width: var(--adm-button-border-width, 2px);
   --border-style: var(--adm-button-border-style, solid);
-  --border-color: var(--adm-button-border-color, var(--adm-border-color));
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
   color: var(--text-color);
   background-color: var(--background-color);
   position: relative;
@@ -14,13 +14,14 @@
   height: auto;
   padding: 14px 24px;
   margin: 0;
-  font-size: 34px;
+  font-size: var(--adm-font-size-9);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: opacity ease 0.15s;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -107,7 +108,7 @@
 .adm-button.adm-button-mini {
   padding-top: 6px;
   padding-bottom: 6px;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
 }
 
 .adm-button.adm-button-mini.adm-button-shape-rounded {
@@ -118,13 +119,13 @@
 .adm-button.adm-button-small {
   padding-top: 6px;
   padding-bottom: 6px;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }
 
 .adm-button.adm-button-large {
   padding-top: 22px;
   padding-bottom: 22px;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-button.adm-button-shape-rounded {

package/2x/es/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
+declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export declare type ButtonProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
     fill?: 'solid' | 'outline' | 'none';
@@ -9,11 +10,11 @@ export declare type ButtonProps = {
     loadingText?: string;
     loadingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
     children?: React.ReactNode;
-} & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
 export declare type ButtonRef = {
     nativeElement: HTMLButtonElement | null;
 };
@@ -26,8 +27,13 @@ export declare const Button: React.ForwardRefExoticComponent<{
     loadingText?: string | undefined;
     loadingIcon?: React.ReactNode;
     disabled?: boolean | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
+export {};

package/2x/es/components/button/button.js

@@ -61,8 +61,12 @@ export const Button = forwardRef((p, ref) => {
       [`${classPrefix}-large`]: props.size === 'large',
       [`${classPrefix}-loading`]: loading
     }, `${classPrefix}-shape-${props.shape}`),
-    disabled: disabled
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
   }, loading ? React.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, props.loadingIcon, props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : React.createElement("span", null, props.children)));
 });

package/2x/es/components/button/button.patch.css

@@ -0,0 +1,106 @@
+.adm-button {
+  color: #333333;
+  background-color: #ffffff;
+  font-size: 34px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #eeeeee;
+  border-radius: 8px;
+}
+
+.adm-button::before {
+  transform: translate(-2px, -2px);
+  border: 2px solid #000;
+  border-radius: 8px;
+}
+
+.adm-button-default.adm-button-fill-outline {
+  background-color: transparent;
+  border-color: #333333;
+}
+
+.adm-button-default.adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button:not(.adm-button-default) {
+  color: #ffffff;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  background-color: transparent;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button-primary {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+
+.adm-button-primary.adm-button-fill-outline,
+.adm-button-primary.adm-button-fill-none {
+  color: #1677ff;
+}
+
+.adm-button-success {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-success.adm-button-fill-outline,
+.adm-button-success.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-danger {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-danger.adm-button-fill-outline,
+.adm-button-danger.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-warning {
+  background-color: #ff8f1f;
+  border-color: #ff8f1f;
+}
+
+.adm-button-warning.adm-button-fill-outline,
+.adm-button-warning.adm-button-fill-none {
+  color: #ff8f1f;
+}
+
+.adm-button.adm-button-mini {
+  font-size: 26px;
+}
+
+.adm-button.adm-button-small {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 30px;
+}
+
+.adm-button.adm-button-large {
+  padding-top: 22px;
+  padding-bottom: 22px;
+  font-size: 36px;
+}
+
+.adm-button.adm-button-shape-rounded {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rounded::before {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rectangular {
+  border-radius: 0;
+}

package/2x/es/components/calendar/calendar.css

@@ -21,7 +21,7 @@
 }
 
 .adm-calendar .adm-calendar-header .adm-calendar-title {
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
   flex: auto;
   text-align: center;
 }
@@ -86,14 +86,18 @@
   border-bottom-right-radius: 8px;
 }
 
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
+
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
-  font-size: 36px;
+  font-size: var(--adm-font-size-10);
 }
 
 .adm-calendar-cell .adm-calendar-cell-bottom {
   flex: none;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   height: 24px;
   line-height: 24px;
   color: var(--adm-color-weak);
@@ -104,10 +108,10 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
   height: 90px;
   box-sizing: border-box;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   padding: 0 16px;
 }
 

package/2x/es/components/calendar/calendar.d.ts

@@ -4,7 +4,7 @@ declare type Page = {
     month: number;
     year: number;
 };
-export declare type CalenderRef = {
+export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
 };
@@ -15,10 +15,11 @@ export declare type CalendarProps = {
     nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
-    renderLabel?: (date: Date) => string | null | undefined;
+    renderLabel?: (date: Date) => React.ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -35,5 +36,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
 export {};

package/2x/es/components/calendar/calendar.js

@@ -125,10 +125,10 @@ export const Calendar = forwardRef((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(React.createElement("div", {
         key: d.valueOf(),
-        className: classNames(`${classPrefix}-cell`, disabled && `${classPrefix}-cell-disabled`, inThisMonth && {
+        className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
           [`${classPrefix}-cell-selected-begin`]: isBegin,
@@ -196,8 +196,8 @@ export const Calendar = forwardRef((p, ref) => {
   }, renderCells());
   const mark = React.createElement("div", {
     className: `${classPrefix}-mark`
-  }, markItems.map(item => React.createElement("div", {
-    key: item,
+  }, markItems.map((item, index) => React.createElement("div", {
+    key: index,
     className: `${classPrefix}-mark-cell`
   }, item)));
   return withNativeProps(props, React.createElement("div", {

package/2x/es/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps, CalenderRef } from './calendar';
+export type { CalendarProps, CalendarRef } from './calendar';
 export default Calendar;

package/2x/es/components/capsule-tabs/capsule-tabs.css

@@ -6,7 +6,7 @@
 .adm-capsule-tabs-header {
   position: relative;
   padding: 24px 12px;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
 }
 
 .adm-capsule-tabs-tab-list {
@@ -34,14 +34,14 @@
   margin: 0 auto;
   border-radius: 40px;
   cursor: pointer;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-capsule-tabs-tab-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 
@@ -52,24 +52,4 @@
 
 .adm-capsule-tabs-content {
   padding: 24px;
-}
-
-.adm-capsule-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 60px;
-  height: 100%;
-  pointer-events: none;
-}
-
-.adm-capsule-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-
-.adm-capsule-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
 }