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

vue and bootstrap

@tooltipBg:lighten(@brand-primary,40);

.lottery-open-list{
  position: relative;
  text-align: center;
  color: #fff;
  border-top:1px dashed fade(#fff,50);
  margin-top: 3px;
  line-height: 25px;
  height: 195px;
  h3{
    margin-top: 0;
    font-size:@font-size-base;
    line-height: 26px;
    border:1px dashed fade(#fff,50);
  }
  .imoon-time{
    font-size: @font-size-large;
    margin-right: 5px;
    .icon-alignment();
  }
  [data-toggle="dropdown"]{
    display: none;

  }
  .title{
    border-bottom:1px dashed fade(#fff,50);
    height: 25px;
  }
  .dropdown-menu{
    background: transparent;
    box-shadow:none;
    display: block;
    padding-top: 0;
    padding-bottom: 0px;
    border:none;
    text-align: center;
    right: 0;
    margin: auto;
    border:dashed fade(#fff,50);
    border-width:0 1px 1px;
    top: 28px;
    > div{
      overflow-y: scroll;
      height: 150px;
      .transition(height .15s);
    }
  }
  &.open{
    [data-toggle="dropdown"]{
      .rotate(180deg);
    }
  }
  .expect{
    float: left;
    width: 50%;
  }
  .code{
    float: left;
    width: 50%;
  }
  .list{
    .expect,.code{
      height: 25px;
      border-bottom:1px dashed fade(#fff,50);
    }
  }
  .num{
    display: inline-block;
    width: 16px;
    background: #fff;
    border-radius: 50%;
    line-height: 16px;
    color: @gray;
    margin-top: 5px;
    margin-left: 3px;
    margin-right: 3px;
  }

  .tooltip{
    margin-left: 5%;
    &.left .tooltip-arrow{
      border-left-color:@tooltipBg;
    }
    &.top .tooltip-arrow{
      border-top-color: @tooltipBg;
    }
    span{
      color: #f00;
    }
  }
  .tooltip-inner{
    background: @tooltipBg;
    color: #000;
  }

  @media (min-width:@screen-sm){
    height: 112px;
    [data-toggle="dropdown"]{
      display: block;
      position: absolute;
      bottom: 0;
      width: 20px;
      margin: auto;
      left: 0;
      right: 0;
      z-index:@zindex-dropdown + 1;
      cursor: pointer;
      .transition(transform .3s);
      .fa{
        font-size:@font-size-base * 2;
      }
    }
    &.open{
      [data-toggle="dropdown"]{
        bottom: -70px;
      }
      .dropdown-menu{
        > div{
          overflow-y: scroll;
          height: 150px;
        }
      }
    }
    .dropdown-menu{
      background:#6bbfc7;
      > div{
        overflow-y: hidden;
        height: 74px;
      }
    }
  }

  @supports (-webkit-appearance:none){
    &.open{
      .dropdown-menu{
        > div{
          margin-right: -6px;
        }
      }
    }
  }

  @media(min-width:@screen-md){
    margin-left: ceil(((@grid-gutter-width - 5)/ -2));
    margin-right: ceil(((@grid-gutter-width - 5)/ -2));
    .dropdown-menu{
      > div{
        //height: 190px;
      }
    }
  }



  ::-webkit-scrollbar {width:5px;height:10px;}
  ::-webkit-scrollbar-button{background-color:rgba(255,255,255,1);width:0px;}
  ::-webkit-scrollbar-track{background:rgba(255,255,255,1);}
  ::-webkit-scrollbar-track-piece {background:rgba(255,255,255,1);}
  ::-webkit-scrollbar-thumb{background:@brand-primary;}
  ::-webkit-scrollbar-corner {background:rgba(255,255,255,1); }
  ::-webkit-scrollbar-resizer  {background:#FF0BEE;}
}