mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-30 03:08:56 -04:00
- Removed links to the gov uk stylesheets
- Deleted /stylesheets folder - Removed sass build from gulpfile - Changed gov links to usa links - Changed other govuk styles, like breadcrumbs - Changed name of uk_components file to us_components - Fixed a few tests that broke on account of the changes
This commit is contained in:
Jonathan Bobel
@@ -76,7 +76,7 @@
|
||||
Try again later.
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
You can check our <a class="govuk-link govuk-link--no-visited-state"
|
||||
You can check our <a class="usa-link"
|
||||
href="https://status.notifications.service.gov.uk/">system status</a> page to see if there are any known
|
||||
issues.<br />To report a problem, email <a
|
||||
href="mailto:gov-uk-notify-support@digital.cabinet-office.gov.uk">gov-uk-notify-support@digital.cabinet-office.gov.uk</a>
|
||||
|
||||
@@ -41,20 +41,6 @@ h1 {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.sub-content {
|
||||
h1,
|
||||
h2:not(.get-started-list__heading, .usa-process-list__heading) {
|
||||
margin-top: units(4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2:not(.get-started-list__heading, .usa-process-list__heading),
|
||||
h3 {
|
||||
margin-top: units(5);
|
||||
margin-bottom: units(2);
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
.list li {
|
||||
font-family: family("sans");
|
||||
@@ -134,11 +120,6 @@ td.table-empty-message {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.sub-content .banner-dangerous h1,
|
||||
.sub-content h2.user-list-item-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.user-list-edit-link:active:before,
|
||||
.user-list-edit-link:focus:before {
|
||||
box-shadow: none;
|
||||
@@ -229,3 +210,18 @@ td.table-empty-message {
|
||||
font-size: units(3);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.usa-hero {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.usa-prose {
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: family("sans");
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-service.usa-breadcrumb {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
|
||||
.govuk-grid-column-one-sixth {
|
||||
@include govuk-grid-column(one-sixth, $class: false);
|
||||
}
|
||||
|
||||
.govuk-grid-column-five-sixths {
|
||||
@include govuk-grid-column(five-sixths, $class: false);
|
||||
}
|
||||
|
||||
.govuk-grid-column-one-eighth {
|
||||
@include govuk-grid-column(one-eighth, $class: false);
|
||||
}
|
||||
|
||||
.govuk-grid-column-five-eighths {
|
||||
@include govuk-grid-column(five-eighths, $class: false);
|
||||
}
|
||||
|
||||
.govuk-grid-column-seven-eighths {
|
||||
@include govuk-grid-column(seven-eighths, $class: false);
|
||||
}
|
||||
|
||||
%top-gutter,
|
||||
.top-gutter {
|
||||
@extend %contain-floats;
|
||||
display: block;
|
||||
margin-top: govuk-spacing(6);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.top-gutter-4-3 {
|
||||
@extend %top-gutter;
|
||||
margin-top: govuk-spacing(7);
|
||||
}
|
||||
|
||||
.top-gutter-1-2 {
|
||||
@extend %top-gutter;
|
||||
margin-top: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.top-gutter-1-3 {
|
||||
@extend %top-gutter;
|
||||
margin-top: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.top-gutter-2-3 {
|
||||
@extend %top-gutter;
|
||||
margin-top: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.top-gutter-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
%bottom-gutter,
|
||||
.bottom-gutter {
|
||||
@extend %contain-floats;
|
||||
margin-bottom: govuk-spacing(6);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.bottom-gutter-2-3 {
|
||||
@extend %bottom-gutter;
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.bottom-gutter-1-2 {
|
||||
@extend %bottom-gutter;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.bottom-gutter-1-3 {
|
||||
@extend %bottom-gutter;
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.bottom-gutter-3-2 {
|
||||
@extend %bottom-gutter;
|
||||
margin-bottom: govuk-spacing(6) * 3/2;
|
||||
}
|
||||
|
||||
.bottom-gutter-2 {
|
||||
@extend %bottom-gutter;
|
||||
margin-bottom: govuk-spacing(9);
|
||||
}
|
||||
|
||||
.left-gutter {
|
||||
padding-left: govuk-spacing(6);
|
||||
}
|
||||
|
||||
.left-gutter-4-3 {
|
||||
padding-left: govuk-spacing(7);
|
||||
}
|
||||
|
||||
.align-with-heading {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 13px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.align-with-heading-copy {
|
||||
display: block;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.align-with-heading-copy-right {
|
||||
display: block;
|
||||
margin: 21px 0 19px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-with-big-number-hint {
|
||||
margin-top: govuk-spacing(8);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
// Copy of _url-helpers.scss in govuk_frontend_toolkit
|
||||
// to prepend the path to where we store images
|
||||
|
||||
@function file-url($file) {
|
||||
$url: '';
|
||||
@if $path {
|
||||
$url: url($path + $file);
|
||||
} @else {
|
||||
$url: url($file);
|
||||
}
|
||||
@return $url;
|
||||
}
|
||||
@@ -1,255 +0,0 @@
|
||||
// Extra CSS overlaying elements
|
||||
.form-control-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-control-5em {
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include media(tablet) {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.column-main {
|
||||
|
||||
.heading-large,
|
||||
> .heading-medium {
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(4) 0;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.top-gutter-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-family: monospace;
|
||||
overflow-x: scroll;
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
.inline {
|
||||
|
||||
.block-label {
|
||||
|
||||
@include media(tablet) {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.heading-xlarge {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.heading-medium {
|
||||
margin-top: govuk-spacing(6);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.heading-small {
|
||||
@include bold-19();
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: $secondary-text-colour;
|
||||
|
||||
.form-label + & {
|
||||
display: block;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-bullet {
|
||||
|
||||
.list-bullet {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
details summary {
|
||||
text-decoration: underline;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.spreadsheet {
|
||||
|
||||
margin-bottom: -1 * govuk-spacing(6);
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
.table-field-index {
|
||||
background: $grey-4;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: 1px solid $border-colour;
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
border-top: 0;
|
||||
// 194 is the width of the table * 1/3.5, so the overflow cuts off
|
||||
// at 3.5 columns wide.
|
||||
// 11 accounts for the padding of the table cell
|
||||
min-width: 194px - 11px;
|
||||
|
||||
&:first-child {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fullscreen-fixed-table {
|
||||
|
||||
z-index: 1000;
|
||||
|
||||
.table-field-heading-first {
|
||||
background: $grey-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.body-copy-table {
|
||||
|
||||
table {
|
||||
|
||||
th,
|
||||
td {
|
||||
@include core-19;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
@include bold-19;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabular-numbers {
|
||||
@include core-19($tabular-numbers: true);
|
||||
}
|
||||
|
||||
summary::-moz-details-marker {
|
||||
display: none;
|
||||
}
|
||||
summary::-ms-details-marker {
|
||||
display: none;
|
||||
}
|
||||
summary::-o-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary::details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details .arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.block-label-hint {
|
||||
@include core-16;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.multiple-choice input:disabled+label {
|
||||
opacity: 1;
|
||||
color: $secondary-text-colour;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.heading-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bordered-text-box {
|
||||
padding: 5px;
|
||||
outline: 2px solid $black;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.heading-upcoming-jobs {
|
||||
margin-top: govuk-spacing(3);
|
||||
}
|
||||
|
||||
@keyframes live-pulse {
|
||||
0% {
|
||||
background: $red;
|
||||
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
||||
}
|
||||
40% {
|
||||
background: $red;
|
||||
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
||||
}
|
||||
50% {
|
||||
background: $white;
|
||||
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 2px $white;
|
||||
}
|
||||
100% {
|
||||
background: $white;
|
||||
box-shadow: inset 0 0 0 2px $red, inset 0 0 0 4px $white;
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill::first-line {
|
||||
@include core-19;
|
||||
}
|
||||
|
||||
.pilot-disabled {
|
||||
a {
|
||||
background-color: gray;
|
||||
border-color: gray;
|
||||
|
||||
span {
|
||||
color: lightgray;
|
||||
}
|
||||
}
|
||||
.big-number-status {
|
||||
background-color: gray;
|
||||
border-color: gray;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
& > * {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
.area-list {
|
||||
|
||||
display: inline;
|
||||
|
||||
&-item {
|
||||
|
||||
display: inline-block;
|
||||
border: 2px solid $black;
|
||||
// Create space for the remove link on the right of the list item (including borders)
|
||||
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
|
||||
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
||||
position: relative;
|
||||
|
||||
&-remove {
|
||||
|
||||
display: block; // fallback for browsers that don't support flexbox
|
||||
display: flex;
|
||||
// center SVG vertically and horizontally
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -2px; // cover list-item border-top
|
||||
right: -2px; // cover list-item border-right
|
||||
bottom: -2px; // cover list-item border-bottom
|
||||
width: 37px;
|
||||
padding: 0;
|
||||
border: 2px solid $govuk-blue;
|
||||
border-left: none;
|
||||
text-align: center;
|
||||
font-size: inherit; // counter govuk-button styles
|
||||
line-height: 36px; // match area-list-item for browsers that don't support flexbox
|
||||
|
||||
// set styles so they don't get overriden by govuk-button styles
|
||||
&,
|
||||
&:hover {
|
||||
background: $govuk-blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
// set styles so they don't get overriden by govuk-button styles
|
||||
&:active {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
// The box-shadow that separates the remove link from the list item is hidden in
|
||||
// high contrast mode. Remake using a border instead
|
||||
// Also sets text colour to match govuk-button
|
||||
@media (-ms-high-contrast: active), (forced-colors: active) {
|
||||
|
||||
&:link,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus:not(:active):not(:hover) {
|
||||
border-left: 2px solid $govuk-blue;
|
||||
color: LinkText;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// set styles so they don't get overriden by govuk-button styles
|
||||
&,
|
||||
&:focus,
|
||||
&:focus:not(:active):not(:hover) {
|
||||
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
|
||||
}
|
||||
|
||||
// set styles so they don't get overriden by govuk-button styles
|
||||
&:focus,
|
||||
&:focus:not(:active):not(:hover) {
|
||||
border-color: $black;
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
background-color: $govuk-focus-colour;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// show outline to make focus visible when background colours are overridden
|
||||
@media (-ms-high-contrast: active), (forced-colors: active) {
|
||||
|
||||
// set styles so they don't get overriden by govuk-button styles
|
||||
&:focus:not(:active):not(:hover) {
|
||||
outline: 3px solid transparent;
|
||||
}
|
||||
|
||||
// override hover styles when focused, to preserve dimensions and outline
|
||||
&:focus:hover {
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: govuk-spacing(1) * 1.5;
|
||||
}
|
||||
|
||||
&--unremoveable {
|
||||
padding-right: govuk-spacing(2);
|
||||
background: $light-blue-25;
|
||||
color: mix($black, $govuk-blue, 66%);
|
||||
border-color: $light-blue-25;
|
||||
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--smaller {
|
||||
@include bold-16;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.govuk-button--secondary {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#area-list-map {
|
||||
z-index: 50;
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.area-list-key {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: govuk-spacing(3);
|
||||
margin-bottom: govuk-spacing(4);
|
||||
height: govuk-spacing(7);
|
||||
padding-left: govuk-spacing(8);
|
||||
line-height: govuk-spacing(7);
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
&--certain {
|
||||
&:before {
|
||||
border: 2px solid $black;
|
||||
background: $light-blue-50;
|
||||
}
|
||||
}
|
||||
|
||||
&--likely {
|
||||
&:before {
|
||||
padding: 1px;
|
||||
border: 2px dashed $govuk-blue;
|
||||
border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
|
||||
background: $light-blue-25;
|
||||
}
|
||||
}
|
||||
|
||||
&--phone-estimate {
|
||||
padding-left: govuk-spacing(1);
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.area-list-map-details {
|
||||
|
||||
.govuk-details__summary {
|
||||
display: block;
|
||||
padding-top: govuk-spacing(1);
|
||||
padding-bottom: govuk-spacing(1);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.govuk-details__text {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
%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;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
%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 $govuk-focus-colour;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&-no-fixed-height {
|
||||
height: auto;
|
||||
padding-top: govuk-spacing(8);
|
||||
min-height: 425px;
|
||||
}
|
||||
|
||||
&-with-service-name {
|
||||
margin-top: -10px;
|
||||
padding-top: 0;
|
||||
box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
|
||||
}
|
||||
|
||||
.heading-medium {
|
||||
@include core-24;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: govuk-spacing(6);
|
||||
color: $white;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& + p {
|
||||
margin-top: -1 * govuk-spacing(3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
@include core-24;
|
||||
color: $white;
|
||||
margin-bottom: govuk-spacing(5);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: govuk-spacing(3);
|
||||
list-style-type: disc;
|
||||
margin-left: govuk-spacing(6);
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
padding: 0 ;
|
||||
margin: 0 0 govuk-spacing(6) 0;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $link-hover-colour;
|
||||
box-shadow: 0 0 0 10px $link-hover-colour;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $govuk-focus-text-colour;
|
||||
background-color: $govuk-focus-colour;
|
||||
box-shadow: 0 0 0 10px $govuk-focus-colour, 0 4px 0 10px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: -1 * govuk-spacing(2);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
%big-number,
|
||||
.big-number {
|
||||
|
||||
display: block;
|
||||
|
||||
&-number,
|
||||
&-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-number {
|
||||
@include bold-48($tabular-numbers: true);
|
||||
}
|
||||
|
||||
&-label {
|
||||
@include core-19;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pill .big-number-number {
|
||||
|
||||
// reduce padding until screen is bigger than 420px / zoomed below 300%
|
||||
padding-left: govuk-spacing(1);
|
||||
|
||||
@include govuk-media-query($from: 420px) {
|
||||
padding-left: govuk-spacing(2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.big-number-dark {
|
||||
@extend %big-number;
|
||||
padding: govuk-spacing(3);
|
||||
position: relative;
|
||||
background: $black;
|
||||
color: $white;
|
||||
|
||||
.big-number-number {
|
||||
@include bold-36($tabular-numbers: true);
|
||||
}
|
||||
}
|
||||
|
||||
.big-number-smaller {
|
||||
|
||||
@extend %big-number;
|
||||
|
||||
.big-number-number {
|
||||
@include bold-36($tabular-numbers: true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.big-number-smallest {
|
||||
|
||||
@extend %big-number;
|
||||
|
||||
.big-number-number {
|
||||
@include bold-24($tabular-numbers: true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.big-number-with-status {
|
||||
|
||||
@extend %big-number;
|
||||
position: relative;
|
||||
margin-bottom: govuk-spacing(4);
|
||||
|
||||
.big-number,
|
||||
.big-number-smaller {
|
||||
padding: govuk-spacing(3);
|
||||
position: relative;
|
||||
background: $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.big-number,
|
||||
.big-number-number,
|
||||
.big-number-smaller,
|
||||
.big-number-label {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $govuk-focus-colour;
|
||||
border: none;
|
||||
padding: 2px; /* replace the spacing the border gave */
|
||||
/* override the default focus style to inset the underline */
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
|
||||
.big-number-number,
|
||||
.big-number-smaller,
|
||||
.big-number-label {
|
||||
color: $govuk-focus-text-colour;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.big-number,
|
||||
.big-number-smaller {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.big-number-status-failing {
|
||||
@extend %big-number-status;
|
||||
background: $error-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.big-number-meta-wrapper {
|
||||
|
||||
position: relative;
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
|
||||
background: $govuk-blue;
|
||||
|
||||
.big-number-meta {
|
||||
|
||||
padding: govuk-spacing(2) govuk-spacing(3);
|
||||
color: $white;
|
||||
pointer-events: none;
|
||||
|
||||
@include media(desktop) {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.browse-list {
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
.browse-sub-list {
|
||||
margin-top: govuk-spacing(3);
|
||||
margin-left: govuk-spacing(6);
|
||||
@include media('desktop') {
|
||||
margin-left: govuk-spacing(9);
|
||||
}
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-sub-item {
|
||||
@include bold-24;
|
||||
list-style: none;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
}
|
||||
|
||||
&-link {
|
||||
@include govuk-font(24, $weight: bold);
|
||||
}
|
||||
|
||||
&-hint {
|
||||
@include core-19;
|
||||
margin: 5px 0 10px 0;
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
// Taken from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/_checkboxes.scss
|
||||
$govuk-touch-target-size: 44px;
|
||||
$govuk-checkboxes-size: 40px;
|
||||
|
||||
.selection-summary {
|
||||
|
||||
.selection-summary__text {
|
||||
@include core-19($tabular-numbers: true);
|
||||
padding: 5px 0 0 0;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-summary__text--folders {
|
||||
padding: 10px 15px 5px 51px;
|
||||
background-image: file-url('folder-black.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 39px auto;
|
||||
background-position: 0px 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.checkboxes-nested {
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
.multiple-choice {
|
||||
|
||||
$circle-diameter: 39px;
|
||||
$border-thickness: 4px;
|
||||
$border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
|
||||
$border-colour: $border-colour;
|
||||
|
||||
float: none;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $border-indent;
|
||||
width: $border-thickness;
|
||||
height: 100%;
|
||||
background: $border-colour;
|
||||
}
|
||||
|
||||
label {
|
||||
float: none;
|
||||
}
|
||||
|
||||
[type=checkbox]+label::before {
|
||||
// To overlap the grey inset line
|
||||
background: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
// To equalise the spacing between the line and the top/bottom of
|
||||
// the radio
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.govuk-form-group--nested {
|
||||
|
||||
$border-thickness: $govuk-touch-target-size - $govuk-checkboxes-size;
|
||||
$border-indent: $govuk-touch-target-size / 2;
|
||||
|
||||
position: relative;
|
||||
|
||||
// To equalise the spacing between the line and the top/bottom of
|
||||
// the radio
|
||||
margin-top: govuk-spacing(1) + ($border-thickness / 2);
|
||||
margin-bottom: govuk-spacing(1) * -1;
|
||||
padding-left: govuk-spacing(2) + 2;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $border-indent * -1;
|
||||
width: $border-thickness;
|
||||
height: 100%;
|
||||
background: $govuk-border-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-content {
|
||||
margin-bottom: govuk-spacing(4);
|
||||
|
||||
.checkboxes-nested {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.selection-footer__button {
|
||||
// revert full-width button for smaller screens
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// styles specific to the collapsible checkboxes module
|
||||
.selection-wrapper {
|
||||
fieldset:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
$border-thickness: 4px;
|
||||
$top-spacing: govuk-spacing(5);
|
||||
|
||||
.multiple-choice {
|
||||
|
||||
z-index: 10;
|
||||
|
||||
.block-label {
|
||||
&:before {
|
||||
box-shadow: 0 5px 0 0 $white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conditional-radios {
|
||||
|
||||
&-panel {
|
||||
border-left: $border-thickness solid $border-colour;
|
||||
margin: 0 0 (-1 * govuk-spacing(3)) (govuk-spacing(3) + ($border-thickness / 2));
|
||||
padding: govuk-spacing(3) 0 0 (govuk-spacing(6) - ($border-thickness / 2));
|
||||
position: relative;
|
||||
top: -$top-spacing;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
.content-metadata {
|
||||
@include govuk-font(16);
|
||||
@include govuk-clearfix;
|
||||
@include govuk-responsive-margin(5, "bottom");
|
||||
color: $govuk-text-colour;
|
||||
margin-top: 15px;
|
||||
|
||||
.content-metadata__term,
|
||||
.content-metadata__definition {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.content-metadata__term {
|
||||
margin-top: .5em;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
clear: left;
|
||||
padding-right: govuk-spacing(1);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-metadata__definition {
|
||||
margin: 0;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-metadata__suffix {
|
||||
margin-top: 0.628em;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
.copy-to-clipboard {
|
||||
|
||||
position: relative;
|
||||
padding-bottom: 38px; // height of button
|
||||
display: flex;
|
||||
|
||||
&__name {
|
||||
@include bold-19;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__notice,
|
||||
&__value {
|
||||
font-family: monospace;
|
||||
display: block;
|
||||
padding: 0 0 10px 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
&__button--show,
|
||||
&__button--copy {
|
||||
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 0px;
|
||||
|
||||
&:active {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
$white-50-opaque: rgba($white, 0.5);
|
||||
$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
|
||||
$email-message-gutter: govuk-spacing(9);
|
||||
|
||||
// sass-lint:disable no-important
|
||||
|
||||
.email-message {
|
||||
|
||||
margin-bottom: govuk-spacing(6);
|
||||
border: 1px solid $border-colour;
|
||||
|
||||
&-meta {
|
||||
|
||||
@include core-19;
|
||||
margin: 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
@include core-19;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $secondary-text-colour;
|
||||
padding-left: $email-message-gutter;
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
width: 99%;
|
||||
padding-right: $email-message-gutter;
|
||||
word-break: break-word;
|
||||
|
||||
&:last-child {
|
||||
padding-right: $email-message-gutter;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-from {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: govuk-spacing(3) $email-message-gutter 0 $email-message-gutter;
|
||||
margin: 0 0 0 0;
|
||||
clear: both;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
|
||||
table {
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
.js-enabled {
|
||||
.file-upload {
|
||||
&-label {
|
||||
@include bold-19;
|
||||
display: block;
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
.error-message {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
// &:focus + .file-upload-button {
|
||||
// background: $govuk-focus-colour;
|
||||
// color: $govuk-focus-text-colour;
|
||||
// }
|
||||
}
|
||||
|
||||
&-filename {
|
||||
@include bold-19;
|
||||
display: inline-block;
|
||||
padding-left: govuk-spacing(3);
|
||||
}
|
||||
|
||||
&-submit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-alternate-link {
|
||||
display: inline-block;
|
||||
line-height: 35px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
.fullscreen {
|
||||
|
||||
&-content {
|
||||
|
||||
background: $white;
|
||||
z-index: 10;
|
||||
overflow-y: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 govuk-spacing(6) 0;
|
||||
padding: 0 0 0 0;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
|
||||
.table {
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
tr:last-child {
|
||||
td {
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
th,
|
||||
.table-field-error-label,
|
||||
.table-field-left-aligned {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-right-shadow {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
z-index: 200;
|
||||
|
||||
&.visible {
|
||||
|
||||
&.with-transition {
|
||||
transition: box-shadow 0.6s ease-out;
|
||||
}
|
||||
|
||||
box-shadow: inset -1px 0 0 0 $border-colour, inset -3px 0 0 0 rgba($border-colour, 0.2);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-scrollable-table {
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
.table-field-heading-first,
|
||||
.table-field-index {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-field-left-aligned {
|
||||
position: relative;
|
||||
z-index: 150;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 11px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
border: 2px solid $white;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: $white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-fixed-table {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.table-field-heading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.table-field-left-aligned {
|
||||
width: 0;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.table-field-heading-first,
|
||||
.table-field-index {
|
||||
transition: none;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-scrolled-table {
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
.table-field-heading-first,
|
||||
.table-field-index {
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
box-shadow: 1px 0 0 0 $border-colour, 3px 0 0 0 rgba($border-colour, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-shim {
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
margin-bottom: 30px;
|
||||
pointer-events: none;
|
||||
|
||||
& + .table-show-more-link {
|
||||
margin-top: -28px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.js-focus-style {
|
||||
outline: 3px solid $govuk-focus-text-colour;
|
||||
box-shadow: 0 0 0 7px $govuk-focus-colour;
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
.input-list {
|
||||
|
||||
.list-entry {
|
||||
vertical-align: middle;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
|
||||
// move the left border, signifying the error, out of the main column
|
||||
.govuk-form-group--error {
|
||||
margin-left: ($govuk-border-width + $govuk-gutter-half) * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__button--remove,
|
||||
&__button--add {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&__button--remove {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 5px;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
|
||||
@include media(tablet) {
|
||||
@include inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__button--add {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
input[type=search] {
|
||||
// overrides this nasty global from GOV.UK template
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.live-search {
|
||||
|
||||
display: none;
|
||||
|
||||
.js-enabled & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: govuk-spacing(4);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
&:after {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
animation: ellipsis steps(4,end) 1.5s infinite;
|
||||
content: "\2026"; // ellipsis
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,314 +0,0 @@
|
||||
$app-body-text-line-height-default: get-govuk-typography-style($size: 19, $breakpoint: null, $property: "line-height");
|
||||
$app-body-text-line-height-tablet: get-govuk-typography-style($size: 19, $breakpoint: tablet, $property: "line-height");
|
||||
|
||||
@mixin separator {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
height: govuk-spacing(6);
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
bottom: 1px;
|
||||
right: 7px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin: auto 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
border: solid;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: $secondary-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
$govuk-checkboxes-size: 40px;
|
||||
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
|
||||
$message-type-bottom-spacing: govuk-spacing(4);
|
||||
|
||||
a {
|
||||
|
||||
&:hover .message-name-separator:before {
|
||||
border-color: $link-hover-colour;
|
||||
}
|
||||
|
||||
.message-name-separator {
|
||||
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
|
||||
&:before {
|
||||
border-color: $link-colour;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-name-separator {
|
||||
@include separator;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
|
||||
&-item {
|
||||
|
||||
&-with-checkbox {
|
||||
padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
|
||||
}
|
||||
|
||||
&-hidden-by-default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-without-ancestors {
|
||||
|
||||
a {
|
||||
|
||||
display: block;
|
||||
|
||||
&:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.template-list-folder:first-of-type {
|
||||
background-position: 0 2px;
|
||||
padding-left: 0;
|
||||
text-indent: 35px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
text-indent: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-list-template,
|
||||
.template-list-folder {
|
||||
|
||||
position: relative; /* contain absolutely positioned ::before pseudo element*/
|
||||
display: block; /* fill horizontal space to allow hint/meta below to float */
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: -1 * $app-body-text-line-height-default; /* extend link by line height of hint/meta so it covers it */
|
||||
width: 100%;
|
||||
height: $app-body-text-line-height-default;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
bottom: -1 * $app-body-text-line-height-tablet;
|
||||
height: $app-body-text-line-height-tablet;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&,
|
||||
&::before {
|
||||
background-color: $govuk-focus-colour;
|
||||
}
|
||||
|
||||
&,
|
||||
& + .template-list-item-hint,
|
||||
.message-type {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
&::before {
|
||||
box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
& + .template-list-item-hint,
|
||||
& + .message-type {
|
||||
position: relative; /* needs to be non-static to have a z-index above the link :before element */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Fix for GOVUK Frontend selector with high precendence
|
||||
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
|
||||
&-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
|
||||
margin-bottom: $message-type-bottom-spacing;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-folder,
|
||||
&-template {
|
||||
@include govuk-font($size: 24, $weight: bold, $line-height: 1.5);
|
||||
@include govuk-media-query($from: tablet) {
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
&-folder {
|
||||
|
||||
display: inline;
|
||||
padding-left: 35px;
|
||||
background-image: file-url('folder-blue-bold.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 20px;
|
||||
background-position: 0px 4px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: file-url('folder-blue-bold-hover.svg');
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-image: file-url('folder-black-bold.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-template {
|
||||
a {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&-empty {
|
||||
color: $secondary-text-colour;
|
||||
padding: govuk-spacing(3) 0 govuk-spacing(2) 0;
|
||||
}
|
||||
|
||||
&-selected-counter {
|
||||
color: $secondary-text-colour;
|
||||
margin: govuk-spacing(3) 0;
|
||||
|
||||
@include media(tablet) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: govuk-spacing(6) - 1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content-fixed__bottom & {
|
||||
right: govuk-spacing(3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sticky-template-form {
|
||||
|
||||
padding: govuk-spacing(3);
|
||||
margin: govuk-spacing(3) * -1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.folder-heading {
|
||||
|
||||
.govuk-grid-row & {
|
||||
margin: govuk-spacing(3) 0 20px 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a,
|
||||
&-folder,
|
||||
&-subfolder {
|
||||
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 20px;
|
||||
background-position: 0px 4px;
|
||||
min-height: 30px;
|
||||
|
||||
}
|
||||
|
||||
&-folder {
|
||||
padding: 0 0 0 40px;
|
||||
background-image: file-url('folder-black-bold.svg');
|
||||
}
|
||||
|
||||
&-folder-truncated {
|
||||
width: 0;
|
||||
padding: 0 0 0 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-folder-root-truncated {
|
||||
max-width: 1.4em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
&.folder-heading-folder {
|
||||
|
||||
display: inline;
|
||||
background-image: file-url('folder-blue-bold.svg');
|
||||
background-position: 0px 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-image: file-url('folder-blue-bold-hover.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.folder-heading-folder-truncated {
|
||||
display: inline-block;
|
||||
background-position: 0px 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-separator {
|
||||
@include separator;
|
||||
}
|
||||
|
||||
&-manage-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: govuk-spacing(4) 0 0 0;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
.navigation {
|
||||
|
||||
@include govuk-font($size: 19);
|
||||
padding: 0 govuk-spacing(6) 0 0;
|
||||
|
||||
$padding-top: 14px;
|
||||
$padding-bottom: 11px;
|
||||
|
||||
&-service-name,
|
||||
&-organization-link {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
// aligning to the baseline with overflow: hidden adds to the parent's height
|
||||
// aligning to the top doesn't
|
||||
// see: https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below#answer-51088033
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-service-type {
|
||||
|
||||
@include bold-16;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: govuk-spacing(2);
|
||||
padding: 0 govuk-spacing(1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&--training {
|
||||
background: $grey-3;
|
||||
color: mix($grey-1, $text-colour);
|
||||
box-shadow: 0 -3px 0 0 $grey-3;
|
||||
}
|
||||
|
||||
&--suspended {
|
||||
background: $grey-3;
|
||||
color: mix($grey-1, $text-colour);
|
||||
box-shadow: 0 -3px 0 0 $grey-3;
|
||||
}
|
||||
|
||||
&--live,
|
||||
&--test,
|
||||
&--operator {
|
||||
// This uses new Design System colours to match .govuk-tag--red
|
||||
background: #F6D7D2;
|
||||
color: #942514;
|
||||
box-shadow: 0 -3px 0 0 #F6D7D2;
|
||||
}
|
||||
|
||||
&--government {
|
||||
background: #942514;
|
||||
color: #F6D7D2;
|
||||
box-shadow: 0 -3px 0 0 #942514;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-service-switch,
|
||||
&-service-back-to,
|
||||
&-organization-link {
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none; // override the :hover style (the focus style has its own underline)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-service {
|
||||
|
||||
@include govuk-font($size: 19);
|
||||
border-bottom: 1px solid $border-colour;
|
||||
margin: 0 0 10px;
|
||||
position: relative;
|
||||
|
||||
&-name {
|
||||
|
||||
padding: $padding-top 0 $padding-bottom 0;
|
||||
max-width: 50%;
|
||||
|
||||
}
|
||||
|
||||
&-switch {
|
||||
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $padding-top 0 $padding-bottom govuk-spacing(3);
|
||||
|
||||
&:focus {
|
||||
padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
|
||||
/* override default focus style to inset bottom underline */
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-back-to {
|
||||
|
||||
padding: $padding-top govuk-spacing(3) $padding-bottom 0;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-organization-link {
|
||||
|
||||
max-width: 25%;
|
||||
padding: $padding-top 20px $padding-bottom 0;
|
||||
margin-right: 5px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: 1px;
|
||||
right: 2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: auto 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
border: solid;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
&:focus:before {
|
||||
border-color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
// hack to make the focus style fit in the navigation bar
|
||||
&:focus {
|
||||
box-shadow: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
// override the :hover style (the focus style has its own underline)
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@include bold-19;
|
||||
position: relative;
|
||||
// These two lines stop the width of the item jumping so much
|
||||
// between selected and unselected states
|
||||
left: -0.5px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
|
||||
.sub-navigation {
|
||||
@include media(tablet) {
|
||||
margin-top: govuk-spacing(6) * 1.5;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin-top: govuk-spacing(2);
|
||||
border-top: 1px $grey-3 solid;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
@include core-16;
|
||||
|
||||
border-bottom: 1px $grey-3 solid;
|
||||
display: block;
|
||||
padding: govuk-spacing(2) 0;
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ol ol & {
|
||||
padding-left: govuk-spacing(6);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item--active {
|
||||
@include bold-16;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $text-colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
.page-footer {
|
||||
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&-link {
|
||||
|
||||
line-height: 40px;
|
||||
padding: 1px 0 0 15px;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
&-delete-link-without-button {
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-secondary-link {
|
||||
display: block;
|
||||
margin-top: govuk-spacing(6);
|
||||
}
|
||||
|
||||
&-right-aligned-link {
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 9px; // align baseline with buttons
|
||||
|
||||
&-without-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.js-cancel {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__button--centred {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-form__button {
|
||||
@include media(desktop) {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
left: -30px;
|
||||
width: 100%;
|
||||
margin-right: -30px;
|
||||
padding-top: 9px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&:active {
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
.pill {
|
||||
|
||||
display: flex;
|
||||
|
||||
&-item__container {
|
||||
width: 25%;
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
|
||||
/*
|
||||
For browsers that don’t support flexbox, use float instead.
|
||||
Float does not create floating of flex item, and do not take it
|
||||
out-of-flow. So this is ignored by browsers that support flexbox.
|
||||
See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
|
||||
*/
|
||||
float: left;
|
||||
/*
|
||||
Setting this as a flex container means the contents (1 item)
|
||||
will fill the vertical space due to `align-items` defaulting
|
||||
to `stretch`.
|
||||
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prop-align-items
|
||||
*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-item--selected {
|
||||
display: flex; // float causes display: block in browsers without flexbox
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-item {
|
||||
$background: $link-colour;
|
||||
background: $background;
|
||||
color: $white;
|
||||
border: 2px solid $background;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
z-index: 10;
|
||||
color: $govuk-focus-text-colour;
|
||||
/* override default focus styles to inset bottom underline */
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
border: none;
|
||||
padding: 12px 2px; /* compensate for lack of border with padding */
|
||||
}
|
||||
}
|
||||
|
||||
&-item--selected {
|
||||
background: inherit;
|
||||
border: 2px solid $black;
|
||||
outline: 1px solid rgba($white, 0.1);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-text-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: govuk-tint($govuk-text-colour, 25%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
z-index: 1000;
|
||||
color: $govuk-focus-text-colour;
|
||||
border: solid 2px $black;
|
||||
padding: 10px 0px; /* reset padding to default */
|
||||
box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-item__label {
|
||||
|
||||
text-decoration: underline;
|
||||
// reduce padding until screen is above 420px / zoomed below 300%
|
||||
padding-left: govuk-spacing(1);
|
||||
|
||||
@include govuk-media-query($from: 420px) {
|
||||
padding-left: govuk-spacing(2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-item--selected {
|
||||
&:focus .pill-item__label {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item--centered {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pill-separate {
|
||||
|
||||
&-item {
|
||||
|
||||
display: block;
|
||||
text-align: left;
|
||||
padding: 9px (govuk-spacing(3) - 1);
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
background: $link-colour;
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:link:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
text-decoration: none;
|
||||
background: $govuk-focus-colour;
|
||||
/* override default focus style to inset bottom underline */
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
%placeholder,
|
||||
.placeholder {
|
||||
|
||||
display: inline;
|
||||
background: $govuk-focus-colour;
|
||||
color: $text-colour;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
border-radius: 20px;
|
||||
box-shadow: inset 0.47em 0 0 0 $white, inset -0.47em 0 0 0 $white, inset 0 -0.15em 0 0 $white, inset 0 0.15em 0 0 $white;
|
||||
|
||||
.sms-message-wrapper & {
|
||||
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.placeholder-no-brackets {
|
||||
@extend %placeholder;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
border-radius: 1px;
|
||||
box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 0 0 $white;
|
||||
}
|
||||
|
||||
.placeholder-conditional {
|
||||
|
||||
@extend %placeholder;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;
|
||||
|
||||
.sms-message-wrapper & {
|
||||
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.placeholder-redacted {
|
||||
|
||||
background: currentColor;
|
||||
padding: 0 0.5em;
|
||||
opacity: 0.8;
|
||||
box-shadow: inset 0 -0.35em 0 0 $white;
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
|
||||
.sms-message-wrapper & {
|
||||
box-shadow: inset 0 -0.35em 0 0 $panel-colour;
|
||||
}
|
||||
|
||||
*:focus + p & {
|
||||
box-shadow: inset 0 -0.35em 0 0 $govuk-focus-colour;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
.branding-preview {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px $border-colour;
|
||||
min-height: 200px;
|
||||
margin-bottom: govuk-spacing(6)
|
||||
}
|
||||
|
||||
#logo-img {
|
||||
background-color: $grey-4;
|
||||
background-image: linear-gradient(45deg, $grey-3 25%, transparent 25%), linear-gradient(-45deg, $grey-3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $grey-3 75%), linear-gradient(-45deg, transparent 75%, $grey-3 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
.radio-select {
|
||||
|
||||
min-height: 39px;
|
||||
|
||||
&__column {
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.multiple-choice {
|
||||
padding-right: 10px;
|
||||
padding-left: 54px - 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__button--category {
|
||||
|
||||
margin-right: govuk-spacing(3);
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
&__button--done {
|
||||
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 0 0 govuk-spacing(6) 0;
|
||||
position: relative;
|
||||
top: govuk-spacing(3);
|
||||
|
||||
&:active {
|
||||
top: govuk-spacing(3) + 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.js-enabled & {
|
||||
|
||||
overflow: visible;
|
||||
|
||||
.multiple-choice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js-multiple-choice {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.radios-nested {
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
.multiple-choice {
|
||||
|
||||
$circle-diameter: 39px;
|
||||
$border-thickness: 4px;
|
||||
$border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
|
||||
$border-colour: $border-colour;
|
||||
|
||||
float: none;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $border-indent;
|
||||
width: $border-thickness;
|
||||
height: 100%;
|
||||
background: $border-colour;
|
||||
}
|
||||
|
||||
label {
|
||||
float: none;
|
||||
}
|
||||
|
||||
[type=radio]+label::before {
|
||||
// To overlap the grey inset line
|
||||
background: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
// To equalise the spacing between the line and the top/bottom of
|
||||
// the radio
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.block-label-hint {
|
||||
&:after {
|
||||
// Adds an little extra segment of line alongside the ‘current folder’
|
||||
// hint so that it extends all the way down to the next radio
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: $circle-diameter + 5px;
|
||||
left: $border-indent;
|
||||
width: $border-thickness;
|
||||
height: 25px;
|
||||
background: $border-colour;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.inline {
|
||||
.multiple-choice {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-slider {
|
||||
|
||||
border-bottom: 2px solid $black;
|
||||
height: 18px;
|
||||
margin-bottom: 18px + 30px;
|
||||
margin-right: -18px;
|
||||
margin-left: -18px;
|
||||
white-space: nowrap;
|
||||
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.govuk-radios__item {
|
||||
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
width: 38px;
|
||||
margin-right: calc((100% - (38px * 11)) / 10);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-left-value {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-right-value {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.research-mode {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: $govuk-blue;
|
||||
color: $white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
%show-more,
|
||||
.show-more {
|
||||
|
||||
@include core-16;
|
||||
display: block;
|
||||
padding: 0 0;
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid $border-colour;
|
||||
|
||||
&:focus {
|
||||
|
||||
border-color: transparent;
|
||||
/* override default focus style to increase top yellow box-shadow */
|
||||
box-shadow: 0 -15px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
|
||||
|
||||
span {
|
||||
outline: none;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
outline: 10px solid white;
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid $light-blue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.show-more-no-border {
|
||||
@extend %show-more;
|
||||
border-top: 1px solid transparent;
|
||||
margin-top: -5px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
#footer {
|
||||
.footer-categories {
|
||||
margin: 0 auto;
|
||||
|
||||
&-wrapper {
|
||||
margin-bottom: govuk-spacing(6);
|
||||
padding-bottom: govuk-spacing(9);
|
||||
border-bottom: 1px solid $grey-2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 20px 0;
|
||||
|
||||
@include media(tablet) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
$tail-angle: 20deg;
|
||||
|
||||
.sms-message-wrapper {
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 464px;
|
||||
box-sizing: border-box;
|
||||
padding: govuk-spacing(3);
|
||||
background: $panel-colour;
|
||||
border: 1px solid $panel-colour;
|
||||
border-radius: 5px;
|
||||
white-space: normal;
|
||||
margin: 0 0 govuk-spacing(6) 0;
|
||||
clear: both;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: -20px;
|
||||
border: 10px solid transparent;
|
||||
border-left-width: 13px;
|
||||
border-right-width: 13px;
|
||||
border-bottom-color: $panel-colour;
|
||||
border-left-color: $panel-colour;
|
||||
transform: rotate($tail-angle);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sms-message-inbound {
|
||||
|
||||
.sms-message-wrapper {
|
||||
|
||||
&:after {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: $panel-colour;
|
||||
border-right-color: $panel-colour;
|
||||
right: auto;
|
||||
left: -20px;
|
||||
transform: rotate(-$tail-angle);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sms-message-sender {
|
||||
@include copy-19;
|
||||
color: $secondary-text-colour;
|
||||
margin: 0 0 -10px 0;
|
||||
}
|
||||
|
||||
.sms-message-recipient {
|
||||
@include copy-19;
|
||||
color: $secondary-text-colour;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.sms-message-status {
|
||||
@include core-16;
|
||||
color: $secondary-text-colour;
|
||||
margin: -20px govuk-spacing(3) 20px govuk-spacing(3);
|
||||
}
|
||||
|
||||
.sms-message-status-outbound {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sms-message-row {
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
padding-top: 120px;
|
||||
margin-top: -120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sms-message-reply-link {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
// CSS adapted from
|
||||
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
|
||||
|
||||
$sticky-padding: govuk-spacing(4);
|
||||
|
||||
.js-stick-at-top-when-scrolling,
|
||||
.js-stick-at-bottom-when-scrolling {
|
||||
|
||||
overflow: hidden;
|
||||
margin-left: -1 * govuk-spacing(3);
|
||||
padding: 10px 0 0 govuk-spacing(3);
|
||||
position: relative;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
legend {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top-link {
|
||||
position: absolute;
|
||||
top: govuk-spacing(6);
|
||||
right: govuk-spacing(3);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-top-when-scrolling {
|
||||
|
||||
margin-top: -10px;
|
||||
margin-bottom: 5px;
|
||||
top: 5px;
|
||||
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-bottom-when-scrolling {
|
||||
|
||||
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
|
||||
padding: $sticky-padding 0 $sticky-padding govuk-spacing(3);
|
||||
margin-top: -$sticky-padding;
|
||||
|
||||
& + .js-stick-at-bottom-when-scrolling {
|
||||
margin-top: ($sticky-padding * 2) * -1;
|
||||
}
|
||||
|
||||
fieldset:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.notification-status {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content-fixed,
|
||||
.content-fixed-onload {
|
||||
|
||||
position: fixed;
|
||||
background: $white;
|
||||
z-index: 100;
|
||||
padding-right: govuk-spacing(3);
|
||||
margin-top: 0;
|
||||
|
||||
.back-to-top-link {
|
||||
opacity: 1;
|
||||
transition: opacity 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-top-when-scrolling.content-fixed,
|
||||
.js-stick-at-top-when-scrolling.content-fixed-onload {
|
||||
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-top-when-scrolling.content-fixed__top {
|
||||
|
||||
border-bottom: 1px solid $border-colour;
|
||||
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-top-when-scrolling.content-fixed {
|
||||
|
||||
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-bottom-when-scrolling.content-fixed,
|
||||
.js-stick-at-bottom-when-scrolling.content-fixed-onload {
|
||||
|
||||
top: auto; // cancel `top: 0;` inherited from govuk-template
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-bottom-when-scrolling.content-fixed__bottom {
|
||||
|
||||
border-top: 1px solid $border-colour;
|
||||
box-shadow: 0 -2px 0 0 rgba($border-colour, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-bottom-when-scrolling.content-fixed {
|
||||
|
||||
transition: background 0.6s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
.js-stick-at-bottom-when-scrolling-loaded.content-fixed-onload {
|
||||
|
||||
transition: none;
|
||||
|
||||
}
|
||||
|
||||
.shim {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.js-cancel {
|
||||
|
||||
display: inline-block;
|
||||
padding: 10px 10px 5px 10px;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
text-decoration: underline;
|
||||
color: $govuk-blue;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
/* override default box shadow to stop it looking so large vertically */
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,452 +0,0 @@
|
||||
.table {
|
||||
margin-bottom: govuk-spacing(6);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
text-align: left;
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
|
||||
}
|
||||
|
||||
.dashboard-table {
|
||||
|
||||
.heading-medium {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table-field-headings {
|
||||
th {
|
||||
font-size: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-field-headings-visible {
|
||||
th {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-field-heading-first {
|
||||
width: 52.5%;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
th {
|
||||
display: table-cell;
|
||||
width: 52.5%;
|
||||
font-weight: normal;
|
||||
|
||||
.hint,
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.big-number-label {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-statistics-table {
|
||||
|
||||
.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
@include core-19;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.table-field-heading-first {
|
||||
width: 52.5%;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
th {
|
||||
display: table-cell;
|
||||
width: 52.5%;
|
||||
font-weight: normal;
|
||||
|
||||
.hint,
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-template-name {
|
||||
|
||||
@include bold-24;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 10px 0 32px 0;
|
||||
margin: -10px 0 -32px 0;
|
||||
|
||||
&:focus {
|
||||
|
||||
color: $text-colour;
|
||||
|
||||
& + .template-statistics-table-hint {
|
||||
color: $text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-hint {
|
||||
@include core-19;
|
||||
color: $secondary-text-colour;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.settings-table {
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
&:first-child {
|
||||
width: 35%; // 33.33% + fudge
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 17.5% // 16.67% + fudge
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
td.table-field-left-aligned {
|
||||
|
||||
&:first-child {
|
||||
|
||||
div {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
td.table-field-wrap-text {
|
||||
|
||||
div {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.usage-table {
|
||||
|
||||
.table-field-heading-first {
|
||||
width: 35%; // 33.33% + fudge
|
||||
}
|
||||
|
||||
.table-row {
|
||||
th {
|
||||
width: 17.5% // 16.67% + fudge
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
%table-field,
|
||||
.table-field {
|
||||
|
||||
vertical-align: top;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-error {
|
||||
|
||||
border-left: 5px solid $error-colour;
|
||||
padding-left: 7px;
|
||||
display: block;
|
||||
|
||||
&-label {
|
||||
display: block;
|
||||
color: $error-colour;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-invisible-error {
|
||||
border-left: 5px solid transparent;
|
||||
padding-left: 7px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-status {
|
||||
|
||||
&-default {
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
&-error {
|
||||
|
||||
color: $error-colour;
|
||||
font-weight: bold;
|
||||
|
||||
.status-hint {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
color: $red;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-sent-international {
|
||||
|
||||
.status-hint {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-yes,
|
||||
&-no {
|
||||
display: block;
|
||||
text-indent: -999em;
|
||||
background-size: 19px 19px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
&-yes {
|
||||
background-image: file-url('tick.png');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-noborder {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
&-index {
|
||||
|
||||
@include bold-16;
|
||||
width: 15px;
|
||||
|
||||
a {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
background: $govuk-focus-colour;
|
||||
box-shadow: inset 0 -4px 0 0 $govuk-focus-text-colour;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-font-xsmall td.table-field-index { // overrides GOV.UK Elements
|
||||
@include bold-16;
|
||||
}
|
||||
|
||||
|
||||
.table-field-headings {
|
||||
|
||||
th {
|
||||
padding: 1px; /* needs some height for the grey border to show */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-field-headings-visible {
|
||||
|
||||
height: auto;
|
||||
|
||||
th {
|
||||
padding: .75em 1.25em .5625em 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-field-headings,
|
||||
.table-field-headings-visible {
|
||||
|
||||
th {
|
||||
@include bold-19;
|
||||
}
|
||||
|
||||
.dashboard-table &-first {
|
||||
width: 52.5%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-field-heading {
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-right-aligned {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-field-right-aligned {
|
||||
|
||||
@extend %table-field;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
/* remove default focus styles in favour of those for :before pseudo class */
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: -1 * govuk-spacing(3);
|
||||
right: 0;
|
||||
bottom: -1 * govuk-spacing(3) + 4px;
|
||||
left: -1 * govuk-spacing(3);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:active:before,
|
||||
&:focus:before {
|
||||
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 15px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -11px $govuk-focus-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.table-row-group {
|
||||
border-top: 1px solid $border-colour;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
}
|
||||
|
||||
.table-empty-message,
|
||||
td.table-empty-message {
|
||||
@include core-19;
|
||||
color: $secondary-text-colour;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
padding: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.table-show-more-link {
|
||||
|
||||
@include core-16;
|
||||
color: $secondary-text-colour;
|
||||
margin-bottom: govuk-spacing(7);
|
||||
border-bottom: 1px solid $border-colour;
|
||||
padding: 35px 0 10px 0;
|
||||
text-align: center;
|
||||
|
||||
.table + & {
|
||||
margin-top: -1 * govuk-spacing(6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a.table-show-more-link {
|
||||
color: $link-colour;
|
||||
}
|
||||
|
||||
.table-no-data {
|
||||
@include core-16;
|
||||
color: $secondary-text-colour;
|
||||
margin-top: 10px;
|
||||
margin-bottom: govuk-spacing(7);
|
||||
border-top: 1px solid $border-colour;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
padding: 0.75em 0 0.5625em 0;
|
||||
}
|
||||
|
||||
.wide-left-hand-column {
|
||||
display: block;
|
||||
max-width: 560px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.truncate-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.spark-bar-bar {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
$indicator-colour: $black;
|
||||
|
||||
%task-list-indicator {
|
||||
@include bold-16;
|
||||
display: inline-block;
|
||||
padding: 3px 8px 1px 8px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: govuk-spacing(6) - 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: govuk-spacing(6) 0;
|
||||
|
||||
&-item {
|
||||
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $border-colour;
|
||||
display: block;
|
||||
padding: govuk-spacing(3) 0;
|
||||
padding-right: 20%;
|
||||
position: relative;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
||||
border-color: transparent;
|
||||
top: -1px;
|
||||
margin-bottom: -2px;
|
||||
padding-top: govuk-spacing(3) + 1px;
|
||||
padding-bottom: govuk-spacing(3) + 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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
.textbox-highlight {
|
||||
|
||||
$tag-background: rgba($light-blue, 0.6);
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-textbox {
|
||||
resize: none;
|
||||
z-index: 20;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&-textbox,
|
||||
&-background,
|
||||
&-foreground,
|
||||
&-mask {
|
||||
font-size: 19px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
color: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid transparent;
|
||||
padding-bottom: govuk-spacing(3);
|
||||
z-index: 10;
|
||||
|
||||
// transparent borders become visible in high contrast modes so set to match background
|
||||
@media (-ms-high-contrast: active), (forced-colors: active) {
|
||||
border-color: Canvas;
|
||||
}
|
||||
|
||||
.placeholder,
|
||||
.placeholder-conditional {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.textbox-help-link {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.textbox-right-aligned {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.extra-tracking .govuk-input {
|
||||
@include core-19($tabular-numbers: true);
|
||||
padding-left: 5px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.textbox-colour-preview {
|
||||
@include media(desktop) {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin-left: 5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px rgba($black, 0.2);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
%tick-cross {
|
||||
@include core-19;
|
||||
display: inline-block;
|
||||
background-size: 19px 19px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 6px;
|
||||
padding: 6px 0 5px 25px;
|
||||
}
|
||||
|
||||
.tick-cross {
|
||||
|
||||
&-tick {
|
||||
@extend %tick-cross;
|
||||
background-image: file-url('tick.png');
|
||||
}
|
||||
|
||||
&-cross {
|
||||
@extend %tick-cross;
|
||||
color: $secondary-text-colour;
|
||||
background-image: file-url('cross-grey.svg');
|
||||
}
|
||||
|
||||
&-list {
|
||||
|
||||
position: relative;
|
||||
|
||||
&-permissions {
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-hint {
|
||||
color: #6F777B;
|
||||
padding-top: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
/**
|
||||
* Breadcrumbs Component
|
||||
*
|
||||
* Based on the existing breadcrumbs from GOV.UK Elements, re-implemented
|
||||
* using BEM, allowing for an `inverse` modifier (e.g. against a masthead), with
|
||||
* structured data markup, and allowing for the 'current page' to be included
|
||||
* as the last element in the breadcrumb.
|
||||
*
|
||||
* Notes:
|
||||
*
|
||||
* - Link the current page to the same place as your skip link (e.g. #main) –
|
||||
* this means that it is included by screen readers but is referred to as a
|
||||
* 'same page' link, and clicking it does not reload the page.
|
||||
* - You can test the structured data using Google's structured data testing
|
||||
* tool: https://search.google.com/structured-data/testing-tool
|
||||
*
|
||||
* Example Usage:
|
||||
*
|
||||
* <nav class="breadcrumbs" aria-label="Breadcrumbs">
|
||||
* <ol itemscope itemtype="http://schema.org/BreadcrumbList">
|
||||
* <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||||
* <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
|
||||
* </li>
|
||||
* <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||||
* <a href="#main" itemprop="item"><span itemprop="name">Product Page</span></a>
|
||||
* </li>
|
||||
* </ol>
|
||||
* </nav>
|
||||
*/
|
||||
|
||||
.breadcrumbs {
|
||||
@include govuk-width-container;
|
||||
@include core-16($line-height: (25 / 16), $line-height-640: 1.75);
|
||||
|
||||
padding: govuk-spacing(2) 0;
|
||||
list-style: none;
|
||||
|
||||
@include media(tablet) {
|
||||
margin-bottom: govuk-spacing(6);
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 (govuk-spacing(6) / 4) 0 (11px + govuk-spacing(6) / 4);
|
||||
|
||||
background-image: file-url('separator.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 6px 11px;
|
||||
background-position: left center;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
@include device-pixel-ratio(2) {
|
||||
background-image: file-url('separator-2x.png');
|
||||
}
|
||||
|
||||
&,
|
||||
a:link,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&--active {
|
||||
@include bold-16;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--inverse {
|
||||
border-bottom: 1px $white solid;
|
||||
border-bottom-color: rgba($white, 0.25);
|
||||
|
||||
.breadcrumbs__item {
|
||||
&--active,
|
||||
a:link,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
/*
|
||||
Taken from the GOV.UK component at
|
||||
https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
|
||||
and
|
||||
https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss
|
||||
*/
|
||||
|
||||
// Media query helpers. These make producing IE layouts
|
||||
// super easy.
|
||||
|
||||
// These are desktop and down media queries
|
||||
|
||||
// There is also a local version of this in Smartanswers.
|
||||
|
||||
$is-ie: false !default;
|
||||
|
||||
@mixin media-down($size: false, $max-width: false, $min-width: false) {
|
||||
@if $is-ie == false {
|
||||
@if $size == mobile {
|
||||
@media (max-width: 640px){
|
||||
@content;
|
||||
}
|
||||
} @else if $size == tablet {
|
||||
@media (max-width: 800px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-previous-and-next-navigation {
|
||||
display: block;
|
||||
margin-top: govuk-spacing(6);
|
||||
margin-bottom: govuk-spacing(6);
|
||||
margin-left: -1 * govuk-spacing(3);
|
||||
margin-right: -1 * govuk-spacing(3);
|
||||
@include govuk-clearfix;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@include core-16($line-height: (20 / 16));
|
||||
float: left;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: govuk-spacing(3);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $canvas-colour;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $govuk-focus-colour;
|
||||
}
|
||||
|
||||
.pagination-part-title {
|
||||
@include core-27($line-height: (33.75 / 27));
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.previous-page {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.next-page {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include media-down(mobile) {
|
||||
.previous-page,
|
||||
.next-page {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.next-page a {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-icon {
|
||||
display: inline-block;
|
||||
margin-bottom: 1px;
|
||||
height: .482em;
|
||||
width: .63em;
|
||||
}
|
||||
|
||||
.pagination-label {
|
||||
display: inline-block;
|
||||
margin-top: 0.1em;
|
||||
text-decoration: underline;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* Responsive Embed Component
|
||||
*
|
||||
* Notes:
|
||||
*
|
||||
* - Ensure you use either responsive-embed--16by9 or responsive-embed--4by3
|
||||
* depending on the aspect ratio of your embed.
|
||||
* - Credit: Nicolas Gallagher and SUIT CSS.
|
||||
*
|
||||
* Example Usage:
|
||||
*
|
||||
* <div class="responsive-embed responsive-embed--4by3 responsive-embed--bordered">
|
||||
* <div class="responsive-embed__wrapper">
|
||||
* <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen=""></iframe>
|
||||
* </div>
|
||||
* </div>
|
||||
*/
|
||||
|
||||
.responsive-embed {
|
||||
.responsive-embed__wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.responsive-embed__item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.responsive-embed--bordered {
|
||||
padding: 5px;
|
||||
outline: 1px solid $border-colour;
|
||||
}
|
||||
|
||||
// Modifier class for 16:9 aspect ratio
|
||||
.responsive-embed--16by9 {
|
||||
.responsive-embed__wrapper {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier class for 4:3 aspect ratio
|
||||
.responsive-embed--4by3 {
|
||||
.responsive-embed__wrapper {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
@import "settings/typography-font-families";
|
||||
|
||||
// needed for IE10 desktop snap mode: http://menacingcloud.com/?c=cssViewportOrMetaTag
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
// To be removed when all text uses the GOV.UK Frontend New Transport font styles.
|
||||
// At present, some text gets these styles due to being in a GOV.UK Frontend component
|
||||
// or a link.
|
||||
// This ensures all text will have these styles applied, until it can be moved to use
|
||||
// the GOV.UK Frontend font styles.
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.js-enabled .js-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// To be removed when all search inputs use the GOV.UK Frontend text input component:
|
||||
// https://design-system.service.gov.uk/components/text-input/
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: searchfield-cancel-button;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Each selector, and then the whole block when only one remains, to be removed when the
|
||||
// element comes from the corresponding GOV.UK Frontend component:
|
||||
// - https://design-system.service.gov.uk/components/text-input/
|
||||
// - https://design-system.service.gov.uk/components/textarea/
|
||||
// - https://design-system.service.gov.uk/components/select/
|
||||
// - https://design-system.service.gov.uk/components/button/
|
||||
|
||||
// Global styles for form controls
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: 3px solid $focus-colour;
|
||||
outline-offset: 0;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
// Version of node_modules/govuk-frontend/components/all.scss specific to Notify
|
||||
// Included to allow us to only include the components we need
|
||||
// All imports come from node_modules/govuk-frontend
|
||||
|
||||
// turn on compatibility mode for all legacy frameworks
|
||||
// https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/compatibility.md#turn-on-compatibility-mode
|
||||
// to be removed when these frameworks are removed.
|
||||
$govuk-compatibility-govukfrontendtoolkit: true;
|
||||
$govuk-compatibility-govukelements: true;
|
||||
|
||||
// set asset URL root to match that of application
|
||||
$govuk-assets-path: "/static/";
|
||||
|
||||
@import "settings/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/settings";
|
||||
@import "tools/all";
|
||||
@import "helpers/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/helpers";
|
||||
|
||||
@import "core/all";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/core";
|
||||
@import "objects/all";
|
||||
|
||||
// section replacing @import "components/all", specifying which components to include
|
||||
@import "components/skip-link/_skip-link";
|
||||
@import "components/header/_header";
|
||||
@import "components/footer/_footer";
|
||||
@import "components/back-link/_back-link";
|
||||
@import "components/button/_button";
|
||||
@import "components/details/_details";
|
||||
@import "components/radios/_radios";
|
||||
@import "components/checkboxes/_checkboxes";
|
||||
@import "components/input/_input";
|
||||
@import "components/inset-text/_inset-text";
|
||||
@import "components/textarea/_textarea";
|
||||
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/components";
|
||||
|
||||
@import "utilities/all";
|
||||
@import "overrides/all";
|
||||
|
||||
// Styles extending those from GOV.UK Frontend
|
||||
@import "./extensions";
|
||||
// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
|
||||
@import "./focus/extensions";
|
||||
|
||||
// Styles for GOV.UK Frontend components specific to this application
|
||||
@import "./overrides";
|
||||
@@ -1,96 +0,0 @@
|
||||
// Gives access to the Sass variables used in the GOVUK Frontend typographic styles
|
||||
// See: https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
|
||||
@function get-govuk-typography-style($size, $breakpoint, $property) {
|
||||
$size-map: map-get($govuk-typography-scale, $size);
|
||||
$breakpoint-map: map-get($size-map, $breakpoint);
|
||||
|
||||
@if not map-has-key($breakpoint-map, $property) {
|
||||
@error "Unknown property #{$property} - expected a property from the typography scale for #{$size}.";
|
||||
}
|
||||
|
||||
@return map-get($breakpoint-map, $property);
|
||||
}
|
||||
|
||||
// Extends footer column styles to allow 4 columns
|
||||
@include mq ($from: desktop) {
|
||||
.govuk-footer__list--columns-4 {
|
||||
// TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
|
||||
-webkit-column-count: 4;
|
||||
-moz-column-count: 4;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
// Extends govuk-link to create a class of link that causes a destructive action
|
||||
// Based on styles of link in:
|
||||
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/helpers/_links.scss
|
||||
//
|
||||
// Note: all destructive actions must have a confirmation step these links navigate to
|
||||
@mixin govuk-link-style-destructive-no-visited-state {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: govuk-tint($govuk-error-colour, 25%);
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable against the focus colour
|
||||
// Activated links are usually focused so this applies to them as well
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-link--destructive {
|
||||
@include govuk-link-style-destructive-no-visited-state;
|
||||
}
|
||||
$govuk-grid-widths: (
|
||||
one-eighth: 12.5%,
|
||||
one-sixth: 16.6666%,
|
||||
one-quarter: 25%,
|
||||
one-third: 33.3333%,
|
||||
one-half: 50%,
|
||||
five-eighths: 62.5%,
|
||||
two-thirds: 66.6666%,
|
||||
three-quarters: 75%,
|
||||
five-sixths: 83.3333%,
|
||||
seven-eighths: 87.5%,
|
||||
full: 100%
|
||||
);
|
||||
|
||||
.govuk-input--width-6 {
|
||||
max-width: 14ex;
|
||||
}
|
||||
|
||||
// extensions to govuk-input to allow numbering by label
|
||||
.govuk-input--numbered {
|
||||
padding-left: 1.84em;
|
||||
|
||||
@include media(desktop) {
|
||||
@include inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-input--numbered__label {
|
||||
float: left;
|
||||
width: 1.6em;
|
||||
margin: 8px -1.6em 0 0;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
color: $govuk-secondary-text-colour;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.govuk-input--numbered__label--error {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
||||
@include govuk-media-query(desktop) {
|
||||
bottom: 7px;
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
|
||||
// Updates to skip-link component
|
||||
.govuk-skip-link {
|
||||
@include govuk-typography-common;
|
||||
@include govuk-focusable-fill;
|
||||
}
|
||||
|
||||
// Updates to header component
|
||||
.govuk-header__link {
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
|
||||
.govuk-header__link--homepage {
|
||||
// Remove any borders that show when focused and hovered.
|
||||
&:focus {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to footer component
|
||||
.govuk-footer__link {
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
|
||||
// Updates to back-link component
|
||||
.govuk-back-link {
|
||||
@include govuk-focusable-text-link;
|
||||
|
||||
// When the back link is focused, hide the bottom link border as the
|
||||
// focus styles has a bottom border.
|
||||
&:focus {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to details component
|
||||
.govuk-details__summary {
|
||||
&:hover {
|
||||
color: $govuk-link-hover-colour;
|
||||
}
|
||||
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
|
||||
// Remove the underline when focussed to avoid duplicate borders
|
||||
.govuk-details__summary:focus .govuk-details__summary-text {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.govuk-details__summary:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Updates to buttons
|
||||
.govuk-button {
|
||||
&:focus {
|
||||
border-color: $govuk-focus-colour;
|
||||
// When colours are overridden, for example when users have a dark mode,
|
||||
// backgrounds and box-shadows disappear, so we need to ensure there's a
|
||||
// transparent outline which will be set to a visible colour.
|
||||
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
|
||||
@include govuk-not-ie8 {
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
outline-offset: 0;
|
||||
}
|
||||
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
|
||||
@include govuk-if-ie8 {
|
||||
color: $govuk-text-colour;
|
||||
background-color: $govuk-focus-colour;
|
||||
}
|
||||
box-shadow: inset 0 0 0 1px $govuk-focus-colour;
|
||||
}
|
||||
|
||||
&:focus:not(:active):not(:hover) {
|
||||
border-color: $govuk-focus-colour;
|
||||
color: $govuk-text-colour;
|
||||
background-color: $govuk-focus-colour;
|
||||
box-shadow: 0 2px 0 $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to form inputs
|
||||
.govuk-input {
|
||||
&:focus {
|
||||
// Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
|
||||
// components such as textarea where we avoid changing `border-width` as
|
||||
// it will change the element size. Also, `outline` cannot be utilised
|
||||
// here as it is already used for the yellow focus state.
|
||||
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
|
||||
}
|
||||
}
|
||||
.govuk-input--error {
|
||||
&:focus {
|
||||
border-color: $govuk-input-border-colour;
|
||||
// Remove `box-shadow` inherited from `:focus` as `input--error`
|
||||
// already has the thicker border.
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to form textareas (hacked to work with GOVUK Elements version)
|
||||
.form-control {
|
||||
@include govuk-focusable;
|
||||
|
||||
&:focus {
|
||||
// Double the border by adding its width again. Use `box-shadow` to do
|
||||
// this instead of changing `border-width` (which changes element size) and
|
||||
// since `outline` is already used for the yellow focus state.
|
||||
box-shadow: inset 0 0 0 $govuk-border-width-form-element;
|
||||
}
|
||||
}
|
||||
.form-control-error {
|
||||
&:focus {
|
||||
border-color: $govuk-input-border-colour;
|
||||
// Remove `box-shadow` inherited from `:focus` as `input--error`
|
||||
// already has the thicker border.
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Updates to form radios (hacked to work with GOVUK Elements version)
|
||||
|
||||
$govuk-radios-size: 40px;
|
||||
// When the default focus width is used on a curved edge it looks visually smaller.
|
||||
// So for the circular radios we bump the default to make it look visually consistent.
|
||||
$govuk-radios-focus-width: $govuk-focus-width + 1px;
|
||||
|
||||
// ( ) Radio ring
|
||||
.multiple-choice [type=radio] + label::before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: $govuk-radios-size;
|
||||
height: $govuk-radios-size;
|
||||
|
||||
border: $govuk-border-width-form-element solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// • Radio button
|
||||
//
|
||||
// We create the 'button' entirely out of 'border' so that they remain
|
||||
// 'filled' even when colours are overridden in the browser.
|
||||
.multiple-choice [type=radio] + label::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: govuk-spacing(2);
|
||||
left: govuk-spacing(2);
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border: govuk-spacing(2) solid currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
// Focused state (includes targeting for GOVUK radios, to apply version 3.x.x styles)
|
||||
.multiple-choice [type=radio]:focus + label::before,
|
||||
.govuk-radios__input:focus + .govuk-radios__label::before {
|
||||
border-width: 4px;
|
||||
// Since box-shadows are removed when users customise their colours we set a
|
||||
// transparent outline that is shown instead.
|
||||
// https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
outline-offset: $govuk-focus-width;
|
||||
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
||||
}
|
||||
|
||||
// Selected state
|
||||
.multiple-choice [type=radio]:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Updates to form checkboxes
|
||||
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
|
||||
// Hack to fix not being able to override the govuk-link-common mixin
|
||||
.govuk-link {
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
// (for the error summary component, which we don't use yet)
|
||||
|
||||
.govuk-link--destructive:focus {
|
||||
@include govuk-focusable-text-link;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
|
||||
// and edited in https://github.com/alphagov/govuk-frontend/pull/1455
|
||||
//
|
||||
/// Focusable with box-shadow
|
||||
///
|
||||
/// Removes the visible outline and replace with box-shadow and background colour.
|
||||
/// Used for interactive text-based elements.
|
||||
|
||||
@mixin govuk-focusable-text-link {
|
||||
&:focus {
|
||||
// When colours are overridden, for example when users have a dark mode,
|
||||
// backgrounds and box-shadows disappear, so we need to ensure there's a
|
||||
// transparent outline which will be set to a visible colour.
|
||||
|
||||
outline: $govuk-focus-width solid transparent;
|
||||
color: $govuk-focus-text-colour;
|
||||
background-color: $govuk-focus-colour;
|
||||
box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
|
||||
// When link is focussed, hide the default underline since the
|
||||
// box shadow adds the "underline"
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
|
||||
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
|
||||
//
|
||||
// See the following for details of the update:
|
||||
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
|
||||
// - https://design-system.service.gov.uk/get-started/focus-states/
|
||||
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
|
||||
//
|
||||
// The new 'yellow' colour was added in https://github.com/alphagov/govuk-frontend/pull/1288
|
||||
|
||||
$govuk-focus-colour: #ffdd00; // assign new 'yellow' colour directly to limit impact of change
|
||||
@@ -1,185 +0,0 @@
|
||||
// Overrides for certain GOV.UK Frontend styles to make its components match this application's design
|
||||
|
||||
// Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
|
||||
// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
|
||||
.govuk-\!-padding-bottom-12 {
|
||||
padding-bottom: 70px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__navigation {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.govuk-footer__section {
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
|
||||
.govuk-footer__navigation {
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
|
||||
.govuk-footer__section {
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Make column headings smaller to prevent wrapping
|
||||
.govuk-footer__heading {
|
||||
@include govuk-font($size: 19, $weight: bold);
|
||||
}
|
||||
|
||||
.govuk-button {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
// Allow legends that contain the h1 to go full width
|
||||
.govuk-fieldset__legend.govuk-grid-column-full {
|
||||
// $class parameter is deprecated but needed for v2 of GOVUK Frontend. Remove for v3 & above
|
||||
@include govuk-grid-column(full, $class: false);
|
||||
}
|
||||
|
||||
// Add override from future version of GOV.UK Frontend
|
||||
// Todo: remove this once we’ve upgraded past v3.11.0
|
||||
.govuk-\!-display-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.govuk-header__logotype {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
.govuk-header__logotype-text {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
// TODO: probably move these to a separate file
|
||||
|
||||
.demo-tooltip {
|
||||
position: relative;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.demo-tooltip a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.demo-tooltip:before,
|
||||
.demo-tooltip:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: all 0.4s ease;
|
||||
pointer-events: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.demo-tooltip:hover:before,
|
||||
.demo-tooltip:hover:after {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.demo-tooltip:before {
|
||||
border-width: 10px 8px 0 8px;
|
||||
border-style: solid;
|
||||
border-color: red transparent transparent transparent;
|
||||
top: -15px;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.demo-tooltip:after {
|
||||
content: attr(data-demo-tooltip);
|
||||
background: red;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
top: -75px;
|
||||
left: -10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
letter-spacing: 1px;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// alt tooltip
|
||||
// .tooltip-demo {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .tooltip-demo:before,
|
||||
// .tooltip-demo:after {
|
||||
// display: block;
|
||||
// opacity: 0;
|
||||
// pointer-events: none;
|
||||
// position: absolute;
|
||||
// transform: translate3d(0, -10px, 0);
|
||||
// transition: all .15s ease-in-out;
|
||||
// }
|
||||
|
||||
// .tooltip-demo:hover:before,
|
||||
// .tooltip-demo:hover:after {
|
||||
// opacity: 1;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
// }
|
||||
|
||||
// .tooltip-demo:after {
|
||||
// border-right: 6px solid transparent;
|
||||
// border-bottom: 6px solid rgba(0, 0, 0, .75);
|
||||
// border-left: 6px solid transparent;
|
||||
// content: '';
|
||||
// height: 0;
|
||||
// top: 20px;
|
||||
// left: 20px;
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
// .tooltip-demo:before {
|
||||
// background: rgba(0, 0, 0, .75);
|
||||
// border-radius: 2px;
|
||||
// color: #fff;
|
||||
// content: attr(data-demo-tooltip);
|
||||
// font-size: 14px;
|
||||
// padding: 6px 10px;
|
||||
// top: 26px;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-tooltip:hover {
|
||||
animation: shake 500ms ease-in-out forwards;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
@import 'settings/all';
|
||||
@import 'helpers/all';
|
||||
|
||||
@mixin destructive-link-style-default {
|
||||
&:link {
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $govuk-link-visited-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: govuk-tint( $govuk-error-colour, 25% );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $govuk-link-active-colour;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin destructive-link-style-no-visited-state {
|
||||
&:link {
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: govuk-tint( $govuk-error-colour, 25% );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $govuk-link-active-colour;
|
||||
}
|
||||
|
||||
// When focussed, the text colour needs to be darker to ensure that colour
|
||||
// contrast is still acceptable
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
// mimics styles for govuk-link:
|
||||
// https://github.com/alphagov/govuk-frontend/blob/063cd8e2470b62b824c6e50ca66342ac7a95d2d8/package/core/_links.scss#L7
|
||||
.destructive-link {
|
||||
@include govuk-link-common;
|
||||
@include destructive-link-style-default;
|
||||
@include govuk-link-print-friendly;
|
||||
}
|
||||
|
||||
.destructive-link--no-visited-state {
|
||||
@include destructive-link-style-no-visited-state;
|
||||
}
|
||||
|
||||
// Font override classes
|
||||
.extended-gsm-characters {
|
||||
font-family: $govuk-font-family-tabular;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
// Path to assets for use with file-url()
|
||||
$path: '/static/images/';
|
||||
|
||||
// Dependencies from GOV.UK Frontend Toolkit
|
||||
// https://github.com/alphagov/govuk_frontend_toolkit/
|
||||
@import 'conditionals';
|
||||
@import 'shims';
|
||||
@import 'measurements';
|
||||
@import 'css3';
|
||||
@import 'colours';
|
||||
@import 'typography';
|
||||
@import 'grid_layout';
|
||||
@import 'helpers';
|
||||
|
||||
// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
|
||||
@import 'url-helpers';
|
||||
|
||||
// Specific to this application, needs to go at the top of the cascade
|
||||
@import 'globals';
|
||||
|
||||
// Dependencies from GOV.UK Elements
|
||||
// https://github.com/alphagov/govuk_elements
|
||||
@import 'elements/helpers';
|
||||
@import 'elements/reset';
|
||||
@import 'elements/details';
|
||||
@import 'elements/elements-typography';
|
||||
@import 'elements/forms';
|
||||
@import 'elements/forms/form-multiple-choice';
|
||||
@import 'elements/forms/form-validation';
|
||||
@import 'elements/lists';
|
||||
@import 'elements/panels';
|
||||
@import 'elements/tables';
|
||||
|
||||
// Dependencies from GOV.UK Frontend, packaged to be specific to this application
|
||||
@import './govuk-frontend/all';
|
||||
|
||||
// Specific to this application
|
||||
@import 'local/typography';
|
||||
@import 'grids';
|
||||
@import 'components/site-footer';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
@import 'components/page-footer';
|
||||
@import 'components/table';
|
||||
@import 'components/navigation';
|
||||
@import 'components/big-number';
|
||||
@import 'components/banner';
|
||||
@import 'components/textbox';
|
||||
@import 'components/file-upload';
|
||||
@import 'components/browse-list';
|
||||
@import 'components/email-message';
|
||||
@import 'components/copy-to-clipboard';
|
||||
@import 'components/vendor/previous-next-navigation';
|
||||
@import 'components/radios';
|
||||
@import 'components/checkboxes';
|
||||
@import 'components/pill';
|
||||
@import 'components/show-more';
|
||||
@import 'components/message';
|
||||
@import 'components/research-mode';
|
||||
@import 'components/tick-cross';
|
||||
@import 'components/list-entry';
|
||||
@import 'components/live-search';
|
||||
@import 'components/stick-at-top-when-scrolling';
|
||||
@import 'components/fullscreen-table';
|
||||
@import 'components/conditional-radios';
|
||||
@import 'components/vendor/breadcrumbs';
|
||||
@import 'components/vendor/responsive-embed';
|
||||
@import 'components/preview-pane';
|
||||
@import 'components/task-list';
|
||||
@import 'components/loading-indicator';
|
||||
@import 'components/area-list';
|
||||
@import 'components/content-metadata';
|
||||
|
||||
@import 'views/dashboard';
|
||||
@import 'views/users';
|
||||
@import 'views/api';
|
||||
@import 'views/product-page';
|
||||
@import 'views/template';
|
||||
@import 'views/notification';
|
||||
@import 'views/send';
|
||||
@import 'views/get_started';
|
||||
@import 'views/history';
|
||||
@import 'views/webauthn';
|
||||
|
||||
// TODO: break this up
|
||||
@import 'app';
|
||||
@@ -1,85 +0,0 @@
|
||||
// sass-lint:disable no-important
|
||||
// set asset URL root to match that of application
|
||||
$govuk-assets-path: "/static/";
|
||||
|
||||
@import "settings/all";
|
||||
@import "tools/all";
|
||||
@import "helpers/all";
|
||||
|
||||
@import "core/all";
|
||||
@import "objects/all";
|
||||
|
||||
* {
|
||||
background: transparent;
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
filter: none;
|
||||
-ms-filter: none;
|
||||
}
|
||||
|
||||
body {
|
||||
@include govuk-font($size: 14);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a[href^="/"]:after,
|
||||
a[href^="http://"]:after,
|
||||
a[href^="https://"]:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
select {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.govuk-header {
|
||||
|
||||
.govuk-header__logo {
|
||||
@include govuk-font($size: 19);
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
a {
|
||||
&,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-visually-hidden,
|
||||
.govuk-visually-hidden-focusable,
|
||||
.notify-cookie-message,
|
||||
.govuk-skip-link,
|
||||
.govuk-footer {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
.api-notifications {
|
||||
|
||||
font-family: monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
border-bottom: 1px solid $border-colour;
|
||||
|
||||
&-item {
|
||||
|
||||
border-top: 1px solid $border-colour;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
&__heading,
|
||||
&__data,
|
||||
&__view {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: block;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
&::before {
|
||||
top: -1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
text-decoration: none;
|
||||
|
||||
&-key,
|
||||
&-time {
|
||||
color: $secondary-text-colour;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
&-key,
|
||||
&-time {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&-time {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__data {
|
||||
|
||||
border-left: none;
|
||||
padding-left: 25px;
|
||||
|
||||
&-name {
|
||||
color: $secondary-text-colour;
|
||||
}
|
||||
|
||||
&-value {
|
||||
color: $text-colour;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.cookie-settings__no-js {
|
||||
.js-enabled & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-settings__confirmation {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
.dashboard {
|
||||
|
||||
th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> .heading-medium:first-of-type {
|
||||
margin-top: govuk-spacing(3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.keyline-block {
|
||||
border-top: 1px solid $border-colour;
|
||||
padding-top: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.spark-bar {
|
||||
|
||||
@include core-16;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
height: govuk-spacing(3);
|
||||
color: $text-colour;
|
||||
text-align: left;
|
||||
|
||||
&-bar {
|
||||
@include bold-27($tabular-numbers: true);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
background: $panel-colour;
|
||||
color: $black;
|
||||
padding: 10px 6px 8px 0;
|
||||
text-indent: 12px;
|
||||
text-align: right;
|
||||
margin: 2px 0 1px 0;
|
||||
transition: width 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.file-list {
|
||||
|
||||
// for file-lists with section-like content and a single item
|
||||
&--sectioned {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: justify; // fallback for browsers that don't support flexbox
|
||||
justify-content: space-between;
|
||||
|
||||
// note: first-child of a section should be a heading
|
||||
& > :first-child,
|
||||
& > .area-list {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > .file-list-hint-large,
|
||||
& > .file-list-status {
|
||||
// fallback for browsers that don't support flexbox - let `text-align: justify` on parent
|
||||
// and making children inline mimic `justify-content: space-between`
|
||||
display: inline-block;
|
||||
|
||||
// This simulates a 50% column in a govuk grid on smaller screens
|
||||
// govuk grid columns go to 100% width on smaller screens
|
||||
width: 100%;
|
||||
|
||||
// This simulates a 50% column in a govuk grid on larger screens
|
||||
// as with govuk grid, this includes a gap between columns to ensure the contents
|
||||
// are separated by a space
|
||||
@include govuk-media-query($from: tablet) {
|
||||
max-width: calc(50% - #{$govuk-gutter-half});
|
||||
}
|
||||
}
|
||||
|
||||
& > .file-list-status {
|
||||
overflow: hidden; // old IE hack to make it vertically line up with the hint
|
||||
margin-bottom: 0; // cancel margin-bottom from .govuk-hint class
|
||||
}
|
||||
|
||||
& > .file-list-hint-large {
|
||||
text-align: left; // reset for text-align fallback on parent
|
||||
}
|
||||
}
|
||||
|
||||
&-hint,
|
||||
&-hint-large,
|
||||
&-status {
|
||||
pointer-events: none; // delegate clicks to the overlapping link
|
||||
position: relative; // make non-static to sit above the overlapping focus style
|
||||
}
|
||||
|
||||
&-filename {
|
||||
@include bold-19;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: -30px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-filename-large {
|
||||
@include bold-24;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: -30px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-filename-large-no-hint {
|
||||
padding-bottom: 0;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
overflow: visible; // don't cut off thicker underline
|
||||
}
|
||||
|
||||
&-filename-unlinked {
|
||||
@include core-19;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
@include core-16;
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
&-hint-large {
|
||||
@include core-19;
|
||||
display: block;
|
||||
color: $secondary-text-colour;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
&-status {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
|
||||
.govuk-link:focus {
|
||||
|
||||
&.file-list-filename,
|
||||
&.file-list-filename-large {
|
||||
/* override box-shadow to push underline down a bit */
|
||||
box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
|
||||
|
||||
// File-list items contained by keyline-blocks have more spacing at the top so adapt to cover it
|
||||
.keyline-block > .file-list & {
|
||||
box-shadow: 0 -5px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
|
||||
}
|
||||
}
|
||||
|
||||
& + .file-list-hint,
|
||||
& + .file-list-hint-large {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Note: this selector should use the :has() pseudo-class in the future when it is supported
|
||||
// which will remove the need for JS
|
||||
.file-list .js-child-has-focus {
|
||||
|
||||
& + .file-list-hint-large,
|
||||
& ~ .file-list-status {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.failure-highlight {
|
||||
@include bold-19;
|
||||
color: $error-colour;
|
||||
}
|
||||
|
||||
.align-with-message-body {
|
||||
display: block;
|
||||
margin-top: govuk-spacing(5);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
.get-started-list {
|
||||
|
||||
counter-reset: get-started-counter;
|
||||
|
||||
&__item {
|
||||
|
||||
counter-increment: get-started-counter;
|
||||
padding: 0 0 0 govuk-spacing(6) + 5px;
|
||||
margin: govuk-spacing(8) 0 0 0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include bold-24;
|
||||
content: counter(get-started-counter) ".";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
summary[aria-expanded=false] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@include bold-24;
|
||||
display: inline-block;
|
||||
margin: 5px 0 govuk-spacing(3) 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.notification-status {
|
||||
|
||||
@include core-16;
|
||||
color: $secondary-text-colour;
|
||||
margin-top: -1 * govuk-spacing(3);
|
||||
|
||||
&.error {
|
||||
|
||||
color: $govuk-error-colour;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
&-cancelled {
|
||||
@include bold-19;
|
||||
color: $govuk-error-colour;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
$product-page-blue: #005EA5;
|
||||
// See https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss#L24
|
||||
$button-shadow-size: $govuk-border-width-form-element;
|
||||
|
||||
.product-page {
|
||||
|
||||
&-intro {
|
||||
|
||||
// The GOV.UK Frontend header component wraps content that is `position: relative`
|
||||
// This changes its z-index position, putting it above the `<main>` section in the stacking order
|
||||
// We need the `<main>` section to be above it, like the default order, so when we apply the
|
||||
// negative margin-top it overlaps the theme bar at the bottom of the header
|
||||
position: relative;
|
||||
margin: -10px 0 govuk-spacing(6) * 1.5 0;
|
||||
background: $product-page-blue;
|
||||
color: $white;
|
||||
|
||||
&-wrapper {
|
||||
|
||||
@include govuk-width-container;
|
||||
user-select: none;
|
||||
padding: 0 0 govuk-spacing(9) 0;
|
||||
|
||||
.govuk-grid-column-one-third {
|
||||
display: none;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(desktop) {
|
||||
.govuk-grid-column-one-third {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--alternative {
|
||||
@include media(desktop) {
|
||||
background-image: file-url('product/proposition-alternative.svg');
|
||||
background-size: 320px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px bottom 0;
|
||||
|
||||
.govuk-grid-column-one-third {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include bold-48;
|
||||
margin: 20px 0 govuk-spacing(6) 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include core-24;
|
||||
color: $white;
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(6);
|
||||
}
|
||||
|
||||
.govuk-link {
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $govuk-focus-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-section {
|
||||
|
||||
@include govuk-width-container;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
h2 {
|
||||
@include bold-27;
|
||||
margin: 0 0 govuk-spacing(6);
|
||||
}
|
||||
|
||||
.with-keyline {
|
||||
border-top: 1px solid $border-colour;
|
||||
padding: govuk-spacing(6) * 1.5 0 0 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 0 govuk-spacing(6) * 1.5 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-big-number {
|
||||
@include bold-48($tabular-numbers: true);
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button-container {
|
||||
line-height: 2.36;
|
||||
}
|
||||
|
||||
.button-container__button {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.product-page-button {
|
||||
|
||||
// based on the govuk-button styles:
|
||||
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
color: $product-page-blue;
|
||||
box-shadow: 0 $button-shadow-size 0 govuk-shade($colour: $product-page-blue, $percentage: 15%);
|
||||
background: $white;
|
||||
|
||||
&:link,
|
||||
&:visited,
|
||||
&:hover {
|
||||
color: $product-page-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light-blue-25;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
.send-one-off-form {
|
||||
|
||||
.form-group,
|
||||
.govuk-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.send-recipient {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
.template-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
%edit-template-link,
|
||||
.edit-template-link {
|
||||
|
||||
@include core-19;
|
||||
position: absolute;
|
||||
background: $link-colour;
|
||||
color: $white;
|
||||
padding: 10px govuk-spacing(3);
|
||||
z-index: 10000;
|
||||
|
||||
&:link, &:visited {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $light-blue-25;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $govuk-text-colour;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.template-content-count {
|
||||
@include core-19($tabular-numbers: true);
|
||||
color: $secondary-text-colour;
|
||||
padding: 0 0 govuk-spacing(6) 0;
|
||||
|
||||
& .govuk-error-message {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
$item-top-padding: govuk-spacing(3);
|
||||
|
||||
.user-list {
|
||||
|
||||
@include core-19;
|
||||
margin-bottom: govuk-spacing(6);
|
||||
|
||||
&-item {
|
||||
|
||||
padding: govuk-spacing(3) 0px;
|
||||
border-top: 1px solid $border-colour;
|
||||
|
||||
&-heading {
|
||||
|
||||
padding-right: govuk-spacing(3);
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
.heading-small {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $border-colour;
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-blank {
|
||||
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-edit-link {
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: govuk-spacing(3) 0 govuk-spacing(3);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
/* cancel default focus styling in favour of that from :before pseudo class */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: -1 * govuk-spacing(3) - 1;
|
||||
right: 0;
|
||||
bottom: -1 * govuk-spacing(3);
|
||||
left: -1 * govuk-spacing(3);
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:active:before,
|
||||
&:focus:before {
|
||||
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 3px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
|
||||
right: -3px;
|
||||
left: -3px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
border-width: 15px 3px 15px 15px;
|
||||
box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
.webauthn__no-js {
|
||||
.js-enabled & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.webauthn__api-missing {
|
||||
display: none;
|
||||
|
||||
.js-enabled & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.js-enabled.webauthn-api-enabled & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.webauthn__api-required {
|
||||
display: none;
|
||||
|
||||
.webauthn-api-enabled & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.webauthn-illustration {
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: govuk-spacing(6) auto 0 auto;
|
||||
padding: 0 govuk-spacing(9) 0 govuk-spacing(9);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin: govuk-spacing(9) auto 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -256,7 +256,7 @@ def govuk_text_input_field_widget(self, field, type=None, param_extensions=None,
|
||||
merge_jsonlike(params, param_extensions)
|
||||
|
||||
return Markup(
|
||||
render_template('components/uk_components/input/template.njk', params=params))
|
||||
render_template('components/us_components/input/template.njk', params=params))
|
||||
|
||||
|
||||
class GovukTextInputField(StringField):
|
||||
@@ -791,7 +791,7 @@ def govuk_radios_field_widget(self, field, param_extensions=None, **kwargs):
|
||||
merge_jsonlike(params, param_extensions)
|
||||
|
||||
return Markup(
|
||||
render_template('components/uk_components/radios/template.njk', params=params))
|
||||
render_template('components/us_components/radios/template.njk', params=params))
|
||||
|
||||
|
||||
class GovukCheckboxField(BooleanField):
|
||||
@@ -848,7 +848,7 @@ class GovukTextareaField(TextAreaField):
|
||||
merge_jsonlike(params, param_extensions)
|
||||
|
||||
return Markup(
|
||||
render_template('components/uk_components/textarea/template.njk', params=params))
|
||||
render_template('components/us_components/textarea/template.njk', params=params))
|
||||
|
||||
|
||||
# based on work done by @richardjpope: https://github.com/richardjpope/recourse/blob/master/recourse/forms.py#L6
|
||||
|
||||
@@ -46,7 +46,7 @@ class ValidGovEmail:
|
||||
from flask import url_for
|
||||
message = '''
|
||||
Enter a public sector email address or
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{}">find out who can use Notify</a>
|
||||
<a class="usa-link" href="{}">find out who can use Notify</a>
|
||||
'''.format(url_for('main.features'))
|
||||
if not is_gov_user(field.data.lower()):
|
||||
raise ValidationError(message)
|
||||
|
||||
@@ -93,7 +93,7 @@ def create_api_key(service_id):
|
||||
'hint': {
|
||||
'html': Markup(
|
||||
'Not available because your service is in '
|
||||
'<a class="govuk-link govuk-link--no-visited-state" href="/features/trial-mode">trial mode</a>')
|
||||
'<a class="usa-link" href="/features/trial-mode">trial mode</a>')
|
||||
}
|
||||
}
|
||||
if form.validate_on_submit():
|
||||
|
||||
@@ -22,7 +22,7 @@ def accept_invite(token):
|
||||
message = Markup("""
|
||||
You’re signed in as {}.
|
||||
This invite is for another email address.
|
||||
<a href={} class="govuk-link govuk-link--no-visited-state">Sign out</a>
|
||||
<a href={} class="usa-link">Sign out</a>
|
||||
and click the link again to accept this invite.
|
||||
""".format(
|
||||
current_user.email_address,
|
||||
@@ -82,7 +82,7 @@ def accept_org_invite(token):
|
||||
message = Markup("""
|
||||
You’re signed in as {}.
|
||||
This invite is for another email address.
|
||||
<a class="govuk-link govuk-link--no-visited-state" href={}>Sign out</a>
|
||||
<a class="usa-link" href={}>Sign out</a>
|
||||
and click the link again to accept this invite.
|
||||
""".format(
|
||||
current_user.email_address,
|
||||
|
||||
@@ -66,7 +66,7 @@ def sign_in():
|
||||
flash(Markup(
|
||||
(
|
||||
f"The email address or password you entered is incorrect."
|
||||
f" <a href={password_reset_url} class='govuk-link'>Forgot your password?</a>"
|
||||
f" <a href={password_reset_url} class='usa-link'>Forgot your password?</a>"
|
||||
)
|
||||
))
|
||||
|
||||
|
||||
@@ -14,8 +14,6 @@
|
||||
{%- for font in font_paths %}
|
||||
<link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
|
||||
{%- endfor %}
|
||||
<link rel="stylesheet" media="screen" href="{{ asset_url('stylesheets/main.css') }}" />
|
||||
<link rel="stylesheet" media="print" href="{{ asset_url('stylesheets/print.css') }}" />
|
||||
<link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
|
||||
{% block extra_stylesheets %}
|
||||
{% endblock %}
|
||||
@@ -148,9 +146,9 @@
|
||||
|
||||
|
||||
{% if current_service and current_service.research_mode %}
|
||||
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="govuk-footer__link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
|
||||
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
|
||||
{% else %}
|
||||
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="govuk-footer__link">Technology Transformation Services</a>' %}
|
||||
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
|
||||
{% endif %}
|
||||
|
||||
{{ govukFooter({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% from "components/form.html" import form_wrapper %}
|
||||
{% from "components/uk_components/button/macro.njk" import govukButton %}
|
||||
{% from "components/us_components/button/macro.njk" import govukButton %}
|
||||
|
||||
{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
|
||||
<div
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
|
||||
{% if link %}
|
||||
<a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1" href="{{ link }}">
|
||||
<a class="usa-link display-block margin-bottom-1" href="{{ link }}">
|
||||
{% endif %}
|
||||
<span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
|
||||
<span class="big-number-number">
|
||||
@@ -42,7 +42,7 @@
|
||||
<span class="big-number-status{% if danger_zone %}-failing{% endif %}">
|
||||
{% if failures %}
|
||||
{% if failure_link %}
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{ failure_link }}">
|
||||
<a class="usa-link" href="{{ failure_link }}">
|
||||
{{ "{:,}".format(failures) }}
|
||||
failed – {{ failure_percentage }}%
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/uk_components/button/macro.njk" import govukButton %}
|
||||
{% from "components/us_components/button/macro.njk" import govukButton %}
|
||||
|
||||
{% macro file_upload(
|
||||
field,
|
||||
@@ -34,7 +34,7 @@
|
||||
</label>
|
||||
{% if alternate_link and alternate_link_text %}
|
||||
<span class="file-upload-alternate-link">
|
||||
or <a class="govuk-link govuk-link--no-visited-state" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
|
||||
or <a class="usa-link" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
<label class="file-upload-filename" for="{{ field.name }}"></label>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
{% if folder_path %}
|
||||
<h2 class="heading-medium folder-heading">
|
||||
{% if folder_path|length == 1 %}
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id) }}">Services</a>
|
||||
<a class="usa-link" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id) }}">Services</a>
|
||||
{{ folder_path_separator() }}
|
||||
{% endif %}
|
||||
{% for folder in folder_path %}
|
||||
@@ -51,15 +51,15 @@
|
||||
{% else %}
|
||||
{% if folder.id %}
|
||||
{% if current_user.has_template_folder_permission(folder) %}
|
||||
<a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="govuk-link govuk-link--no-visited-state folder-heading-folder">{{ folder.name }}</a>
|
||||
<a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="usa-link folder-heading-folder">{{ folder.name }}</a>
|
||||
{% else %}
|
||||
<span class="folder-heading-folder">{{ folder.name }}</span>
|
||||
{% endif %}
|
||||
{% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
{% elif folder.parent_id == None %}
|
||||
<a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="govuk-link govuk-link--no-visited-state folder-heading-folder">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
<a href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id, from_folder=folder.id) }}" class="usa-link folder-heading-folder">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
{% else %}
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id) }}">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
<a class="usa-link" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id, from_service=from_service.id) }}">{{ from_service.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% from "components/uk_components/fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "components/uk_components/error-message/macro.njk" import govukErrorMessage %}
|
||||
{% from "components/us_components/fieldset/macro.njk" import govukFieldset %}
|
||||
{% from "components/us_components/error-message/macro.njk" import govukErrorMessage %}
|
||||
|
||||
{% macro list_entry(
|
||||
field,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% from "components/uk_components/button/macro.njk" import govukButton %}
|
||||
{% from "components/us_components/button/macro.njk" import govukButton %}
|
||||
|
||||
{% macro page_footer(
|
||||
button_text=None,
|
||||
@@ -32,7 +32,7 @@
|
||||
{% endif %}
|
||||
{% if delete_link %}
|
||||
<span class="page-footer-link {% if not button_text %}page-footer-delete-link-without-button{% endif %}">
|
||||
<a class="govuk-link govuk-link--destructive" href="{{ delete_link }}">{{ delete_link_text }}</a>
|
||||
<a class="usa-link usa-link--destructive" href="{{ delete_link }}">{{ delete_link_text }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if secondary_link and secondary_link_text %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<ul class="group">
|
||||
{% if previous_page %}
|
||||
<li class="previous-page">
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{previous_page['url']}}" rel="previous" >
|
||||
<a class="usa-link" href="{{previous_page['url']}}" rel="previous" >
|
||||
<span class="pagination-part-title">
|
||||
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
||||
<path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
|
||||
@@ -17,7 +17,7 @@
|
||||
{% endif %}
|
||||
{% if next_page %}
|
||||
<li class="next-page">
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{next_page['url']}}" rel="next">
|
||||
<a class="usa-link" href="{{next_page['url']}}" rel="next">
|
||||
<span class="pagination-part-title">
|
||||
{{next_page['title']}}
|
||||
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% macro service_link(service, endpoint, link_text) %}
|
||||
{% if service %}
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for(endpoint, service_id=service.id) }}">{{ link_text }}</a>
|
||||
<a class="usa-link" href="{{ url_for(endpoint, service_id=service.id) }}">{{ link_text }}</a>
|
||||
{% else %}
|
||||
<b class="govuk-!-font-weight-bold">{{ link_text|capitalize }}</b>
|
||||
{% endif %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="big-number-with-status">
|
||||
<div class="big-number-status{% if failing %}-failing{% endif %}">
|
||||
{% if url %}
|
||||
<a class="govuk-link govuk-link--no-visited-state" href="{{ url }}">{{ number }} {{ label }}</a>
|
||||
<a class="usa-link" href="{{ url }}">{{ number }} {{ label }}</a>
|
||||
{% else %}
|
||||
{{ number }} {{ label }}
|
||||
{% endif %}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
{% macro sub_navigation(
|
||||
item_set
|
||||
) %}
|
||||
<nav aria-label="Side navigation," class="margin-top-5">
|
||||
<nav aria-label="Side navigation,">
|
||||
<ul class="usa-sidenav" itemtype="http://schema.org/ItemList">
|
||||
{% for item in item_set %}
|
||||
{% if item.sub_navigation_items %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% macro task_list_item(completed, label, link) %}
|
||||
<li class="task-list-item">
|
||||
<span aria-describedby="{{ label|id_safe }}"><a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">{{ label }}</a></span>
|
||||
<span aria-describedby="{{ label|id_safe }}"><a class="usa-link" href="{{ link }}">{{ label }}</a></span>
|
||||
{% if completed %}
|
||||
<strong class="task-list-indicator-completed" id="{{ label|id_safe }}">Completed</strong>
|
||||
{% else %}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
{% endif %}
|
||||
{% if help_link and help_link_text %}
|
||||
<p class="textbox-help-link">
|
||||
<a class="govuk-link govuk-link--no-visited-state" href='{{ help_link }}'>{{ help_link_text }}</a>
|
||||
<a class="usa-link" href='{{ help_link }}'>{{ help_link_text }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<a href="{{ params.href | default('#content') }}" class="govuk-skip-link{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
|
||||
{{- params.html | safe if params.html else params.text -}}
|
||||
</a>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user