mirror of
https://github.com/discourse/discourse.git
synced 2024-12-24 22:34:39 +08:00
fae6ffcf06
Introduces a new component used to show a grid of stats on any page, mostly used for dashboards and config pages. This component yields a hash with a `Tile` component property, and the caller can loop through their stats and display them using this component. Each stat needs a @label and a @value at minimum, but can also pass in a @tooltip and a @url.
27 lines
499 B
SCSS
27 lines
499 B
SCSS
.d-stat-tiles {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1em;
|
|
margin-bottom: 2em;
|
|
|
|
.d-stat-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1em;
|
|
background: var(--primary-very-low);
|
|
border-radius: 0.25em;
|
|
|
|
&__label {
|
|
color: var(--primary-medium);
|
|
font-size: 0.875em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
&__value {
|
|
color: var(--primary);
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|