weui/src/style/widget/weui-cell/weui-cells__group.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";

page,
body {
  --weui-cellMarginLR: 16px;
  --weui-cellPaddingLR: 16px;
}

.weui-cells__group {
  border: 0;
  &:first-child { margin-top: 0; }
}


// 普通表单
.weui-cells__group_form {
  margin-top: 24px;

  // 表单组
  .weui-cells {
    margin-left: var(--weui-cellMarginLR);
    margin-right: var(--weui-cellMarginLR);
    &::before,
    &::after {
      left: var(--weui-cellPaddingLR);
      right: var(--weui-cellPaddingLR);
    }
  }
  .weui-cell {
    padding: 16px var(--weui-cellPaddingLR);
    &::before {
      left: var(--weui-cellPaddingLR);
      right: var(--weui-cellPaddingLR);
    }
    .weui-cell__hd {
      padding-right: 16px;
    }
    .weui-cell__ft {
      padding-left: 16px;
    }
  }

  .weui-cell_vertical {
    flex-direction: column;
    align-items: flex-start;

    .weui-cell__hd {
      padding-right: 0;
      margin-bottom: 12px;
    }
    .weui-cell__ft {
      padding-left: 0;
    }
    .weui-cell__hd,
    .weui-cell__bd {
      width: 100%;
    }
  }


  // 表单组标题
  .weui-cells__title {
    margin-top: 24px;
    margin-bottom: 8px;
    padding: 0 32px;
  }
  &:first-child {
    .weui-cells__title {
      margin-top: 0;
    }
  }


  // 表单组提示
  .weui-cells__tips {
    margin-top: 8px;
    padding: 0 ~"calc(var(--weui-cellMarginLR) + var(--weui-cellPaddingLR))";
    color: var(--weui-FG-2);
    a {
      font-weight: 500;
    }
  }
  .weui-cells__tips_warn {
    color: var(--weui-RED);
  }


  // 表单标题
  .weui-label {
    max-width: 5em;
    margin-right: 8px;
  }


  // 点击态
  .weui-cell_access,
  .weui-cell_active {
    &:active {
      &::after {
        border-radius: 8px;
      }
    }
  }


  // 报错
  .weui-cell_warn {
    input {
      color: @weuiColorWarn;
    }
  }
  .weui-icon-warn {
    display: none;
  }


  // 抹去点击态
  .weui-cell_switch,
  .weui-cell_vcode,
  .weui-cell_readonly,
  .weui-cell_disabled {
    &:active {
      &::after {
        display: none;
      }
    }
  }
  input,
  textarea,
  label[for] {
    .setTapColor();
  }


  // 适老化下表单项折行，适用高度不大于默认cell内容高度的元素并排
  // 默认cell内容高度：cell默认高度56px，除去上下padding各16px，默认内容高度为行高1.4（24px）
  .weui-cell_wrap {
    align-items: initial;
    padding-top: 8px;
    padding-bottom: 8px;
    .weui-cell__hd {
      padding-right: 0;
    }
    .weui-label {
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .weui-cell__bd {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  .weui-cell__control {
    margin: 8px 0 8px 16px;
  }
  .weui-cell__control_flex {
    flex: 1;
    min-width: 30vw;
  }


  // 验证码
  .weui-vcode-btn {
    font-size: 16px;
    padding: 0 12px;
    height: auto;
    min-width: 0;
    line-height: 2;
    border-radius: 6px;
    color: @weuiBtnDefaultFontColor;
    background-color: @weuiBtnDefaultBg;
    &::after {
      display: none;
    }
    
    &.weui-btn_disabled,
    &[disabled] {
      color: rgba(0, 0, 0, 0.15);
      color: var(--weui-FG-4);
      background-color: rgba(0, 0, 0, 0.05);
      background-color: var(--weui-FG-5);
    }
  }

  // 验证码cell适老化：由于小按钮高度32px大于默认内容高度，所以需要把cell的padding改小以保持cell默认高度56px的规范
  .weui-cell_vcode {
    &.weui-cell_wrap {
      padding-top: 4px;
      padding-bottom: 4px;
      .weui-label {
        margin-top: 12px;
      }
      .weui-input {
        font-size: 17px;
        min-height: unit((32/17), em);
      }
    }
  }


  // 复选框
  .weui-cells_checkbox {
    .weui-check__label {
      &::before { left: ~"calc(40px + var(--weui-cellPaddingLR))"; }
    }
  }


  // 选择框
  .weui-cell_select {
    padding: 0;
  }
  .weui-cell_select-before {
    .weui-cell__hd {
      padding-right: 0;
    }
  }

  // 开关
  .weui-cell_switch {
    padding: 12px 16px;
  }
}


// 反色表单
.weui-cells__group_form-primary {
  margin-top: 32px;
  .weui-cells {
    background: var(--weui-BG-1);
    border-radius: 8px;
    overflow: hidden;
    &::before,
    &::after {
      display: none;
    }
  }
  .weui-cell_access,
  .weui-cell_active {
    &:active {
      &::after {
        border-radius: 0;
      }
    }
  }
}