mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-15 07:18:58 -04:00
1412933356
Numbers over a billion overflow the two column layout. Numbers over one hundred thousand overflow the three column layout. This commit makes the type size smaller in these cases, so that the numbers still fit in the boxes.
157 lines
2.2 KiB
SCSS
157 lines
2.2 KiB
SCSS
%big-number,
|
|
.big-number {
|
|
|
|
display: block;
|
|
|
|
&-number {
|
|
@include bold-48($tabular-numbers: true);
|
|
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($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-with-status {
|
|
|
|
@extend %big-number;
|
|
position: relative;
|
|
margin-bottom: $gutter-two-thirds;
|
|
|
|
.big-number,
|
|
.big-number-smaller {
|
|
padding: $gutter-half;
|
|
position: relative;
|
|
background: $black;
|
|
color: $white;
|
|
}
|
|
|
|
.big-number-label {
|
|
|
|
padding-bottom: 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $link-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-link {
|
|
|
|
text-decoration: none;
|
|
background: $link-colour;
|
|
color: $white;
|
|
display: block;
|
|
border: 2px solid $link-colour;
|
|
margin-bottom: 5px;
|
|
|
|
&:hover {
|
|
|
|
color: $light-blue-25;
|
|
|
|
.big-number {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.big-number,
|
|
.big-number-smaller {
|
|
background: transparent;
|
|
}
|
|
|
|
.big-number-label {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
}
|
|
|
|
%big-number-status,
|
|
.big-number-status {
|
|
|
|
@include core-19;
|
|
display: block;
|
|
background: $green;
|
|
color: $white;
|
|
padding: 15px;
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active,
|
|
&:hover {
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
color: $black;
|
|
border-bottom: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-status-failing {
|
|
@extend %big-number-status;
|
|
background: $error-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-meta-wrapper {
|
|
|
|
position: relative;
|
|
margin: $gutter-half 0 $gutter 0;
|
|
background: $govuk-blue;
|
|
|
|
.big-number-meta {
|
|
|
|
padding: ($gutter / 3) $gutter-half;
|
|
color: $white;
|
|
pointer-events: none;
|
|
|
|
@include media(desktop) {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
right: 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|