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

separate legend styling out

This commit is contained in:
Robert Elliott 2018-12-04 13:57:12 +02:00
parent c9ccc015ca
commit ca28c42ead
2 changed files with 218 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss Normal file
View File

@ -0,0 +1,214 @@
/** @format */
.woocommerce-legend {
&.has-total {
padding-bottom: 50px;
position: relative;
}
&.woocommerce-legend__direction-column {
border-right: 1px solid $core-grey-light-700;
min-width: 320px;
.woocommerce-chart__footer & {
border-right: none;
}
}
}
.woocommerce-legend__list {
color: $black;
display: flex;
height: 100%;
margin: 0;
.woocommerce-legend__direction-column & {
flex-direction: column;
height: 300px;
overflow: auto;
.woocommerce-chart__footer & {
border-top: 1px solid $core-grey-light-700;
height: 100%;
max-height: none;
min-height: none;
}
}
.has-total.woocommerce-legend__direction-column & {
height: 250px;
.woocommerce-chart__footer & {
height: auto;
max-height: 220px;
min-height: none;
}
}
.woocommerce-legend__direction-row & {
flex-direction: row;
}
}
.woocommerce-legend__item {
& > button {
display: flex;
justify-content: center;
align-items: center;
background-color: $white;
color: $core-grey-dark-500;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
border: none;
padding: 0;
.woocommerce-legend__item-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
padding: 3px 0 3px 24px;
cursor: pointer;
font-size: 13px;
user-select: none;
width: 100%;
&:hover {
input {
~ .woocommerce-legend__item-checkmark {
background-color: $core-grey-light-200;
}
}
}
.woocommerce-legend__item-checkmark {
border: 1px solid $core-grey-light-900;
position: absolute;
top: 4px;
left: 0;
height: 16px;
width: 16px;
background-color: $white;
&::after {
content: '';
position: absolute;
display: none;
}
&.woocommerce-legend__item-checkmark-checked {
background-color: currentColor;
border-color: currentColor;
&::after {
display: block;
left: 5px;
top: 2px;
width: 3px;
height: 6px;
border: solid $white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
}
.woocommerce-legend__item-total {
font-weight: bold;
}
}
&:focus {
outline: none;
.woocommerce-legend__item-container {
.woocommerce-legend__item-checkmark {
outline: 2px solid $core-grey-light-900;
}
}
}
&:hover {
background-color: $core-grey-light-100;
}
}
.woocommerce-legend__direction-column & {
margin: 2px 0;
padding: 0;
& > button {
height: 32px;
padding: 0 17px;
}
&:first-child {
margin-top: $gap-small;
}
&:last-child::after {
content: '';
display: block;
height: $gap-small;
width: 100%;
}
}
.woocommerce-legend__direction-row & {
padding: 0;
margin: 0;
& > button {
padding: 0 17px;
.woocommerce-legend__item-container {
height: 50px;
align-items: center;
.woocommerce-legend__item-checkmark {
top: 17px;
}
.woocommerce-legend__item-title {
margin-right: 17px;
}
}
}
}
}
.woocommerce-legend__total {
align-items: center;
background: $white;
border-top: 1px solid $core-grey-light-700;
bottom: 0;
color: $core-grey-dark-500;
display: flex;
height: 50px;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-transform: uppercase;
&::before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
bottom: 100%;
content: '';
height: 20px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
transition: opacity 0.3s;
}
.is-scrollable &::before {
opacity: 1;
}
}

219
plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
View File

@ -1,4 +1,8 @@
/** @format */
/**
* Internal Dependencies
*/
@import './legend.scss';
.d3-chart__container {
position: relative;
@ -132,218 +136,3 @@
}
}
}
/** @format */
.woocommerce-legend {
&.has-total {
padding-bottom: 50px;
position: relative;
}
&.woocommerce-legend__direction-column {
border-right: 1px solid $core-grey-light-700;
min-width: 320px;
.woocommerce-chart__footer & {
border-right: none;
}
}
}
.woocommerce-legend__list {
color: $black;
display: flex;
height: 100%;
margin: 0;
.woocommerce-legend__direction-column & {
flex-direction: column;
height: 300px;
overflow: auto;
.woocommerce-chart__footer & {
border-top: 1px solid $core-grey-light-700;
height: 100%;
max-height: none;
min-height: none;
}
}
.has-total.woocommerce-legend__direction-column & {
height: 250px;
.woocommerce-chart__footer & {
height: auto;
max-height: 220px;
min-height: none;
}
}
.woocommerce-legend__direction-row & {
flex-direction: row;
}
}
.woocommerce-legend__item {
& > button {
display: flex;
justify-content: center;
align-items: center;
background-color: $white;
color: $core-grey-dark-500;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
border: none;
padding: 0;
.woocommerce-legend__item-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
padding: 3px 0 3px 24px;
cursor: pointer;
font-size: 13px;
user-select: none;
width: 100%;
&:hover {
input {
~ .woocommerce-legend__item-checkmark {
background-color: $core-grey-light-200;
}
}
}
.woocommerce-legend__item-checkmark {
border: 1px solid $core-grey-light-900;
position: absolute;
top: 4px;
left: 0;
height: 16px;
width: 16px;
background-color: $white;
&::after {
content: '';
position: absolute;
display: none;
}
&.woocommerce-legend__item-checkmark-checked {
background-color: currentColor;
border-color: currentColor;
&::after {
display: block;
left: 5px;
top: 2px;
width: 3px;
height: 6px;
border: solid $white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
}
.woocommerce-legend__item-total {
font-weight: bold;
}
}
&:focus {
outline: none;
.woocommerce-legend__item-container {
.woocommerce-legend__item-checkmark {
outline: 2px solid $core-grey-light-900;
}
}
}
&:hover {
background-color: $core-grey-light-100;
}
}
.woocommerce-legend__direction-column & {
margin: 2px 0;
padding: 0;
& > button {
height: 32px;
padding: 0 17px;
}
&:first-child {
margin-top: $gap-small;
}
&:last-child::after {
content: '';
display: block;
height: $gap-small;
width: 100%;
}
}
.woocommerce-legend__direction-row & {
padding: 0;
margin: 0;
& > button {
padding: 0 17px;
.woocommerce-legend__item-container {
height: 50px;
align-items: center;
.woocommerce-legend__item-checkmark {
top: 17px;
}
.woocommerce-legend__item-title {
margin-right: 17px;
}
}
}
}
}
.woocommerce-legend__total {
align-items: center;
background: $white;
border-top: 1px solid $core-grey-light-700;
bottom: 0;
color: $core-grey-dark-500;
display: flex;
height: 50px;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-transform: uppercase;
&::before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
bottom: 100%;
content: '';
height: 20px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
transition: opacity 0.3s;
}
.is-scrollable &::before {
opacity: 1;
}
}