nutui-taro-upgrade
Version:
@nutui/nutui-taro 对京东风格组件库的taro4 版本支持
1 lines • 12.5 kB
CSS
.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-swipe{position:relative;display:block;cursor:grab;transition:all .3s cubic-bezier(0.19, 1, 0.22, 1)}.nut-swipe__left,.nut-swipe__right{position:absolute;top:0;height:100%}.nut-swipe__left{left:0;transform:translate3d(-100%, 0, 0)}.nut-swipe__right{right:0;transform:translate3d(100%, 0, 0)}.nut-swipe__content{display:inherit}.nut-theme-dark .nut-address-list-swipe,.nut-theme-dark .nut-address-list-general{background-color:var(--nut-dark-background2, #1b1b1b);border-bottom:1px solid var(--nut-dark-color-gray, var(--nut-text-color, #808080));color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-address-list-swipe__mask,.nut-theme-dark .nut-address-list-general__mask{background-color:var(--nut-dark-color3, rgba(232, 230, 227, 0.8))}.nut-theme-dark .nut-address-list-swipe__mask-copy,.nut-theme-dark .nut-address-list-general__mask-copy{color:var(--nut-dark-color-gray, var(--nut-text-color, #808080));background-color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-address-list-item__addr{color:var(--nut-dark-color-gray, var(--nut-text-color, #808080))}.nut-theme-dark .nut-address-list__bottom{background-color:var(--nut-dark-background2, #1b1b1b)}.nut-address-list{overflow:hidden}.nut-address-list:last-child{padding-bottom:84px}.nut-address-list-swipe,.nut-address-list-general{min-height:76px;padding:5px 10px;background-color:var(--nut-addresslist-bg, #fff);border-bottom:1px solid var(--nut-addresslist-border, #f0f0f0);color:var(--nut-addresslist-font-color, #333333);font-size:var(--nut-addresslist-font-size, 16px);display:flex;align-items:center;position:relative}.nut-address-list-swipe__mask,.nut-address-list-general__mask{position:absolute;top:0;left:0;bottom:0;right:0;background-color:var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4));display:flex;justify-content:space-around;align-items:center;padding:0 40px;z-index:2001}.nut-address-list-swipe__mask-copy,.nut-address-list-swipe__mask-set,.nut-address-list-swipe__mask-del,.nut-address-list-general__mask-copy,.nut-address-list-general__mask-set,.nut-address-list-general__mask-del{height:55px;width:55px;padding:0 10px;border-radius:50%;text-align:center;background-color:var(--nut-white, #fff);font-size:14px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.nut-address-list-swipe__mask-set,.nut-address-list-general__mask-set{color:var(--nut-white, #fff);background-color:var(--nut-addresslist-set-bg, #f5a623)}.nut-address-list-swipe__mask-del,.nut-address-list-general__mask-del{color:var(--nut-white, #fff);background-color:var(--nut-addresslist-del-bg, #e1251b)}.nut-address-list-general:last-child{border-bottom:none}.nut-address-list .nut-swipe:last-of-type .nut-address-list-swipe{border-bottom:none}.nut-address-list-item{width:100%}.nut-address-list-item__info{display:flex;justify-content:space-between}.nut-address-list-item__info-contact{display:flex;justify-content:flex-start;font-weight:bold;align-items:center}.nut-address-list-item__info-contact-name{max-width:145px;word-wrap:break-word}.nut-address-list-item__info-contact-tel{margin-left:8px;max-width:110px;word-wrap:break-word}.nut-address-list-item__info-contact-default{margin-left:5px;padding:0 6px;height:16px;line-height:16px;background:var(--nut-addresslist-contnts-contact-default, var(--nut-primary-color, #fa2c19));border-radius:2px;font-size:12px;color:var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff))}.nut-address-list-item__info-handle-edit{margin-left:15px}.nut-address-list-item__addr{color:var(--nut-addresslist-addr-font-color, #666666);font-size:var(--nut-addresslist-addr-font-size, 12px);margin-top:5px}.nut-address-list__bottom{position:fixed;left:0;right:0;bottom:0;bottom:constant(safe-area-inset-bottom);bottom:env(safe-area-inset-bottom);width:100%;padding:12px 18px 24px;z-index:100000;background-color:var(--nut-addresslist-bg, #fff);box-sizing:border-box}.nut-address-list .nut-address-list__mask-bottom{position:fixed;top:0;bottom:0;left:0;right:0;z-index:2000;background-color:rgba(0,0,0,0)}