init
This commit is contained in:
243
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.js
vendored
Normal file
243
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.js
vendored
Normal file
@@ -0,0 +1,243 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const buttonProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @description 指定按钮按下去的样式类
|
||||
*/
|
||||
hoverClass: uni_modules_nutuiUni_components__utils_props.makeStringProp("button-hover"),
|
||||
/**
|
||||
* @description 按住后多久出现点击态,单位毫秒
|
||||
*/
|
||||
hoverStartTime: uni_modules_nutuiUni_components__utils_props.makeNumberProp(20),
|
||||
/**
|
||||
* @description 手指松开后点击态保留时间,单位毫秒
|
||||
*/
|
||||
hoverStayTime: uni_modules_nutuiUni_components__utils_props.makeNumberProp(70),
|
||||
/**
|
||||
* @description 按钮颜色,支持传入 `linear-gradient` 渐变色
|
||||
*/
|
||||
customColor: String,
|
||||
/**
|
||||
* @description 形状,可选值为 `square` `round`
|
||||
*/
|
||||
shape: uni_modules_nutuiUni_components__utils_props.makeStringProp("round"),
|
||||
/**
|
||||
* @description 是否为朴素按钮
|
||||
*/
|
||||
plain: Boolean,
|
||||
/**
|
||||
* @description 按钮 `loading` 状态
|
||||
*/
|
||||
loading: Boolean,
|
||||
/**
|
||||
* @description 是否禁用按钮
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description 按钮类型,可选值为 `primary` `info` `warning` `danger` `success` `default`
|
||||
*/
|
||||
type: uni_modules_nutuiUni_components__utils_props.makeStringProp("default"),
|
||||
/**
|
||||
* @description 表单类型,可选值 `button` `submit` `reset`
|
||||
*/
|
||||
formType: uni_modules_nutuiUni_components__utils_props.makeStringProp("button"),
|
||||
/**
|
||||
* @description 尺寸,可选值为 `large` `small` `mini` `normal`
|
||||
*/
|
||||
size: uni_modules_nutuiUni_components__utils_props.makeStringProp("normal"),
|
||||
/**
|
||||
* @description 是否为块级元素
|
||||
*/
|
||||
block: Boolean,
|
||||
/**
|
||||
* @description 小程序开放能力
|
||||
*/
|
||||
openType: String,
|
||||
/**
|
||||
* @description 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文
|
||||
*/
|
||||
lang: uni_modules_nutuiUni_components__utils_props.makeStringProp("en"),
|
||||
/**
|
||||
* @description 会话来源,openType="contact"时有效
|
||||
*/
|
||||
sessionFrom: String,
|
||||
/**
|
||||
* @description 会话内消息卡片标题,openType="contact"时有效
|
||||
*/
|
||||
sendMessageTitle: String,
|
||||
/**
|
||||
* @description 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
|
||||
*/
|
||||
sendMessagePath: String,
|
||||
/**
|
||||
* @description 会话内消息卡片图片,openType="contact"时有效
|
||||
*/
|
||||
sendMessageImg: String,
|
||||
/**
|
||||
* @description 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效
|
||||
*/
|
||||
showMessageCard: Boolean,
|
||||
/**
|
||||
* @description 打开群资料卡时,传递的群号,openType="openGroupProfile"时有效
|
||||
*/
|
||||
groupId: String,
|
||||
/**
|
||||
* @description 打开频道页面时,传递的频道号 openType="openGuildProfile"时有效
|
||||
*/
|
||||
guildId: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
|
||||
/**
|
||||
* @description 打开公众号资料卡时,传递的号码 openType="openPublicProfile"时有效
|
||||
*/
|
||||
publicId: String,
|
||||
/**
|
||||
* @description 客服的抖音号,openType="im"时有效
|
||||
*/
|
||||
dataImId: String,
|
||||
/**
|
||||
* @description IM卡片类型,openType="im"时有效
|
||||
*/
|
||||
dataImType: String,
|
||||
/**
|
||||
* @description 商品的id,仅支持泛知识课程库和生活服务商品库中的商品,openType="im"时有效
|
||||
*/
|
||||
dataGoodsId: String,
|
||||
/**
|
||||
* @description 订单的id,仅支持交易2.0订单, openType="im"时有效
|
||||
*/
|
||||
dataOrderId: String,
|
||||
/**
|
||||
* @description 商品类型,“1”代表生活服务,“2”代表泛知识。openType="im"时有效
|
||||
*/
|
||||
dataBizLine: String
|
||||
};
|
||||
const buttonEmits = {
|
||||
[uni_modules_nutuiUni_components__constants_event.CLICK_EVENT]: (evt) => evt instanceof Object,
|
||||
getphonenumber: (evt) => evt instanceof Object,
|
||||
getuserinfo: (evt) => evt instanceof Object,
|
||||
error: (evt) => evt instanceof Object,
|
||||
opensetting: (evt) => evt instanceof Object,
|
||||
launchapp: (evt) => evt instanceof Object,
|
||||
contact: (evt) => evt instanceof Object,
|
||||
chooseavatar: (evt) => evt instanceof Object,
|
||||
agreeprivacyauthorization: (evt) => evt instanceof Object,
|
||||
addgroupapp: (evt) => evt instanceof Object,
|
||||
chooseaddress: (evt) => evt instanceof Object,
|
||||
chooseinvoicetitle: (evt) => evt instanceof Object,
|
||||
subscribe: (evt) => evt instanceof Object,
|
||||
login: (evt) => evt instanceof Object,
|
||||
im: (evt) => evt instanceof Object
|
||||
};
|
||||
if (!Math) {
|
||||
Icon();
|
||||
}
|
||||
const Icon = () => "../icon/icon.js";
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-button`;
|
||||
const __default__ = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: buttonProps,
|
||||
emits: buttonEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
[`${componentName}--${props.type}`]: !!props.type,
|
||||
[`${componentName}--${props.size}`]: !!props.size,
|
||||
[`${componentName}--${props.shape}`]: !!props.shape,
|
||||
[`${componentName}--plain`]: props.plain,
|
||||
[`${componentName}--block`]: props.block,
|
||||
[`${componentName}--disabled`]: props.disabled,
|
||||
[`${componentName}--loading`]: props.loading,
|
||||
[`${componentName}--hovercls`]: props.hoverClass !== "button-hover"
|
||||
});
|
||||
});
|
||||
const styles = common_vendor.computed(() => {
|
||||
const value = {};
|
||||
if (props.customColor) {
|
||||
if (props.plain) {
|
||||
value.color = props.customColor;
|
||||
value.background = "#fff";
|
||||
if (!props.customColor.includes("gradient"))
|
||||
value.borderColor = props.customColor;
|
||||
} else {
|
||||
value.color = "#fff";
|
||||
value.background = props.customColor;
|
||||
}
|
||||
}
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, value);
|
||||
});
|
||||
function handleClick(event) {
|
||||
if (props.disabled || props.loading)
|
||||
return;
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CLICK_EVENT, event);
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: _ctx.loading
|
||||
}, _ctx.loading ? {
|
||||
b: common_vendor.p({
|
||||
name: "loading"
|
||||
})
|
||||
} : {}, {
|
||||
c: _ctx.$slots.icon && !_ctx.loading
|
||||
}, _ctx.$slots.icon && !_ctx.loading ? {} : {}, {
|
||||
d: _ctx.$slots.default
|
||||
}, _ctx.$slots.default ? {
|
||||
e: _ctx.$slots.icon || _ctx.loading ? 1 : ""
|
||||
} : {}, {
|
||||
f: common_vendor.n(classes.value),
|
||||
g: common_vendor.s(styles.value),
|
||||
h: props.formType === "button" ? void 0 : props.formType,
|
||||
i: props.disabled || props.loading ? void 0 : props.openType,
|
||||
j: props.hoverClass,
|
||||
k: props.hoverStartTime,
|
||||
l: props.hoverStayTime,
|
||||
m: props.lang,
|
||||
n: props.sessionFrom,
|
||||
o: props.sendMessageTitle,
|
||||
p: props.sendMessagePath,
|
||||
q: props.sendMessageImg,
|
||||
r: props.showMessageCard,
|
||||
s: props.groupId,
|
||||
t: props.guildId,
|
||||
v: props.publicId,
|
||||
w: props.dataImId,
|
||||
x: props.dataImType,
|
||||
y: props.dataGoodsId,
|
||||
z: props.dataOrderId,
|
||||
A: props.dataBizLine,
|
||||
B: common_vendor.o(handleClick),
|
||||
C: common_vendor.o(($event) => emit("getphonenumber", $event)),
|
||||
D: common_vendor.o(($event) => emit("getuserinfo", $event)),
|
||||
E: common_vendor.o(($event) => emit("error", $event)),
|
||||
F: common_vendor.o(($event) => emit("opensetting", $event)),
|
||||
G: common_vendor.o(($event) => emit("addgroupapp", $event)),
|
||||
H: common_vendor.o(($event) => emit("chooseaddress", $event)),
|
||||
I: common_vendor.o(($event) => emit("chooseavatar", $event)),
|
||||
J: common_vendor.o(($event) => emit("chooseinvoicetitle", $event)),
|
||||
K: common_vendor.o(($event) => emit("launchapp", $event)),
|
||||
L: common_vendor.o(($event) => emit("login", $event)),
|
||||
M: common_vendor.o(($event) => emit("subscribe", $event)),
|
||||
N: common_vendor.o(($event) => emit("contact", $event)),
|
||||
O: common_vendor.o(($event) => emit("agreeprivacyauthorization", $event)),
|
||||
P: common_vendor.o(($event) => emit("im", $event))
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
wx.createComponent(_sfc_main);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/button/button.js.map
|
||||
6
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.json
vendored
Normal file
6
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.json
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<button class="{{f}}" style="{{g}}" form-type="{{h}}" open-type="{{i}}" hover-class="{{j}}" hover-start-time="{{k}}" hover-stay-time="{{l}}" hover-stop-propagation lang="{{m}}" session-from="{{n}}" send-message-title="{{o}}" send-message-path="{{p}}" send-message-img="{{q}}" show-message-card="{{r}}" group-id="{{s}}" guild-id="{{t}}" public-id="{{v}}" data-im-id="{{w}}" data-im-type="{{x}}" data-goods-id="{{y}}" data-order-id="{{z}}" data-biz-line="{{A}}" bindtap="{{B}}" bindgetphonenumber="{{C}}" bindgetuserinfo="{{D}}" binderror="{{E}}" bindopensetting="{{F}}" bindaddgroupapp="{{G}}" bindchooseaddress="{{H}}" bindchooseavatar="{{I}}" bindchooseinvoicetitle="{{J}}" bindlaunchapp="{{K}}" bindlogin="{{L}}" bindsubscribe="{{M}}" bindcontact="{{N}}" bindagreeprivacyauthorization="{{O}}" bindim="{{P}}"><view class="nut-button__wrap"><icon wx:if="{{a}}" class="nut-icon-loading" u-i="7c77dfda-0" bind:__l="__l" u-p="{{b}}"/><slot wx:if="{{c}}" name="icon"/><view wx:if="{{d}}" class="{{[e && 'nut-button__text']}}"><slot/></view></view></button>
|
||||
285
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.wxss
vendored
Normal file
285
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/button/button.wxss
vendored
Normal file
@@ -0,0 +1,285 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.nut-theme-dark .nut-button--default {
|
||||
color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
border: var(--nut-button-border-width, 1px) solid var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-button--plain {
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-button:not(.nut-button--hovercls) .nut-button--plain:not([disabled]):active {
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-theme-dark .nut-button:not(.nut-button--hovercls) .nut-button--default:not([disabled]):active {
|
||||
color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8));
|
||||
background: var(--nut-dark-background2, #1b1b1b);
|
||||
border: var(--nut-button-border-width, 1px) solid var(--nut-dark-background2, #1b1b1b);
|
||||
}
|
||||
.nut-button {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: var(--nut-button-default-height, 38px);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px));
|
||||
line-height: var(--nut-button-default-line-height, 36px);
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.nut-button .nut-button__text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.nut-button::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: var(--nut-black, #000);
|
||||
border: inherit;
|
||||
border-color: var(--nut-black, #000);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.nut-button::after {
|
||||
display: none;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls):active::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.nut-button__wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.nut-button--loading::before, .nut-button--disabled::before {
|
||||
display: none;
|
||||
}
|
||||
.nut-button--default {
|
||||
color: var(--nut-button-default-color, #666666);
|
||||
background: var(--nut-button-default-bg-color, var(--nut-white, #fff));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, #cccccc);
|
||||
}
|
||||
.nut-button--primary {
|
||||
color: var(--nut-button-primary-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button--info {
|
||||
color: var(--nut-button-info-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-info-background-color, linear-gradient(315deg, #498ff2 0%, #4965f2 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button--success {
|
||||
color: var(--nut-button-success-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-success-background-color, linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button--danger {
|
||||
color: var(--nut-button-danger-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-danger-background-color, #fa2c19);
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button--warning {
|
||||
color: var(--nut-button-warning-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-warning-background-color, linear-gradient(135deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button--plain {
|
||||
background: var(--nut-button-plain-background-color, var(--nut-white, #fff));
|
||||
background-origin: border-box;
|
||||
}
|
||||
.nut-button--plain.nut-button--primary {
|
||||
color: var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));
|
||||
border-color: var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));
|
||||
}
|
||||
.nut-button--plain.nut-button--info {
|
||||
color: var(--nut-button-info-border-color, #496af2);
|
||||
border-color: var(--nut-button-info-border-color, #496af2);
|
||||
}
|
||||
.nut-button--plain.nut-button--success {
|
||||
color: var(--nut-button-success-border-color, #26bf26);
|
||||
border-color: var(--nut-button-success-border-color, #26bf26);
|
||||
}
|
||||
.nut-button--plain.nut-button--danger {
|
||||
color: var(--nut-button-danger-border-color, #fa2c19);
|
||||
border-color: var(--nut-button-danger-border-color, #fa2c19);
|
||||
}
|
||||
.nut-button--plain.nut-button--warning {
|
||||
color: var(--nut-button-warning-border-color, #ff9e0d);
|
||||
border-color: var(--nut-button-warning-border-color, #ff9e0d);
|
||||
}
|
||||
.nut-button--plain:not(.nut-button--hovercls).nut-button--primary:not([disabled]):active {
|
||||
color: var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));
|
||||
border-color: var(--nut-button-primary-border-color, var(--nut-primary-color, #fa2c19));
|
||||
}
|
||||
.nut-button--plain:not(.nut-button--hovercls).nut-button--info:not([disabled]):active {
|
||||
color: var(--nut-button-info-border-color, #496af2);
|
||||
border-color: var(--nut-button-info-border-color, #496af2);
|
||||
}
|
||||
.nut-button--plain:not(.nut-button--hovercls).nut-button--success:not([disabled]):active {
|
||||
color: var(--nut-button-success-border-color, #26bf26);
|
||||
border-color: var(--nut-button-success-border-color, #26bf26);
|
||||
}
|
||||
.nut-button--plain:not(.nut-button--hovercls).nut-button--danger:not([disabled]):active {
|
||||
color: var(--nut-button-danger-border-color, #fa2c19);
|
||||
border-color: var(--nut-button-danger-border-color, #fa2c19);
|
||||
}
|
||||
.nut-button--plain:not(.nut-button--hovercls).nut-button--warning:not([disabled]):active {
|
||||
color: var(--nut-button-warning-border-color, #ff9e0d);
|
||||
border-color: var(--nut-button-warning-border-color, #ff9e0d);
|
||||
}
|
||||
.nut-button--large {
|
||||
width: 100%;
|
||||
height: var(--nut-button-large-height, 48px);
|
||||
font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)));
|
||||
line-height: var(--nut-button-large-line-height, 46px);
|
||||
}
|
||||
.nut-button--normal {
|
||||
padding: var(--nut-button-default-padding, 0 18px);
|
||||
font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px));
|
||||
}
|
||||
.nut-button--small {
|
||||
height: var(--nut-button-small-height, 28px);
|
||||
padding: var(--nut-button-small-padding, 0 12px);
|
||||
font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12px));
|
||||
line-height: var(--nut-button-small-line-height, 26px);
|
||||
}
|
||||
.nut-button--small.nut-button--round {
|
||||
border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25px));
|
||||
}
|
||||
.nut-button--mini {
|
||||
height: var(--nut-button-mini-height, 24px);
|
||||
padding: var(--nut-button-mini-padding, 0 12px);
|
||||
font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px));
|
||||
line-height: var(--nut-button-mini-line-height, 1.2);
|
||||
}
|
||||
.nut-button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.nut-button--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: var(--nut-button-disabled-opacity, 0.68);
|
||||
}
|
||||
.nut-button--loading {
|
||||
cursor: default;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.nut-button--round {
|
||||
border-radius: var(--nut-button-border-radius, 25px);
|
||||
}
|
||||
.nut-button--square {
|
||||
border-radius: 0;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--default:not([disabled]):active {
|
||||
color: var(--nut-button-default-color, #666666);
|
||||
background: var(--nut-button-default-bg-color, var(--nut-white, #fff));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid var(--nut-button-default-border-color, #cccccc);
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--primary:not([disabled]):active {
|
||||
color: var(--nut-button-primary-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-primary-background-color, linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--info:not([disabled]):active {
|
||||
color: var(--nut-button-info-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-info-background-color, linear-gradient(315deg, #498ff2 0%, #4965f2 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--success:not([disabled]):active {
|
||||
color: var(--nut-button-success-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-success-background-color, linear-gradient(135deg, #26bf26 0%, #27c530 45%, #28cf3f 83%, #29d446 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--danger:not([disabled]):active {
|
||||
color: var(--nut-button-danger-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-danger-background-color, #fa2c19);
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--warning:not([disabled]):active {
|
||||
color: var(--nut-button-warning-color, var(--nut-white, #fff));
|
||||
background: var(--nut-button-warning-background-color, linear-gradient(135deg, #ff9e0d 0%, #ffa70d 45%, #ffb60d 83%, #ffbe0d 100%));
|
||||
background-origin: border-box;
|
||||
border: var(--nut-button-border-width, 1px) solid transparent;
|
||||
}
|
||||
.nut-button:not(.nut-button--hovercls) .nut-button--plain:not([disabled]):active {
|
||||
background: var(--nut-button-plain-background-color, var(--nut-white, #fff));
|
||||
background-origin: border-box;
|
||||
}
|
||||
Reference in New Issue
Block a user