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;