choerodon-ui/pro/lib/secret-field/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../lib/style/themes/default';

@secretField-prefix-cls: ~'@{c7n-pro-prefix}-secret-field';

.@{secretField-prefix-cls} {
  &-modal {
    height: 2.4rem;
    &-form {
      height: 2.4rem;
      > table{
        height: 2.4rem;
        > tbody {
          height: 2.4rem;
        }
      }
    }
    &-validate {
      float: left;
      color: red;
    }
    &-btns {
      margin-top: 0.36rem;
      margin-left: 0.07rem;
      text-align: right;
    }
    &-edit-btns {
      margin-top: 1.42rem;
      margin-left: 0.07rem;
      text-align: right;
    }
    &-raised-btn:hover {
      border-color: @input-border-color;
    }
    &-verify-btn {
      width: 1.1rem;
    }
  }

  // 滑块
  &-verify-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    &-slide {
      display: flex;
      justify-content: center;
      height: calc(100% - 0.42rem);
      margin-top: 0.5rem;
    }
    &-btn {
      display: flex;
      justify-content: flex-end;
    }
  }
  &-simple-verify {
    position: relative;
    box-sizing: border-box;
    width: 3.4rem;
    height: 0.36rem;
    line-height: 1;
    background-color: #f2f3f5;
    border: 1px solid #e4e4e4;
    border-radius: 0.04rem;
    -webkit-user-select: none;

    &-tips {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: #9ca0a7;
      font-size: 0.14rem;
      pointer-events: none;
    }

    &-box {
      position: absolute;
      top: -0.01rem;
      left: -0.01rem;
      width: calc(100% + 0.02rem);
      height: calc(100% + 0.02rem);
      overflow: hidden;
      border-radius: 0.04rem;
    }

    &-slide {
      position: absolute;
      top: 0;
      left: -2.9rem;
      width: 100%;
      height: 100%;
      background-color: @primary-color;
      border-radius: 0.04rem;
      opacity: 0;
      transition: opacity @animation-duration-fast linear, transform @animation-duration-slow ease;
      transition-duration: 0s;
    }

    &-bar {
      position: absolute;
      top: -0.01rem;
      left: -0.01rem;
      z-index: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 0.5rem;
      height: 100%;
      cursor: pointer;
      transition: transform @animation-duration-slow ease;
      touch-action: none;

      &-icon {
        width: 0.44rem;
        height: 0.29rem;
        background-color: #fff;
        border-radius: 0.04rem;
        box-shadow: rgba(#717277, 0.3) 0 0.03rem 0.1rem;
      }
    }

    &-success-tips {
      position: absolute;
      top: -0.01rem;
      left: -0.01rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: calc(100% + 0.02rem);
      height: calc(100% + 0.02rem);
      color: #fff;
      font-weight: bold;
      font-size: 0.14rem;
      opacity: 0;
      transition: opacity @animation-duration-fast linear;
      pointer-events: none;

      span {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.08rem;
      }
    }
  }
}