From 6dd0673f0f7df468a5642048f39d6dec6ffb23a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=81=E4=B9=89?= <jianyi.zh@alibaba-inc.com>
Date: Wed, 20 Feb 2019 18:34:26 +0800
Subject: [PATCH] feat(Card): support rtl

---
 src/card/card.jsx      |  5 ++++-
 src/card/main.scss     |  1 +
 src/card/scss/rtl.scss | 28 ++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/card/scss/rtl.scss

diff --git a/src/card/card.jsx b/src/card/card.jsx
index c551556d29..c503a1e356 100644
--- a/src/card/card.jsx
+++ b/src/card/card.jsx
@@ -142,7 +142,8 @@ export default class Card extends React.Component {
             showTitleBullet,
             showHeadDivider,
             children,
-            locale
+            locale,
+            rtl,
         } = this.props;
         const { needMore, expand } = this.state;
 
@@ -159,6 +160,8 @@ export default class Card extends React.Component {
 
         const others = pickOthers(Object.keys(Card.propTypes), this.props);
 
+        others.dir = rtl ? 'rtl' : undefined;
+
         const headExtra = extra ? <div className={`${prefix}card-extra`}>{extra}</div> : null;
 
         return (
diff --git a/src/card/main.scss b/src/card/main.scss
index 4713b83db8..5ee84d8039 100644
--- a/src/card/main.scss
+++ b/src/card/main.scss
@@ -2,6 +2,7 @@
 @import "scss/variable";
 @import "scss/normalize";
 @import "scss/mixin";
+@import "scss/rtl.scss";
 
 #{$card-prefix} {
     @include box-sizing;
diff --git a/src/card/scss/rtl.scss b/src/card/scss/rtl.scss
new file mode 100644
index 0000000000..71d07021dc
--- /dev/null
+++ b/src/card/scss/rtl.scss
@@ -0,0 +1,28 @@
+@import "./variable";
+
+#{$card-prefix}[dir="rtl"] {
+    #{$card-prefix}-extra {
+        left: 0;
+        right: auto;
+    }
+
+    #{$card-prefix}-title {
+        &:before {
+            right: 0;
+            left: auto;
+        }
+    }
+
+    #{$card-prefix}-subtitle {
+        float: left;
+        padding-right: $card-sub-title-padding-left;
+        padding-left: 0;
+    }
+
+    #{$card-prefix}-head-show-bullet {
+        #{$card-prefix}-title {
+            padding-left: 0;
+            padding-right: $card-title-padding-left;
+        }
+    }
+}