Fix mention active style

ant-design · Mar 18, 2017 · 240a93c · 240a93c
1 parent 8afc2e9
commit 240a93c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -452,7 +452,7 @@ form {
         border-color: @error-color;
       }
     }
-    &.active .@{ant-prefix}-mention-editor,
+    &.@{ant-prefix}-mention-active .@{ant-prefix}-mention-editor,
     .@{ant-prefix}-mention-editor:not([disabled]):focus {
       .active(@error-color);
     }

diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
@@ -55,7 +55,7 @@ class App extends React.Component {
           id="control-mention"
           label="Top coders"
           labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}
+          wrapperCol={{ span: 16 }}
         >
           {getFieldDecorator('mention', {
             rules: [
@@ -65,6 +65,7 @@ class App extends React.Component {
           })(
             <Mention
               suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
+              style={{ height: 60 }}
             />
           )}
         </FormItem>

diff --git a/components/mention/style/index.less b/components/mention/style/index.less
@@ -2,22 +2,24 @@
 @import "../../style/mixins/index";
 @import '../../input/style/mixin';
 
-.@{ant-prefix}-mention-wrapper {
+@mention-prefix-cls: ~"@{ant-prefix}-mention";
+
+.@{mention-prefix-cls}-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
   vertical-align: middle;
-  &-active .@{ant-prefix}-mention-editor {
-    .active;
-  }
-  .@{ant-prefix}-mention-editor {
-   .input;
-   padding: 0;
-   display: block;
+  .@{mention-prefix-cls}-editor {
+    .input;
+    padding: 0;
+    display: block;
+    &-wrapper {
+      overflow-y: auto;
+      height: auto;
+    }
   }
-  .@{ant-prefix}-mention-editor-wrapper {
-    overflow-y: auto;
-    height: auto;
+  &.@{mention-prefix-cls}-active .@{mention-prefix-cls}-editor {
+    .active;
   }
   .public-DraftEditorPlaceholder-root {
     position: absolute;
@@ -37,7 +39,7 @@
   }
 }
 
-.@{ant-prefix}-mention-dropdown {
+.@{mention-prefix-cls}-dropdown {
   margin-top: 1.5em;
   max-height: 250px;
   min-width: 120px;
@@ -53,7 +55,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   font-size: @font-size-base;
-  &-notfound.@{ant-prefix}-mention-dropdown-item {
+  &-notfound&-item {
     color: @disabled-color;
 
     .@{iconfont-css-prefix}-loading {