.wux-fab-button { position: fixed; z-index: 1020 } .wux-fab-button--center { left: 50%; top: 50%; transform: translate3d(-50%,-50%,0) } .wux-fab-button--topLeft { left: 30rpx; top: 30rpx } .wux-fab-button--topRight { right: 30rpx; top: 30rpx } .wux-fab-button--bottomLeft { left: 30rpx; bottom: 30rpx } .wux-fab-button--bottomRight { right: 30rpx; bottom: 30rpx } .wux-fab-button--vertical.wux-fab-button--bottomLeft .wux-fab-button__label, .wux-fab-button--vertical.wux-fab-button--topLeft .wux-fab-button__label { left: 120rpx } .wux-fab-button--vertical.wux-fab-button--bottomRight .wux-fab-button__label, .wux-fab-button--vertical.wux-fab-button--center .wux-fab-button__label, .wux-fab-button--vertical.wux-fab-button--topRight .wux-fab-button__label { right: 120rpx } .wux-fab-button__action { width: 100rpx; height: 100rpx; border-radius: 50%; z-index: 1020; background-color: #33cd5f; color: #fff; overflow: visible; transition-duration: .3s; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8rpx rgba(0,0,0,.14),0 8rpx 16rpx rgba(0,0,0,.28); right: 0; bottom: 0; position: relative } .wux-fab-button__action--hover { transition-duration: 0s; opacity: .8!important } .wux-fab-button__action--hide-shadow { box-shadow: none!important } .wux-fab-button__icon { display: inline-block; width: 40rpx; height: 40rpx; font-size: 40rpx; line-height: 1 } .wux-fab-button__text { display: inline-block; width: 40rpx; height: 40rpx; font-size: 40rpx; line-height: 1; transition: transform 150ms cubic-bezier(.4,0,1,1) } .wux-fab-button__text--rotate { transform: scale(1) rotate(135deg) } .wux-fab-button__button { padding: 0; margin: 0; border-radius: 0; color: inherit!important; background: 0 0!important; font-size: inherit; font-weight: 400; line-height: inherit; text-align: inherit; text-decoration: none; min-height: 0!important; width: auto!important; box-sizing: border-box; -webkit-tap-highlight-color: transparent; color: #fff!important; border-radius: 50%; overflow: visible; background-color: #33cd5f!important; transition-duration: .3s; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8rpx rgba(0,0,0,.14),0 8rpx 16rpx rgba(0,0,0,.28); position: absolute; top: 0; left: 0; opacity: 0; z-index: 2; width: 100%!important; height: 100% } .wux-fab-button__button::after { display: block; position: static; top: auto; left: auto; width: auto; height: auto; border: none; border-radius: 0; transform: none; transform-origin: 0 0 } .wux-fab-button__button--hover { transition-duration: 0s; opacity: .8!important } .wux-fab-button__button--disabled { opacity: .3!important } .wux-fab-button__button--hide-shadow { box-shadow: none!important } .wux-fab-button__label { position: absolute; top: 50%; padding: 8rpx 20rpx; font-size: 24rpx; background: rgba(0,0,0,.4); border-radius: 8rpx; color: rgba(255,255,255,.85); pointer-events: none; white-space: nowrap; opacity: 0; box-sizing: border-box; transform: translate3d(0,-50%,0); transition: all .3s } .wux-fab-button--vertical.wux-fab-button--opened .wux-fab-button__label { opacity: 1 } .wux-fab-button__backdrop { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: 0 0 } .wux-fab-button--light .wux-fab-button__action, .wux-fab-button--light .wux-fab-button__button, .wux-fab-button--light .wux-fab-button__button--disabled { background-color: #ddd!important } .wux-fab-button--stable .wux-fab-button__action, .wux-fab-button--stable .wux-fab-button__button, .wux-fab-button--stable .wux-fab-button__button--disabled { background-color: #b2b2b2!important } .wux-fab-button--positive .wux-fab-button__action, .wux-fab-button--positive .wux-fab-button__button, .wux-fab-button--positive .wux-fab-button__button--disabled { background-color: #387ef5!important } .wux-fab-button--calm .wux-fab-button__action, .wux-fab-button--calm .wux-fab-button__button, .wux-fab-button--calm .wux-fab-button__button--disabled { background-color: #11c1f3!important } .wux-fab-button--assertive .wux-fab-button__action, .wux-fab-button--assertive .wux-fab-button__button, .wux-fab-button--assertive .wux-fab-button__button--disabled { background-color: #ef473a!important } .wux-fab-button--balanced .wux-fab-button__action, .wux-fab-button--balanced .wux-fab-button__button, .wux-fab-button--balanced .wux-fab-button__button--disabled { background-color: #33cd5f!important } .wux-fab-button--energized .wux-fab-button__action, .wux-fab-button--energized .wux-fab-button__button, .wux-fab-button--energized .wux-fab-button__button--disabled { background-color: #ffc900!important } .wux-fab-button--royal .wux-fab-button__action, .wux-fab-button--royal .wux-fab-button__button, .wux-fab-button--royal .wux-fab-button__button--disabled { background-color: #886aea!important } .wux-fab-button--dark .wux-fab-button__action, .wux-fab-button--dark .wux-fab-button__button, .wux-fab-button--dark .wux-fab-button__button--disabled { background-color: #444!important }