mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
dc941bc9bc
Giving all links the GOVUK Frontend classes, and the new `govuk-link--destructive` class, means some styles are already applied. This strips out those styles. Note: there's still a good amount of styling, most of which is to make the focus styles specific to the space the link is in. These will need reviewing when GOVUK Frontend is bumped past version 3 as this brings in new focus styles.
182 lines
3.0 KiB
SCSS
182 lines
3.0 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include bold-19;
|
|
color: $button-colour;
|
|
display: block;
|
|
padding: $gutter-half;
|
|
margin: $gutter-half 0 $gutter 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: $gutter-half ($gutter + $gutter-half);
|
|
background-image: file-url('tick.png');
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: $gutter-half $gutter-half;
|
|
|
|
}
|
|
|
|
.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: $gutter;
|
|
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: $gutter;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -$gutter-half;
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
font-weight: bold;
|
|
display: block;
|
|
padding: 0 ;
|
|
margin: 0 0 $gutter 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: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
|
|
border-top: 1px solid $border-colour;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin-bottom: $gutter;
|
|
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);
|
|
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: -$gutter;
|
|
border-top: none;
|
|
}
|
|
}
|