@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/loading/loading.less

@@ -124,22 +124,22 @@
     align-items: center;
     justify-content: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -171,22 +171,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       width: @loading-wave-size-item-width;
       margin-left: @loading-wave-size-item-margin;
     }
 
-    &-item-normal {
+    &-item--normal {
       width: @loading-wave-size-item-width - 1;
       margin-left: @loading-wave-size-item-margin - 1;
     }
 
-    &-item-small {
+    &-item--small {
       width: @loading-wave-size-item-width - 2;
       margin-left: @loading-wave-size-item-margin - 2;
     }
 
-    &-item-mini {
+    &-item--mini {
       width: @loading-wave-size-item-width - 3;
       margin-left: @loading-wave-size-item-margin - 3;
     }
@@ -211,22 +211,22 @@
     display: flex;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -254,25 +254,25 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-cube-size-item-height;
       width: @loading-cube-size-item-width;
       margin-left: @loading-cube-size-item-margin;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-cube-size-item-height - 2;
       width: @loading-cube-size-item-width - 2;
       margin-left: @loading-cube-size-item-margin - 1;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-cube-size-item-height - 4;
       width: @loading-cube-size-item-width - 4;
       margin-left: @loading-cube-size-item-margin - 2;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-cube-size-item-height - 6;
       width: @loading-cube-size-item-width - 6;
       margin-left: @loading-cube-size-item-margin - 3;
@@ -299,22 +299,22 @@
     justify-content: center;
     align-items: center;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -355,22 +355,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-rect-size-item-height;
       width: @loading-rect-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-rect-size-item-height * 0.9;
       width: @loading-rect-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-rect-size-item-height * 0.8;
       width: @loading-rect-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-rect-size-item-height * 0.7;
       width: @loading-rect-size-item-width * 0.4;
     }
@@ -403,22 +403,22 @@
     align-items: center;
     flex-flow: nowrap;
 
-    &-large {
+    &--large {
       width: @loading-large-width;
       height: @loading-large-height;
     }
 
-    &-normal {
+    &--normal {
       width: @loading-normal-width;
       height: @loading-normal-height;
     }
 
-    &-small {
+    &--small {
       width: @loading-small-width;
       height: @loading-small-height;
     }
 
-    &-mini {
+    &--mini {
       width: @loading-mini-width;
       height: @loading-mini-height;
     }
@@ -440,22 +440,22 @@
       }
     }
 
-    &-item-large {
+    &-item--large {
       height: @loading-disappear-size-item-height;
       width: @loading-disappear-size-item-width;
     }
 
-    &-item-normal {
+    &-item--normal {
       height: @loading-disappear-size-item-height * 0.8;
       width: @loading-disappear-size-item-width * 0.8;
     }
 
-    &-item-small {
+    &-item--small {
       height: @loading-disappear-size-item-height * 0.6;
       width: @loading-disappear-size-item-width * 0.6;
     }
 
-    &-item-mini {
+    &-item--mini {
       height: @loading-disappear-size-item-height * 0.4;
       width: @loading-disappear-size-item-width * 0.4;
     }

package/es/menu/Menu.js

@@ -8,7 +8,7 @@ import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Transiti
 import { props } from './props';
 import { getLeft, getTop, toSizeUnit } from '../utils/elements';
 import { useZIndex } from '../context/zIndex';
-import { exposeApis, useTeleport } from '../utils/components';
+import { call, createNamespace, exposeApis, useTeleport } from '../utils/components';
 
 
 
@@ -17,6 +17,10 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
 
+var {
+  n,
+  classes
+} = createNamespace('menu');
 export default defineComponent({
   name: 'VarMenu',
   props,
@@ -47,8 +51,6 @@ export default defineComponent({
     };
 
     var handleMenuClose = () => {
-      var _props$onUpdateShow;
-
       if (clickSelf) {
         clickSelf = false;
         return;
@@ -58,7 +60,7 @@ export default defineComponent({
         return;
       }
 
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
+      call(props['onUpdate:show'], false);
     }; // expose
 
 
@@ -77,18 +79,18 @@ export default defineComponent({
     });
 
     var renderTransition = () => _createVNode(Transition, {
-      "name": "var-menu",
+      "name": n(),
       "onAfterEnter": props.onOpened,
       "onAfterLeave": props.onClosed
     }, {
       default: () => [_withDirectives(_createVNode("div", {
-        "class": "var-menu__menu var-elevation--3",
+        "class": classes(n('menu'), 'var-elevation--3'),
         "ref": menu,
         "style": transitionStyle.value,
         "onClick": event => {
           event.stopPropagation();
         }
-      }, [slots.menu == null ? void 0 : slots.menu()]), [[_vShow, props.show]])]
+      }, [call(slots.menu)]), [[_vShow, props.show]])]
     });
 
     watch(() => props.alignment, resize);
@@ -104,7 +106,7 @@ export default defineComponent({
           resize();
         }
 
-        newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+        newValue ? call(onOpen) : call(onClose);
       });
 
       return function (_x) {
@@ -132,10 +134,10 @@ export default defineComponent({
       var _slot;
 
       return _createVNode("div", {
-        "class": "var-menu",
+        "class": n(),
         "ref": host,
         "onClick": handleClick
-      }, [slots.default == null ? void 0 : slots.default(), to.value ? _createVNode(Teleport, {
+      }, [call(slots.default), to.value ? _createVNode(Teleport, {
         "to": to.value,
         "disabled": disabled.value
       }, _isSlot(_slot = renderTransition()) ? _slot : {

package/es/option/Option.js

@@ -2,21 +2,20 @@ import VarCheckbox from '../checkbox';
 import Ripple from '../ripple';
 import { defineComponent, computed, ref, watch } from 'vue';
 import { useSelect } from './provide';
+import { createNamespace } from '../utils/components';
 import { props } from './props';
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-option__text var--ellipsis"
-};
+var {
+  n,
+  classes
+} = createNamespace('option');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_checkbox = _resolveComponent("var-checkbox");
 
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-option var--box", [_ctx.optionSelected ? 'var-option--selected-color' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.optionSelected, _ctx.n('--selected-color')])),
     style: _normalizeStyle({
       width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : undefined
@@ -25,7 +24,7 @@ export function render(_ctx, _cache) {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-option__cover", [_ctx.optionSelected ? 'var-option--selected-background' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('cover'), [_ctx.optionSelected, _ctx.n('--selected-background')])),
     style: _normalizeStyle({
       background: _ctx.optionSelected ? _ctx.focusColor : undefined
     })
@@ -41,9 +40,13 @@ export function render(_ctx, _cache) {
     onChange: _ctx.handleSelect
   }, null, 8
   /* PROPS */
-  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
+  , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), 'var--ellipsis'))
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
   /* TEXT */
-  )])])], 6
+  )])], 2
+  /* CLASS */
+  )], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
@@ -100,6 +103,8 @@ export default defineComponent({
     });
     bindSelect(optionProvider);
     return {
+      n,
+      classes,
       optionSelected,
       wrapWidth,
       multiple,

package/es/pagination/Pagination.js

@@ -7,18 +7,16 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './porps';
 import { isNumber, toNumber } from '../utils/shared';
 import { pack } from '../locale';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('pagination');
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-pagination"
-};
-var _hoisted_2 = ["item-mode", "onClick"];
-var _hoisted_3 = {
-  key: 4,
-  class: "var-pagination__total"
-};
+var _hoisted_1 = ["item-mode", "onClick"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -30,12 +28,10 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("ul", _hoisted_1, [_withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(["var-pagination__item var-pagination__prev", {
-      'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+  return _openBlock(), _createElementBlock("ul", {
+    class: _normalizeClass(_ctx.n())
+  }, [_withDirectives((_openBlock(), _createElementBlock("li", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
   }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-left"
@@ -45,9 +41,7 @@ export function render(_ctx, _cache) {
     disabled: _ctx.current <= 1 || _ctx.disabled
   }]]), _ctx.simple ? (_openBlock(), _createElementBlock("li", {
     key: 0,
-    class: _normalizeClass(["var-pagination__simple", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('simple'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_input, {
     modelValue: _ctx.simpleValue,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.simpleValue = $event),
@@ -67,28 +61,19 @@ export function render(_ctx, _cache) {
     return _withDirectives((_openBlock(), _createElementBlock("li", {
       key: _ctx.toNumber(item) + index,
       "item-mode": _ctx.getMode(item, index),
-      class: _normalizeClass(["var-pagination__item var-elevation--2", {
-        'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
-        'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
-        'var-pagination__item-disabled': _ctx.disabled,
-        'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
-      }]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('item'), 'var-elevation--2', [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
       onClick: $event => _ctx.clickItem(item, index)
     }, [_createTextVNode(_toDisplayString(item), 1
     /* TEXT */
     )], 10
     /* CLASS, PROPS */
-    , _hoisted_2)), [[_directive_ripple, {
+    , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.disabled
     }]]);
   }), 128
   /* KEYED_FRAGMENT */
   )), _withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(["var-pagination__item var-pagination__next", {
-      'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
-      'var-pagination__item-hover': _ctx.simple,
-      'var-elevation--2': !_ctx.simple
-    }]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--hover'), 'var-elevation--2'])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
   }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-right"
@@ -98,9 +83,7 @@ export function render(_ctx, _cache) {
     disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled
   }]]), _ctx.showSizeChanger ? (_openBlock(), _createElementBlock("li", {
     key: 2,
-    class: _normalizeClass(["var-pagination__size", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('size'), [_ctx.disabled, _ctx.n('item--disabled')]))
   }, [_createVNode(_component_var_menu, {
     show: _ctx.menuVisible,
     "onUpdate:show": _cache[6] || (_cache[6] = $event => _ctx.menuVisible = $event),
@@ -108,9 +91,7 @@ export function render(_ctx, _cache) {
   }, {
     menu: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sizeOption, (option, index) => {
       return _withDirectives((_openBlock(), _createBlock(_component_var_cell, {
-        class: _normalizeClass(["var-pagination__list", {
-          'var-pagination__list-active': _ctx.size === option
-        }]),
+        class: _normalizeClass(_ctx.classes(_ctx.n('list'), [_ctx.size === option, _ctx.n('list--active')])),
         key: index,
         onClick: $event => _ctx.clickSize(option)
       }, {
@@ -127,7 +108,7 @@ export function render(_ctx, _cache) {
     /* KEYED_FRAGMENT */
     ))]),
     default: _withCtx(() => [_createElementVNode("div", {
-      class: "var-pagination__size-open",
+      class: _normalizeClass(_ctx.n('size--open')),
       style: {
         "display": "flex"
       },
@@ -137,10 +118,14 @@ export function render(_ctx, _cache) {
     }, [_createElementVNode("span", null, _toDisplayString(_ctx.size) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage), 1
     /* TEXT */
     ), _createVNode(_component_var_icon, {
-      class: "var-pagination__size-open-icon",
+      class: _normalizeClass(_ctx.n('size--open-icon')),
       "var-pagination-cover": "",
       name: "menu-down"
-    })])]),
+    }, null, 8
+    /* PROPS */
+    , ["class"])], 2
+    /* CLASS */
+    )]),
     _: 1
     /* STABLE */
 
@@ -150,9 +135,7 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock("li", {
     key: 3,
-    class: _normalizeClass(["var-pagination__quickly", {
-      'var-pagination__item-disabled': _ctx.disabled
-    }])
+    class: _normalizeClass(_ctx.classes(_ctx.n('quickly'), [_ctx.disabled, 'item--disabled']))
   }, [_createTextVNode(_toDisplayString(_ctx.pack.paginationJump) + " ", 1
   /* TEXT */
   ), _createVNode(_component_var_input, {
@@ -166,9 +149,14 @@ export function render(_ctx, _cache) {
   /* PROPS */
   , ["modelValue", "disabled"])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", _hoisted_3, _toDisplayString(_ctx.totalText), 1
-  /* TEXT */
-  )) : _createCommentVNode("v-if", true)]);
+  )) : _createCommentVNode("v-if", true), _ctx.totalText ? (_openBlock(), _createElementBlock("li", {
+    key: 4,
+    class: _normalizeClass(_ctx.n('total'))
+  }, _toDisplayString(_ctx.totalText), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -345,6 +333,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack,
       current,
       menuVisible,

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item-active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item-disabled-active { background: var(--pagination-bg-disabled-color);}.var-pagination__item-hide { display: none;}.var-pagination__item-disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item-disabled:hover { background-color: unset;}.var-pagination__item-hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size-open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list-active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size-open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
+:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #edf5ff; --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0;}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--disabled--active { background: var(--pagination-bg-disabled-color);}.var-pagination__item--hide { display: none;}.var-pagination__item--disabled { cursor: default !important; color: var(--pagination-disabled-color);}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--hover:hover { background: inherit;}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-hover-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-input__wrap,.var-pagination__simple [var-pagination-cover] .var-input__wrap { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}

package/es/pagination/pagination.less

@@ -73,20 +73,20 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       color: var(--pagination-active-color);
       background-color: var(--pagination-active-bg-color) !important;
     }
 
-    &-disabled-active {
+    &--disabled--active {
       background: var(--pagination-bg-disabled-color);
     }
 
-    &-hide {
+    &--hide {
       display: none;
     }
 
-    &-disabled {
+    &--disabled {
       cursor: default !important;
       color: var(--pagination-disabled-color);
 
@@ -95,7 +95,7 @@
       }
     }
 
-    &-hover {
+    &--hover {
       &:hover {
         background: inherit;
       }
@@ -119,7 +119,7 @@
     line-height: var(--pagination-size-line-height);
     margin: var(--pagination-item-margin);
 
-    &-open {
+    &--open {
       display: flex;
       align-items: center;
       cursor: pointer;
@@ -136,7 +136,7 @@
       background-color: var(--pagination-hover-bg-color);
     }
 
-    &-active {
+    &--active {
       background-color: var(--pagination-list-active-bg-color) !important;
       color: var(--pagination-list-active-color);
     }
@@ -168,7 +168,7 @@
     }
   }
 
-  &__size-open-icon[var-pagination-cover] {
+  &__size--open-icon[var-pagination-cover] {
     font-size: inherit;
   }