diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index c46ef23d1f..a0bd5d177d 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -27,15 +27,15 @@ ReactDOM.render( padding: 24px; } -.card-container > .ant-tabs-card .ant-tabs-content { +.card-container > .ant-tabs-card > .ant-tabs-content { background: #fff; padding: 16px; height: 120px; margin-top: -16px; } -.card-container > .ant-tabs-card .ant-tabs-bar, -.card-container > .ant-tabs-card .ant-tabs-tab-active { +.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-bar, +.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { border-color: #fff; } ```` diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 470576e0f3..bb515821be 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -369,13 +369,13 @@ } // card style - &&-card &-nav-container { + &&-card > &-bar &-nav-container { height: 36px; } - &&-card &-ink-bar { + &&-card > &-bar &-ink-bar { visibility: hidden; } - &&-card &-tab { + &&-card > &-bar &-tab { margin: 0; border: 1px solid transparent; border-bottom: 0; @@ -384,24 +384,24 @@ background: #f9f9f9; margin-right: 2px; } - &&-card &-tab-inner { + &&-card > &-bar &-tab-inner { padding: 7px 16px 6px; transition: all 0.3s @ease-in-out; } - &&-card &-tab-active { + &&-card > &-bar &-tab-active { background: #fff; transform: translateZ(0); border-color: @border-color-base; color: @primary-color; } - &&-card &-tab-active &-tab-inner { + &&-card > &-bar &-tab-active &-tab-inner { padding-bottom: 7px; transform: translateZ(0); } - &&-card &-nav-wrap { + &&-card > &-bar &-nav-wrap { margin-bottom: 0; } - &&-card &-tab-inner .anticon-cross { + &&-card > &-bar &-tab-inner .anticon-cross { margin-right: 0; color: #999; transition: all 0.3s @ease-in-out; @@ -417,13 +417,13 @@ } } - &&-editable-card &-tab:not(&-tab-active):hover &-tab-inner { + &&-editable-card > &-bar &-tab:not(&-tab-active):hover &-tab-inner { padding-left: 8px; padding-right: 8px; } - &&-card &-tab-active .anticon-cross, - &&-card &-tab:hover .anticon-cross { + &&-card > &-bar &-tab-active .anticon-cross, + &&-card > &-bar &-tab:hover .anticon-cross { width: 16px; transform: translateZ(0); }