Files
notifications-admin/app/assets/stylesheets/views/history.scss
Katie Smith bc83ff6c09 Replace $gutter with govuk-spacing function
Replaced `$gutter` and similar variables such as `$gutter-half` with the
`govuk-spacing()` static spacing function. This uses `govuk-spacing()`
instead of `$govuk-gutter` because `$govuk-gutter` should only be used
for the gaps in between grid columns and we were mostly using `$gutter`
to add more space around elements.

There are other places in the SCSS files where we had hardcoded a
measurement in px which could be replaced with `govuk-spacing`, but this
commit only replaces the existing uses of `$gutter`.
2020-03-06 11:11:41 +00:00

96 lines
1.6 KiB
SCSS

$item-top-padding: govuk-spacing(3);
.history-list {
@include core-19;
margin-bottom: govuk-spacing(6);
&-item {
padding: $item-top-padding 0 govuk-spacing(3) 0;
border-top: 1px solid $border-colour;
position: relative;
&:last-child {
border-bottom: 1px solid $border-colour;
}
.page-footer {
margin-bottom: 5px;
}
}
&-user {
display: block;
}
&-time {
display: block;
color: $secondary-text-colour;
}
&-percentage {
$axis-thickness: 2px;
border-bottom: $axis-thickness solid $black;
position: relative;
margin-bottom: 35px;
height: 35px;
&:before,
&:after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
height: 10px;
width: $axis-thickness;
background: $black;
}
&:after {
left: auto;
right: 0;
}
&-without-border {
position: relative;
padding-top: 35px;
}
&-marker {
$size: 20px;
$border-thickness: 7px;
$text-width: 100px;
display: block;
width: $size;
height: $size;
position: absolute;
top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
margin-left: 0 - ($size / 2) - $border-thickness;
background: $black;
border-radius: $size;
border: $border-thickness solid $white;
}
&-left-label,
&-right-label {
width: 100%;
position: absolute;
top: 0;
}
&-left-label {
left: 0;
}
&-right-label {
right: 0;
text-align: right;
}
}
}