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

391 lines
6.5 KiB
SCSS
Raw Normal View History

/** @format */
2018-08-08 11:00:45 +00:00
.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;
}
2018-08-08 11:00:45 +00:00
.woocommerce-chart__header {
min-height: 50px;
2018-09-05 11:20:12 +00:00
border-bottom: 1px solid $core-grey-light-700;
2018-08-13 11:09:44 +00:00
display: flex;
flex-flow: row wrap;
2018-09-11 11:04:26 +00:00
justify-content: space-between;
2018-08-13 11:09:44 +00:00
align-items: center;
2018-09-04 13:03:46 +00:00
width: 100%;
2018-08-13 11:09:44 +00:00
.woocommerce-chart__title {
height: 18px;
color: $black;
font-size: 15px;
font-weight: 600;
line-height: 18px;
2018-08-13 11:27:15 +00:00
margin-left: $gap;
2018-09-04 13:18:15 +00:00
margin-right: $gap;
2018-08-13 11:09:44 +00:00
}
2018-09-11 11:04:26 +00:00
.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;
}
}
}
}
2018-08-08 11:00:45 +00:00
.woocommerce-chart__body {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
2018-08-08 11:00:45 +00:00
&.woocommerce-chart__body-column {
flex-direction: column;
}
}
2018-08-08 11:00:45 +00:00
.woocommerce-chart__footer {
width: 100%;
.woocommerce-legend {
&.woocommerce-legend__direction-column {
height: 100%;
min-height: none;
2018-09-05 11:20:12 +00:00
border-right: none;
margin-bottom: $gap;
}
}
}
svg {
overflow: visible;
}
.tooltip {
2018-09-05 11:20:12 +00:00
border: 1px solid $core-grey-light-700;
position: absolute;
display: flex;
2018-09-04 13:03:46 +00:00
min-width: 324px;
height: auto;
background-color: $white;
text-align: left;
2018-09-04 13:03:46 +00:00
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;
pointer-events: none;
visibility: hidden;
h4 {
2018-09-04 13:03:46 +00:00
text-align: left;
line-height: 18px;
width: 100%;
2018-09-04 13:03:46 +00:00
text-transform: uppercase;
font-size: 11px;
color: $core-grey-dark-300;
2018-09-04 13:03:46 +00:00
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;
2018-09-04 13:03:46 +00:00
&.key-row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.key-container {
width: 100%;
min-width: 100px;
2018-09-07 12:45:29 +00:00
.key-color {
2018-09-04 13:03:46 +00:00
display: inline-block;
2018-09-05 11:20:12 +00:00
width: 16px;
height: 16px;
2018-09-04 13:03:46 +00:00
margin-right: 8px;
}
.key-key {
margin-right: 6px;
}
}
.key-value {
font-weight: 600;
}
}
}
}
}
.bargroup {
&rect {
shape-rendering: crispEdges;
}
}
.grid {
2018-09-04 11:31:18 +00:00
.tick {
line {
2018-09-05 11:20:12 +00:00
stroke: $core-grey-light-500;
2018-09-04 11:31:18 +00:00
stroke-width: 1;
shape-rendering: crispEdges;
}
&:first-child {
line {
stroke: $core-grey-dark-500;
}
}
2018-09-04 13:03:46 +00:00
&:last-child {
line {
opacity: 0;
}
}
}
}
.tick {
padding-top: 10px;
2018-07-25 14:58:32 +00:00
stroke-width: 1;
}
.y-axis {
2018-09-07 10:28:02 +00:00
text-anchor: start;
&.tick {
&text {
fill: $core-grey-dark-500;
}
}
}
2018-07-25 14:58:32 +00:00
line {
&.focus-grid {
2018-09-05 11:20:12 +00:00
stroke: $core-grey-light-700;
2018-07-25 14:58:32 +00:00
stroke-width: 1px;
}
}
&.is-placeholder {
@include placeholder();
height: 200px;
width: 100%;
padding: 0;
}
2018-07-25 14:58:32 +00:00
}
.woocommerce-chart__interval-select {
align-items: start;
border-right: 1px solid $core-grey-light-700;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 0 auto;
min-height: 50px;
2018-09-26 22:15:16 +00:00
padding: 8px $gap 0 $gap;
@include breakpoint( '<782px' ) {
padding: 0 $gap;
margin-top: -8px;
}
.rtl & {
margin: 0 auto 0 0;
border-right: 0;
border-left: 1px solid $core-grey-light-700;
@include breakpoint( '<782px' ) {
border-left: 0;
}
}
@include breakpoint( '<782px' ) {
border-right: 0;
min-height: 0;
order: 1;
width: 100%;
}
#wpbody & .components-select-control__input {
@include font-size( 13 );
border: 0;
box-shadow: none;
}
}
.woocommerce-chart__types {
padding: 0 8px;
}
2018-07-25 14:58:32 +00:00
.woocommerce-chart__container {
position: relative;
width: 100%;
.tooltip {
position: absolute;
}
}
.woocommerce-legend {
2018-08-13 11:09:44 +00:00
color: $black;
display: flex;
height: 100%;
margin: 0;
&.woocommerce-legend__direction-column {
flex-direction: column;
2018-09-05 11:20:12 +00:00
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 {
2018-09-04 13:18:15 +00:00
padding: 0;
margin: 0;
button {
2018-09-04 13:18:15 +00:00
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 {
2018-09-07 09:21:52 +00:00
background-color: $core-grey-light-100;
}
}
}
button {
2018-08-13 10:32:08 +00:00
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 {
2018-07-25 14:58:32 +00:00
background-color: $core-grey-light-200;
}
}
}
.woocommerce-legend__item-checkmark {
border: 1px solid $core-grey-light-900;
position: absolute;
top: 2px;
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;
}
}
}
}
}
}