@varlet/ui 1.22.0 → 1.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/es/action-sheet/actionSheet.css +1 -1
- package/es/action-sheet/actionSheet.less +1 -1
- package/es/button/button.css +1 -1
- package/es/button/button.less +1 -1
- package/es/checkbox/checkbox.css +1 -1
- package/es/checkbox/checkbox.less +1 -1
- package/es/counter/counter.css +1 -1
- package/es/counter/counter.less +1 -1
- package/es/input/input.css +1 -1
- package/es/input/input.less +1 -1
- package/es/pagination/Pagination.js +5 -2
- package/es/pagination/pagination.css +1 -1
- package/es/pagination/pagination.less +17 -2
- package/es/radio/radio.css +1 -1
- package/es/radio/radio.less +1 -1
- package/es/rate/rate.css +1 -1
- package/es/rate/rate.less +1 -1
- package/es/select/select.css +1 -1
- package/es/select/select.less +1 -1
- package/es/snackbar/style/index.js +1 -1
- package/es/snackbar/style/less.js +1 -1
- package/es/styles/common.css +1 -1
- package/es/styles/common.less +1 -0
- package/es/styles/var.less +1 -0
- package/es/tab/tab.css +1 -1
- package/es/tab/tab.less +1 -1
- package/package.json +3 -3
- package/umd/varlet.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.22.1](https://github.com/haoziqaq/varlet/compare/v1.22.0...v1.22.1) (2021-10-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **pagination:** fix hover style ([1762dd8](https://github.com/haoziqaq/varlet/commit/1762dd8224806975c916485e40f4dc15b0fbb87a))
|
|
12
|
+
* **ui/action-sheet:** fix disabled color ([ec70187](https://github.com/haoziqaq/varlet/commit/ec7018723815ead6f5deae85c79a5b0533a4927d))
|
|
13
|
+
* **ui/styles:** fix disabled color vars ([f529c30](https://github.com/haoziqaq/varlet/commit/f529c309d41f4ca28ff8d3c0d00e48889837222d))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
6
19
|
# [1.22.0](https://github.com/haoziqaq/varlet/compare/v1.21.0...v1.22.0) (2021-10-08)
|
|
7
20
|
|
|
8
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background);}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
|
|
1
|
+
:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background);}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
@action-sheet-action-item-height: 48px;
|
|
6
6
|
@action-sheet-action-item-padding: 0px 18px;
|
|
7
7
|
@action-sheet-action-item-color: #333;
|
|
8
|
-
@action-sheet-action-item-disabled-color: var(--color-disabled);
|
|
8
|
+
@action-sheet-action-item-disabled-color: var(--color-text-disabled);
|
|
9
9
|
@action-sheet-icon-margin: 0 20px 0 0;
|
|
10
10
|
@action-sheet-icon-size: 24px;
|
|
11
11
|
@action-sheet-background: #fff;
|
package/es/button/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color:
|
|
1
|
+
:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
|
package/es/button/button.less
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
@button-warning-color: var(--color-warning);
|
|
6
6
|
@button-info-color: var(--color-info);
|
|
7
7
|
@button-disabled-color: var(--color-disabled);
|
|
8
|
-
@button-disabled-text-color:
|
|
8
|
+
@button-disabled-text-color: var(--color-text-disabled);
|
|
9
9
|
@button-border-radius: 4px;
|
|
10
10
|
@button-mini-padding: 0 9px;
|
|
11
11
|
@button-small-padding: 0 11px;
|
package/es/checkbox/checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color:
|
|
1
|
+
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color);}.var-checkbox--error { color: var(--checkbox-error-color);}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@checkbox-checked-color: var(--color-primary);
|
|
2
2
|
@checkbox-unchecked-color: #555;
|
|
3
|
-
@checkbox-disabled-color:
|
|
3
|
+
@checkbox-disabled-color: var(--color-text-disabled);
|
|
4
4
|
@checkbox-error-color: var(--color-danger);
|
|
5
5
|
@checkbox-action-padding: 6px;
|
|
6
6
|
@checkbox-icon-size: 24px;
|
package/es/counter/counter.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color:
|
|
1
|
+
:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background);}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}
|
package/es/counter/counter.less
CHANGED
package/es/input/input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
|
|
1
|
+
:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
|
package/es/input/input.less
CHANGED
|
@@ -33,6 +33,7 @@ export function render(_ctx, _cache) {
|
|
|
33
33
|
return _openBlock(), _createElementBlock("ul", _hoisted_1, [_withDirectives(_createElementVNode("li", {
|
|
34
34
|
class: _normalizeClass(["var-pagination__item var-pagination__prev", {
|
|
35
35
|
'var-pagination__item-disabled': _ctx.current <= 1 || _ctx.disabled,
|
|
36
|
+
'var-pagination__item-hover': _ctx.simple,
|
|
36
37
|
'var-elevation--2': !_ctx.simple
|
|
37
38
|
}]),
|
|
38
39
|
onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
|
|
@@ -67,9 +68,10 @@ export function render(_ctx, _cache) {
|
|
|
67
68
|
key: item + index,
|
|
68
69
|
"item-mode": _ctx.getMode(item, index),
|
|
69
70
|
class: _normalizeClass(["var-pagination__item var-elevation--2", {
|
|
70
|
-
'var-pagination__item-active': item === _ctx.current,
|
|
71
|
+
'var-pagination__item-active': item === _ctx.current && !_ctx.disabled,
|
|
71
72
|
'var-pagination__item-hide': _ctx.isHideEllipsis(item, index),
|
|
72
|
-
'var-pagination__item-disabled': _ctx.disabled
|
|
73
|
+
'var-pagination__item-disabled': _ctx.disabled,
|
|
74
|
+
'var-pagination__item-disabled-active': item === _ctx.current && _ctx.disabled
|
|
73
75
|
}]),
|
|
74
76
|
onClick: $event => _ctx.clickItem(item, index)
|
|
75
77
|
}, [_createTextVNode(_toDisplayString(item), 1
|
|
@@ -84,6 +86,7 @@ export function render(_ctx, _cache) {
|
|
|
84
86
|
)), _withDirectives(_createElementVNode("li", {
|
|
85
87
|
class: _normalizeClass(["var-pagination__item var-pagination__next", {
|
|
86
88
|
'var-pagination__item-disabled': _ctx.current >= _ctx.pageCount || _ctx.disabled,
|
|
89
|
+
'var-pagination__item-hover': _ctx.simple,
|
|
87
90
|
'var-elevation--2': !_ctx.simple
|
|
88
91
|
}]),
|
|
89
92
|
onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
|
|
@@ -1 +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: #f5f5f5; --pagination-total-margin: 0 12px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #dbe4fd; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-simple-padding: 0 0 2px 0; --pagination-disabled-color: var(--color-disabled);}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; 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.3s; user-select: none;}.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-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__prev { margin-left: 0;}.var-pagination__total { margin: var(--pagination-total-margin); display: flex; white-space: nowrap; align-items: center;}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; margin: var(--pagination-item-margin); cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer;}.var-pagination__list:hover { 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 { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
|
|
1
|
+
:root { --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: #f5f5f5; --pagination-total-margin: 0 12px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-border-radius: 4px; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #dbe4fd; --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-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; 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.3s; user-select: none;}.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 { margin: var(--pagination-total-margin); display: flex; white-space: nowrap; align-items: center;}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; margin: var(--pagination-item-margin);}.var-pagination__size-open { cursor: pointer;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer;}.var-pagination__list:hover { 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 { font-size: inherit;}.var-pagination--simple-padding { padding: var(--pagination-simple-padding);}
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
@pagination-list-active-color: var(--color-primary);
|
|
13
13
|
@pagination-input-width: 32px;
|
|
14
14
|
@pagination-simple-padding: 0 0 2px 0;
|
|
15
|
-
@pagination-disabled-color: var(--color-disabled);
|
|
15
|
+
@pagination-disabled-color: var(--color-text-disabled);
|
|
16
|
+
@pagination-bg-disabled-color: var(--color-disabled);
|
|
16
17
|
|
|
17
18
|
:root {
|
|
18
19
|
--pagination-font-size: @pagination-font-size;
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
--pagination-input-width: @pagination-input-width;
|
|
31
32
|
--pagination-simple-padding: @pagination-simple-padding;
|
|
32
33
|
--pagination-disabled-color: @pagination-disabled-color;
|
|
34
|
+
--pagination-bg-disabled-color: @pagination-bg-disabled-color;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
// Mixins
|
|
@@ -68,6 +70,10 @@
|
|
|
68
70
|
background-color: var(--pagination-active-bg-color) !important;
|
|
69
71
|
}
|
|
70
72
|
|
|
73
|
+
&-disabled-active {
|
|
74
|
+
background: var(--pagination-bg-disabled-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
&-hide {
|
|
72
78
|
display: none;
|
|
73
79
|
}
|
|
@@ -80,6 +86,12 @@
|
|
|
80
86
|
background-color: unset;
|
|
81
87
|
}
|
|
82
88
|
}
|
|
89
|
+
|
|
90
|
+
&-hover {
|
|
91
|
+
&:hover {
|
|
92
|
+
background: inherit;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
83
95
|
}
|
|
84
96
|
|
|
85
97
|
&__prev {
|
|
@@ -95,7 +107,10 @@
|
|
|
95
107
|
.pagination-flex-nowrap();
|
|
96
108
|
|
|
97
109
|
margin: var(--pagination-item-margin);
|
|
98
|
-
|
|
110
|
+
|
|
111
|
+
&-open {
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
}
|
|
99
114
|
}
|
|
100
115
|
|
|
101
116
|
&__list {
|
package/es/radio/radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color:
|
|
1
|
+
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color);}.var-radio--error { color: var(--radio-error-color);}
|
package/es/radio/radio.less
CHANGED
package/es/rate/rate.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --rate-disabled-color:
|
|
1
|
+
:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--disabled { color: var(--rate-disabled-color) !important;}.var-rate--error { color: var(--rate-error-color) !important;}.var-rate--primary { color: var(--rate-primary-color);}
|
package/es/rate/rate.less
CHANGED
package/es/select/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color:
|
|
1
|
+
:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
|
package/es/select/select.less
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '../../styles/common.css'
|
|
2
|
-
import '../SnackbarSfc.css'
|
|
3
2
|
import '../../styles/elevation.css'
|
|
4
3
|
import '../../loading/loading.css'
|
|
5
4
|
import '../../button/button.css'
|
|
6
5
|
import '../../icon/icon.css'
|
|
7
6
|
import '../snackbar.css'
|
|
8
7
|
import '../coreSfc.css'
|
|
8
|
+
import '../SnackbarSfc.css'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '../../styles/common.less'
|
|
2
|
-
import '../SnackbarSfc.less'
|
|
3
2
|
import '../../styles/elevation.less'
|
|
4
3
|
import '../../loading/loading.less'
|
|
5
4
|
import '../../button/button.less'
|
|
6
5
|
import '../../icon/icon.less'
|
|
7
6
|
import '../snackbar.less'
|
|
8
7
|
import '../coreSfc.less'
|
|
8
|
+
import '../SnackbarSfc.less'
|
package/es/styles/common.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--relative { position: relative;}.var--absolute { position: absolute;}.var--hidden { overflow: hidden;}.var--lock { overflow: hidden;}.var--block { display: block;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --color-primary: #3a7afe; --color-info: #00afef; --color-success: #00c48f; --color-warning: #ff9f00; --color-danger: #f44336; --color-disabled: #e0e0e0; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}
|
|
1
|
+
.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--relative { position: relative;}.var--absolute { position: absolute;}.var--hidden { overflow: hidden;}.var--lock { overflow: hidden;}.var--block { display: block;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --color-primary: #3a7afe; --color-info: #00afef; --color-success: #00c48f; --color-warning: #ff9f00; --color-danger: #f44336; --color-disabled: #e0e0e0; --color-text-disabled: #aaa; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}
|
package/es/styles/common.less
CHANGED
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
--color-warning: @color-warning;
|
|
58
58
|
--color-danger: @color-danger;
|
|
59
59
|
--color-disabled: @color-disabled;
|
|
60
|
+
--color-text-disabled: @color-text-disabled;
|
|
60
61
|
--cubic-bezier: @cubic-bezier;
|
|
61
62
|
--shadow-key-umbra-opacity: @shadow-key-umbra-opacity;
|
|
62
63
|
--shadow-key-penumbra-opacity: @shadow-key-penumbra-opacity;
|
package/es/styles/var.less
CHANGED
package/es/tab/tab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --tab-color: #fff; --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-disabled); --tab-font-size: var(--font-size-md);}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); color: var(--tab-color); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-tab--active { color: var(--tab-active-color);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}
|
|
1
|
+
:root { --tab-color: #fff; --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-text-disabled); --tab-font-size: var(--font-size-md);}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); color: var(--tab-color); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-tab--active { color: var(--tab-active-color);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}
|
package/es/tab/tab.less
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varlet/ui",
|
|
3
|
-
"version": "1.22.
|
|
3
|
+
"version": "1.22.1",
|
|
4
4
|
"description": "A material like components library",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"typings": "types/index.d.ts",
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"vue": "^3.2.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "d00f12743ec90eb1f64e063082750873c38bee0d",
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@varlet/cli": "^1.22.
|
|
51
|
+
"@varlet/cli": "^1.22.1"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"dayjs": "^1.10.4",
|