feat:修改 button 和 word-card 样式
This commit is contained in:
R524809
@@ -1,6 +1,6 @@
|
||||
@button-default-height: 86rpx;
|
||||
@button-border-radius: 18rpx;
|
||||
@button-default-font-size: 32rpx;
|
||||
@button-default-height: 80rpx;
|
||||
@button-border-radius: 16rpx;
|
||||
@button-default-font-size: 30rpx;
|
||||
@button-default-color: #fff;
|
||||
|
||||
wx-button:not([size=mini]) {
|
||||
@@ -18,91 +18,109 @@ wx-button:not([size=mini]) {
|
||||
border-radius: @button-border-radius;
|
||||
font-size: @button-default-font-size;
|
||||
color: @button-default-color;
|
||||
padding: 0 44rpx;
|
||||
font-weight: normal;
|
||||
// width: auto !important;
|
||||
// transition: all 0.04s;
|
||||
padding: 0 48rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
border: none;
|
||||
min-width: 240rpx;
|
||||
|
||||
|
||||
&--primary {
|
||||
background: rgba(255, 215, 25, 1);
|
||||
box-shadow: 0px 10rpx 2rpx #DBB917;
|
||||
background: #FFD719;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 215, 25, 0.3);
|
||||
color: #141414;
|
||||
|
||||
&.disabled {
|
||||
background: rgba(255, 215, 25, 0.5);
|
||||
box-shadow: 0px 10rpx 2rpx rgba(219, 185, 23, 0.5);
|
||||
background: #F5F5F5;
|
||||
color: #CCCCCC;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transform: translateY(10rpx);
|
||||
box-shadow: 0 0 0 rgba(219, 185, 23, 0.5);
|
||||
/* 阴影效果 */
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 2rpx 6rpx rgba(255, 215, 25, 0.2);
|
||||
animation: buttonPress 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: #93d333;
|
||||
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 1);
|
||||
background: #93D333;
|
||||
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
|
||||
color: #FFFFFF;
|
||||
|
||||
&.disabled {
|
||||
background: rgba(147, 211, 51, 0.5);
|
||||
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 0.5);
|
||||
background: #F5F5F5;
|
||||
color: #CCCCCC;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transform: translateY(10rpx);
|
||||
box-shadow: 0 0 0 rgba(121, 185, 21, 0.5);
|
||||
/* 阴影效果 */
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
|
||||
animation: buttonPress 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: #93D333;
|
||||
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
|
||||
color: #FFFFFF;
|
||||
|
||||
&.disabled {
|
||||
background: #F5F5F5;
|
||||
color: #CCCCCC;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
|
||||
animation: buttonPress 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&--white {
|
||||
color: rgba(34, 36, 37, 0.9);
|
||||
background: #fff;
|
||||
box-shadow: 0 8rpx 0rpx rgba(223, 220, 220, 1);
|
||||
border: 2rpx solid rgba(223, 220, 220, 1);
|
||||
background: #FFFFFF;
|
||||
border: 1rpx solid #E8E8E8;
|
||||
color: #141414;
|
||||
|
||||
&.disabled {
|
||||
color: rgba(34, 36, 37, 0.5);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0px 8rpx 0rpx rgba(223, 220, 220, 0.9);
|
||||
background: #F5F5F5;
|
||||
color: #CCCCCC;
|
||||
border-color: #E8E8E8;
|
||||
}
|
||||
|
||||
&.plain {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2rpx solid rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 8rpx 0rpx rgba(255, 255, 255, 0.88);
|
||||
|
||||
// &.disabled {
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
// box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6);
|
||||
// }
|
||||
color: #FFFFFF;
|
||||
background: transparent;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transform: translateY(8rpx);
|
||||
box-shadow: 0 0 0 rgba(223, 220, 220, 1);
|
||||
/* 阴影效果 */
|
||||
transform: scale(0.92);
|
||||
background: #F8F8F8;
|
||||
animation: buttonPress 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&--flat {
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
transition: background 0.1s;
|
||||
border: none !important;
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
// 覆盖所有颜色变体
|
||||
&.toy-button--primary,
|
||||
&.toy-button--green,
|
||||
&.toy-button--secondary,
|
||||
&.toy-button--white {
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
|
||||
&.active {
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
transform: scale(0.92) !important;
|
||||
animation: buttonPress 0.15s ease-in-out !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,29 +131,55 @@ wx-button:not([size=mini]) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// 重置active变换
|
||||
&.active {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
// 彩色按钮active背景变化
|
||||
&.toy-button--primary.active {
|
||||
background: rgba(255, 215, 25, 0.7);
|
||||
background: rgba(255, 215, 25, 0.8);
|
||||
}
|
||||
|
||||
&.toy-button--green.active {
|
||||
background: rgba(147, 211, 51, 0.7);
|
||||
background: rgba(147, 211, 51, 0.8);
|
||||
}
|
||||
|
||||
&.toy-button--secondary.active {
|
||||
background: rgba(147, 211, 51, 0.8);
|
||||
}
|
||||
|
||||
&.toy-button--white.active {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loading-class,
|
||||
&__icon {
|
||||
margin-right: 18rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
// 添加按钮点击动画类
|
||||
&.button-press {
|
||||
animation: buttonPress 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮点击动画
|
||||
@keyframes buttonPress {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user