/** @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; 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; } } } } }