mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04:00
a0f6956eab
These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same.
121 lines
1.6 KiB
SCSS
121 lines
1.6 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();
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smallest {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-24();
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-with-status {
|
|
|
|
@extend %big-number;
|
|
position: relative;
|
|
margin-bottom: $gutter-half;
|
|
|
|
.big-number {
|
|
padding: $gutter-half;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|