feat: add btn styles

DTStack · Dec 29, 2020 · 8f56ebf · 8f56ebf
1 parent b15f779
commit 8f56ebf
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 0 deletions.
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
@@ -18,6 +18,7 @@ ReactDOM.render(
     <Button>二级按钮</Button>
     <Button ghost>幽灵按钮</Button>
     <Button type="link">文字按钮</Button>
+    <Button icon="search" className="dt-btn-highlight">图标按钮</Button>
   </div>,
   mountNode,
 );

diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
@@ -18,6 +18,7 @@ ReactDOM.render(
     <Button disabled>二级按钮</Button>
     <Button ghost disabled>幽灵按钮</Button>
     <Button type="link" disabled>文字按钮</Button>
+    <Button icon="search" disabled className="dt-btn-highlight">图标按钮</Button>
   </div>,
   mountNode,
 );

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -10,3 +10,9 @@ subtitle: 按钮
 ## 设计规范
 
 按钮统一为 2px 的圆角，文字大小 12px 居中，距离左右分别 16px ,按钮的宽度随着文字的长短变化而变化，高度分为 32px (常规尺寸)、 28px (小尺寸)两种。
+
+## API
+
+|类名  |说明  |使用示例  |
+|---------|---------|---------|
+|.dt-btn-highlight  | 图标按钮   | 按钮类型、 不可用状态  |
diff --git a/theme/dt-theme/default/button.less b/theme/dt-theme/default/button.less
@@ -161,4 +161,34 @@
     background-color: @blackE8 !important;
     border-color: @blackE8;
     color: @blackBF;
+}
+
+.dt-btn-highlight {
+    &.ant-btn:hover, &.ant-btn:focus {
+        color: @primaryColor;
+        border-color: @primaryColor;
+    }
+    &.ant-btn:active, &.ant-btn.active {
+        color: @clickColor;
+        border-color: @clickColor;
+    }
+    &.ant-btn-disabled,
+    &.ant-btn.disabled,
+    &.ant-btn[disabled],
+    &.ant-btn-disabled:hover,
+    &.ant-btn.disabled:hover,
+    &.ant-btn[disabled]:hover,
+    &.ant-btn-disabled:focus,
+    &.ant-btn.disabled:focus,
+    &.ant-btn[disabled]:focus,
+    &.ant-btn-disabled:active,
+    &.ant-btn.disabled:active,
+    &.ant-btn[disabled]:active,
+    &.ant-btn-disabled.active,
+    &.ant-btn.disabled.active,
+    &.ant-btn[disabled].active {
+        color: @blackBF;
+        background-color: @blackE8 !important;
+        border-color: @blackE8;
+    }
 }
diff --git a/theme/static/common.less b/theme/static/common.less
@@ -173,6 +173,7 @@ a {
 .demo-button-type, .demo-modal-box, .demo-notification-box, .demo-message-box {
   button {
     margin-right: 12px;
+    margin-bottom: 20px;
   }
 }
 .demo-select-size {