Files
notifications-admin/app/assets/stylesheets/components/big-number.scss
Katie Smith d9aeac4dca Add new platform admin page
Added a new platform admin page, at '/plaform-admin-new' which shows
different data. This no longer offers the option to filter by test-key,
only by date, and also gives a more detailed break-down of the
notifications and failures sent with a normal / research key.

The existing platform admin stats page ('/platform-admin') has not been
deleted yet so that both pages can be compared.
2018-06-29 15:31:40 +01:00

169 lines
2.4 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-dark {
@extend %big-number;
padding: $gutter-half;
position: relative;
background: $black;
color: $white;
.big-number-number {
@include bold-36($tabular-numbers: true);
}
}
.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;
}
}
}