@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/metaData/components/masking/api.md

@@ -0,0 +1,85 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|contentAtCenter|弹窗内容是否居中|boolean|false|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionType|内容过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskTransitionTimeout|蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|contentTransitionTimeout|内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"top" \| "bottom" \| "left" \| "right"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|open|打开模态弹窗|(config: MaskingProps) =\> \{ close: () =\> void; update: (newConfig: MaskingProps) =\> void; \}|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/masking/style.md

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-masking {
+    &-mask,
+    &-content {
+        &.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
+        &[class*="-exit-done"] {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    &-mask {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: @full-screen-z-index;
+        .use-var(background, mask-background);
+    }
+    &-content {
+        position: fixed;
+        z-index: @full-screen-z-index + 1;
+        &.at-center {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}

package/metaData/components/nav-bar/api.md

@@ -0,0 +1,32 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|导航栏中间文字，带居中和溢出省略效果|ReactNode|-|
+|children|自定义导航栏主内容，当导航栏内容为Tabs等非居中文字样式时可用|ReactNode|-|
+|leftContent|导航栏左侧内容|ReactNode|返回按钮|
+|rightContent|导航栏右侧内容|ReactNode|-|
+|style|自定义样式，最外层元素的背景文字颜色可在此定义|CSSProperties|-|
+|className|内层自定义类名|string|-|
+|wrapClass|最外层元素自定义类名|string|-|
+|fixed|是否吸顶|boolean|-|
+|statusBarHeight|沉浸式状态栏高度|number|0|
+|hasBottomLine|是否有底边框|boolean|true|
+|onClickLeft|点击左侧内容回调|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClickRight|点击右侧内容回调|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|showOffset|展示nav\-bar的offset值，当scrollTop值小于该值时，将隐藏主内容和右侧内容，左侧内容保留|number|0|
+|onShowChange|设置showOffset后，当内容显示状态发生变化后触发|(show: boolean) =\> void|-|
+|placeholder|设置fixed=true时，导航栏原本的位置是否要占住|boolean|true|
+|extra|额外渲染元素，与inner平级|ReactNode|-|
+|getScrollContainer|自定义滚动元素，不传默认是window|() =\> HTMLElement \| Window|-|
+|getComputedStyleByScroll|根据滚动offset值设置自定义style，设置该属性后将监听滚动容器的滚动事件|(offset: number) =\> CSSProperties|-|
+|onScrollChange|滚动时回调，设置该属性后将监听滚动容器的滚动事件|(offset: number) =\> void|-|
+|ariaLabel|无障碍aria\-label属性|string|""|
+|ariaRole|无障碍role属性|string|"banner"|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|navBar|@deprecated|HTMLDivElement|
+|dom|最外层元素DOM|HTMLDivElement|

package/metaData/components/nav-bar/style.md

@@ -0,0 +1,112 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-nav-bar {
+    position: relative;
+    width: 100%;
+    box-sizing: content-box;
+    .use-var(color, nav-bar-font-color);
+    .use-var(background, nav-bar-background);
+
+    &&-fixed {
+        .use-var(height, nav-bar-height);
+    }
+
+    &&-float {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: @full-screen-z-index;
+    }
+
+    &&-float:not(&-hide) &-wrapper-fixed {
+        // 部分安卓4机型在有两层fixed时会疯狂抖动，因此外层fixed时内层不再fixed
+        // 辣鸡安卓4机型在设置为absolute的时候快速回到顶部时又有残影，所以在hide状态还是fixed
+        position: absolute;
+    }
+
+    &&-hide {
+        .@{prefix}-nav-bar-title, .@{prefix}-nav-bar-right {
+            visibility: hidden;
+        }
+    }
+
+    &&-hide &-wrapper-border::after {
+        border-color: transparent;
+    }
+
+    &-wrapper {
+        background: inherit;
+        .use-var(height, nav-bar-height);
+        box-sizing: content-box;
+        width: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        transition: all .1s linear;
+
+        &&-border {
+            .onepx-border-var(bottom, nav-bar-bottom-border-color);
+        }
+
+        &&-fixed {
+            // onepx-border mixin 会加上position relative，暗黑模式下优先级会高于这条优先级，所以加上important声明
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            z-index: @fixed-z-index;
+        }
+    }
+
+    &-inner {
+        position: relative;
+        height: 100%;
+    }
+
+    &-left,
+    &-title,
+    &-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-left,
+    &-right {
+        .text-overflow();
+        .use-var(font-size, nav-bar-two-sides-font-size);
+        .use-var(padding, nav-bar-two-sides-padding);
+        position: absolute;
+        top: 0;
+        height: 100%;
+        color: inherit;
+    }
+
+    &-left {
+        left: 0;
+    }
+
+    &-title {
+        .use-var(font-size, nav-bar-title-font-size);
+        .use-var(padding, nav-bar-title-padding);
+        width: 100%;
+        height: 100%;
+        color: inherit;
+        text-align: center;
+
+        &-text {
+            .use-var(font-size, nav-bar-title-text-font-size);
+            .text-overflow();
+            .noselect();
+            font-weight: bold;
+        }
+    }
+
+    &-right {
+        right: 0;
+    }
+
+    .nav-bar-back {
+        .use-var(height, nav-bar-back-icon-height);
+        font-size: 0;
+    }
+}

package/metaData/components/notice-bar/api.md

@@ -0,0 +1,26 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式，背景颜色和文字颜色可直接在这里指定\`background\`和\`color\`|CSSProperties|-|
+|children|通知内容文字，如需垂直滚动效果可传入一个Carousel|ReactNode|-|
+|leftContent|左侧内容|ReactNode|-|
+|rightContent|右侧内容|ReactNode|-|
+|marquee|通知文字处理方式，为\`overflow\`则文字超出容器长度时才滚动，为\`none\`则文字始终不滚动，为\`always\`则文字始终滚动|"overflow" \| "none" \| "always"|"overflow"|
+|closeable|是否可关闭|boolean|true|
+|closeIcon|自定义关闭图标|ReactNode|\<IconClose /\>|
+|wrapable|是否需要换行，当 marquee=none 且 wrapable=false 时，文字超出会有溢出省略(ellipsis)效果|boolean|true|
+|speed|文字滚动速度，单位是px/s|number|50|
+|delay|文字开始滚动之前的延迟(ms)|number|1000|
+|autoSetGradientStyle|是否根据\`style\`属性中自定义的背景色自动设置渐变背景色|boolean|true|
+|onClick|点击通知栏事件|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onClose|点击关闭按钮回调|(e: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|close|手动关闭通知栏，即移除当前组件|() =\> void|
+|updateData|手动更新组件布局|() =\> void|

package/metaData/components/notice-bar/style.md

@@ -0,0 +1,124 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-notice-bar {
+    .use-var(background, notice-bar-background);
+    .use-var(color, notice-bar-color);
+    .use-var(padding, notice-bar-wrapper-padding);
+    display: flex;
+    align-items: flex-start;
+    font-size: 0;
+
+    &.no-wrap &-content-inner {
+        white-space: nowrap;
+    }
+
+    &.ellipsis &-content-inner {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.wrapable &-content-inner {
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+    }
+
+    &-left-part,
+    &-right-part,
+    &-close {
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+        .use-var(font-size, notice-bar-text-font-size);
+        .@{prefix}-icon {
+            float: left;
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+    }
+
+    &-left-part {
+        .use-var-with-rtl(padding-right, notice-bar-horizontal-padding);
+    }
+
+    &-right-part,
+    &-close {
+        .use-var-with-rtl(padding-left, notice-bar-horizontal-padding);
+    }
+
+    &-content {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+
+        &-inner {
+            display: inline-block;
+            .use-var(font-size, notice-bar-text-font-size);
+            .use-var(line-height, notice-bar-single-line-height);
+
+            &.animate {
+                animation: marquee linear both;
+                .style-with-rtl({
+                    animation-name: marquee-reverse;
+                });
+            }
+        }
+        .@{prefix}-carousel {
+            .use-var(height, notice-bar-single-line-height);
+            white-space: normal;
+            .@{prefix}-carousel-item {
+                .use-var(font-size, notice-bar-text-font-size);
+                .use-var(line-height, notice-bar-single-line-height);
+            }
+        }
+        .@{prefix}-carousel-indicator {
+            display: none;
+        }
+    }
+    .@{prefix}-icon {
+        .use-var(font-size, notice-bar-icon-font-size);
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(height, notice-bar-line-height); // for svg
+    }
+
+    &-gradient {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 1;
+        .use-var(width, notice-bar-gradient-width);
+        .use-var(background, notice-bar-gradient-background);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: -2PX;
+            transform: rotate(180deg);
+        }
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(-100%, 0, 0);
+        }
+    }
+
+    @keyframes marquee-reverse {
+
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(100%, 0, 0);
+        }
+    }
+}

package/metaData/components/notify/api.md

@@ -0,0 +1,73 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|content|需要展示的内容|ReactNode|-|
+|type|通知类型|"success" \| "error" \| "warn" \| "info"|"info"|
+|visible|是否显示通知|boolean|false|
+|close|控制通知关闭的事件|() =\> void|-|
+|onClose|通知关闭时的回调函数|() =\> void|-|
+|getContainer|将通知放入某个模块|() =\> HTMLElement|-|
+|transitionDuration|动画的执行时间 (单位ms)|number|300|
+|duration|通知自动关闭时延 (单位ms) 设置为0时不会自动关闭|number|3000|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层dom元素|HTMLElement|
+|updateLayout|更新元素布局|() =\> void|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|info|展示常规通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|success|展示成功通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|error|展示错误的通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+|warn|展示警告的通知|(config: string \| NotifyProps) =\> \{ update: (config: NotifyProps) =\> void; close: () =\> void \}|
+
+> NotifyType
+
+```
+"success" | "error" | "warn" | "info"
+```
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/notify/style.md

@@ -0,0 +1,40 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-notify {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    transition-property: height;
+    .use-var(color, notify-font-color);
+    .use-var(font-size, notify-font-size);
+    &-content {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        transition-property: transform;
+        .use-var(min-height, notify-min-height);
+    }
+    &-info {
+        background: transparent;
+        .use-var(color, notify-info-font-color);
+    }
+    &-success {
+        .use-var(background, notify-success-background);
+    }
+    &-error {
+        .use-var(background, notify-error-background);
+    }
+    &-warn {
+        .use-var(background, notify-warn-background);
+    }
+    &-content-transition-Y0 {
+        transform: translateY(0);
+    }
+    &-content-transition-Y100 {
+        transform: translateY(-100%);
+    }
+}

package/metaData/components/pagination/api.md

@@ -0,0 +1,33 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|分页器翻页区域样式类型，button表示按钮式分页器，text表示文本式分页器，none表示仅保留页码不含翻页区域|"button" \| "text" \| "none"|"button"|
+|icon|是否需要展示图标|ReactNode \| \[\.\.\.\]|false|
+|justify|翻页按钮水平位置，side表示两端对齐，center表示居中对齐|"center" \| "side"|"side"|
+|current|当前页码|number|1|
+|pageSize|每页条数|number|10|
+|total|数据总条数|number|0|
+|hideOnOnePage|只有一页时是否隐藏分页器|boolean|false|
+|nextFieldType|下一页样式，primary表示高亮|"default" \| "primary"|"default"|
+|prevFieldText|上一页文本|string|"上一页"|
+|nextFieldText|下一页文本|string|"下一页"|
+|renderPrevField|渲染前翻页按钮|(data: IPaginationDataParams) =\> ReactNode|-|
+|renderNextField|渲染后翻页按钮|(data: IPaginationDataParams) =\> ReactNode|-|
+|onChange|点击前/后翻页按钮时调用|(data: IPaginationDataParams) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> IPaginationDataParams
+
+|参数|描述|类型|
+|----------|-------------|------|
+|current|当前页|number|
+|pageSize|每页条数|number|
+|pageNum|总页数|number|

package/metaData/components/pagination/style.md

@@ -0,0 +1,105 @@
+@import '../../../style/mixin.less';
+
+
+.@{prefix}-pagination {
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .use-var(padding, pagination-padding);
+    &-prev-field, &-next-field {
+        flex: 1;
+        display: flex;
+        .use-var(color, font-color);
+    }
+    &-prev-field {
+        justify-content: flex-start;
+        &.flex-center {
+            justify-content: flex-end;
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
+        }
+    }
+    &-next-field {
+        justify-content: flex-end;
+        &.flex-center {
+            justify-content: flex-start;
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
+        }
+    }
+
+    &-field {
+        cursor: pointer;
+        text-align: center;
+        font-size: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        .use-var(font-size, pagination-field-font-size);
+        .use-var(line-height, pagination-field-line-height);
+        .noselect();
+        .btn-icon {
+            display: inline-flex;
+            align-items: center;
+            .style-with-rtl({
+                transform: scaleX(-1);
+            });
+            &.next {
+                transform: rotateY(180deg);
+                .style-with-rtl({
+                    transform: none;
+                });
+            }
+        }
+    }
+    &-field.button {
+        .use-var(padding, pagination-field-button-padding);
+        .use-var(border-radius, pagination-field-button-border-radius);
+        .use-var(min-height, pagination-field-button-min-height);
+        .use-var(background, pagination-field-default-background);
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(background, pagination-field-primary-background);
+            .use-var(color, pagination-field-primary-text-color);
+        }
+        .btn-text {
+            .use-var(font-size, pagination-field-btn-text-font-size);
+        }
+        .btn-icon + .btn-text,
+        .btn-text + .btn-icon {
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
+        }
+    }
+    &.android &-field.button {
+        .btn-text {
+            .rem(padding-top, 2);
+        }
+    }
+    &-field.text {
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(color, pagination-field-text-primary-text-color);
+        }
+        &.disabled {
+            background: none;
+        }
+    }
+    &-field.disabled {
+        .use-var(background, pagination-field-disabled-background);
+        .use-var(color, pagination-field-disabled-text-color);
+    }
+
+    &-item {
+        flex: 0 0 auto;
+        text-align: center;
+        .use-var(font-size, pagination-item-font-size);
+        .use-var(line-height, pagination-item-line-height);
+        .use-var(color, pagination-item-default-text-color);
+        .active {
+            .use-var(color, pagination-item-primary-text-color);
+        }
+    }
+}
+.@{prefix}-pagination-simple {
+    justify-content: center;
+}