woocommerce/plugins/woocommerce-admin/client/components/chart/style.scss

347 lines
5.6 KiB
SCSS

/** @format */
.woocommerce-chart {
margin-top: -$gap;
margin-bottom: $gap-large;
background: white;
border: 1px solid $core-grey-light-700;
border-top: 0;
@include breakpoint( '<782px' ) {
margin-left: -16px;
margin-right: -16px;
margin-bottom: $gap-small;
border-left: none;
border-right: none;
width: auto;
}
.woocommerce-chart__header {
min-height: 50px;
border-bottom: 1px solid $core-grey-light-700;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
.woocommerce-chart__title {
height: 18px;
color: $black;
font-size: 15px;
font-weight: 600;
line-height: 18px;
margin-left: $gap;
margin-right: $gap;
}
.woocommerce-chart__type-button {
&.components-icon-button {
color: $core-grey-light-700;
&.woocommerce-chart__type-button-selected {
color: $core-grey-dark-500;
}
&:hover {
box-shadow: none;
}
}
}
}
.woocommerce-chart__body {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
&.woocommerce-chart__body-column {
flex-direction: column;
}
}
.woocommerce-chart__footer {
width: 100%;
.woocommerce-legend {
&.woocommerce-legend__direction-column {
height: 100%;
min-height: none;
border-right: none;
margin-bottom: $gap;
}
}
}
svg {
overflow: visible;
}
.tooltip {
border: 1px solid $core-grey-light-700;
position: absolute;
display: none;
min-width: 324px;
height: auto;
background-color: $white;
text-align: left;
padding: 17px;
box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
h4 {
text-align: left;
line-height: 18px;
width: 100%;
text-transform: uppercase;
font-size: 11px;
color: $core-grey-dark-100;
opacity: 0.6;
margin-top: 0;
}
ul {
list-style: none;
margin-bottom: 2px;
margin-top: 2px;
font-size: 14px;
li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
&.key-row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.key-container {
width: 100%;
min-width: 100px;
.key-color {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
.key-key {
margin-right: 6px;
}
}
.key-value {
font-weight: 600;
}
}
}
}
}
.bargroup {
&rect {
shape-rendering: crispEdges;
}
}
.grid {
.tick {
line {
stroke: $core-grey-light-500;
stroke-width: 1;
shape-rendering: crispEdges;
}
&:first-child {
line {
stroke: $core-grey-dark-500;
}
}
&:last-child {
line {
opacity: 0;
}
}
}
}
.tick {
padding-top: 10px;
stroke-width: 1;
}
.y-axis {
text-anchor: start;
&.tick {
&text {
fill: $core-grey-dark-500;
}
}
}
line {
&.focus-grid {
stroke: $core-grey-light-700;
stroke-width: 1px;
}
}
&.is-placeholder {
@include placeholder();
height: 200px;
width: 100%;
padding: 0;
}
}
.woocommerce-chart__interval-select {
margin: 0;
.components-select-control__input {
border: 0;
box-shadow: none;
}
}
.woocommerce-chart__container {
position: relative;
width: 100%;
.tooltip {
position: absolute;
}
}
.woocommerce-legend {
color: $black;
display: flex;
height: 100%;
margin: 0;
&.woocommerce-legend__direction-column {
flex-direction: column;
border-right: 1px solid $core-grey-light-700;
height: 300px;
min-width: 320px;
li {
margin: 0;
padding: 0;
button {
height: 32px;
padding: 0 17px;
}
&:first-child {
margin-top: 17px;
}
}
}
&.woocommerce-legend__direction-row {
flex-direction: row;
li {
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;
}
}
}
}
}
li {
&.woocommerce-legend__item {
button {
&:hover {
background-color: $core-grey-light-100;
}
}
}
button {
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;
&:focus {
outline: none;
}
.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 {
position: absolute;
top: 2px;
left: 0;
height: 16px;
width: 16px;
background-color: $white;
&:after {
content: '';
position: absolute;
display: none;
}
&.woocommerce-legend__item-checkmark-checked {
&:after {
display: block;
left: 6px;
top: 4px;
width: 3px;
height: 6px;
border: solid $white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
}
.woocommerce-legend__item-total {
font-weight: bold;
}
}
}
}
}