Browse Source

fix: Divider border style not work on text mode (#26863)

pull/26872/head
二货机器人 4 years ago
committed by GitHub
parent
commit
1e176ed841
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 11
      components/divider/__tests__/__snapshots__/demo.test.js.snap
  2. 3
      components/divider/demo/customize-style.md
  3. 7
      components/divider/style/index.less

11
components/divider/__tests__/__snapshots__/demo.test.js.snap

@ -12,6 +12,17 @@ Array [
role="separator"
style="border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
role="separator"
style="border-color:#7cb305"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<div
class="ant-divider ant-divider-vertical"
role="separator"

3
components/divider/demo/customize-style.md

@ -21,6 +21,9 @@ ReactDOM.render(
<>
<Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
<Divider style={{ borderColor: '#7cb305' }} dashed />
<Divider style={{ borderColor: '#7cb305' }} dashed>
Text
</Divider>
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
</>,

7
components/divider/style/index.less

@ -35,13 +35,18 @@
font-size: @font-size-lg;
white-space: nowrap;
text-align: center;
border-color: @divider-color;
border-top: 0;
&::before,
&::after {
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @divider-color;
border-top: 1px solid transparent;
// Chrome not accept `inherit` in `border-top`
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: '';
}

Loading…
Cancel
Save