robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated sass and npm packages

Browse Source
This commit is contained in:
robbond
2023-12-12 09:24:01 +00:00
parent 1f677139f1
commit e7f4c5d847
7 changed files with 164 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/sass/patterns/_card.scss
+4 -4
View File
@@ -117,7 +117,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
}
&.active {
background-color: govuk-colour("light-grey", $legacy: "grey-4");
background-color: govuk-colour("light-grey");
transition: 0.1s ease-in-out;
.card-heading a {
@@ -125,7 +125,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
margin-top: 0;
&:focus {
color: govuk-colour("black", $legacy: "black");
color: govuk-colour("black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
@@ -167,7 +167,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
}
&:focus {
color: govuk-colour("black", $legacy: "black");
color: govuk-colour("black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
@@ -187,7 +187,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
}
&.clear {
background-color: govuk-colour("white", $legacy: "white");
background-color: govuk-colour("white");
border: none;
}
}
styles/sass/patterns/_step-by-step-header.scss
+4 -4
View File
@@ -5,9 +5,9 @@
@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");
background: govuk-colour("light-grey");
border-top: solid 1px govuk-colour("mid-grey");
border-bottom: solid 1px govuk-colour("mid-grey");
@include govuk-media-query($from: tablet) {
padding: govuk-spacing(3);
@@ -28,4 +28,4 @@
@include govuk-font(24, $weight: bold);
}
// scss-lint:enable SelectorFormat
// scss-lint:enable SelectorFormat
styles/sass/patterns/_step-by-step-nav.scss
+23 -31
View File
@@ -5,7 +5,7 @@ $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");
$top-border: solid 2px govuk-colour("mid-grey");
@mixin step-nav-vertical-line($line-style: solid) {
content: "";
@@ -13,8 +13,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
z-index: 2;
width: 0;
height: 100%;
border-left: $line-style $stroke-width
govuk-colour("mid-grey", $legacy: "grey-2");
border-left: $line-style $stroke-width govuk-colour("mid-grey");
background: govuk-colour("white");
}
@@ -32,13 +31,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
// 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,
@mixin step-nav-font($size,
$tablet-size: $size,
$weight: normal,
$line-height: 1.3,
$tablet-line-height: $line-height
) {
$tablet-line-height: $line-height) {
@include govuk-typography-common();
font-size: $size + px;
font-weight: $weight;
@@ -95,12 +92,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
color: govuk-colour("black");
.app-step-nav--large & {
@include step-nav-font(
19,
@include step-nav-font(19,
$tablet-size: 24,
$weight: bold,
$line-height: 1.4
);
$line-height: 1.4);
}
}
@@ -146,6 +141,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
}
.app-step-nav__step:last-child {
// little dash at the bottom of the line
&:before {
content: "";
@@ -156,8 +152,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
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");
border-bottom: solid $stroke-width govuk-colour("mid-grey");
}
&:after {
@@ -189,6 +184,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
}
.app-step-nav__step--active {
&:last-child:before,
.app-step-nav__circle--number,
&:after,
@@ -221,16 +217,14 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
.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");
border: solid $stroke-width govuk-colour("mid-grey");
.app-step-nav--large & {
@include step-nav-font(
16,
@include step-nav-font(16,
$tablet-size: 19,
$weight: bold,
$line-height: 23px,
$tablet-line-height: 30px
);
$tablet-line-height: 30px);
@include govuk-media-query($from: tablet) {
border-width: $stroke-width-large;
@@ -242,13 +236,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
@include step-nav-font(16, $weight: bold, $line-height: 28px);
.app-step-nav--large & {
@include step-nav-font(
16,
@include step-nav-font(16,
$tablet-size: 19,
$weight: bold,
$line-height: 28px,
$tablet-line-height: 34px
);
$tablet-line-height: 34px);
}
}
@@ -264,8 +256,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
// 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;
$shadow-offset 0 0 $shadow-colour,
0 $shadow-offset 0 $shadow-colour,
-#{$shadow-offset} 0 0 $shadow-colour;
}
.app-step-nav__circle-step-label,
@@ -292,6 +285,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
}
&:hover {
.app-step-nav__button:not(:focus),
.app-step-nav__circle {
color: $govuk-link-colour;
@@ -315,12 +309,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
margin: 0;
.app-step-nav--large & {
@include step-nav-font(
19,
@include step-nav-font(19,
$tablet-size: 24,
$weight: bold,
$line-height: 1.4
);
$line-height: 1.4);
}
}
@@ -355,7 +347,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
margin: 0;
font-size: inherit;
+ .app-step-nav__list {
+.app-step-nav__list {
margin-top: -5px;
.app-step-nav--large & {
@@ -451,9 +443,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
.app-step-nav__context {
display: inline-block;
font-weight: normal;
color: govuk-colour("dark-grey", $legacy: "grey-1");
color: govuk-colour("dark-grey");
&:before {
content: " \2013\00a0"; // dash followed by  
}
}
}
styles/sass/styles.scss
+2 -2
View File
@@ -1,4 +1,4 @@
@import "node_modules/govuk-frontend/govuk/all";
@import "node_modules/govuk-frontend/dist/govuk/all";
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
@import "welshgov/_variables";
@@ -26,4 +26,4 @@ $govuk-assets-path: "/govuk/assets/";
@import "patterns/card";
// Components that aren't in Frontend
@import "components/cookie-banner";
@import "components/cookie-banner";
styles/sass/welshgov/_application.scss
+13 -3
View File
@@ -190,6 +190,16 @@ a.longLinkBreak {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: none;
.govuk-tag {
font-family: Arial, Helvetica, sans-serif;
background-color: #1d70b8;
text-transform: uppercase;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
padding: 5px 8px 4px;
}
}
}
}
@@ -1155,9 +1165,9 @@ textarea,
}
}
.case .govuk-grid-column-full .govuk-summary-list__key {
width: 100%;
}
// .case .govuk-grid-column-full .govuk-summary-list__key {
// width: 100%;
// }
.appealModule {
width: 94%;