mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-24 01:49:15 -04:00
6d349b514c
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.
64 lines
1.2 KiB
SCSS
64 lines
1.2 KiB
SCSS
$indicator-colour: $black;
|
|
|
|
%task-list-indicator {
|
|
@include bold-16;
|
|
display: inline-block;
|
|
padding: 3px 8px 1px 8px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: $gutter - 2px;
|
|
margin-top: -15px;
|
|
border: 2px solid $indicator-colour;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
min-width: 20%;
|
|
text-align: center;
|
|
}
|
|
|
|
.task-list {
|
|
|
|
border-top: 1px solid $border-colour;
|
|
margin: $gutter 0;
|
|
|
|
&-item {
|
|
|
|
position: relative;
|
|
|
|
a {
|
|
border-bottom: 1px solid $border-colour;
|
|
display: block;
|
|
padding: $gutter-half 0;
|
|
padding-right: 20%;
|
|
position: relative;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
|
|
border-color: transparent;
|
|
top: -1px;
|
|
margin-bottom: -2px;
|
|
padding-top: $gutter-half + 1px;
|
|
padding-bottom: $gutter-half + 1px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-indicator-completed {
|
|
@extend %task-list-indicator;
|
|
background-color: $indicator-colour;
|
|
color: $grey-4;
|
|
// Just a pinch of letter spacing to make reversed-out text a bit
|
|
// easier to read
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
&-indicator-not-completed {
|
|
@extend %task-list-indicator;
|
|
background-color: $white;
|
|
color: $indicator-colour;
|
|
}
|
|
|
|
}
|