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

Chart Legend: Update checkbox styles to outline when unchecked (https://github.com/woocommerce/woocommerce-admin/pull/426) 

Chart Legend: Update checkbox styles to outline when unchecked and add focus state
This commit is contained in:
Albert Juhé Lluveras 2018-09-19 16:41:13 +02:00 committed by GitHub
parent b487642a65
commit 5e87febf04
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/components/chart/legend.js
View File

@ -62,7 +62,7 @@ class Legend extends Component {
'woocommerce-legend__item-checkmark-checked': row.visible,
} ) }
id={ row.key }
style={ { backgroundColor: getColor( row.key, colorParams ) } }
style={ { color: getColor( row.key, colorParams ) } }
/>
<span className="woocommerce-legend__item-title" id={ row.key }>
{ row.key }

22
plugins/woocommerce-admin/client/components/chart/style.scss
View File

@ -285,10 +285,6 @@
border: none;
padding: 0;
&:focus {
outline: none;
}
.woocommerce-legend__item-container {
display: flex;
flex-direction: row;
@ -310,6 +306,7 @@
}
.woocommerce-legend__item-checkmark {
border: 1px solid $core-grey-light-900;
position: absolute;
top: 2px;
left: 0;
@ -324,10 +321,13 @@
}
&.woocommerce-legend__item-checkmark-checked {
background-color: currentColor;
border-color: currentColor;
&:after {
display: block;
left: 6px;
top: 4px;
left: 5px;
top: 2px;
width: 3px;
height: 6px;
border: solid $white;
@ -341,6 +341,16 @@
font-weight: bold;
}
}
&:focus {
outline: none;
.woocommerce-legend__item-container {
.woocommerce-legend__item-checkmark {
outline: 2px solid $core-grey-light-900;
}
}
}
}
}
}