/**
 * 直接使用系列
 */

//文本大小
.f-10 { font-size: 10px; }
.f-12 { font-size: 12px; }
.f-13 { font-size: 13px; }
.f-14 { font-size: 14px; }
.f-15 { font-size: 15px; }
.f-16 { font-size: 16px; }
.f-17 { font-size: 17px; }
.f-18 { font-size: 18px; }
.f-19 { font-size: 19px; }
.f-20 { font-size: 20px; }
.f-24 { font-size: 24px; }
.f-28 { font-size: 28px; }
.f-32 { font-size: 32px; }

//padding系列
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }

//margin系列
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }


//宽度
.w-50 { width: 50px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-150 { width: 150px; }
.w-180 { width: 180px; }
.w-200 { width: 200px; }

//浮动
.f-l { float: left; }
.f-r { float: right; }

//清除浮动
.clearfix {
  &::after {
    clear: both;
  }
}
//省略号text-overflow超出溢出显示省略号
.t-o {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//隐藏
.none { display: none; }

//手标 手势-手
.cursor-d { cursor: default; }
.cursor-t { cursor: text; }
.cursor-h { cursor: hand; }
.cursor-m { cursor: move; }
.cursor-p { cursor: pointer; }

//文本居中
.center { text-align: center; }

//文本缩进
.t-i-1 { text-indent: 1em; }
.t-i-2 { text-indent: 2em; }

//文本文字间间隔
.l-s-5 { letter-spacing: 5px; }
.l-s-10 { letter-spacing: 10px; }

//0边框
.border-0 { border: 0; }
.border-l-0 { border-left: 0; }
.border-r-0 { border-right: 0; }
.border-t-0 { border-top: 0; }
.border-b-0 { border-bottom: 0; }

.border-0-lr {
  border-right: 0;
  border-left: 0;
}

.border-0-tb {
  border-top: 0;
  border-bottom: 0;
}

//flex系列
//水平垂直居中
.flex-vh-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

//水平居中
.flex-v-center {
  display: flex;
  justify-content: center;
}

//垂直居中
.flex-h-center {
  display: flex;
  justify-content: center;
}

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

.img-wh {
  width: 100%;
  height: 100%;
}

.img-circle {
  border-radius: 50%;
}

/* 清除浮动, 也可以用overflow:hidden */

.clear-fix::after {
  display: block;
  height: 0;
  clear: both;
  content: '';
}

/* 兼容 IE */
.clear-fix {
  zoom: 1;
}