lixin-web/webapp/less/lottery/open-code.less

vue and bootstrap

.lottery-open-code{
  .expect{
    margin-left: 25px;
    margin-right: 25px;
  }
  .code{
    > ul{
      margin: 0 auto;
      height: 53px;
      > li{
        margin: 0 6px;
        //background: #fff;
        font-size: 24px;
        //font-weight: bold;
        line-height: 53px;
        position: relative;
        visibility: hidden;
      }

    }

    li{
      float: left;
      border-radius: 50%;
      text-align: center;
      .user-select(none);
    }
    .small{
      position: absolute;
      left: 0;
      right: 0;
      z-index:1;
      pointer-events: none;
      &:before{
        content: none;
      }
      ul{
        float: left;
        margin: 0 -4px;
      }
      li li{
        visibility: visible;
        margin: 2px;
      }
    }
    .lottery-code-3item li{
      display: inline-block;
      float: none;
    }
  }
  .higher{
    .big li{
      visibility: visible;
    }
  }

  .tips{
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    font-size:@font-size-medium;
    color: #fff;
    background: @brand-info;
    line-height: 20px;
    height: 20px;
    width: 150px;
    margin: auto;
    &:empty{
      display: none;
    }
  }
}

[data-lottery="pk10"],[data-lottery="kl8"]
{
  .lottery-open-code .code > ul {
    li {
      margin-left: 5px;
      margin-right: 5px;

    }
  }
}

.pk10-code(@counter) when (@counter > 0) {
  .pk10-code((@counter - 1));    // next iteration
  .r0@{counter},.r@{counter}{
    &:before{
      content: '@{counter}';
    }
  }
}


[data-lottery="pk10"]{
  .lottery-open-code .code > ul{
    max-width:210px;
    margin:auto;
    .pk10-code(9);
    .r10:before{
      content: '10';
    }
    .r0:before{
      content: '0';
    }
    &.lottery-code-3item{
      padding-top: 12px;
    }
  }

}


[data-lottery="kl8"],[data-lottery="pk10"]{
  .lottery-open-code .code > ul li{
    display: inline-block;float:none;
    margin-bottom: 5px;

  }
}

[data-lottery="kl8"]{
  .lottery-open-code .code > ul{
    li{
      margin-top: -10px;
    }
    &.yckl8 li{
      margin-top: 20px;
    }
  }

}

[data-lottery="pk10"] .lottery-open-code .code > ul li,
[data-lottery="kl8"] .lottery-open-code .code > ul li,
.lottery-open-code .code .small li li
{
  width: 26px;
  height: 26px;
  font-size: @font-size-base;
  line-height: 26px;
  font-weight:bold;
}

.lottery-open-code .code .small{
  left: 15px;
}

@media (min-width: @screen-sm){
  .lottery-open-code{
    .code {
      > ul{
        position: relative;
        //margin-left: ceil((@grid-gutter-width / -2));
        //margin-right: ceil((@grid-gutter-width / -2));
        //width: 325px;
        margin-left: -7px;
        margin-right: -7px;
      }
    }
  }
}


@media (max-width: @screen-xs-max){
  .lottery-open-code {
    .code {
      > ul {
        width: 310px;
        > li{
          .scale(.75);
          margin: auto;
        }

      }
      .small{
        left: 15px;
      }
    }
    .bounceIn{
      animation-name: bounceIn-S;
    }
    .tips{
      top: 88px;
      z-index:1;
    }
  }

  [data-lottery="pk10"] .lottery-open-code
  {
    .code {
      margin-top: -40px;
      > ul li{
        .scale(1.4);
        margin: 10px 15px;
      }
    }

  }
  [data-lottery="kl8"] .lottery-open-code{
    .code > ul{
      li{
        margin-bottom: 10px;
      }
      &.yckl8 li{
        .scale(1.5);
        margin: 15px 15px 0;
      }
    }
  }
  @keyframes bounceIn-S {
    from, 20%, 40%, 60%, 80%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }

    20% {
      transform: scale3d(0.9, 0.9, 0.9);
    }

    40% {
      transform: scale3d(.7, .7, .7);
    }

    60% {
      opacity: 1;
      transform: scale3d(0.8, 0.8, 0.8);
    }

    80% {
      transform: scale3d(.72, .72, .72);
    }

    to {
      opacity: 1;
      transform: scale3d(.75, .75, .75);
    }
  }
}
@media (max-width: 359px){
  .lottery-open-code {
    .code{
      > ul{
        margin-left: -10px;
      }
    }
  }
}