test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 14.4 kB
CSS
.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 44px);box-sizing:border-box;margin:0;padding:0;width:var(--nutui-button-width, auto);line-height:var(--nutui-button-default-line-height, 44px);font-size:var(--nutui-button-default-font-size, var(--nsui-font-size-5, 16px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;color:var(--nutui-button-default-color, var(--nsui-gray-color-9, #262626));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, var(--nsui-gray-color-5, #D9D9D9))}.nut-button .nut-button-text-left{margin-left:var(--nutui-button-text-icon-margin-left, 8px)}.nut-button .nut-button-text-right{margin-right:var(--nutui-button-text-icon-margin-left, 8px)}.nut-button:after{border:none}.nut-button:active{background-color:var(--nutui-button-default-active-bg-color, var(--nsui-gray-color-3, #F0F0F0))}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:active,.nut-button--disabled:active{background-color:initial}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-primary-background-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent}.nut-button.nut-button--outline:active{background-color:var(--nutui-button-outline-active-bg-color, #DFE8FF)}.nut-button.nut-button--none{color:var(--nutui-button-none-color, var(--nsui-gray-color-9, #262626));background:transparent;border-color:transparent;font-size:var(--nutui-button-none-font-size, var(--nsui-font-size-6, 18px));padding:0;height:auto;line-height:unset;border-radius:0}.nut-button.nut-button--none .nut-button-text-left{margin-left:var(--nutui-button-none-text-icon-margin-left, 4px)}.nut-button.nut-button--none .nut-button-text-right{margin-right:var(--nutui-button-none-text-icon-margin-left, 4px)}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-primary-background-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-primary-width, 0px) solid transparent}.nut-button--primary:active{background-color:var(--nutui-button-primary-active-bg-color, #1C4AD4)}.nut-button--primary.nut-button--plain{color:var(--nutui-button-primary-plain-color, var(--nutui-brand-color, #2C68FF));background:var(--nutui-button-primary-plain-background-color, #DFE8FF)}.nut-button--primary.nut-button--plain:active{background-color:var(--nutui-button-plain-active-bg-color, #A3C6FF)}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent;border-color:transparent}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2);background:transparent;border-color:transparent}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-success-background-color, #0ED57D);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success:active{background-color:var(--nutui-button-success-background-color, #0ED57D)}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, #0ED57D);border-color:var(--nutui-button-success-border-color, #0ED57D);background:transparent}.nut-button--success.nut-button--outline:active{background-color:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, #0ED57D);background:transparent;border-color:transparent}.nut-button--success.nut-button--none:active{background-color:transparent}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, #FF2C33);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger:active{background-color:var(--nutui-button-danger-background-color, #FF2C33)}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--outline:active{background-color:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent;border-color:transparent}.nut-button--danger.nut-button--none:active{background-color:transparent}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-warning-background-color, #FFA02C);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning:active{background-color:var(--nutui-button-warning-background-color, #FFA02C)}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, #FFA02C);border-color:var(--nutui-button-warning-border-color, #FFA02C);background:transparent}.nut-button--warning.nut-button--outline:active{background-color:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, #FFA02C);background:transparent;border-color:transparent}.nut-button--warning.nut-button--none:active{background-color:transparent}.nut-button--large{padding:var(--nutui-button-large-padding, 0 24px);height:var(--nutui-button-large-height, 50px);line-height:var(--nutui-button-large-line-height, 50px);font-size:var(--nutui-button-large-font-size, var(--nsui-font-size-6, 18px))}.nut-button--large .nut-button-text-left{margin-left:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large .nut-button-text-right{margin-right:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large.nut-button--icon{padding:var(--nutui-button-large-icon-default-padding, 20px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 24px);font-size:var(--nutui-button-default-font-size, var(--nsui-font-size-5, 16px))}.nut-button--normal.nut-button--icon{padding:var(--nutui-button-icon-default-padding, 20px)}.nut-button--small{height:var(--nutui-button-small-height, 32px);line-height:var(--nutui-button-small-line-height, 32px);padding:var(--nutui-button-small-padding, 0 16px);font-size:var(--nutui-button-small-font-size, var(--nsui-font-size-4, 14px))}.nut-button--small .nut-button-text-left{margin-left:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small .nut-button-text-right{margin-right:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small.nut-button--icon{padding:var(--nutui-button-small-icon-default-padding, 12px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 24px);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nsui-font-size-2, 12px))}.nut-button--mini .nut-button-text-left{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini .nut-button-text-right{margin-right:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini.nut-button--icon{padding:var(--nutui-button-mini-icon-default-padding, 8px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--disabled.nut-button--default{opacity:1;border-color:var(--nutui-button-normal-disabled-border-color, var(--nsui-gray-color-4, #E5E5E5));color:var(--nutui-button-normal-disabled-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-button--disabled.nut-button--default.nut-button--none{border:none}.nut-button--disabled.nut-button--primary{background:var(--nutui-button-primary-disabled-background-color, #A3C6FF);opacity:1}.nut-button--disabled.nut-button--primary.nut-button--none{border:none;background:transparent;color:var(--nutui-button-primary-disabled-outline-color, #A3C6FF)}.nut-button--disabled.nut-button--primary.nut-button--plain{background:var(--nutui-button-primary-plain-background-color, #DFE8FF);color:var(--nutui-button-primary-disabled-plain-color, #A3C6FF)}.nut-button--disabled.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-disabled-outline-color, #A3C6FF);border-color:var(--nutui-button-primary-disabled-outline-border-color, var(--nutui-button-primary-disabled-outline-color, #A3C6FF));background:transparent}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .65)))}.nut-overflow-hidden{overflow:hidden}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #595959))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-dialog{display:flex;flex-direction:column;align-items:center;width:var(--nutui-dialog-width, 315px);min-height:var(--nutui-dialog-min-height, 128px);padding:var(--nutui-dialog-padding, 24px 0 0 0);box-sizing:border-box}.nut-dialog__outer{position:fixed;max-height:var(--nutui-dialog-max-height, 85vh);overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);transition:transform .2s,-webkit-transform .2s;-webkit-overflow-scrolling:touch;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:var(--nutui-dialog-outer-border-radius, 8px);z-index:var(--nutui-dialog-outer-z-index, 1200);animation-duration:.3s}.nut-dialog__header{display:block;box-sizing:border-box;text-align:center;font-size:var(--nsui-font-size-6, 18px);color:var(--nsui-gray-color-9, #262626);margin:var(--nutui-dialog-header-margin, 0 0 12px 0);padding:var(--nutui-dialog-padding, 0 24px 0 24px);font-weight:var(--nutui-dialog-header-font-weight, 500);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-dialog__header-only{margin:var(--nutui-dialog-header-only-margin, 0 0 24px 0)}.nut-dialog__content{width:100%;overflow:auto;box-sizing:border-box;flex:1;margin:var(--nutui-dialog-content-margin, 0 0 24px 0);max-height:var(--nutui-dialog-content-max-height, 268px);line-height:var(--nutui-dialog-content-line-height, 16px);padding:var(--nutui-dialog-padding, 0 24px 0 24px);font-size:var(--nutui-dialog-content-font-size, 14px);color:var(--nutui-dialog-content-color, var(--nsui-gray-color-8, #595959));word-wrap:break-word;word-break:break-all;white-space:pre-wrap;text-align:var(--nutui-dialog-content-text-align, center)}.nut-dialog__footer{display:flex;align-items:center;width:100%;justify-content:space-around;position:relative}.nut-dialog__footer.round{box-sizing:border-box;padding:var(--nutui-dialog-footer-round-padding, 0 24px 24px 24px)}.nut-dialog__footer.round.vertical .nut-button.nut-dialog__footer-cancel{height:22px;line-height:22px;margin-top:12px}.nut-dialog__footer.round .nut-button.nut-dialog__footer-cancel{margin-right:var(--nutui-dialog-footer-cancel-margin-right, 8px)}.nut-dialog__footer.vertical{flex-direction:column-reverse}.nut-dialog__footer.vertical .nut-button{min-width:100%;margin:0;flex:1}.nut-dialog__footer.vertical .nut-button.nut-button--none{box-sizing:border-box;height:var(--nutui-dialog-footer-button-none-height, 52px)}.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-cancel{color:var(--nutui-dialog-footer-cancel-color, var(--nsui-gray-color-7, #8C8C8C));border:0;margin-right:0}.nut-dialog__footer-divider{height:100%;width:0px;position:absolute;transform:scaleX(.5);border-right:var(--nutui-dialog-footer-border-top, 1px solid rgba(0, 0, 0, .06))}.nut-dialog__footer .nut-button{min-width:var(--nutui-dialog-footer-button-min-width, 100px);flex:1}.nut-dialog__footer .nut-button.nut-button--none{padding:var(--nutui-dialog-footer-button-padding, 12px 24px);height:var(--nutui-dialog-footer-button-height, 28px);line-height:var(--nutui-dialog-footer-button-height, 28px);box-sizing:content-box;border-radius:var(--nutui-dialog-footer-button-border-radius, 0);border:none}.nut-dialog__footer .nut-button.nut-button--none:after{border-top:var(--nutui-dialog-footer-border-top, 1px solid rgba(0, 0, 0, .06));border-radius:0;content:"";position:absolute;top:0;width:100%;left:0;transform:scaleY(.5)}.nut-dialog__footer-cancel.nut-dialog__footer-cancel.nut-button--none{color:var(--nutui-dialog-footer-cancel-color, var(--nsui-gray-color-7, #8C8C8C))}.nut-dialog__footer-ok{font-weight:var(--nutui-dialog-footer-button-font-weight, 500)}