index.wxss 4.5 KB

1
  1. .wux-fab-button{position:fixed;z-index:1500}.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:1500;background-color:#33cd5f;color:#fff;overflow:visible;transition-duration:.3s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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;line-height:inherit;text-align:inherit;width:80rpx;height:80rpx;color:#fff;border-radius:50%;position:relative;z-index:1;overflow:visible;background-color:#33cd5f!important;transition-duration:.3s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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%;height:100%}.wux-fab-button__button:after{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:6rpx;color:rgba(255,255,255,.8);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}