Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sync active tab indicator with activity panel transition

This commit is contained in:
Paul Dechov 2019-07-24 21:36:51 -04:00
parent 21217f4b0b
commit 527f390d35
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/header/activity-panel/index.js
View File

@ -200,7 +200,7 @@ class ActivityPanel extends Component {
renderTab( tab, i ) {
const { currentTab, isPanelOpen } = this.state;
const className = classnames( 'woocommerce-layout__activity-panel-tab', {
'is-active': tab.name === currentTab,
'is-active': isPanelOpen && tab.name === currentTab,
'has-unread': tab.unread,
} );

21
plugins/woocommerce-admin/client/header/activity-panel/style.scss
View File

@ -73,18 +73,27 @@
font-size: 11px;
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 {
color: $core-grey-dark-700;
box-shadow: none;
&::before {
background-color: $woocommerce;
bottom: 0;
content: '';
height: 3px;
left: 0;
position: absolute;
right: 0;
opacity: 1;
}
}