weui/src/style/widget/weui-button/weui-btn_bottom-fixed.less

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

/*
* Tencent is pleased to support the open source community by making WeUI available.
* 
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
* 
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
* 
*       http://opensource.org/licenses/MIT
* 
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

@import "../../base/fn";

@weuiBottomFixedOprMaskHeight:80px;

.weui-bottom-fixed-opr-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.weui-bottom-fixed-opr-page__content {
  min-height: 0;
  flex: 1;
  padding-bottom: @weuiBottomFixedOprMaskHeight;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.weui-bottom-fixed-opr-page__tool {
  padding: 16px 32px 24px;
  padding: 16px calc(32px ~"+ constant(safe-area-inset-right)") calc(24px ~"+ constant(safe-area-inset-bottom)") calc(32px ~"+ constant(safe-area-inset-left)");
  padding: 16px calc(32px ~"+ env(safe-area-inset-right)") calc(24px ~"+ env(safe-area-inset-bottom)") calc(32px ~"+ env(safe-area-inset-left)");
  background: rgba(255, 255, 255, 1);
  position: relative;
  z-index: 50;
  &::before {
    content: "";
    height: @weuiBottomFixedOprMaskHeight;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    position: absolute;
    bottom: ~"calc(100% - 1px)";
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
  }
}

.weui-bottom-fixed-opr-page__tool {
  .dark({
    background:rgba(25,25,25,1);
  });
  &::before {
    .dark({
      background: linear-gradient(to top, rgba(25,25,25,1), rgba(25,25,25,0));
    });
  }
}
.weui-bottom-fixed-opr-page__tips {
  margin-bottom: 24px;
  padding: 0 32px;
  text-align: center;
}


// 按钮组水平布局与垂直布局切换
.weui-bottom-fixed-opr-page {
  .weui-bottom-fixed-opr {
    .weuiBtnWrapLayoutDefault();
  }
}
.weui-bottom-fixed-opr-page_btn-wrap {
  .weui-bottom-fixed-opr {
    .weuiBtnWrapLayoutWrap();
  }
}


// 新版底部悬浮，支持表单和半屏
.weui-bottom-fixed-opr-page {
  &.weui-form {
    padding-top: 0;

    .weui-form__bd {
      padding-top: 56px;
      padding-top: calc(56px ~"+ constant(safe-area-inset-top)");
      padding-top: calc(56px ~"+ env(safe-area-inset-top)");
    }
    .weui-form__ft {
      padding-bottom: 0;
    }
    .weui-form__control-area {
      margin-bottom: 0;
    }
  }

  &.weui-half-screen-dialog {
    padding: 0;

    .weui-half-screen-dialog__hd,
    .weui-half-screen-dialog__bd,
    .weui-half-screen-dialog__ft {
      padding-left: 24px;
      padding-left: calc(24px ~"+ constant(safe-area-inset-left)");
      padding-left: calc(24px ~"+ env(safe-area-inset-left)");
      padding-right: 24px;
      padding-right: calc(24px ~"+ constant(safe-area-inset-right)");
      padding-right: calc(24px ~"+ env(safe-area-inset-right)");
    }
    .weui-half-screen-dialog__bd {
      padding-bottom: 80px;
    }
    .weui-half-screen-dialog__ft {
      padding-bottom: 64px;
      padding-bottom: ~"calc(64px + constant(safe-area-inset-bottom))";
      padding-bottom: ~"calc(64px + env(safe-area-inset-bottom))";
    }
  }
}


// 旧版半屏底部悬浮
.weui-half-screen-dialog_bottom-fixed {
  &.weui-half-screen-dialog {
    padding: 0;
    .weui-half-screen-dialog__hd {
      padding: 0 24px;
      padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") 0 calc(24px ~"+ constant(safe-area-inset-left)");
      padding: 0 calc(24px ~"+ env(safe-area-inset-right)") 0 calc(24px ~"+ env(safe-area-inset-left)");
    }
    .weui-half-screen-dialog__bd {
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    .weui-half-screen-dialog__ft {
      padding: 0; // 底部悬浮按钮的半屏不需要ft，但防止开发者封装组件时强制包含ft要把padding设为0
    }
    .weui-bottom-fixed-opr-page {
      flex: 1;
      min-height: 0;
    }
    .weui-bottom-fixed-opr-page__content {
      padding: 0 24px;
      padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") 0 calc(24px ~"+ constant(safe-area-inset-left)");
      padding: 0 calc(24px ~"+ env(safe-area-inset-right)") 0 calc(24px ~"+ env(safe-area-inset-left)");
    }
    .weui-bottom-fixed-opr {
      padding: 16px 0 64px;
      padding: 16px 0 ~"calc(64px + constant(safe-area-inset-bottom))";
      padding: 16px 0 ~"calc(64px + env(safe-area-inset-bottom))";
    }
  }
}