Sync active tab indicator with activity panel transition
This commit is contained in:
parent
21217f4b0b
commit
527f390d35
|
@ -200,7 +200,7 @@ class ActivityPanel extends Component {
|
||||||
renderTab( tab, i ) {
|
renderTab( tab, i ) {
|
||||||
const { currentTab, isPanelOpen } = this.state;
|
const { currentTab, isPanelOpen } = this.state;
|
||||||
const className = classnames( 'woocommerce-layout__activity-panel-tab', {
|
const className = classnames( 'woocommerce-layout__activity-panel-tab', {
|
||||||
'is-active': tab.name === currentTab,
|
'is-active': isPanelOpen && tab.name === currentTab,
|
||||||
'has-unread': tab.unread,
|
'has-unread': tab.unread,
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|
|
@ -73,18 +73,27 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-color: $woocommerce;
|
||||||
|
bottom: 0;
|
||||||
|
content: '';
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition-property: height, opacity;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
color: $core-grey-dark-700;
|
color: $core-grey-dark-700;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: $woocommerce;
|
|
||||||
bottom: 0;
|
|
||||||
content: '';
|
|
||||||
height: 3px;
|
height: 3px;
|
||||||
left: 0;
|
opacity: 1;
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue