jimu-mobile/src/styles/jimu-code.less

积木组件库助力移动端开发

/* information card */
.jimu-code-tip .tip-content{width: 267px;border-radius: @radius-xs;}
.jimu-code {
  padding:20px;line-height: @line-height-paragraph;
  .jimu-code-hd{
    position: relative;
    .code-icon-del{position: absolute;top:0px;right: 0px;font-size: @font-size-caption-sm;color: @color-text-disabled;}
    .hd-title{text-align: center;font-size: @font-size-caption;color: @color-text-base;margin-bottom: 10px;}
    .code-intr{font-size: @font-size-caption-sm;color: @color-text-default;text-align: center;}
  }
  .jimu-code-bd{
    .time-down{
      text-align: center;font-size:@font-size-caption-sm;margin:15px 0 10px 0;color: @color-text-disabled;
      .reset-code{color: @color-icon-base;}
    }
    .jimu-code-inputs{
      position: relative;overflow: hidden;
      .code-values{
        display: -webkit-box;display: -webkit-flex;display: flex;display: -webkit-flex;height: @verification-box-size;overflow: hidden;
        .layout-code{
          -webkit-box-flex:1;-webkit-flex: 1;flex: 1;box-flex:1;flex:1;text-align: center;
          span{width: @verification-box-size;height: @verification-box-size;border: 1px solid @border-color-disable;display: inline-block;border-radius: 0;-webkit-appearance: none;text-align: center;font-size: @verification-input-font-size;line-height: @verification-box-size;}
        }
        .no-focus-line span:after{display: none;}
      }
      .code-input{border:none;width: 1px;height: 1px;overflow: hidden;position: absolute;top:0;left:-999px;color: @fill-base;}
    }
  }
}

.jimu-code-focus{
  .code-focus{
    span:after{content:"";width: 1px;height: 24px;background: @color-icon-base;position: absolute;top:50%;left:50%;margin-top: -12px;-webkit-animation: inputShadow 2s ease infinite;animation: inputShadow 2s ease infinite;}
  }
}
.jimu-code-focus .jimu-code-bd .jimu-code-inputs .code-values .code-focus span{
  border-color:@border-color-active;position: relative;
}

.jimu-code-more .jimu-code-bd .jimu-code-inputs .code-values {
  padding-right: 1px;
  .layout-code {
    margin-right: -1px;
    span{width: 100%;}
  }
}

@-webkit-keyframes inputShadow{
  0%,50%,100%{
    opacity: 0;
  }
  10%,40%,60%,90%{
    opacity: 1;
  }
}