homepagePHP/www/Public/static/commonStyle/tool.scss

//所有项目的公共样式
@import "vars";

@mixin flex{
  display: flex;
}

@mixin flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-blue{
  color: $blue !important;
}
.text-orange{
  color: $orange !important;
}
.text-red{
  color: $red !important;
}

.text-gray{
  color: $gray !important;
}

.text-light-black{
  color: $light-black !important;
}

.text-black{
  color: $black !important;
}

.text-center{
  text-align: center !important;
}

.text-right{
  text-align: right !important;
}

@mixin over-hidden{
  overflow: hidden !important;
}

.margin-center{
  margin-left: auto;
  margin-right: auto;
}

.text-overflow{
  @include over-hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-limit($lineCount){
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $lineCount;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.text-limit2{
  @include text-limit(2);
}
.text-limit3{
  @include text-limit(3);
}
.text-limit4{
  @include text-limit(4);
}
.text-limit5{
  @include text-limit(5);
}

//图片超出裁剪
@mixin img-wrap($width,$height: auto) {
  width: $width;
  height: $height;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  flex-shrink: 0;
  > img{
    width: 100%;
  }
}

//设置圆形图片
@mixin avatar($size) {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $size;
  height: $size;
  line-height: $size;
  font-size: 0;
  flex-shrink: 0;
  img {
    border-radius: 50%;
  }
}

.hidden{
  display: none !important;
}

.visibility-hidden{
  visibility: hidden !important;
}

.margin-center{
  margin-left: auto;
  margin-right: auto;
}

strong{
  font-weight: bold;
}

em{
  font-style: italic;
}

i,span{
  display: inline-block;
}
.article-content{
  i,span{
    display: inline;
  }
}
@mixin img-zoom($img_class: img){
  overflow: hidden;
  #{$img_class}{
    transition: transform .3s;
  }
  &:hover{
    #{$img_class}{
      transform: scale(1.1);
    }
  }
}

.img-scale{
  @include img-zoom();
}

.area-select{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .addr-select{
    flex-shrink: 0;
    width: 30% !important;
  }
}

.btn-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  &.btn2{
    .btn{
      width: calc(50% - .2rem);
    }
  }
  .btn{
    margin-left: .4rem;
    flex-grow: 1;
    flex-shrink: 0;
    &:first-child{
      margin-left: 0;
    }
  }
}


button[type=submit]{
  &:disabled{
    opacity: .6;
    cursor: default !important;
  }
}
.mb0{
  margin-bottom: 0!important;
}

.pb0{
  padding-bottom: 0!important;
}