feat: 字母描红页样式开发基本完成
This commit is contained in:
@@ -3,21 +3,30 @@
|
||||
/* ── design tokens(严格对齐 stitch-ui/buttonUi/code.html 色谱) ── */
|
||||
|
||||
/* primary 色系 */
|
||||
@btn-primary-solid: #ffd709; /* primary-container / primary-fixed */
|
||||
@btn-primary-gradient-from: #ffd709; /* primary-fixed */
|
||||
@btn-primary-gradient-to: #efc900; /* primary-fixed-dim */
|
||||
@btn-primary-text: #5b4b00; /* on-primary-container */
|
||||
@btn-primary-pressed-bg: #5e4e00; /* primary-dim */
|
||||
@btn-primary-pressed-text: #fff2cd; /* on-primary */
|
||||
@btn-primary-solid: #ffd709;
|
||||
/* primary-container / primary-fixed */
|
||||
@btn-primary-gradient-from: #ffd709;
|
||||
/* primary-fixed */
|
||||
@btn-primary-gradient-to: #efc900;
|
||||
/* primary-fixed-dim */
|
||||
@btn-primary-text: #5b4b00;
|
||||
/* on-primary-container */
|
||||
@btn-primary-pressed-bg: #5e4e00;
|
||||
/* primary-dim */
|
||||
@btn-primary-pressed-text: #fff2cd;
|
||||
/* on-primary */
|
||||
@btn-primary-ring: rgba(108, 90, 0, 0.10);
|
||||
|
||||
/* secondary 色系 */
|
||||
@btn-secondary-bg: #9cd343; /* tertiary-container / tertiary-fixed */
|
||||
@btn-secondary-bg: #9cd343;
|
||||
/* tertiary-container / tertiary-fixed */
|
||||
@btn-secondary-text-on-tint: #5a8c1a;
|
||||
|
||||
/* error 色系 */
|
||||
@btn-error-bg: #f95630; /* error-container */
|
||||
@btn-error-text: #520c00; /* on-error-container */
|
||||
@btn-error-bg: #f95630;
|
||||
/* error-container */
|
||||
@btn-error-text: #520c00;
|
||||
/* on-error-container */
|
||||
|
||||
/* surface 参考 */
|
||||
@btn-surface-variant: #e5dcc9;
|
||||
@@ -45,8 +54,8 @@
|
||||
@btn-disabled-bg: @bg-gray;
|
||||
@btn-disabled-color: @text-disable;
|
||||
|
||||
/* ── reset native button chrome ── */
|
||||
wx-button:not([size=mini]) {
|
||||
/* ── reset native button chrome(全宽块级按钮由 .toy-btn--block 自行控制宽度) ── */
|
||||
wx-button.toy-btn:not([size=mini]):not(.toy-btn--block) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
@@ -252,17 +261,21 @@ wx-button:not([size=mini]) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════ block ═══════ */
|
||||
/* ═══════ block(铺满父级 flex 槽位,避免被 wx-button 默认 width:auto 限制) ═══════ */
|
||||
&--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ═══════ states ═══════ */
|
||||
|
||||
/* 通用按下态:缩放 0.95 */
|
||||
/* 通用按下态:缩放 0.9 */
|
||||
&--active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.9);
|
||||
box-shadow: @btn-shadow-pressed;
|
||||
}
|
||||
|
||||
@@ -312,6 +325,11 @@ wx-button:not([size=mini]) {
|
||||
}
|
||||
|
||||
@keyframes toy-btn-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -171,6 +171,7 @@ Component({
|
||||
visualType,
|
||||
variant,
|
||||
disabled,
|
||||
pressed,
|
||||
);
|
||||
const resolvedIconSize =
|
||||
this.normalizeUnit(iconSize) ||
|
||||
@@ -214,10 +215,16 @@ Component({
|
||||
type: string,
|
||||
variant: string,
|
||||
disabled: boolean,
|
||||
pressed: boolean,
|
||||
) {
|
||||
if (disabled) return '#b8b2a6';
|
||||
if (iconColor) return iconColor;
|
||||
|
||||
/* 与 .toy-btn--primary.toy-btn--active 的 color(@btn-primary-pressed-text)一致 */
|
||||
if (pressed && variant === 'filled' && type === 'primary') {
|
||||
return '#fff2cd';
|
||||
}
|
||||
|
||||
if (variant === 'outlined' || variant === 'ghost') {
|
||||
const outlinedMap: Record<string, string> = {
|
||||
primary: '#6c5a00',
|
||||
|
||||
Reference in New Issue
Block a user