❤
npm
Sign UpSign In

@damocle/fe-less

1.0.17 • Public • Published

集成 css 采用预编译语言为 less，设置了使用频率较高的一些 css 样式。

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;
}

.shadow-box {
	box-shadow: var(--fe-card-shadow);
}

.shadow-card {
	&:extend(.shadow-box,
	.ovh,
	.brs-8,
	.bgc-w,
	.px-5,
	.py-5);
}

color 颜色相关样式

/** background -color **/
.bgc-w {
	background-color: var(--fe-white);
}
.bgc-red {
	background-color: var(--fe-red);
}
.bgc-info {
	background-color: var(--fe-info);
}
.bgc-html {
	background-color: var(--fe-html-bg);
}
.bgc-dark {
	background-color: var(--fe-dark-color);
}
.bgc-minor {
	background-color: var(--fe-minor-color);
}
.bgc-theme {
	background: var(--fe-theme-color);
}
.bgc-theme-minor {
	background: var(--fe-minor-button-bg);
}
.bgc-error {
	background-color: var(--fe-error-color);
}
.bgc-warning {
	background-color: var(--fe-warning-color);
}
.bgc-tag-theme {
	background: var(--fe-tag-bg);
}
.bgc-tag-error {
	background-color: var(--fe-error-tag-bg);
}
.bgc-tag-warning {
	background-color: var(--fe-warning-tag-bg);
}
.bgc-logo {
	background-color: var(--fe-logo-color);
}
.bgc-disabled {
	background-color: var(--fe-disabled-bg);
}

// 通用颜色
.c-theme {
	color: var(--fe-theme-color);
}
.c-theme-button {
	color: var(--fe-theme-button-color);
}
.c-w {
	color: var(--fe-white);
}
.c-red {
	color: var(--fe-red);
}
.c-info {
	color: var(--fe-info);
}
.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);
}
.c-logo {
	color: var(--fe-logo-color);
}
.transparent {
	color: transparent;
}

// border color
.fe-bc {
	border-color: var(--fe-box-border-color);
}
.fe-bc-theme {
	border-color: var(--fe-theme-color);
}
.fe-bc-warning {
	border-color: var(--fe-warning-border-color);
}
.fe-bc-error {
	border-color: var(--fe-error-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: var(--fe-white);
	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: var(--fe-nav-height);
	left: 0;
	z-index: 99;
	width: 100%;
	background: var(--fe-white);
	height: var(--fe-tabs-height);

	&:extend(.shadow-box);
}

// 顶部固定tab  适用h5
.fixed-tab-top {
	&:extend(.fixed-tab);
	top: 0;
}

// 悬浮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;
}

* {
	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 变量

@html-bg: #f3f7f6;
@white: #fff;
@red: #fc5c5b;
@info: #5bb0fc;

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

// 主题色
@theme-color: #48b284; // 主色
@theme-button-color: #2a8c65; // 按钮文字颜色
@theme-tag-background-color: #e6fff1; // 标签背景色
@theme-minor-button-background-color: #cef2df; // 二级按钮背景色

// 警告色
@warning-tag-background-color: #fff2e6; // 警告标签背景色
@warning-color: #e69d0b; // 警告色
@warning-border-color: #f2ab30; // 警告边框色

// 错误色
@erro-tag-background-color: #fff2f4; // 错误标签背景色
@erro-color: #cc3333; // 错误色
@erro-border-color: #e6676b; // 错误边框色

// logo颜色
@logo-color: #6a1318;

// 投影
@box-shadow-card: 0 2px 8px 0 rgba(6, 53, 64, 0.1);
@box-shadow-pop: 0 0 25px 0 rgba(6, 53, 64, 0.2);
@box-shadow-top: 0 -2px 10px 0 rgba(6, 53, 64, 0.1);
@box-shadow-border: 0 2px 8px 0 rgba(6, 53, 64, 0.2);

// 自定义变量 兼用uniapp
: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(46px + env(safe-area-inset-top));

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

	--fe-card-shadow: @box-shadow-card;
	--fe-pop-shadow: @box-shadow-pop;
	--fe-top-shadow: @box-shadow-top;
	--fe-border-shadow: @box-shadow-border;

	--fe-theme-button-color: @theme-button-color;
	--fe-tag-bg: @theme-tag-background-color;
	--fe-minor-button-bg: @theme-minor-button-background-color;

	--fe-warning-tag-bg: @warning-tag-background-color;
	--fe-warning-color: @warning-color;
	--fe-warning-border-color: @warning-border-color;

	--fe-error-tag-bg: @erro-tag-background-color;
	--fe-error-color: @erro-color;
	--fe-error-border-color: @erro-border-color;

	--fe-white: @white;
	--fe-red: @red;
	--fe-info: @info;

	--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-logo-color: @logo-color;

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

Readme

Keywords

Package Sidebar

Install

npm i @damocle/fe-less

Weekly Downloads

2

Version

1.0.17

License

ISC

Unpacked Size

23.6 kB

Total Files

11

Last publish

Collaborators

  • drneilc
Try on RunKit
Report malware