@damocle/fe-base-style

常用样式库

box

.mx-auto {
  margin: 0 auto;
}

.tid-2 {
  text-indent: 2em;
}

// width
.w-100 {
  width: 100%;
}

// min-width:0 解决flex下ellipsis失效
.mw-0 {
  min-width: 0;
}

// height
.h-100 {
  height: 100%;
}
.h-100v {
  height: 100vh;
}

.loop(@counter) when (@counter >= 0) {
  .w-@{counter}em {
    width: (@counter * 1em);
  }

  .col-@{counter} {
    width: (@counter * 5%);
  }

  .pt-@{counter} {
    padding-top: (@counter * 2px);
  }
  .pb-@{counter} {
    padding-bottom: (@counter * 2px);
  }
  .pl-@{counter} {
    padding-left: (@counter * 2px);
  }
  .pr-@{counter} {
    padding-right: (@counter * 2px);
  }

  .px-@{counter} {
    padding-left: (@counter * 2px);
    padding-right: (@counter * 2px);
  }
  .py-@{counter} {
    padding-top: (@counter * 2px);
    padding-bottom: (@counter * 2px);
  }

  .mt-@{counter} {
    margin-top: (@counter * 2px);
  }
  .mb-@{counter} {
    margin-bottom: (@counter * 2px);
  }
  .ml-@{counter} {
    margin-left: (@counter * 2px);
  }
  .mr-@{counter} {
    margin-right: (@counter * 2px);
  }

  .mx-@{counter} {
    margin-left: (@counter * 2px);
    margin-right: (@counter * 2px);
  }
  .my-@{counter} {
    margin-bottom: (@counter * 2px);
    margin-top: (@counter * 2px);
  }

  .lh-@{counter} {
    line-height: (@counter * 0.1);
  }

  .fz-@{counter} {
    font-size: (@counter * 1px);
  }

  .loop((@counter - 1));
}

.loop(40);

// border-radius
@brs: 2, 4, 6, 8, 10, 12, 16, 20;

each(@brs, {
	.brs-@{value} {
		border-radius: (@value * 1px);
		border-radius: (@value * 2rpx);
	}
});
.round {
  border-radius: 50%;
}

.hairline {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid;
  border-color: inherit;
  border-radius: inherit;
  transform: scale(0.5);
  z-index: 9;
}

// 防止1px转换rem
.norem-bt {
  border-top-width: 1px;
}
.norem-br {
  border-right-width: 1px;
}
.norem-bb {
  border-bottom-width: 1px;
}
.norem-bl {
  border-left-width: 1px;
}

.fe-boc {
  &::before {
    border-color: var(--fe-box-border-color);
  }
}

// 0.5像素的边框
.bot {
  &:extend(.por);
  &::before {
    &:extend(.norem-bt);
    &:extend(.hairline);
  }
}
.bor {
  &:extend(.por);
  &::before {
    &:extend(.norem-br);
    &:extend(.hairline);
  }
}
.bob {
  &:extend(.por);
  &::before {
    &:extend(.norem-bb);
    &:extend(.hairline);
  }
}
.bol {
  &:extend(.por);
  &::before {
    &:extend(.norem-bl);
    &:extend(.hairline);
  }
}

// 1像素边框
.bt {
  border-top: 1px solid var(--fe-box-border-color);
}
.bb {
  border-bottom: 1px solid var(--fe-box-border-color);
}
.bl {
  border-left: 1px solid var(--fe-box-border-color);
}
.br {
  border-right: 1px solid var(--fe-box-border-color);
}
.border {
  &:extend(.bt,
  .bb,
  .bl,
  .br);
}

// 兼容安全区域
.safe-area-inset-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

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

.ellipsis-2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ellipsis-3 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.nowrap {
  white-space: nowrap;
}
.prewrap {
  white-space: pre-wrap;
}

.ovh {
  overflow: hidden;
}
.ova {
  overflow: auto;
}

// dispaly
.dib {
  display: inline-block;
}
.db {
  display: block;
}
.hidden {
  display: none;
}

.bs-b {
  box-sizing: border-box;
}

.bs-c {
  box-sizing: content-box;
}

/** z-index **/
.zi-9 {
  z-index: 9;
}

.zi-1000 {
  z-index: 1000;
}

color

.bgc-w {
  background-color: #fff;
}
.bgc-html {
  background-color: var(--fe-html-bg);
}
.bgc-red {
  background-color: var(--fe-red);
}
.bgc-info {
  background-color: var(--fe-info);
}
.bgc-success {
  background-color: var(--fe-success);
}
.bgc-warning {
  background-color: var(--fe-warning-color);
}
.bgc-error {
  background-color: var(--fe-error-color);
}

.bgc-dark {
  background-color: var(--fe-dark-color);
}
.bgc-minor {
  background-color: var(--fe-minor-color);
}

.bgc-disabled {
  background-color: var(--fe-disabled-bg);
}

// 通用颜色

.c-w {
  color: #fff;
}
.c-red {
  color: var(--fe-red);
}
.c-info {
  color: var(--fe-info);
}
.c-success {
  color: var(--fe-success);
}
.c-warning {
  color: var(--fe-warning-color);
}
.c-error {
  color: var(--fe-error-color);
}
.c-dark {
  color: var(--fe-dark-color);
}
.c-content {
  color: var(--fe-content-color);
}
.c-label {
  color: var(--fe-label-color);
}
.c-minor {
  color: var(--fe-minor-color);
}
.c-disabled {
  color: var(--fe-disabled-color);
}

.transparent {
  color: transparent;
}

// border color
.fe-bc {
  border-color: var(--fe-box-border-color);
}

common

.fixed-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  height: var(--fe-global-fixed-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  box-shadow: var(--fe-top-shadow);
}

// 底部固定按钮
.has-fixed-btn {
  padding-bottom: calc(var(--fe-global-fixed-bottom) + env(safe-area-inset-bottom));
}

// 顶部固定tab
.fixed-tab {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #fff;
  height: var(--fe-tabs-height);
  box-shadow: var(--fe-card-shadow);
}

// 悬浮tab页面
.has-fixed-tab {
  padding-top: calc(var(--fe-tabs-height));
}

font

/** font **/
.fz-0 {
	font-size: 0;
}

.fz-48 {
	font-size: 48px;
}

// 字体加粗
.fwb {
	font-weight: bold;
}
.fwbe {
	font-weight: bolder;
}
.fwn {
	font-weight: normal;
}

// 倾斜
.fsi {
	font-style: italic;
}

.fw-2 {
	font-weight: 200;
}

.fw-3 {
	font-weight: 300;
}

.fw-4 {
	font-weight: 400;
}

.fw-5 {
	font-weight: 500;
}

layout

// text align
.tal {
	text-align: left;
}

.tar {
	text-align: right;
}

.tac {
	text-align: center;
}

// position
.por {
	position: relative;
}

.poa {
	position: absolute;
}

.t-0 {
	top: 0;
}

.r-0 {
	right: 0;
}

.l-0 {
	left: 0;
}

.b-0 {
	bottom: 0;
}

// vertical align
.vam {
	vertical-align: middle;
}

.vat {
	vertical-align: top;
}

.vab {
	vertical-align: bottom;
}

/** float **/
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}

// flex
.flex {
	display: flex;
}
.ais {
	align-items: flex-start;
}
.aic {
	align-items: center;
}
.aie {
	align-items: flex-end;
}
.jcs {
	justify-content: flex-start;
}
.jcc {
	justify-content: center;
}
.jce {
	justify-content: flex-end;
}
.jcb {
	justify-content: space-between;
}
.jcr {
	justify-content: space-around;
}
.jcev {
	justify-content: space-evenly;
}
.row {
	flex-direction: row;
}
.column {
	flex-direction: column;
}
.f-wrap {
	flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-4 {
	flex: 4;
}
.ass {
	align-self: flex-start;
}
.ase {
	align-self: flex-end;
}
.asc {
	align-self: center;
}
.asst {
	align-self: stretch;
}

.flex-center {
	&:extend(.flex,
	.aic,
	.jcc);
}

normalize

	margin: 0;
	padding: 0;
}

html,
body,
page {
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fe-content-color);
	box-sizing: border-box;
	background: var(--fe-html-bg);
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

variables

@red: #fc5c5b; // 红色
@info: #5bb0fc; // 信息色
@green: #07c160; // 成功色
@warning-color: #e69d0b; // 警告色
@erro-color: #cc3333; // 错误色

// 黑色
@dark: #000;
@dark-content-color: #1b2622; // 一级字色（标题文字  重要字段文字  内容文字）
@dark-label-color: #454d49; // 标签颜色 二级字色  表单、详情页 左侧标题文字
@dark-minor-color: #6d7370; // 次级内容颜色 三级字色  可点击按钮文字  次级内容
@dark-disabled-color: #a2a6a4; // 禁用颜色  四级字色  输入框提示文字  禁用色字体
@dark-disabled-background-color: #e8edea; // 禁用背景色、分隔线、边框

// 自定义变量
:root,
page {
  --fe-global-fixed-bottom: 64px;
  --fe-tabs-height: 44px;
  --fe-tabbar-height: 50px;
  --fe-android-immerse-height: 23px;
  --fe-android-immerse-nav-height: calc(var(--fe-android-immerse-height) + var(--fe-nav-height));
  --fe-nav-height: calc(44px + env(safe-area-inset-top));

  --fe-html-bg: @html-bg;
  --fe-box-border-color: @dark-disabled-background-color;

  --fe-red: @red;
  --fe-info: @info;
  --fe-success: @green;
  --fe-warning-color: @warning-color;
  --fe-error-color: @erro-color;

  --fe-dark-color: @dark;
  --fe-content-color: @dark-content-color;
  --fe-label-color: @dark-label-color;
  --fe-minor-color: @dark-minor-color;
  --fe-disabled-color: @dark-disabled-color;
  --fe-disabled-bg: @dark-disabled-background-color;

  --fe-overlay-background-color: rgba(0, 0, 0, 0.7); // 遮罩层背景色
}