initial commit for welsh government planning appeals application
This commit is contained in:
@@ -0,0 +1,272 @@
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 0;
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) and (max-width: 900px) {
|
||||
.card {
|
||||
flex-basis: 45.99%;
|
||||
// Every card in the first row needs horizontal margin
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 3%;
|
||||
}
|
||||
// Every card in the second row needs horizontal margin
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
&.card-3 {
|
||||
flex-basis: 46%;
|
||||
min-height: 300px;
|
||||
|
||||
// &:nth-child(3n-1) {
|
||||
// margin-left: 3%;
|
||||
// margin-right: 3%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.card {
|
||||
flex-basis: 48.2%;
|
||||
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
&.card-3 {
|
||||
flex-basis: 31.1%;
|
||||
min-height: 300px;
|
||||
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
&:nth-child(3n-1) {
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
.card {
|
||||
flex-basis: 46%;
|
||||
margin: 3%;
|
||||
|
||||
&.card-3 {
|
||||
flex-basis: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
font-size: 16px;
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
|
||||
&.inactive {
|
||||
color: $govuk-secondary-text-colour;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
//border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
padding: 12px;
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
transition: 0.1s ease-in-out;
|
||||
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
margin-top: 0;
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-large {
|
||||
color: $govuk-secondary-text-colour;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-action {
|
||||
border-top: 0;
|
||||
padding: 12px;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
border-bottom: 1px solid #c7dceb;
|
||||
color: $govuk-link-colour;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-link-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $govuk-link-colour;
|
||||
color: #2e8aca;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0 0 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.clear {
|
||||
background-color: govuk-colour("white", $legacy: "white");
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js {
|
||||
.card-body.active {
|
||||
&:hover {
|
||||
//background-color: $govuk-link-colour;
|
||||
color: $govuk-link-colour;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
|
||||
.card-heading,
|
||||
p {
|
||||
color: $govuk-link-colour;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
.detail-large {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inspectorate-card .card-body {
|
||||
padding-top: 20%;
|
||||
}
|
||||
|
||||
.card-3 .card-body,
|
||||
.appealModule.card-body {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-height: 30vh;
|
||||
|
||||
.cardVieAll {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
div.cardModuleItem:last-of-type {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.cardModuleItem {
|
||||
display: flex;
|
||||
padding: 10px 10px 10px 0;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
|
||||
.cardModuleDetails {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.cardModuleReference a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cardModuleRemoveCase {
|
||||
border: 1px solid $red;
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
border-radius: 5px;
|
||||
width: auto;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: $red;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lightred;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #ffdd00;
|
||||
outline: 3px solid transparent;
|
||||
-webkit-box-shadow: inset 0 0 0 1px #ffdd00;
|
||||
box-shadow: inset 0 0 0 1px #ffdd00;
|
||||
}
|
||||
|
||||
&:focus:not(:active):not(:hover) {
|
||||
border-color: #ffdd00;
|
||||
color: #0b0c0c;
|
||||
background-color: #ffdd00;
|
||||
-webkit-box-shadow: 0 2px 0 #0b0c0c;
|
||||
box-shadow: 0 2px 0 #0b0c0c;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// This is a GOV.UK Publishing specific component that
|
||||
// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items
|
||||
|
||||
.app-inset-text-active {
|
||||
border-left: 10px solid govuk-colour("light-blue");
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// This is a GOV.UK Publishing specific component that
|
||||
// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items
|
||||
|
||||
.app-link-white:link {
|
||||
color: white;
|
||||
}
|
||||
.app-link-white:visited {
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// This is a GOV.UK Publishing specific component that
|
||||
// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items
|
||||
|
||||
.app-related-items {
|
||||
border-top: 2px solid govuk-colour("blue");
|
||||
padding-top: govuk-spacing(2);
|
||||
}
|
||||
|
||||
.app-related-items .govuk-list > li {
|
||||
margin-bottom: govuk-spacing(2);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
|
||||
// Note - this code for prototype purposes only. It is not production code.
|
||||
|
||||
.app-step-nav-header {
|
||||
@include govuk-text-colour;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
border-top: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding: govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable SelectorFormat
|
||||
|
||||
.app-step-nav-header__part-of {
|
||||
@include govuk-font(16, $weight: bold);
|
||||
|
||||
display: block;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.app-step-nav-header__title {
|
||||
@extend %govuk-link;
|
||||
@include govuk-font(24, $weight: bold);
|
||||
}
|
||||
|
||||
// scss-lint:enable SelectorFormat
|
||||
@@ -0,0 +1,459 @@
|
||||
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
|
||||
// Note - this code for prototype purposes only. It is not production code.
|
||||
|
||||
$stroke-width: 2px;
|
||||
$stroke-width-large: 3px;
|
||||
$number-circle-size: 26px;
|
||||
$number-circle-size-large: 35px;
|
||||
$top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
|
||||
@mixin step-nav-vertical-line($line-style: solid) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: $line-style $stroke-width
|
||||
govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
background: govuk-colour("white");
|
||||
}
|
||||
|
||||
@mixin step-nav-line-position {
|
||||
left: 0;
|
||||
margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
|
||||
}
|
||||
|
||||
@mixin step-nav-line-position-large {
|
||||
left: 0;
|
||||
margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
|
||||
border-width: $stroke-width-large;
|
||||
}
|
||||
|
||||
// custom mixin as govuk-font does undesirable things at different breakpoints
|
||||
// we want to ensure that both large and small step navs have the same size font on mobile
|
||||
// this will stop text resizing if compatibility mode is turned off
|
||||
@mixin step-nav-font(
|
||||
$size,
|
||||
$tablet-size: $size,
|
||||
$weight: normal,
|
||||
$line-height: 1.3,
|
||||
$tablet-line-height: $line-height
|
||||
) {
|
||||
@include govuk-typography-common();
|
||||
font-size: $size + px;
|
||||
font-weight: $weight;
|
||||
line-height: $line-height;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
font-size: $tablet-size + px;
|
||||
line-height: $tablet-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav {
|
||||
margin-bottom: govuk-spacing(6);
|
||||
|
||||
&.app-step-nav--large {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-bottom: govuk-spacing(9);
|
||||
}
|
||||
}
|
||||
|
||||
.js-enabled &.js-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__controls {
|
||||
padding: 3px 3px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.app-step-nav__button {
|
||||
color: $govuk-link-colour;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
|
||||
&:focus {
|
||||
@include govuk-focused-text;
|
||||
}
|
||||
}
|
||||
|
||||
// removes extra dotted outline from buttons in Firefox
|
||||
// on focus (standard yellow outline unaffected)
|
||||
.app-step-nav__button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.app-step-nav__button--title {
|
||||
@include step-nav-font(19, $weight: bold, $line-height: 1.4);
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: govuk-colour("black");
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
19,
|
||||
$tablet-size: 24,
|
||||
$weight: bold,
|
||||
$line-height: 1.4
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__button--controls {
|
||||
@include step-nav-font(14, $line-height: 1);
|
||||
position: relative;
|
||||
z-index: 1; // this and relative position stops focus outline underlap with border of accordion
|
||||
padding: 0.5em 0;
|
||||
text-decoration: underline;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(14, $tablet-size: 16, $line-height: 1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__steps {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-step-nav__step {
|
||||
position: relative;
|
||||
padding-left: govuk-spacing(6) + govuk-spacing(3);
|
||||
list-style: none;
|
||||
|
||||
// line down the side of a step
|
||||
&:after {
|
||||
@include step-nav-vertical-line;
|
||||
@include step-nav-line-position;
|
||||
top: govuk-spacing(3);
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-left: govuk-spacing(9);
|
||||
|
||||
&:after {
|
||||
@include step-nav-line-position-large;
|
||||
top: govuk-spacing(6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__step:last-child {
|
||||
// little dash at the bottom of the line
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: $number-circle-size / 4;
|
||||
width: $number-circle-size / 2;
|
||||
height: 0;
|
||||
border-bottom: solid $stroke-width
|
||||
govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
}
|
||||
|
||||
&:after {
|
||||
// scss-lint:disable DuplicateProperty
|
||||
// sass-lint:disable no-duplicate-properties
|
||||
height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
|
||||
height: calc(100% - #{govuk-spacing(3)});
|
||||
// sass-lint:enable no-duplicate-properties
|
||||
// scss-lint:enable DuplicateProperty
|
||||
}
|
||||
|
||||
.app-step-nav__help:after {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
&:before {
|
||||
margin-left: $number-circle-size-large / 4;
|
||||
width: $number-circle-size-large / 2;
|
||||
border-width: $stroke-width-large;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: calc(100% - #{govuk-spacing(6)});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__step--active {
|
||||
&:last-child:before,
|
||||
.app-step-nav__circle--number,
|
||||
&:after,
|
||||
.app-step-nav__help:after {
|
||||
border-color: govuk-colour("black");
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__circle {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: govuk-spacing(3);
|
||||
left: 0;
|
||||
width: $number-circle-size;
|
||||
height: $number-circle-size;
|
||||
color: govuk-colour("black");
|
||||
background: govuk-colour("white");
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
top: govuk-spacing(6);
|
||||
width: $number-circle-size-large;
|
||||
height: $number-circle-size-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__circle--number {
|
||||
@include step-nav-font(16, $weight: bold, $line-height: 23px);
|
||||
border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
16,
|
||||
$tablet-size: 19,
|
||||
$weight: bold,
|
||||
$line-height: 23px,
|
||||
$tablet-line-height: 30px
|
||||
);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
border-width: $stroke-width-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__circle--logic {
|
||||
@include step-nav-font(16, $weight: bold, $line-height: 28px);
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
16,
|
||||
$tablet-size: 19,
|
||||
$weight: bold,
|
||||
$line-height: 28px,
|
||||
$tablet-line-height: 34px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// makes sure logic text expands to the left if text size is zoomed, preventing overlap
|
||||
.app-step-nav__circle-inner {
|
||||
float: right;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.app-step-nav__circle-background {
|
||||
$shadow-offset: 0.1em;
|
||||
$shadow-colour: govuk-colour("white");
|
||||
|
||||
// to make numbers readable for users zooming text only in browsers such as Firefox
|
||||
text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour,
|
||||
$shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour,
|
||||
-#{$shadow-offset} 0 0 $shadow-colour;
|
||||
}
|
||||
|
||||
.app-step-nav__circle-step-label,
|
||||
.app-step-nav__circle-step-colon {
|
||||
@include govuk-visually-hidden;
|
||||
}
|
||||
|
||||
.app-step-nav__header {
|
||||
padding: govuk-spacing(3) 0;
|
||||
border-top: $top-border;
|
||||
|
||||
.app-step-nav--active & {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-step-nav__button {
|
||||
&:focus {
|
||||
@include govuk-focused-text;
|
||||
|
||||
.app-step-nav__toggle-link {
|
||||
@include govuk-focused-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.app-step-nav__button:not(:focus),
|
||||
.app-step-nav__circle {
|
||||
color: $govuk-link-colour;
|
||||
}
|
||||
|
||||
.app-step-nav__toggle-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding: govuk-spacing(6) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__title {
|
||||
@include govuk-text-colour;
|
||||
@include step-nav-font(19, $weight: bold, $line-height: 1.4);
|
||||
margin: 0;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
19,
|
||||
$tablet-size: 24,
|
||||
$weight: bold,
|
||||
$line-height: 1.4
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__toggle-link {
|
||||
@include step-nav-font(14, $line-height: 1.2);
|
||||
display: block;
|
||||
color: $govuk-link-colour;
|
||||
text-transform: capitalize;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__panel {
|
||||
@include govuk-text-colour;
|
||||
@include step-nav-font(16);
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(16, $tablet-size: 19);
|
||||
}
|
||||
|
||||
.js-enabled &.js-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// contents of the steps, such as paragraphs and links
|
||||
|
||||
.app-step-nav__paragraph {
|
||||
padding-bottom: govuk-spacing(3);
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
|
||||
+ .app-step-nav__list {
|
||||
margin-top: -5px;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-top: -govuk-spacing(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-bottom: govuk-spacing(6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__list {
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
list-style: none;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__list--choice {
|
||||
$links-margin: 20px;
|
||||
|
||||
margin-left: $links-margin;
|
||||
list-style: disc;
|
||||
|
||||
.app-step-nav__list-item--active:before {
|
||||
left: -(govuk-spacing(6) + govuk-spacing(3)) - $links-margin;
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
.app-step-nav__list-item--active:before {
|
||||
left: -(govuk-spacing(9)) - $links-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__list-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.app-step-nav__link {
|
||||
@include govuk-link-common;
|
||||
@include govuk-link-style-default;
|
||||
}
|
||||
|
||||
.app-step-nav__link-active-context {
|
||||
@include govuk-visually-hidden;
|
||||
}
|
||||
|
||||
.app-step-nav__list-item--active {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0.6em; // position the dot to align with the first row of text in the link
|
||||
left: -(govuk-spacing(6) + govuk-spacing(3));
|
||||
margin-top: -($stroke-width / 2);
|
||||
margin-left: ($number-circle-size / 2);
|
||||
width: $number-circle-size / 2;
|
||||
height: $stroke-width;
|
||||
background: govuk-colour("black");
|
||||
}
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include govuk-media-query($from: tablet) {
|
||||
&:before {
|
||||
left: -(govuk-spacing(9));
|
||||
margin-left: ($number-circle-size-large / 2);
|
||||
height: $stroke-width-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__link {
|
||||
@include govuk-link-style-text;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav__context {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: govuk-colour("dark-grey", $legacy: "grey-1");
|
||||
|
||||
&:before {
|
||||
content: " \2013\00a0"; // dash followed by
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-related.scss
|
||||
// Note - this code for prototype purposes only. It is not production code.
|
||||
|
||||
.app-step-nav-related {
|
||||
@include govuk-text-colour;
|
||||
border-top: 2px solid govuk-colour("blue");
|
||||
margin-bottom: govuk-spacing(6);
|
||||
}
|
||||
|
||||
.app-step-nav-related__heading {
|
||||
margin-top: govuk-spacing(3);
|
||||
margin-bottom: govuk-spacing(2);
|
||||
@include govuk-font(19, $weight: bold);
|
||||
}
|
||||
|
||||
.app-step-nav-related__links {
|
||||
@include govuk-font(16, $weight: bold);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-step-nav-related--singular {
|
||||
margin-bottom: govuk-spacing(2) + 3;
|
||||
|
||||
.app-step-nav-related__heading {
|
||||
@include govuk-font(19, $weight: bold, $line-height: 1.4);
|
||||
margin-top: govuk-spacing(4);
|
||||
|
||||
@include govuk-media-query($until: tablet) {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav-related__pretitle {
|
||||
margin-bottom: govuk-spacing(6) / 4;
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav-related__pretitle {
|
||||
display: block;
|
||||
margin-bottom: govuk-spacing(3);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav-related__links {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.app-step-nav-related__link-item {
|
||||
margin-top: govuk-spacing(3);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
margin-top: govuk-spacing(1);
|
||||
}
|
||||
}
|
||||
|
||||
.app-step-nav-related__link {
|
||||
@extend %govuk-link;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
// Task list pattern
|
||||
|
||||
.app-task-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@include govuk-media-query($from: tablet) {
|
||||
min-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-task-list__section {
|
||||
display: table;
|
||||
@include govuk-font($size: 24, $weight: bold);
|
||||
}
|
||||
|
||||
.app-task-list__section-number {
|
||||
display: table-cell;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
min-width: govuk-spacing(6);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-task-list__items {
|
||||
@include govuk-font($size: 19);
|
||||
@include govuk-responsive-margin(9, "bottom");
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-left: govuk-spacing(6);
|
||||
}
|
||||
}
|
||||
|
||||
.app-task-list__item {
|
||||
border-bottom: 1px solid $govuk-border-colour;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: govuk-spacing(2);
|
||||
padding-bottom: govuk-spacing(2);
|
||||
@include govuk-clearfix;
|
||||
}
|
||||
|
||||
.app-task-list__item:first-child {
|
||||
border-top: 1px solid $govuk-border-colour;
|
||||
}
|
||||
|
||||
.app-task-list__task-name {
|
||||
display: block;
|
||||
@include govuk-media-query($from: 450px) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.app-task-list__task-completed {
|
||||
margin-top: govuk-spacing(2);
|
||||
margin-bottom: govuk-spacing(1);
|
||||
|
||||
@include govuk-media-query($from: 450px) {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-list--number-bold {
|
||||
li {
|
||||
font-weight: bold;
|
||||
}
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user