mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 18:28:26 -04:00
281c54b80b
With sending, delivered and failed all on one line there’s not much space. When these numbers get relatively big (in the 000s) they can start mushing into each other. This commit makes them smaller so that they remain separate.
111 lines
1.5 KiB
SCSS
111 lines
1.5 KiB
SCSS
%big-number,
|
|
.big-number {
|
|
|
|
display: block;
|
|
|
|
&-number {
|
|
@include bold-48;
|
|
display: block;
|
|
}
|
|
|
|
&-label {
|
|
@include core-19;
|
|
display: inline-block;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smaller {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-36($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smallest {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-24();
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-with-status {
|
|
|
|
@extend %big-number;
|
|
background: $text-colour;
|
|
color: $white;
|
|
position: relative;
|
|
margin-bottom: $gutter-half;
|
|
|
|
.big-number {
|
|
padding: 15px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.big-number-overlay-link {
|
|
|
|
background: transparent;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&:hover {
|
|
background: rgba($text-colour, 0.2);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-label {
|
|
|
|
padding-bottom: 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid $white;
|
|
}
|
|
|
|
}
|
|
|
|
%big-number-status,
|
|
.big-number-status {
|
|
|
|
@include core-19;
|
|
display: block;
|
|
background: $green;
|
|
padding: 15px;
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active,
|
|
&:hover {
|
|
color: $white;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid $white;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-status-failing {
|
|
@extend %big-number-status;
|
|
background: $error-colour;
|
|
}
|
|
|
|
}
|