@damocle/fe-less
v1.0.17
Published
fe less
Downloads
24
Readme
集成 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); // 遮罩层背景色
}