下载文档

color
更新时间:2015-08-04

概述

UI3.0颜色类,默认提供的基础类名在ui-color.css,需要在IDE工具可视化配置,即先定义主题色,设置模板主题,中国红、蜜桃粉、青草绿、天际蓝、子夜灰

CSS Variables

背景色类别

定义:
bc-head
bc-bg
sc-bg
sc-bg-active
sc-bg-alert

说明:

bc-head类别: 基础header颜色;定义了header区域背景底色,在ui3.0框架中,IDE工具可以可视化配置
bc-bg类别: 基础body背景颜色; 定义了body背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg类别: 辅助控件背景颜色1; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-active类别: 辅助控件背景颜色2; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-alert类别: 警告背景色; 定义了header区域背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置

场景:



例子:

  1. <!--header开始-->
  2. <div id="header" class="uh bc-text-head ub bc-head"></div>
  3. <!--header结束-->

图例:

按钮颜色类别

定义:
bc-btn
sc-btn

说明:

bc-btn 基础按钮颜色 应用的是主题颜色
sc-btn 辅助按钮颜色 应用的是主题颜色

类别分别用于定义不同颜色值,默认提供的字体颜色可以自己灵活应用,也可自定义

场景:
ui-color.css中 鼠标定位颜色属性上可查看颜色

例子:

  1. <div class='btn ub ub-ac bc-text-head ub-pc bc-btn'>确定</div>

图例:

文字色彩类别

定义:
bc-text
bc-text-head
sc-text
sc-text-active
sc-text-hint
sc-text-warn
sc-text-tab

说明:

bc-text 基础字体颜色 black
bc-text-head 基础标题字体颜色 white
sc-text 辅助字体颜色1 #848484
sc-text-active 辅助字体颜色2 应用的是主题颜色
sc-text-hint 辅助字体颜色3
sc-text-warn 辅助字体颜色4
sc-text-tab 辅助字体颜色5

类别分别用于定义不同色彩,默认提供的字体颜色可以自己灵活应用,也可自定义

场景:
ui-color.css中 鼠标定位颜色属性上可查看颜色


例子:

  1. <div class= "btn ub ub-ac bc-text-head ub-pc bc-btn " id="btn">无图片按钮</div>

图例:

边框色彩类别

定义:
bc-border
sc-border
sc-border-tab

说明:

bc-border 基础边框颜色 默认是#BABABA
sc-border 辅助边框颜色 默认是#FFFFFF
sc-border-tab 辅助边框颜色 应用的是主题颜色

类别分别用于定义不同色彩, 默认提供的边框颜色可以自己灵活应用,也可自定义

场景:
ui-color.css中 鼠标定位颜色属性上可查看颜色

例子:

  1. <div id="listview"class="ubt bc-border sc-bg"> </div>

图例: