diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec16adb9e465022b24a49911a32d0f0a683a1602..668024a8808d16c123f275bdb08e9427cfd9b584 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,14 @@
# Amaze UI Change Log
---
+## 2014.09 W4
+
+### CSS
+
+__Button__:
+
+- `NEW` 增加圆角和直角样式。
+
## 2014.09 W3
### CSS
diff --git a/docs/css/button.md b/docs/css/button.md
index 0708a9c73a47b63c441deba21f9d11be325b0ecb..aae2d392ff6956a4a160ec4c353126876cd5e432 100644
--- a/docs/css/button.md
+++ b/docs/css/button.md
@@ -3,6 +3,8 @@
## 基本使用
+### 默认样式
+
在要应用按钮样式的元素上添加 `.am-btn`,再设置相应的颜色。
- `.am-btn-default` - 默认,灰色按钮
@@ -14,27 +16,54 @@
- `.am-btn-link`
`````html
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
`````
```html
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
```
+### 方形按钮
+
+在默认样式的基础上添加 `.am-square` class.
+
+`````html
+
+
+
+
+
+
+`````
+
+### 椭圆形按钮
+
+在默认样式的基础上添加 `.am-round` class.
+
+`````html
+
+
+
+
+
+
+`````
+
+
## 按钮状态
### 激活状态
@@ -42,20 +71,20 @@
在按钮上添加 `.am-active` class。
`````html
-
-
+
+
-Primary link
-Link
+链接按钮激活状态
+链接按钮激活状态
`````
```html
-
-
+
+
-Primary link
-Link
+链接按钮激活状态
+链接按钮激活状态
```
### 禁用状态
@@ -63,18 +92,18 @@
在按钮上设置 `disabled` 属性或者添加 `.am-disabled` class。
`````html
-
-
+
+
-Primary link
-Link
+链接按钮禁用状态
+链接按钮禁用状态
`````
```html
-
-
+
+
-Primary link
-Link
+链接按钮禁用状态
+链接按钮禁用状态
```
@@ -90,25 +119,25 @@
- `.am-btn-xs`
`````html
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
`````
```html
-
+
-
+
```
@@ -119,12 +148,12 @@
添加 `.am-btn-block` class。
`````html
-
-
+
+
`````
```html
-
-
+
+
```
## 按钮 Icon
@@ -134,42 +163,42 @@
`````html
- Checkout
+ 结账
`````
```html
- Checkout
+ 结账
```
\ No newline at end of file
diff --git a/less/button.less b/less/button.less
index f87659ba9150c030e65a905a66577518a33d0d4b..bbc90c33688d57ce4c324b4bc1faffdec61fb7e4 100644
--- a/less/button.less
+++ b/less/button.less
@@ -45,8 +45,9 @@
border-radius: @global-border-radius;
line-height: @btn-line-height;
font-size: @btn-font-size;
+ outline: 0;
.user-select(none);
- .transition(width 0.15s);
+ .transition(e("background-color 300ms ease-out, border-color 300ms ease-out"));
&:focus {
.tab-focus();
@@ -54,15 +55,15 @@
&:hover,
&:focus {
+ outline: 0;
color: @btn-default-color;
text-decoration: none;
}
&:active,
&.am-active {
- outline: 0;
background-image: none;
- .box-shadow(inset 0 1px 5px rgba(0,0,0,.125));
+ .box-shadow(inset 0 1px 8px rgba(0, 0, 0, .125));
}
&.am-disabled,
@@ -76,10 +77,18 @@
.box-shadow(none);
}
+ &.am-round {
+ border-radius: @global-rounded;
+ }
+
+ &.am-square {
+ border-radius: @global-square;
+ }
}
-/* Modifiers */
+// Modifiers
+// ========================================================================
.am-btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
diff --git a/less/mixins.less b/less/mixins.less
index 7a8ecad108126cee6d604dd6b02688d2b712c024..5c6f44bf11f5ea1deb93e35b05c0297c90999db1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -722,8 +722,8 @@
&.am-active,
.am-active .am-dropdown-toggle& {
color: @color;
- background-color: darken(@background, 8%);
- border-color: darken(@background, 15%);
+ background-color: darken(@background, 12%);
+ border-color: darken(@border, 12%);
}
&:active,
&.am-btn-active,
diff --git a/less/variables.less b/less/variables.less
index 1ddaaf662e58a5856455e2aa4e8b6ebcdc8d30ad..9b6e41fa56e704116a60a4601a98609b06400bf5 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -149,10 +149,17 @@
// ------------------------------------------------------------------------
@global-border-radius: 2px;
+@global-radius: @global-border-radius;
@border-radius-large: 5px;
@border-radius-small: 1px;
+//
+
+@global-rounded: 1000px;
+@global-square: 0;
+
+
// Responsive variables
// ========================================================================
@@ -304,29 +311,29 @@
@btn-line-height: 1.2;
@btn-font-size: @global-font-size;
-@btn-default-color: @gray-dark;
+@btn-default-color: #444;
@btn-default-bg: #e6e6e6;
-@btn-default-border: transparent;
+@btn-default-border: @btn-default-bg;
@btn-primary-color: #fff;
@btn-primary-bg: @global-primary;
-@btn-primary-border: darken(@btn-primary-bg, 5%);
+@btn-primary-border: @btn-primary-bg;
@btn-secondary-color: #fff;
@btn-secondary-bg: @global-secondary;
-@btn-secondary-border: darken(@btn-secondary-bg, 5%);
+@btn-secondary-border: @global-secondary;
@btn-success-color: #fff;
@btn-success-bg: @global-success;
-@btn-success-border: darken(@btn-success-bg, 5%);
+@btn-success-border: @global-success;
@btn-warning-color: #fff;
@btn-warning-bg: @global-warning;
-@btn-warning-border: darken(@btn-warning-bg, 5%);
+@btn-warning-border: @btn-warning-bg;
@btn-danger-color: #fff;
@btn-danger-bg: @global-danger;
-@btn-danger-border: darken(@btn-danger-bg, 5%);
+@btn-danger-border: @btn-danger-bg;
@btn-link-disabled-color: @gray-light;