首页 > 其他分享 >uni.scss

uni.scss

时间:2023-03-02 19:34:05浏览次数:41  
标签:scss 插件 color spacing uni font size

/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/

/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/

/* 颜色变量 */
/* 行为相关颜色 */
@import '@/uni_modules/uview-ui/theme.scss';
$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;

 

标签:scss,插件,color,spacing,uni,font,size
From: https://www.cnblogs.com/connie256/p/17173089.html

相关文章

  • uniapp 自定义 picker
    前言我们在开发的过程中经常会遇到现有插件无法满足需求的情况,毕竟不是组件库不能满足项目所有需求,这时就需要我们自己去构建组件。写这篇博文也是记录我平时开发的,以后......
  • PHP: PhpStorm单元测试报错:PHPUnit Cannot open file
    问题描述版本:PhpStorm2019.3.4PhpStorm单元测试报错PHPUnitCannotopenfile问题分析PhpStorm2019.3.3不支持PHPUnit9、需要使用PHPUnit8.*问题解决compose......
  • unittest的参数化parameterized
      importunittest,parameterizedimportBeautifulReport#数据驱动#代码驱动#关键字驱动data=[['admin','123456',True,'正常用户登录'],['admin','1......
  • Linux操作命令(八)1.sort命令 2.uniq命令 3.join命令
    1、sort,排序常用参数参数描述-n基于字符串的长度来排序,使用此选项允许根据数字值排序,而不是字母值-k指定排序关键字-b默认情况下,对整行进行排序,从每行的......
  • ORA-00001: unique constraint violated异常处理
    程序中保存数据时报错,ORA-00001:uniqueconstraint(xxxx)violated先是查看数据库结构,最近也没什么改动,开发环境也正常,测试环境就报这个错后来发现主键id是自增的,查询......
  • docker+gunicorn+fastapi部署
    一、准备工作1、先确保项目可以正常运行2、使用pipfreeze导出第三方库3、在项目根目录新建pip.conf文件,写入一下内容[global]index-url=http://......
  • Unity URP 平面反射
    https://www.bilibili.com/video/BV1TA4y1D7s4/?spm_id_from=333.999.0.0&vd_source=5672eeb8a9721da01495e313f0dff6c2https://zhuanlan.zhihu.com/p/493766119PlannarR......
  • UnitTest & HTMLTestRunner测试生成报告
    1.简介UnitTest是python自带的自动化测试框架UnitTest主要包含的内容TestCase(测试用例)TestSuite(测试套件,把多个TestCase集成到一个测试Testsuite)TestRunner(执......
  • unittestreport生成报告介绍
    ​ unittestreport主要有以下几个作用       接口用例HTML测试报告生成。        测试用例失败重运行。        发送测试结果及报告到邮箱......
  • 2023-03-01 react-native 实现 复制功能 @react-native-community/clipboard 报错:Type
    我的react-native(下称rn)版本为0.68,要实现这个功能主要用到rn的clipboard,在21年的时候他就已经提示clipboard会在未来的版本中上去掉,官方的建议是不要再从react-native引入,......