react-cwui v0.1.2

cwui

A UI library for cloudwood, includes the base widgets in mobile web applications.

cwui 云莱坞UI规范

cwui是云莱坞移动端基础样式库，以下像素均以iphone6/6s（750）为基准，基础组件包含fonts、colors、button、cell、article、icons、tab等。

https://github.com/yunlaiwu/cwui

fonts

colors

#00acff(云莱坞主题颜色)、#333333、#666666、#999999、#ffffff、#c1c1c2(border颜色)、#FAFAF7(多文字背景色)

button

目前用到的button基本为云莱坞主题色，大小上分为full-width, middle, small

.btn{
  background-color: #00acff;
  color: #fff;
  border:0 none;
  border-radius: 5px;
}

1. full-width:

.btn.full-width{
    width: 100%;
    height: 88px;
    font-size: 32px;
}

2. middle:

.btn.middle{
  width: 100px;
  height: 60px;
  font-size: 38px;
}

3. small:

.btn.small{
  width: 130px;
  height: 45px;
  font-size: 24px;
}

cell

左右边距各40px, 上下内彼边距为32px, 背景颜色#fff, cell之间的间距为28px(如果有文字的间距为 28px+文字的行高)

article

标题:

h3{
  color: #333;
  font-size: 48px;
}

链接文字：

a.link-text{
  font-size:24px;
  color: #00acff;
}

正文：

p.main-text{
  color: #333;
  font-size: 32px;
  line-height: 1.6;
}

标签：

span.tag-text{
  color: #999;
  font-size: 24px;
}

信息文字：

span.info-text{
  color: #333;
  font-size: 26px;
  font-weight: lighter;
}

icons

目前移动web端常用的icons都打包成字体文字（cwicon.svg）

tab

tab item采用弹性布局等分宽度，高度70px

.tab-item{
  font-size:32px;
  color:#666;
}
.tab-item.active{
  font-size: 34px;
  color: #00acff;
}