bin-ui/src/styles/common/common.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

// 边距，不带-表示四边距离，带-表示单边距离
// 外边距
.m0 {
  margin: 0;
}
.m5 {
  margin: 5px;
}
.m10 {
  margin: 10px;
}
.m15 {
  margin: 15px;
}
.m20 {
  margin: 20px;
}
// 上边距
.mt-5 {
  margin-top: 5px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 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;
}
// 左边距
.ml-5 {
  margin-left: 5px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-15 {
  margin-left: 15px;
}
.ml-20 {
  margin-left: 20px;
}

// 内边距
.p0 {
  padding: 0;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.p15 {
  padding: 15px;
}

.p20 {
  padding: 20px;
}

// --------------------------
// 上内边距
.pt-5 {
  padding-top: 5px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-15 {
  padding-top: 15px;
}
.pt-20 {
  padding-top: 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;
}
// 左内边距
.pl-5 {
  padding-left: 5px;
}
.pl-10 {
  padding-left: 10px;
}
.pl-15 {
  padding-left: 15px;
}
.pl-20 {
  padding-left: 20px;
}

// 文字居中
.t-center {
  text-align: center;
}
// 文字居中
.t-right {
  text-align: right;
}
.t-ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 文字大小
.f-s-12 {
  font-size: 12px;
}
.f-s-14 {
  font-size: 14px;
}
.f-s-16 {
  font-size: 16px;
}
.f-s-18 {
  font-size: 18px;
}
.f-s-20 {
  font-size: 20px;
}
.f-s-22 {
  font-size: 22px;
}

// 文字颜色
.f-color-blue {
  color: #1089ff;
}
.f-color-red {
  color: #ff4d4f;
}
.f-color-333 {
  color: #333333;
}
.f-color-666 {
  color: #666666;
}
.f-color-999 {
  color: #999999;
}
// 链接
.link {
  cursor: pointer;
  color: #1089ff;
}

.link-red {
  cursor: pointer;
  color: #ff4d4f;
}