加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
uni.scss 2.82 KB
一键复制 编辑 原始数据 按行查看 历史
吴伟杰 提交于 2023-03-12 23:11 . init
/**
* 常用css变量
*/
@import 'uview-ui/theme.scss';
/* 单行、多行文本溢出 */
@mixin ellipsis($line: 1) {
@if ($line == 1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} @else {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
}
/* 弹性布局盒子 */
@mixin flexBox($justify: center, $align: center, $direction: row, $flex-wrap: nowrap) {
display: flex;
display: -webkit-flex;
@if ($justify != null) {
justify-content: $justify;
}
@if ($align != null) {
align-items: $align;
}
@if ($direction != null) {
flex-direction: $direction;
}
@if ($flex-wrap != null) {
flex-wrap: $flex-wrap;
}
}
/* 底部安全区域 */
@mixin safeArea($direction, $mode: inset) {
padding-#{$direction}: env(safe-area-#{$mode}-#{$direction});
}
/* 自定义变量 */
$main-color: #FFD426; // 主色
$main-color-text: #FF1A2E; // 主文字色
/* 标准颜色变量 */
$color-red: #FF0000; // 红色
$color-orange: #FFA500; // 橙色
$color-yellow: #FFFF00; // 黄色
$color-green: #008000; // 绿色
$color-blue: #0000FF; // 蓝色
$color-indigo: #4B0082; // 靛蓝
$color-purple: #800080; // 紫色
$color-pink: #FFC0CB; // 粉色
$color-black: #000000; // 黑色
$color-white: #FFFFFF; // 白色
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化