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

.weui-agree {
  display: inline-flex;
  vertical-align: bottom;
  max-width: 100%;
  text-align: left;
  .hyphens;

  line-height: 1.4;
  font-size: 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  a,
  navigator {
    color: @weuiLinkColorDefault;
  }
  navigator {
    display: inline;
  }

  &.weui-wa-hotarea {
    &::after {
      min-height: 36px;
    }
  }
}
.weui-agree__text {
  color: @weuiTextColorDesc;
  margin-left: 4px;
  min-width: 0;
}
.weui-agree__checkbox {
  appearance: none;
  display: inline-block;
  border: 0;
  outline: 0;
  vertical-align: middle;
  width: 1em;
  height: calc(1em * (14 * 1.4 / 20));
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 0;
  mask: none;
  background: transparent url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='black' stroke-opacity='0.3' style='stroke:black;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
  background-size: 100% 1em;

  .dark({
    background-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='white' stroke-opacity='0.3' style='stroke:white;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A");
  });

  &[disabled] {
    opacity: 0.3;
  }
}

@supports (-webkit-overflow-scrolling:touch) {
  .weui-agree__checkbox {
    margin-top: -0.05em;
  }
}
.weui-agree__checkbox-check { // 兼容小程序
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.weui-agree__checkbox:checked,
.weui-agree__checkbox-check[aria-checked="true"] + .weui-agree__checkbox {
  color: @weuiColorPrimary;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
  .dark({
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
  });
}
.weui-agree_warn {
  .weui-agree__text {
    color: var(--weui-RED);
  }
}
.weui-agree_animate {
  animation: weuiAgree 0.3s 1;
}

@keyframes weuiAgree {
  0% {
    transform: translateX(0);
  }

  16% {
    transform: translateX(-8px);
  }

  28% {
    transform: translateX(-16px);
  }

  44% {
    transform: translateX(0);
  }

  59% {
    transform: translateX(-16px);
  }

  73% {
    transform: translateX(0);
  }

  82% {
    transform: translateX(16px);
  }

  94% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(0);
  }
}