nutui-taro-upgrade/dist/packages/signature/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-button{position:relative;display:inline-block;width:auto;flex-shrink:0;height:var(--nut-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nut-button-default-line-height, 36px);font-size:var(--nut-button-default-font-size, var(--nut-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;appearance:none;user-select:none;touch-action:manipulation;vertical-align:bottom;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0)}.nut-button .nut-button__text{margin-left:5px}.nut-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nut-black, #000);border:inherit;border-color:var(--nut-black, #000);border-radius:inherit;transform:translate(-50%, -50%);opacity:0;content:" "}.nut-button::after{border:none}.nut-button:active::before{opacity:.1}.nut-button__wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center}.nut-button--loading::before,.nut-button--disabled::before{display:none}.nut-button--default{color:var(--nut-button-default-color, rgb(102, 102, 102));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, rgb(204, 204, 204))}.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 rgba(0,0,0,0)}.nut-button--info{color:var(--nut-button-info-color, var(--nut-white, #fff));background:var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--success{color:var(--nut-button-success-color, var(--nut-white, #fff));background:var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--danger{color:var(--nut-button-danger-color, var(--nut-white, #fff));background:var(--nut-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--warning{color:var(--nut-button-warning-color, var(--nut-white, #fff));background:var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.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, rgb(73, 106, 242));border-color:var(--nut-button-info-border-color, rgb(73, 106, 242))}.nut-button--plain.nut-button--success{color:var(--nut-button-success-border-color, rgb(38, 191, 38));border-color:var(--nut-button-success-border-color, rgb(38, 191, 38))}.nut-button--plain.nut-button--danger{color:var(--nut-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nut-button-danger-border-color, rgb(250, 44, 25))}.nut-button--plain.nut-button--warning{color:var(--nut-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nut-button-warning-border-color, rgb(255, 158, 13))}.nut-button--large{width:100%;height:var(--nut-button-large-height, 48px);line-height:var(--nut-button-large-line-height, 46px);font-size:var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14px)))}.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);line-height:var(--nut-button-small-line-height, 26px);padding:var(--nut-button-small-padding, 0 12px);font-size:var(--nut-button-small-font-size, var(--nut-font-size-1, 12px))}.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);line-height:var(--nut-button-mini-line-height, 1.2);padding:var(--nut-button-mini-padding, 0 12px);font-size:var(--nut-button-mini-font-size, var(--nut-font-size-1, 12px))}.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:.9}.nut-button--round{border-radius:var(--nut-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-button--default:not([disabled]):active{color:var(--nut-button-default-color, rgb(102, 102, 102));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, rgb(204, 204, 204))}.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 rgba(0,0,0,0)}.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, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.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, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--danger:not([disabled]):active{color:var(--nut-button-danger-color, var(--nut-white, #fff));background:var(--nut-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.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, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%));background-origin:border-box;border:var(--nut-button-border-width, 1px) solid rgba(0,0,0,0)}.nut-button--plain:not([disabled]):active{background:var(--nut-button-plain-background-color, var(--nut-white, #fff));background-origin:border-box}.nut-button--plain.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.nut-button--info:not([disabled]):active{color:var(--nut-button-info-border-color, rgb(73, 106, 242));border-color:var(--nut-button-info-border-color, rgb(73, 106, 242))}.nut-button--plain.nut-button--success:not([disabled]):active{color:var(--nut-button-success-border-color, rgb(38, 191, 38));border-color:var(--nut-button-success-border-color, rgb(38, 191, 38))}.nut-button--plain.nut-button--danger:not([disabled]):active{color:var(--nut-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nut-button-danger-border-color, rgb(250, 44, 25))}.nut-button--plain.nut-button--warning:not([disabled]):active{color:var(--nut-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nut-button-warning-border-color, rgb(255, 158, 13))}.nut-signature .nut-signature-inner{height:8rem;margin-bottom:1rem;border:1px solid #dadada;display:flex;justify-content:center;align-items:center}.nut-signature .spcanvas_WEAPP{width:100%;height:100%}.nut-signature .spcanvas_WEAPP .spcanvas{width:100%}.nut-signature .nut-signature-btn{margin-right:15px}