mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
84dbae6e39
We use tabular (not lining) figures everywhere else that we display counts, so that they don’t shift around as the AJAX updates the numbers. There’s a good explanation of the difference here: https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures
182 lines
3.2 KiB
SCSS
182 lines
3.2 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include bold-19;
|
|
color: $button-colour;
|
|
display: block;
|
|
padding: govuk-spacing(3);
|
|
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
|
|
text-align: left;
|
|
position: relative;
|
|
clear: both;
|
|
border: 5px solid $button-colour;
|
|
|
|
&-title {
|
|
@include bold-24;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.list-bullet {
|
|
@include copy-19;
|
|
}
|
|
|
|
}
|
|
|
|
%banner-with-tick,
|
|
.banner-with-tick {
|
|
padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
|
|
background-image: file-url('tick.png');
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: govuk-spacing(3) govuk-spacing(3);
|
|
|
|
}
|
|
|
|
.banner-default-with-tick {
|
|
@extend %banner;
|
|
@extend %banner-with-tick;
|
|
}
|
|
|
|
.banner-dangerous {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background: $white;
|
|
color: $text-colour;
|
|
border: 5px solid $error-colour;
|
|
margin: 15px 0;
|
|
text-align: left;
|
|
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.list {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tour {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
padding: govuk-spacing(6);
|
|
height: 425px;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
|
|
border: 0;
|
|
|
|
.heading-medium {
|
|
@include core-24;
|
|
}
|
|
|
|
p {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: govuk-spacing(6);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -1 * govuk-spacing(3);
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
font-weight: bold;
|
|
display: block;
|
|
padding: 0 ;
|
|
margin: 0 0 govuk-spacing(6) 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
color: $govuk-focus-text-colour;
|
|
outline: 10px solid $yellow;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: $link-hover-colour;
|
|
outline: 10px solid $link-hover-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.greyed-out-step {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-dashboard {
|
|
|
|
$baseline-shift: 5px;
|
|
|
|
display: block; // for browsers that don't support flexbox
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
|
|
border-top: 1px solid $border-colour;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin-bottom: govuk-spacing(6);
|
|
text-decoration: none;
|
|
|
|
&:focus {
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
&-count,
|
|
&-meta {
|
|
float: left; // for browsers that don't support flexbox
|
|
}
|
|
|
|
&-count {
|
|
@include govuk-font(36, $weight: bold, $tabular: true);
|
|
padding-right: 8px;
|
|
position: relative;
|
|
// remove the top of the extra line-height this introduces
|
|
top: $baseline-shift;
|
|
margin-top: -$baseline-shift;
|
|
flex: 0 1 0.85ch;
|
|
}
|
|
|
|
&-count-label {
|
|
@include govuk-font(24, $weight: bold);
|
|
text-decoration: underline;
|
|
padding-right: govuk-spacing(6);
|
|
margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
|
|
flex: 2 1 auto;
|
|
}
|
|
|
|
&-meta {
|
|
@include govuk-font(19);
|
|
float: right;
|
|
text-align: right;
|
|
flex: initial;
|
|
}
|
|
|
|
& + .banner-dashboard {
|
|
margin-top: -1 * govuk-spacing(6);
|
|
border-top: none;
|
|
}
|
|
}
|