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

64 lines
1.1 KiB
SCSS
Raw Normal View History

/** @format */
.woocommerce-card {
margin-bottom: $gap-large;
background: white;
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
border: 1px solid $core-grey-light-700;
2018-08-30 23:02:12 +00:00
@include breakpoint( '<782px' ) {
margin-left: -16px;
margin-right: -16px;
margin-bottom: $gap-small;
border-left: none;
border-right: none;
width: auto;
}
}
.woocommerce-card__header {
padding: ($gap - 3) $gap;
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
border-bottom: 1px solid $core-grey-light-700;
display: grid;
align-items: center;
.has-action & {
grid-template-columns: auto 1fr;
}
.has-menu & {
grid-template-columns: auto 24px;
}
.has-menu.has-action & {
grid-template-columns: auto 1fr 48px;
}
}
.woocommerce-card__header-item {
@include set-grid-item-position( 3, 3 );
-ms-grid-row-align: center;
}
.woocommerce-card__action,
.woocommerce-card__menu {
text-align: right;
}
.woocommerce-card__body {
padding: $gap;
}
2018-06-27 21:58:37 +00:00
.woocommerce-ellipsis-menu__toggle {
padding: 0;
}
.woocommerce-card__title {
margin: 0 $gap 0 0;
// EllipsisMenu is 24px, so to match we add 6px padding around the
// heading text, which we know is 18px from line-height.
padding: 3px 0;
@include font-size( 15 );
line-height: 1.2;
2018-06-27 21:58:37 +00:00
font-weight: 600;
}