Skip to content

Commit

Permalink
用 ui-box-light 的风格代替默认风格，并简化了 DOM 结构, fix #2
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 committed Aug 15, 2013
1 parent 1d1a834 commit 3694aa1
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 77 deletions.
15 changes: 15 additions & 0 deletions HISTORY.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# History

---

## 1.1.0

`tag:changed` #2 用 ui-box-light 的风格代替默认风格，并简化了 DOM 结构。

![](https://i.alipayobjects.com/e/201308/uhpxWuqNp.png)


## 1.0.0

![](https://i.alipayobjects.com/e/201308/uhpksHOrd.png)

51 changes: 12 additions & 39 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,9 @@
````html
<div class="ui-box">
<div class="ui-box-head">
<div class="ui-box-head-border">
<h3 class="ui-box-head-title">区块标题</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
</div>
<div class="ui-box-container">
<div class="ui-box-content">ui-box-content 有默认内边距</div>
</div>
</div>
````



### 浅色系区块

````html
<div class="ui-box ui-box-light">
<div class="ui-box-head">
<div class="ui-box-head-border">
<h3 class="ui-box-head-title">浅色系</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<h3 class="ui-box-head-title">区块标题</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<div class="ui-box-container">
<div class="ui-box-content">ui-box-content 有默认内边距</div>
Expand All @@ -51,11 +30,9 @@
````html
<div class="ui-box">
<div class="ui-box-head">
<div class="ui-box-head-border">
<h3 class="ui-box-head-title">没有内容</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<h3 class="ui-box-head-title">没有内容</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<div class="ui-box-container" style="display: none;">
<div class="ui-box-content">ui-box-content 有默认内边距</div>
Expand All @@ -69,23 +46,19 @@
````html
<div class="ui-box">
<div class="ui-box-head">
<div class="ui-box-head-border">
<h3 class="ui-box-head-title">区块标题</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<h3 class="ui-box-head-title">区块标题</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<div class="ui-box-container">
<div class="ui-box-content">ui-box-content 有默认内边距</div>
</div>
</div>
<div class="ui-box ui-box-follow">
<div class="ui-box-head">
<div class="ui-box-head-border">
<h3 class="ui-box-head-title">连着上面的box</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<h3 class="ui-box-head-title">连着上面的box</h3>
<span class="ui-box-head-text">其他文字</span>
<a href="#" class="ui-box-head-more">更多</a>
</div>
<div class="ui-box-container">
<div class="ui-box-content">ui-box-content 有默认内边距</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "box",
"version": "1.0.0",
"version": "1.1.0",
"family": "alice",
"description": "带边框和标题的标准区块。",
"keywords": [
Expand Down
47 changes: 10 additions & 37 deletions src/box.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
/* alice.box 样式模块 */

@charset "utf-8";

.ui-box {
border: 1px solid #ccc;
zoom: 1;
Expand All @@ -27,24 +25,20 @@
.ui-box-head {
border-bottom: 1px solid #ccc;
position: relative;
}

.ui-box-head-border {
border: 1px solid #fff;
height: 14px;
line-height: 16px;
overflow: hidden;
padding: 10px;

background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1));
background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
background: -o-linear-gradient(top, #fcfcfc, #f1f1f1);
background: linear-gradient(top, #fcfcfc, #f1f1f1);
height: 16px;
line-height: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9));
background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background: -o-linear-gradient(top, #fcfcfc, #f9f9f9);
background: linear-gradient(top, #fcfcfc, #f9f9f9);
zoom: 1;
}


.ui-box-head .ui-box-head-title {
color: #4d4d4d;
color: #656565;
font-size: 14px;
font-weight: bold;
float: left;
Expand All @@ -71,24 +65,3 @@
.ui-box-content /* 可选，用于默认有内边距的box */ {
padding: 10px;
}

/* 浅色 ，用于主站 */

.ui-box-light,
.ui-box-light .ui-box-head {
border-color: #d9d9d9;
}

.ui-box-light .ui-box-head-title {
color: #656565;
}
.ui-box-light .ui-box-head-border {
border: none;
height: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9));
background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background: -o-linear-gradient(top, #fcfcfc, #f9f9f9);
background: linear-gradient(top, #fcfcfc, #f9f9f9);
zoom: 1;
}

0 comments on commit 3694aa1

Please sign in to comment.