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

483 lines
9.4 KiB
SCSS

/** @format */
// Set up some local color variables to make the CSS more clear
$outer-border: $core-grey-light-700;
$inner-border: $core-grey-light-500;
// A local mixin to generate the grid template and border logic
@mixin make-cols( $i ) {
grid-template-columns: repeat($i, 1fr);
.woocommerce-summary__item-container:nth-of-type(#{$i}n) .woocommerce-summary__item {
border-right-color: $outer-border;
}
}
@mixin wrap-contents() {
.woocommerce-summary__item-value,
.woocommerce-summary__item-delta {
min-width: 100%;
}
.woocommerce-summary__item-prev-label,
.woocommerce-summary__item-prev-value {
display: block;
}
}
@mixin reset-wrap() {
.woocommerce-summary__item-value,
.woocommerce-summary__item-delta {
min-width: auto;
}
.woocommerce-summary__item-prev-label,
.woocommerce-summary__item-prev-value {
display: inline;
}
}
.woocommerce-summary {
margin: $gap 0;
display: grid;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: $outer-border;
background-color: $core-grey-light-300;
box-shadow: inset -1px -1px 0 $outer-border;
@include breakpoint( '<782px' ) {
&.is-placeholder {
border-top: 0;
}
.woocommerce-summary__item-container.is-placeholder {
border-top: 1px solid $outer-border;
}
}
// Specificity
.components-popover.components-popover {
// !important to override element-level styles
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-top: 0 !important;
margin-left: 0;
.components-popover__header {
display: none;
}
.components-popover__content {
position: static;
left: auto;
right: auto;
margin: 0;
width: 100%;
max-width: 100% !important;
max-height: 100% !important;
box-shadow: none;
border: none;
transform: none;
.woocommerce-summary__item.is-selected {
display: none;
}
}
}
.components-popover__content & {
max-height: 100%;
margin-top: 0;
margin-bottom: 0;
overflow-y: scroll;
border: none;
}
.woocommerce-summary__item-data {
display: flex;
flex-wrap: wrap;
}
.woocommerce-summary__item-value,
.woocommerce-summary__item-delta {
flex: 1 0 auto;
}
.woocommerce-summary__item-delta {
flex: 0 1 auto;
display: flex;
flex-wrap: none;
}
&,
&.has-one-item,
&.has-1-items {
grid-template-columns: 1fr;
}
&.has-2-items {
@include make-cols( 2 );
}
&.has-3-items {
@include make-cols( 3 );
}
&.has-4-items,
&.has-7-items,
&.has-8-items {
@include make-cols( 4 );
}
&.has-5-items,
&.has-9-items,
&.has-10-items {
@include make-cols( 5 );
@include wrap-contents;
}
&.has-6-items {
@include make-cols( 6 );
@include wrap-contents;
}
@include breakpoint( '<1440px' ) {
&.has-4-items,
&.has-7-items,
&.has-8-items {
@include wrap-contents;
}
&.has-6-items,
&.has-9-items {
@include make-cols( 3 );
@include reset-wrap;
}
&.has-10-items {
@include make-cols( 4 );
}
&.has-9-items,
&.has-10-items {
.woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item {
border-right-color: $inner-border;
}
}
}
@include breakpoint( '<960px' ) {
.woocommerce-summary__item {
// One-col layout for all items means right border is always "outer"
border-right-color: $outer-border;
}
}
@include breakpoint( '<782px' ) {
.woocommerce-summary__item-container.is-dropdown-button,
.woocommerce-summary__item-container:only-child {
margin-left: -16px;
margin-right: -16px;
width: auto;
.woocommerce-summary__item {
// Remove the border when the button is edge-to-edge
border-right: none;
}
}
.components-popover.components-popover {
margin-left: -16px;
margin-right: -16px;
.woocommerce-summary__item-container {
margin-left: 0;
margin-right: 0;
}
}
}
}
.woocommerce-summary__item-container {
margin-bottom: 0;
width: 100%;
&:last-of-type .woocommerce-summary__item {
// Make sure the last item always uses the outer-border color.
border-right-color: $outer-border !important;
}
&.is-dropdown-button {
padding: 0;
list-style: none;
border-bottom: 1px solid $outer-border;
border-right: 1px solid $outer-border;
.components-button {
text-align: left;
display: block;
}
@include breakpoint( '<782px' ) {
border-right: none;
}
}
&.is-placeholder {
.woocommerce-summary__item-label {
@include placeholder();
display: inline-block;
height: 16px;
max-width: 110px;
width: 70%;
}
.woocommerce-summary__item-data {
justify-content: space-between;
}
.woocommerce-summary__item-value,
.woocommerce-summary__item-prev-value {
@include placeholder();
display: inline-block;
height: 16px;
max-width: 140px;
width: 80%;
}
.woocommerce-summary__item-delta-value {
@include placeholder();
display: inline-block;
height: 16px;
width: 20px;
}
}
}
// IE11 doesn't auto-position grid children, so their position must be set manually
.has-1-items .woocommerce-summary__item-container {
@include set-grid-item-position( 1, 1 );
}
.has-2-items .woocommerce-summary__item-container {
@include set-grid-item-position( 2, 2 );
}
.has-3-items .woocommerce-summary__item-container {
@include set-grid-item-position( 3, 3 );
}
.has-4-items .woocommerce-summary__item-container {
@include set-grid-item-position( 4, 4 );
}
.has-5-items .woocommerce-summary__item-container {
@include set-grid-item-position( 5, 5 );
}
.has-6-items .woocommerce-summary__item-container {
@include set-grid-item-position( 6, 6 );
@include breakpoint( '<1440px' ) {
@include set-grid-item-position( 3, 6 );
}
}
.has-7-items .woocommerce-summary__item-container {
@include set-grid-item-position( 4, 7 );
}
.has-8-items .woocommerce-summary__item-container {
@include set-grid-item-position( 4, 8 );
}
.has-9-items .woocommerce-summary__item-container {
@include set-grid-item-position( 5, 9 );
@include breakpoint( '<1440px' ) {
@include set-grid-item-position( 3, 9 );
}
}
.has-10-items .woocommerce-summary__item-container {
@include set-grid-item-position( 5, 10 );
@include breakpoint( '<1440px' ) {
@include set-grid-item-position( 4, 10 );
}
}
@include breakpoint( '<960px' ) {
@for $i from 1 through 10 {
.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: #{$i};
grid-row-end: #{$i+1};
}
}
}
.woocommerce-summary__item {
display: block;
height: 100%;
padding: $spacing;
background-color: $core-grey-light-100;
border-bottom: 1px solid $outer-border;
border-right: 1px solid $inner-border;
text-decoration: none;
&:hover {
background-color: $core-grey-light-200;
}
&:active {
background-color: $core-grey-light-300;
}
&:focus {
// !important to override button styles
box-shadow: inset -2px -2px 0 $black, inset 2px 2px 0 $black !important;
}
&.is-selected {
margin-top: -1px;
height: calc(100% + 1px); // Hack to avoid double border
&:focus {
// !important to override button styles
box-shadow: inset -2px -2px 0 $black, inset 2px 2px 0 $black, inset 0 4px 0 $woocommerce !important;
}
}
.is-dropdown-button & {
position: relative;
width: 100%;
padding-right: 2 * $gap + 24px;
@include breakpoint( '<782px' ) {
border-right: none;
}
}
.woocommerce-summary__item-label {
display: block;
margin-bottom: $gap;
@include font-size( 11 );
text-transform: uppercase;
color: $core-grey-dark-300;
}
.woocommerce-summary__item-value {
margin-bottom: $gap-smallest;
@include font-size( 18 );
font-weight: 500;
color: $core-grey-dark-900;
}
.woocommerce-summary__item-delta {
margin-bottom: $gap-small;
@include font-size( 18 );
font-weight: 300;
color: $core-grey-dark-500;
}
&.is-selected {
background: $white;
box-shadow: inset 0 4px 0 $woocommerce;
.woocommerce-summary__item-value {
font-weight: 600;
}
.woocommerce-summary__item-delta {
font-weight: 400;
}
}
&.is-good-trend .woocommerce-summary__item-delta {
color: $valid-green;
}
&.is-bad-trend .woocommerce-summary__item-delta {
color: $error-red;
}
.woocommerce-summary__item-delta-icon {
vertical-align: middle;
margin-right: 3px;
fill: currentColor;
&.gridicons-arrow-up {
transform: rotate(45deg);
}
&.gridicons-arrow-down {
transform: rotate(-45deg);
}
}
.woocommerce-summary__item-prev-label,
.woocommerce-summary__item-prev-value {
@include font-size( 13 );
color: $core-grey-dark-500;
}
.woocommerce-summary__toggle {
position: absolute;
top: 44px;
right: $gap;
@include animate-transform;
}
.is-dropdown-expanded & {
.woocommerce-summary__toggle {
transform: rotate(-180deg);
}
}
.components-popover__content & {
.woocommerce-summary__item-label {
margin-bottom: 0;
}
.woocommerce-summary__item-value,
.woocommerce-summary__item-delta {
@include font-size( 13 );
margin-bottom: 0;
}
.woocommerce-summary__item-prev-label,
.woocommerce-summary__item-prev-value {
@include font-size( 11 );
}
}
}
.woocommerce-card {
.woocommerce-summary {
background-color: $core-grey-light-100;
border: none;
}
.woocommerce-summary__item {
background-color: $white;
&:hover {
background-color: $core-grey-light-200;
}
&:active {
background-color: $core-grey-light-300;
}
}
.woocommerce-summary__item.is-selected {
margin-top: 0;
box-shadow: none;
}
}