@damocle/fe-theme-zsly
v1.0.7
Published
fe theme zsly
Downloads
4
Readme
中山六院常用主题
color
.bgc-theme {
background: var(--fe-theme-color);
}
.bgc-theme-minor {
background: var(--fe-minor-button-bg);
}
.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);
}
// 通用颜色
.c-theme {
color: var(--fe-theme-color);
}
.c-theme-button {
color: var(--fe-theme-button-color);
}
.c-warning {
color: var(--fe-warning-color);
}
.c-error {
color: var(--fe-error-color);
}
.c-logo {
color: var(--fe-logo-color);
}
// 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
box-shadow: var(--fe-card-shadow);
}
.shadow-card {
&:extend(.shadow-box,
.ovh,
.brs-8,
.bgc-w,
.px-5,
.py-5);
}
variables
// 黑色
@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); // 描边投影
// 自定义变量
: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-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;
}