@minix-iot/ui
Version:
基于Vue的移动端轻量级UI组件库
5 lines • 12.3 kB
CSS
/*!
* @minix-iot/ui v0.2.4 - button.css, 2709badeb34a699cd765, Wed Nov 24 2021 14:21:12 GMT+0800 (中国标准时间)
* (c) 2017-2020 JDC
* Released under the MIT License.
*/@-webkit-keyframes mx-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mx-fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes mx-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mx-fade-out{0%{opacity:1}to{opacity:0}}.mx-fade-enter-active{-webkit-animation:mx-fade-in .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-fade-in .36s cubic-bezier(.25,.46,.45,.94) both}.mx-fade-leave-active{-webkit-animation:mx-fade-out .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-fade-out .36s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes mx-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes mx-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes mx-slide-up-enter{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes mx-slide-up-enter{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes mx-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes mx-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes mx-slide-down-enter{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes mx-slide-down-enter{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes mx-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes mx-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes mx-slide-left-enter{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes mx-slide-left-enter{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes mx-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes mx-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes mx-slide-right-enter{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes mx-slide-right-enter{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes mx-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes mx-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.mx-slide-up-enter-active{-webkit-animation:mx-slide-up-enter .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-up-enter .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-up-leave-active{-webkit-animation:mx-slide-up-leave .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-up-leave .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-down-enter-active{-webkit-animation:mx-slide-down-enter .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-down-enter .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-down-leave-active{-webkit-animation:mx-slide-down-leave .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-down-leave .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-left-enter-active{-webkit-animation:mx-slide-left-enter .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-left-enter .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-left-leave-active{-webkit-animation:mx-slide-left-leave .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-left-leave .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-right-enter-active{-webkit-animation:mx-slide-right-enter .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-right-enter .36s cubic-bezier(.25,.46,.45,.94) both}.mx-slide-right-leave-active{-webkit-animation:mx-slide-right-leave .36s cubic-bezier(.25,.46,.45,.94) both;animation:mx-slide-right-leave .36s cubic-bezier(.25,.46,.45,.94) both}.mx-button{display:inline-block;border:none;outline:none;text-align:center;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;font-weight:500;-webkit-transition:all .36s cubic-bezier(.25,.46,.45,.94);-o-transition:all .36s cubic-bezier(.25,.46,.45,.94);transition:all .36s cubic-bezier(.25,.46,.45,.94)}.mx-button--disabled,.mx-button[disabled]{opacity:.3;cursor:not-allowed}.mx-button--small{height:30px;line-height:30px;font-size:13px;padding-left:12px;padding-right:12px;width:80px}.mx-button--small.mx-button--plain{line-height:28px}.mx-button--small.mx-button--round{-webkit-border-radius:15px;border-radius:15px}.mx-button--middle{height:36px;line-height:36px;font-size:14px;padding-left:16px;padding-right:16px;width:120px}.mx-button--middle.mx-button--plain{line-height:34px}.mx-button--middle.mx-button--round{-webkit-border-radius:18px;border-radius:18px}.mx-button--large{height:46px;line-height:46px;font-size:16px;display:block;width:-webkit-calc(100% - 100px);width:calc(100% - 100px);margin-left:50px;margin-right:50px;padding-left:24px;padding-right:24px}.mx-button--large.mx-button--plain{line-height:44px}.mx-button--large.mx-button--round{-webkit-border-radius:23px;border-radius:23px}.mx-button--super{height:46px;line-height:46px;font-size:16px;display:block;width:-webkit-calc(100% - 32px);width:calc(100% - 32px);margin-left:16px;margin-right:16px;padding-left:24px;padding-right:24px}.mx-button--super.mx-button--plain{line-height:44px}.mx-button--super.mx-button--round{-webkit-border-radius:23px;border-radius:23px}.mx-button--purple.mx-button--fill{background:#995efc;color:#fff}.mx-button--purple.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#8a55e3}.mx-button--purple.mx-button--weak{background-color:#f0e7ff;color:#995efc}.mx-button--purple.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#d8d0e6}.mx-button--purple.mx-button--plain{border:1px solid #995efc;color:#995efc}.mx-button--purple.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#f0e7ff}.mx-button--purple.mx-button--text{color:#995efc}.mx-button--purple.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#8a55e3}.mx-button--blue-purple.mx-button--fill{background:#6575ff;color:#fff}.mx-button--blue-purple.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#5b69e6}.mx-button--blue-purple.mx-button--weak{background-color:#e8eaff;color:#6575ff}.mx-button--blue-purple.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#d1d3e6}.mx-button--blue-purple.mx-button--plain{border:1px solid #6575ff;color:#6575ff}.mx-button--blue-purple.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#e8eaff}.mx-button--blue-purple.mx-button--text{color:#6575ff}.mx-button--blue-purple.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#5b69e6}.mx-button--blue.mx-button--fill{background:#29c3ff;color:#fff}.mx-button--blue.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#25b0e6}.mx-button--blue.mx-button--weak{background-color:#dff6ff;color:#29c3ff}.mx-button--blue.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#c9dde6}.mx-button--blue.mx-button--plain{border:1px solid #29c3ff;color:#29c3ff}.mx-button--blue.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#dff6ff}.mx-button--blue.mx-button--text{color:#29c3ff}.mx-button--blue.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#25b0e6}.mx-button--cyan.mx-button--fill{background:#00cbb8;color:#fff}.mx-button--cyan.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#00b7a6}.mx-button--cyan.mx-button--weak{background-color:#d9f7f4;color:#00cbb8}.mx-button--cyan.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#c3dedc}.mx-button--cyan.mx-button--plain{border:1px solid #00cbb8;color:#00cbb8}.mx-button--cyan.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#d9f7f4}.mx-button--cyan.mx-button--text{color:#00cbb8}.mx-button--cyan.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#00b7a6}.mx-button--yellow.mx-button--fill{background:#ffaa10;color:#fff}.mx-button--yellow.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#e6990e}.mx-button--yellow.mx-button--weak{background-color:#fff2db;color:#ffaa10}.mx-button--yellow.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#e6dac5}.mx-button--yellow.mx-button--plain{border:1px solid #ffaa10;color:#ffaa10}.mx-button--yellow.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#fff2db}.mx-button--yellow.mx-button--text{color:#ffaa10}.mx-button--yellow.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#e6990e}.mx-button--orange.mx-button--fill{background:#ff8225;color:#fff}.mx-button--orange.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#e67521}.mx-button--orange.mx-button--weak{background-color:#ffecde;color:#ff8225}.mx-button--orange.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#e6d4c8}.mx-button--orange.mx-button--plain{border:1px solid #ff8225;color:#ff8225}.mx-button--orange.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#ffecde}.mx-button--orange.mx-button--text{color:#ff8225}.mx-button--orange.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#e67521}.mx-button--orange-red.mx-button--fill{background:#ff6a4c;color:#fff}.mx-button--orange-red.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#e65f44}.mx-button--orange-red.mx-button--weak{background-color:#ffe9e4;color:#ff6a4c}.mx-button--orange-red.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#e6d2cd}.mx-button--orange-red.mx-button--plain{border:1px solid #ff6a4c;color:#ff6a4c}.mx-button--orange-red.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#ffe9e4}.mx-button--orange-red.mx-button--text{color:#ff6a4c}.mx-button--orange-red.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#e65f44}.mx-button--gray-offline.mx-button--fill{background:#7c879b;color:#fff}.mx-button--gray-offline.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#707a8c}.mx-button--gray-offline.mx-button--weak{background-color:#ebedf0;color:#7c879b}.mx-button--gray-offline.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#d4d5d8}.mx-button--gray-offline.mx-button--plain{border:1px solid #7c879b;color:#7c879b}.mx-button--gray-offline.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#ebedf0}.mx-button--gray-offline.mx-button--text{color:#7c879b}.mx-button--gray-offline.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#707a8c}.mx-button--brand.mx-button--fill{background:#267aff;color:#fff}.mx-button--brand.mx-button--fill.mx-button--active:not(.mx-button--disabled){background:#226ee6}.mx-button--brand.mx-button--weak{background-color:#deebff;color:#267aff}.mx-button--brand.mx-button--weak.mx-button--active:not(.mx-button--disabled){background:#c8d4e6}.mx-button--brand.mx-button--plain{border:1px solid #267aff;color:#267aff}.mx-button--brand.mx-button--plain.mx-button--active:not(.mx-button--disabled){background:#deebff}.mx-button--brand.mx-button--text{color:#267aff}.mx-button--brand.mx-button--text.mx-button--active:not(.mx-button--disabled){color:#226ee6}.mx-button-icon--left{margin-right:8px}.mx-button-icon--right{margin-left:8px}.mx-button-icon--small{font-size:13px}.mx-button-icon--middle{font-size:14px}.mx-button-icon--large,.mx-button-icon--super{font-size:16px}.mx-button-loading{display:inline-block;color:inherit;font-size:inherit;vertical-align:top}.mx-button-loading--left{margin-right:8px}.mx-button-loading--right{margin-left:8px}