@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

package/lib/runtime/components/react/pickerOverlay.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-
-type OverlayProps = {
-  itemHeight: number
-  overlayItemStyle?: StyleProp<ViewStyle>
-  overlayContainerStyle?: StyleProp<ViewStyle>
-}
-
-const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }: OverlayProps) => {
-  return (
-    <View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
-      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  overlayContainer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  selection: {
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.05)',
-    alignSelf: 'stretch'
-  }
-})
-
-export default React.memo(Overlay)

package/lib/runtime/components/tenon/getInnerListeners.js

@@ -1,334 +0,0 @@
-import { isEmptyObject } from '../../utils'
-
-const tapEvents = [
-  'onTouchstart',
-  'onTouchmove',
-  'onTouchcancel',
-  'onTouchend',
-  'onLongtap'
-]
-
-function createTouch (context, hasLongTap, __mpxTapInfo) {
-  return ({
-    onTouch (e) {
-      // 用touch模拟longtap
-      switch (e.state) {
-        case 1:
-          context.$emit('touchstart', e)
-          __mpxTapInfo.detail = {
-            x: e.position.x,
-            y: e.position.y
-          }
-          __mpxTapInfo.startTimer = null
-
-          if (hasLongTap) {
-            __mpxTapInfo.startTimer = setTimeout(() => {
-              if (hasLongTap) {
-                const re = inheritEvent(
-                  'longtap',
-                  e,
-                  __mpxTapInfo.detail
-                )
-                context.$emit('longtap', re)
-                __mpxTapInfo.startTimer = null
-              }
-            }, 350)
-          }
-
-          break
-        case 2:
-          context.$emit('touchmove', e)
-          if (
-            Math.abs(e.position.x - __mpxTapInfo.detail.x) > 1 ||
-            Math.abs(e.position.y - __mpxTapInfo.detail.y) > 1
-          ) {
-            __mpxTapInfo.startTimer &&
-              clearTimeout(__mpxTapInfo.startTimer)
-            __mpxTapInfo.startTimer = null
-          }
-          break
-        case 3:
-          context.$emit('touchend', e)
-          __mpxTapInfo.startTimer &&
-            clearTimeout(__mpxTapInfo.startTimer)
-          __mpxTapInfo.startTimer = null
-          break
-        case 4:
-          context.$emit('touchcancel', e)
-          break
-      }
-    }
-  })
-}
-
-function processOriginEvent (listeners, context, _input) {
-  // 给event添加_originEvent属性
-  const ignoreEvents = ['onTap', 'onFocus', 'onChange', 'onBlur', 'onConfirm', 'onInput']
-  Object.keys(listeners).forEach((key) => {
-    if (!ignoreEvents.includes(key)) {
-      const listener = listeners[key]
-      listeners[key] = function (e) {
-        if (e) {
-          e._originEvent = { ...e }
-        }
-        listener.call(this, e)
-      }
-    }
-  })
-
-  // 处理input输入框事件
-  if (listeners.onInput && _input) {
-    delete listeners.onInput
-    listeners.onInput = function (e) {
-      let _type
-      const { state } = e || {}
-      if (state === 1) {
-        _type = 'focus'
-      } else if (state === 2) {
-        _type = 'focus'
-      } else if (state === 3) {
-        _type = 'blur'
-      } else {
-        _type = 'confirm'
-      }
-      context.$emit(_type, { ...e, detail: e })
-    }
-  }
-}
-
-function processModel (listeners, context, _input = false) {
-  // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
-  // 该函数必须在产生merge前执行
-  // todo 此处对于$attrs的访问会导致父组件更新时子组件必然更新，暂时用短路效应避免影响，待优化
-  // todo 访问$listeners也会导致上述现象，但是为了事件代理还必须访问$listeners，待后续思考处理
-  const modelEvent = context.$attrs.mpxModelEvent
-  const modelEventId = context.$attrs.mpxModelEventId
-  if (modelEvent && modelEventId) {
-    // 对于modelEvent，内部获得时间后向外部转发，触发外部listener的同时转发为mpxModel事件
-
-    const listener = listeners.onInput
-
-    listeners.onInput = function (e) {
-      Hummer.notifyCenter.triggerEvent(modelEventId, {
-        detail: e
-      })
-      context.$emit('mpxModel', {
-        detail: e
-      })
-      listener && listener.call(this, e)
-    }
-    // 内部listener不需要mpxModel
-    delete listeners.mpxModel
-  }
-}
-
-function mergeListeners (listeners, otherListeners, options = {}, context, __mpxTapInfo) {
-  if (!otherListeners) {
-    return
-  }
-  // "onTouchstart",
-  // "onTouchmove",
-  // "onTouchcancel",
-  // "onTouchend",
-  // "onLongtap",
-
-  // 都依赖touch事件 如果listener没有touch事件 如果是force需要强行添加一个touch事件 longTap需要根据context
-  // 特殊处理
-  const listenerMap = {}
-  tapEvents.forEach((eventName) => {
-    if (listeners[eventName]) {
-      listenerMap[eventName] = true
-      delete listeners[eventName]
-    }
-  })
-  // const otherListenerKeys = Object.keys(otherListeners)
-  // for (let key of otherListenerKeys) {
-
-  // }
-
-  Object.keys(otherListeners).forEach((key) => {
-    const listener = otherListeners[key]
-    let rawListener
-    if (tapEvents.includes(key)) {
-      // 判断onTouch是否存在 若存在 则直接处理
-      rawListener = listeners.onTouch
-
-      if (!rawListener && !options.force) {
-        return
-      } else if (!rawListener && options.force) {
-        // 创建一个touh事件 并赋值
-        listeners.onTouch = createTouch(context, listenerMap.onLongtap, __mpxTapInfo).onTouch
-        rawListener = listeners.onTouch
-      }
-      // 事件处理 onTouchstart 1 onTouchmove 2 onTouchend 3 onTouchcancel 4
-      listeners.onTouch = function (e) {
-        // const thatKey = key
-        let timer = null
-        if (key === 'onLongtap') {
-          if (e.state === 1) {
-            // start
-            timer = setTimeout(
-              () => {
-                listener.call(this, e)
-              },
-              options.before ? 340 : 360
-            )
-          } else if (e.state === 3) {
-            timer && clearTimeout(timer)
-            timer = null
-          }
-        } else {
-          if (options.before) {
-            if (key === 'onTouchstart' && e.state === 1) {
-              listener.call(this, e)
-            } else if (key === 'onTouchmove' && e.state === 2) {
-              listener.call(this, e)
-            } else if (key === 'onTouchend' && e.state === 3) {
-              listener.call(this, e)
-            } else if (key === 'onTouchcancel' && e.state === 4) {
-              listener.call(this, e)
-            }
-            rawListener.call(this, e)
-          } else {
-            rawListener.call(this, e)
-            if (key === 'onTouchstart' && e.state === 1) {
-              listener.call(this, e)
-            } else if (key === 'onTouchmove' && e.state === 2) {
-              listener.call(this, e)
-            } else if (key === 'onTouchend' && e.state === 3) {
-              listener.call(this, e)
-            } else if (key === 'onTouchcancel' && e.state === 4) {
-              listener.call(this, e)
-            }
-          }
-        }
-      }
-    } else {
-      rawListener = listeners[key]
-      if (!rawListener) {
-        if (options.force) {
-          listeners[key] = listener
-        }
-      } else {
-        listeners[key] = function (e) {
-          if (options.before) {
-            listener.call(this, e)
-            rawListener.call(this, e)
-          } else {
-            rawListener.call(this, e)
-            listener.call(this, e)
-          }
-        }
-      }
-    }
-  })
-}
-// 没有tap 用touch模拟 touchstart touchmove touchcancel touchend tap longpress langtap
-function processTouchAndLtap (listeners, context, __mpxTapInfo) {
-  const listenerMap = {}
-  tapEvents.forEach((eventName) => {
-    if (listeners[eventName]) {
-      listenerMap[eventName] = true
-      delete listeners[eventName]
-    }
-  })
-  if (isEmptyObject(listenerMap)) return
-  const events = createTouch(context, listenerMap.onLongtap, __mpxTapInfo)
-  mergeListeners(
-    listeners,
-    events,
-    {
-      force: true
-    },
-    context,
-    __mpxTapInfo
-  )
-}
-
-export function extendEvent (e, extendObj = {}) {
-  Object.keys(extendObj).forEach((key) => {
-    Object.defineProperty(e, key, {
-      value: extendObj[key],
-      enumerable: true,
-      configurable: true,
-      writable: true
-    })
-  })
-}
-
-export function inheritEvent (type, oe, detail = {}) {
-  detail = Object.assign({}, oe.detail, detail)
-  const ne = getCustomEvent(type, detail)
-  extendEvent(ne, {
-    timeStamp: oe.timeStamp,
-    target: oe.target,
-    currentTarget: oe.currentTarget,
-    stopPropagation: oe.stopPropagation.bind(oe),
-    preventDefault: oe.preventDefault.bind(oe)
-  })
-  return ne
-}
-
-export function getCustomEvent (type, detail = {}, target = null) {
-  return {
-    type,
-    detail,
-    target,
-    timeStamp: new Date().valueOf()
-  }
-}
-
-function noop () {}
-
-function getListeners (context) {
-  const attrs = context.$attrs
-  const listeners = {}
-  Object.keys(attrs).forEach((v) => {
-    if (/^on[A-Z]/.test(v)) {
-      listeners[v] = attrs[v]
-    }
-  })
-  return listeners
-}
-
-export default function getInnerListeners (context, options = {}) {
-  let {
-    mergeBefore = {},
-    mergeAfter = {},
-    defaultListeners = [],
-    ignoredListeners = [],
-    _input = false
-  } = options
-  const __mpxTapInfo = {}
-  // 从attrs里面拿到以on开头的所有绑定的事件
-  const listeners = Object.assign({}, getListeners(context))
-
-  defaultListeners.forEach((key) => {
-    if (!listeners[key]) listeners[key] = noop
-  })
-  const mergeBeforeOptions = {
-    before: true
-  }
-  const mergeAfterOptions = {
-    before: false
-  }
-
-  if (mergeBefore.listeners) {
-    mergeBeforeOptions.force = mergeBefore.force
-    mergeBefore = mergeBefore.listeners
-  }
-
-  if (mergeAfter.listeners) {
-    mergeAfterOptions.force = mergeAfter.force
-    mergeAfter = mergeAfter.listeners
-  }
-  processOriginEvent(listeners, context, _input)
-  processModel(listeners, context, _input)
-  processTouchAndLtap(listeners, context, __mpxTapInfo)
-  mergeListeners(listeners, mergeBefore, mergeBeforeOptions, context, __mpxTapInfo)
-  mergeListeners(listeners, mergeAfter, mergeAfterOptions, context, __mpxTapInfo)
-  ignoredListeners.forEach((key) => {
-    delete listeners[key]
-  })
-  return listeners
-}

package/lib/runtime/components/tenon/tenon-button.vue

@@ -1,309 +0,0 @@
-<script>
-import { h } from "@hummer/tenon-vue";
-import getInnerListeners from "./getInnerListeners";
-
-// 获取当前小程序样式版本配置
-const styleVersion = global.__style || "";
-const sizeClassMap = {
-  default: "",
-  mini: "mpx-button-size-mini",
-};
-const typeClassMap = {
-  primary: "mpx-button-type-primary",
-  warn: "mpx-button-type-warn",
-};
-const plainClassMap = {
-  false: "",
-  true: "mpx-button-plain",
-};
-const disabledClassMap = {
-  false: "",
-  true: "mpx-button-disabled",
-};
-const clickDisabledClassMap = {
-  false: "",
-  true: "mpx-button-click-disabled",
-};
-export default (function(){
-  return {
-    name: "mpx-button",
-    data() {
-      return {
-        hover: false,
-      };
-    },
-    props: {
-      name: String,
-      size: {
-        type: String,
-        default: "default",
-      },
-      type: {
-        type: String,
-        default: "default",
-      },
-      plain: Boolean,
-      disabled: Boolean,
-      loading: Boolean,
-      formType: String,
-      hoverClass: {
-        type: String,
-        default: "button-hover",
-      },
-      hoverStopPropagation: {
-        type: Boolean,
-        default: false,
-      },
-      hoverStartTime: {
-        type: Number,
-        default: 20,
-      },
-      hoverStayTime: {
-        type: Number,
-        default: 70,
-      },
-    },
-    computed: {
-      originRef() {
-        return this.$refs["mpx-button"]
-      },
-      className() {
-        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
-          return this.hoverClass;
-        }
-        return "";
-      },
-      classNameList() {
-        let classArr = [];
-        if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
-          classArr.push(this.hoverClass);
-        }
-        if (styleVersion === "v2") {
-          classArr.push(`${sizeClassMap[this.size]}${styleVersion}`);
-          classArr.push(`${typeClassMap[this.type]}${styleVersion}`);
-          classArr.push(`mpx-button-version${styleVersion}`);
-        } else {
-          classArr.push(sizeClassMap[this.size]);
-          classArr.push(typeClassMap[this.type]);
-          classArr.push(`mpx-button-version`);
-        }
-        classArr.push(plainClassMap[this.plain]);
-        classArr.push(disabledClassMap["" + !!this.disabled]);
-        // 禁用click
-        classArr.push(clickDisabledClassMap["" + !!this.disabled]);
-        return classArr;
-      },
-    },
-    render() {
-      let mergeAfter;
-      if (this.hoverClass && this.hoverClass !== "none") {
-        mergeAfter = {
-          listeners: {
-            onTouchstart: this.handleTouchstart,
-            onTouchend: this.handleTouchend,
-          },
-          force: true,
-        };
-      }
-      const domProps = {
-        disabled: this.disabled,
-        plain: this.plain,
-        type: this.type,
-      };
-      const data = {
-        class: ["mpx-button", ...this.classNameList],
-        ref: "mpx-button",
-        ...domProps,
-        ...getInnerListeners(this, {
-          mergeAfter,
-          // 由于当前机制下tap事件只有存在tap监听才会触发，为了确保该组件能够触发tap，传递一个包含tap的defaultListeners用于模拟存在tap监听
-          defaultListeners: ["onTap"],
-        }),
-      };
-
-      let text = "";
-      const nodes = this.$slots.default();
-      nodes.forEach((item) => {
-        if (item.shapeFlag === 8 && item.children) {
-          text += item.children;
-        }
-      });
-      return h("button", data, text);
-    },
-    methods: {
-      handleTouchstart(e) {
-        if (e.__hoverStopPropagation) {
-          return;
-        }
-        e.__hoverStopPropagation = this.hoverStopPropagation;
-        clearTimeout(this.startTimer);
-        this.startTimer = setTimeout(() => {
-          this.hover = true;
-        }, this.hoverStartTime);
-      },
-      handleTouchend() {
-        clearTimeout(this.endTimer);
-        this.endTimer = setTimeout(() => {
-          this.hover = false;
-        }, this.hoverStayTime);
-      },
-    },
-  }
-})()
-</script>
-
-
-
-<style lang="stylus" scoped>
-.mpx-button-versionv2
-    width: 184px
-    line-height 1.41176471
-    font-weight: 700;
-    padding-top 8px
-    padding-bottom 8px
-  .mpx-button-version
-    width: 100%
-    line-height 2.55555556
-    cursor: pointer
-    &:after
-      border 1px solid rgba(0,0,0,.2)
-
-  .mpx-button
-    padding-left: 14px
-    padding-right: 14px
-    border none
-    outline: none
-    position relative
-    display block
-    margin-left auto
-    margin-right auto
-    margin-bottom 10px
-    box-sizing border-box
-    font-size 18px
-    text-align center
-    text-decoration none
-    border-radius 5px
-    -webkit-tap-highlight-color transparent
-    overflow hidden
-    color #000
-    background-color #f8f8f8
-    &:after
-      content " "
-      width 200%
-      height 200%
-      position absolute
-      top 0
-      left 0
-      -webkit-transform scale(.5)
-      transform scale(.5)
-      -webkit-transform-origin 0 0
-      transform-origin 0 0
-      box-sizing border-box
-      border-radius 10px
-
-    &.button-hover
-      background-color #dedede
-
-    /* 默认版本 size=mini style */
-    &.mpx-button-size-mini
-      display inline-block
-      line-height 2.3
-      font-size 13px
-      padding 0 1.34em
-      width auto
-    /* v2 size=mini style */
-    &.mpx-button-size-miniv2
-      width auto
-      padding 0 0.75em
-      line-height 2
-      font-size 16px
-      display inline-block
-    &.mpx-button-plain
-      color #353535
-      border 1px solid #353535
-      background-color transparent
-      &.mpx-button-plain.button-hover
-        background-color rgba(0, 0, 0, 0)
-        color #828282
-        border 1px solid #828282
-
-    /* 默认版本 type=primary style */
-    &.mpx-button-type-primary
-      background-color #1aad19
-      color #fff
-      &.mpx-button-type-primary.mpx-button-plain
-        color #1aad19
-        border-color #1aad19
-        background-color #fff
-    /* v2 type=primary style */
-    &.mpx-button-type-primaryv2
-      background-color #07c160
-      color #fff
-      &.mpx-button-type-primaryv2.button-hover
-        color #fff
-        background-color #06ad56
-      &.mpx-button-type-primaryv2.mpx-button-plain
-        color #06ae56
-        border-color #179c16
-        background-color #fff
-      &.mpx-button-type-primaryv2.button-hover.mpx-button-plain
-        color #06ae56
-        background-color rgba(0, 0, 0, .1)
-
-    /* 默认版本 type=warn style */
-    &.mpx-button-type-warn
-      color #fff
-      background-color #e64340
-      &.mpx-button-type-warn.mpx-button-plain
-        color #e64340
-        background-color transparent
-        border 1px solid #e64340
-    /* v2 type=warn style */
-    &.mpx-button-type-warnv2
-      color #fa5151
-      background-color #f2f2f2
-      &.mpx-button-type-warnv2.button-hover
-        background-color #d9d9d9
-      &.mpx-button-type-warnv2.mpx-button-plain
-        color #fa5151
-        background-color #fff
-        border 1px solid #e64340
-      &.mpx-button-type-warnv2.button-hover.mpx-button-plain
-        color: #f58c8d
-        border 1px solid #f58a8b
-        background-color #fff
-
-    &.mpx-button-disabled
-      color rgba(0, 0, 0, 0.18) !important
-      background-color #fafafa !important
-      border 1px solid rgba(0, 0, 0, .2) !important
-    &.mpx-button-click-disabled
-      pointer-events none
-    &.mpx-button-loading
-      &.mpx-button-type-warn
-        color rgba(255,255,255,.6)
-        background-color #ce3c39
-      &.mpx-button-type-warnv2
-        background-color #d9d9d9
-        color #fa5151
-      &.mpx-button-type-primary
-        color: rgba(255,255,255,.6);
-        background-color: #179b16;
-      &:before
-        content: " "
-        display: inline-block
-        width: 18px
-        height: 18px
-        vertical-align: middle
-        -webkit-animation: mpxButton 1s steps(12,end) infinite
-        animation: mpxButton 1s steps(12,end) infinite
-        background transparent url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=') no-repeat
-        background-size: 100%
-        margin -0.2em 0.34em 0 0
-
-  @keyframes mpxButton
-    0%
-      transform: rotate3d(0, 0, 1, 0deg)
-    100%
-      transform: rotate3d(0, 0, 1, 360deg)
-</style>