lixin-web/webapp/less/lottery/play-area.less

vue and bootstrap

.play-area{
  > .row{
    margin-left: 0;
    margin-right: 0;
    &:nth-child(odd){
      background: @module-bg;
    }
    &:last-child{
      border-bottom:none;
    }
    > .label{
      height: 26px;
      line-height: 26px;
      color: @gray;
      text-align:left;
    }
    > .tools{
      background: #fff;
      border:1px solid #e3e3e3;
      border-radius:20px;
      padding: 5px;
      margin-top: 4px;
      display: inline-block;
      margin-left: 5px;
      ul{
        display: inline;
      }
      li{
        margin-left: 5px;
        margin-right: 5px;
      }
      a{
        width: 24px;
        line-height: 22px;
        font-size:@font-size-medium;
        border-color:transparent;
      }
    }
    li{
      float: left;
    }
    a{
      color: @gray;
      display: block;
      cursor: pointer;
      border-radius: 50%;
      -webkit-user-select: none;
      border:1px solid;
      background: #fff;
      text-align: center;
      //.transition(.15s);
      &:hover,&:focus{
        border-color:@brand-primary;
        color: @brand-primary;
      }
      &.selected,&:active{
        background: @brand-primary;
        border-color:@brand-primary;
        color: #fff;
        position: relative;
      }
    }
  }
  .balls{
    li{
      margin: 5px 8px;
    }
    a{
      width: 34px;
      line-height: 32px;
      font-size: 18px;
      border-color: @gray-light;
      -webkit-user-select: none;
      &.rippling{
        position: relative;
        &:before{
          content:'';
          width: 100%;
          height: 100%;
          .ripple;
        }
      }
    }
  }
  .x-large,.medium,.large{
    .balls a{
      width: auto;
      padding-left: @padding-large-horizontal;
      padding-right: @padding-large-horizontal;
      border-radius:@border-radius-medium;
    }
  }
  textarea{
    height: 168px;
    resize: none;
    font-size:@font-size-medium;
    & + .help{
      padding-top: 10px;
    }
  }

  @media (min-width:@screen-sm){
    > .row{
      > .label{
        float: left;
        margin-top: 9px;
        padding-left: 18px;
        min-width: 64px;
      }
      > .tools{
        float: right;
        margin-right: 20px;
        ul{
          float: left;
        }
      }
    }
    textarea{
      margin-left: auto;
      margin-right: auto;
      & + .help{
        padding-left: 18px;
      }
    }
  }
  @media (min-width:@screen-sm) and (max-width:@screen-sm-max){
    > .row{
      > .tools{
        float: left;
        margin-left: 68px;
        margin-top: 3px;
        margin-bottom: 5px;
      }
    }
  }
}