mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
22e904fb01
* Update colours and icons for summary panels * add h1 id for aria referencing * rework layout to use flex box & not floats * move summary styles to own component scss file * now functions correctly in RTL mode
65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
.w-summary {
|
|
@include nice-padding();
|
|
|
|
// set up responsive font size for icon and number as local custom property
|
|
--w-summary-item-font-size: clamp(
|
|
theme('fontSize.30') * 1.5,
|
|
6.5vw,
|
|
calc(theme('fontSize.30') * 3)
|
|
);
|
|
|
|
color: theme('colors.secondary.DEFAULT');
|
|
margin-bottom: theme('spacing.8');
|
|
padding-top: theme('spacing.8');
|
|
|
|
.w-summary__list {
|
|
@include unlist();
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Summary item */
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
flex-wrap: nowrap;
|
|
margin-bottom: theme('spacing.6');
|
|
}
|
|
|
|
/* Summary icon */
|
|
.icon {
|
|
font-size: var(--w-summary-item-font-size);
|
|
height: 1em;
|
|
margin-inline-end: 0.15em;
|
|
width: 1em;
|
|
}
|
|
|
|
/* Summary label (a link, use parent colours ) */
|
|
a {
|
|
color: inherit;
|
|
text-align: start;
|
|
|
|
/* Summary big number */
|
|
> span {
|
|
display: block;
|
|
font-size: calc(var(--w-summary-item-font-size) * 0.6);
|
|
font-weight: theme('fontWeight.bold');
|
|
line-height: 0.9em; // label underneath to come in tight against the number
|
|
}
|
|
}
|
|
}
|
|
|
|
// Media for Windows High Contrast Mode
|
|
@media (forced-colors: $media-forced-colours) {
|
|
.w-summary {
|
|
.icon {
|
|
color: $system-color-link-text;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|