@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 3.66 kB
CSS
@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.nut-toast{position:fixed;left:0;top:0;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%;pointer-events:none;z-index:1300}.nut-toast-overlay-default{--nutui-overlay-bg-color: rgba(0, 0, 0, 0)}.nut-toast-overlay-default-taro{background-color:#0000;--nutui-overlay-bg-color: rgba(0, 0, 0, 0)}.nut-toast-inner{position:absolute;top:var(--nutui-toast-inner-top, 50%);transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:96px;max-width:60%;box-sizing:border-box;font-size:var(--nutui-toast-text-font-size, var(--nutui-font-size-3, 17px));text-align:var(--nutui-toast-inner-text-align, center);padding:var(--nutui-toast-inner-padding, 24px);word-break:break-all;background:var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, var(--nutui-radius-3, 16px));color:var(--nutui-toast-font-color, var(--nutui-color-white, #ffffff))}.nut-toast-inner-descrption{max-width:68.2%}.nut-toast-inner-normal{word-break:normal;word-wrap:normal}.nut-toast-inner-break-word{word-break:normal;word-wrap:break-word}.nut-toast-inner-small{font-size:var(--nutui-font-size-1, 13px)}.nut-toast-inner-large{font-size:var(--nutui-font-size-3, 17px)}.nut-toast-center{top:var(--nutui-toast-inner-top, 48%)}.nut-toast-bottom{top:var(--nutui-toast-inner-top, 80%)}.nut-toast-top{top:var(--nutui-toast-inner-top, 20%)}.nut-toast-text{color:#fff;text-align:var(--nutui-toast-inner-text-align, center);line-height:20px}.nut-toast-title{color:#fff;font-size:var(--nutui-toast-title-font-size, var(--nutui-font-size-3, 17px));font-weight:600;text-align:var(--nutui-toast-inner-text-align, center);line-height:22px}.nut-toast .nut-icon{width:24px;height:24px;color:#fff}.nut-toast-icon-wrapper{width:100%;display:flex;align-items:center;justify-content:center;margin:3px 0 5px;color:#fff}.nut-toast-icon-wrapper-icon{width:24px;height:24px}.nut-toast-rtl{left:auto;right:0}.nut-toast-rtl-inner{left:auto;right:50%}[dir=rtl] .nut-toast,.nut-rtl .nut-toast{left:auto;right:0}[dir=rtl] .nut-toast-inner,.nut-rtl .nut-toast-inner{left:auto;right:50%}.toast-fade-enter-active,.toast-fade-leave-active{transition:opacity .3s}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0}.mj-toast .nut-toast-base{display:flex;align-items:center;justify-content:center}.mj-toast .nut-toast-inner{box-sizing:border-box;width:fit-content;min-width:40%;max-width:65%;background-color:var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, var(--nutui-radius-3, 16px));font-size:var(--nutui-toast-text-font-size, var(--nutui-font-size-3, 17px));line-height:1.5;padding:var(--nutui-spacing-3, 16px) var(--nutui-spacing-5, 24px);white-space:pre-wrap;overflow-wrap:break-word;line-break:anywhere;position:unset;transform:unset}.mj-toast .nut-toast-inner .nut-toast-icon-wrapper{height:28px;margin:0}.mj-toast .nut-toast-inner .nut-toast-icon-wrapper .nut-icon{width:28px;height:28px}.mj-toast .nut-toast-inner .nut-toast-icon-wrapper,.mj-toast .nut-toast-inner .nut-toast-title{margin-bottom:var(--nutui-spacing-0, 4px)}.mj-toast .nut-toast-inner .nut-toast-title{font-weight:var(--nutui-font-weight-bold, 700);font-size:var(--nutui-toast-title-font-size, var(--nutui-font-size-3, 17px))}.mj-toast-custom-icon{font-size:28px}.mj-toast-pure-text .nut-toast-inner{padding:var(--nutui-toast-inner-padding, 24px)}.nut-toast-text{line-height:25px}