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

167 lines
2.6 KiB
SCSS
Raw Normal View History

/** @format */
.woocommerce-table {
.woocommerce-card__body {
padding: 0;
padding-bottom: $gap;
}
.woocommerce-card__action,
.woocommerce-card__menu {
justify-self: flex-end;
}
&.has-compare {
.woocommerce-card__action {
text-align: left;
display: grid;
width: 100%;
grid-template-columns: auto 1fr auto;
}
}
}
.woocommerce-table__caption {
@include font-size( 24 );
text-align: left;
}
.woocommerce-table__table {
overflow-x: auto;
margin-bottom: $gap;
table {
border-collapse: collapse;
width: 100%;
}
tr:hover,
tr:focus-within {
background-color: $core-grey-light-200;
}
}
.woocommerce-table__header,
.woocommerce-table__item {
@include font-size( 13 );
padding: $gap $gap-large;
border-bottom: 1px solid $core-grey-light-500;
text-align: left;
a {
display: block;
margin: ($gap*-1) ($gap-large*-1);
padding: $gap $gap-large;
&:hover,
&:focus {
color: $woocommerce-700;
}
&:focus {
box-shadow: none;
}
}
.is-placeholder {
@include placeholder();
display: inline-block;
height: 16px;
max-width: 120px;
width: 80%;
}
&.is-numeric {
text-align: right;
button {
justify-content: flex-end;
}
.is-placeholder {
max-width: 40px;
}
}
}
.woocommerce-table__header,
th.woocommerce-table__item {
font-weight: bold;
white-space: nowrap;
}
.woocommerce-table__header {
padding: $gap-smaller $gap-large;
background-color: #f8f9fa;
border-bottom: 1px solid $core-grey-light-700;
& + .woocommerce-table__header {
border-left: 1px solid $core-grey-light-700;
}
.components-button.is-button {
height: auto;
width: 100%;
padding: $gap-smaller $gap-large $gap-smaller 0;
vertical-align: middle;
line-height: 1;
border: none;
background: transparent;
box-shadow: none !important;
// @todo Add interactive styles
&:hover {
box-shadow: none !important;
}
&:active {
box-shadow: none !important;
}
}
&.is-sortable {
padding: 0;
.gridicon {
visibility: hidden;
margin-left: $gap-smallest;
}
&.is-sorted .components-button,
.components-button:hover,
.components-button:focus {
.gridicon {
visibility: visible;
}
}
}
}
.woocommerce-table__summary {
margin: $gap 0;
text-align: center;
}
.woocommerce-table__summary-item {
display: inline-block;
margin-bottom: 0;
.woocommerce-table__summary-label,
.woocommerce-table__summary-value {
display: inline-block;
}
.woocommerce-table__summary-label {
margin-left: $gap-smallest;
}
.woocommerce-table__summary-value {
font-weight: 600;
}
& + .woocommerce-table__summary-item:before {
content: '/';
margin: 0 $gap-smallest;
}
}