Skip to content

Commit 69fe7e3

Browse files
AnjuJose011AnjuJose011
authored
Merge pull request #1282 from TechnologyEnhancedLearning/Develop/Features/TD-5838-fix-overrides-bug
fixed banner image and checkbox scss bug
2 parents ef8a807 + 04d9db2 commit 69fe7e3

File tree

2 files changed

+120
-138
lines changed

2 files changed

+120
-138
lines changed

‎LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,19 +110,16 @@ li.autosuggestion-option:last-of-type {
110110
top: 100%;
111111
}
112112
}
113-
114113
/* tablet */
115114
@media (max-width: px2rem(768)) {
116-
117115
.autosuggestion-menu {
118116
top: 100%;
119117
}
120-
121118
}
122119

123120
/* mobile */
124121
@media (max-width: px2rem(640)) {
125122
.autosuggestion-menu {
126123
top: 100%;
127124
}
128-
}
125+
}

‎LearningHub.Nhs.WebUI/Styles/nhsuk/nhsuk-overrides.scss

Lines changed: 119 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ form label.nhsuk-u-visually-hidden {
179179

180180
// Below taken from layout.scss
181181
// Overrides largely due to
182-
// - Highly customised header
182+
// - Highly customised header
183183
// - Use of full browser width hero images and full width colour bands
184184
// - Beta banner
185185
//
@@ -195,128 +195,142 @@ form label.nhsuk-u-visually-hidden {
195195
}
196196

197197
// Header items
198-
.nhsuk-header {
199-
padding: 0 px2rem(32);
200-
}
198+
.nhsuk-header {
199+
padding: 0 px2rem(32);
200+
}
201201

202-
.nhsuk-header .nhsuk-width-container.app-width-container {
203-
max-width: px2rem(1144);
204-
margin: 0 auto;
205-
}
202+
.nhsuk-header .nhsuk-width-container.app-width-container {
203+
max-width: px2rem(1144);
204+
margin: 0 auto;
205+
}
206206

207-
.nhsuk-width-container.app-width-container.beta-banner {
208-
padding: px2rem(8) px2rem(32);
209-
max-width: px2rem(1208);
210-
margin: 0 auto;
211-
}
207+
.nhsuk-width-container.app-width-container.beta-banner {
208+
padding: px2rem(8) px2rem(32);
209+
max-width: px2rem(1208);
210+
margin: 0 auto;
211+
}
212212

213-
.nhsuk-header .nhsuk-header__container::after {
214-
content: none;
215-
}
213+
.nhsuk-header .nhsuk-header__container::after {
214+
content: none;
215+
}
216216

217-
.nhsuk-header__navigation.app-width-container {
218-
max-width: px2rem(1144);
219-
}
217+
.nhsuk-header__navigation.app-width-container {
218+
max-width: px2rem(1144);
219+
}
220220

221-
.nhsuk-header__container.app-width-container {
222-
display: flex;
223-
justify-content: space-between;
224-
gap: 0 px2rem(24);
225-
padding: px2rem(16) 0;
226-
}
221+
.nhsuk-header__container.app-width-container {
222+
display: flex;
223+
justify-content: space-between;
224+
gap: 0 px2rem(24);
225+
padding: px2rem(16) 0;
226+
}
227227

228-
.nhsuk-header__logo {
229-
flex: 1 0 0;
230-
}
228+
.nhsuk-header__logo {
229+
flex: 1 0 0;
230+
}
231231

232-
.nhsuk-header__logo .nhsuk-header__link--service {
233-
display: inline-flex;
234-
}
232+
.nhsuk-header__logo .nhsuk-header__link--service {
233+
display: inline-flex;
234+
}
235235

236-
.nhsuk-header__service-name {
237-
font-size: px2rem(19);
238-
}
236+
.nhsuk-header__service-name {
237+
font-size: px2rem(19);
238+
}
239239

240-
.nhsuk-header__notification-dot {
241-
position: absolute;
242-
top: px2rem(8);
243-
right: px2rem(-10);
244-
font-size: px2rem(11);
245-
line-height: px2rem(18);
246-
font-weight: 900;
247-
background: $nhsuk-error-color;
248-
color: white;
249-
min-width: px2rem(18);
250-
height: px2rem(18);
251-
text-align: center;
252-
border-radius: px2rem(9);
253-
padding: px2rem(1) px2rem(3) 0;
254-
}
240+
.nhsuk-header__notification-dot {
241+
position: absolute;
242+
top: px2rem(8);
243+
right: px2rem(-10);
244+
font-size: px2rem(11);
245+
line-height: px2rem(18);
246+
font-weight: 900;
247+
background: $nhsuk-error-color;
248+
color: white;
249+
min-width: px2rem(18);
250+
height: px2rem(18);
251+
text-align: center;
252+
border-radius: px2rem(9);
253+
padding: px2rem(1) px2rem(3) 0;
254+
}
255+
256+
.nhsuk-header__menu {
257+
display: none;
258+
}
255259

256-
.nhsuk-header__menu {
257-
display: none;
258-
}
260+
.nhsuk-header__search .nhsuk-search__input {
261+
width: px2rem(260);
262+
}
259263

260-
.nhsuk-header__search .nhsuk-search__input {
264+
.nhsuk-header__search {
265+
.nhsuk-search__input {
261266
width: px2rem(260);
262-
}
263-
264-
.nhsuk-header__search {
265-
.nhsuk-search__input {
266-
width: px2rem(260);
267267

268-
&::-moz-placeholder {
269-
opacity: 1;
270-
}
271-
}
272-
273-
#search > label.nhsuk-u-visually-hidden {
274-
background-color: $nhsuk-white;
268+
&::-moz-placeholder {
269+
opacity: 1;
275270
}
276271
}
277272

278-
.nhsuk-header__break {
279-
display: none;
273+
#search > label.nhsuk-u-visually-hidden {
274+
background-color: $nhsuk-white;
280275
}
276+
}
281277

282-
.nhsuk-header__mobile-only-nav {
283-
display: none;
284-
}
278+
#header-dropdown-menu-control {
279+
opacity: 0;
280+
position: absolute;
281+
}
285282

286-
.nhsuk-header__mobile-break {
287-
display: none;
288-
}
289283

290-
.nhsuk-header__navigation-item--current {
291-
a {
292-
font-weight: bold;
293-
}
294-
}
284+
#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
285+
display: block
286+
}
295287

296-
.nhsuk-account__login {
297-
// also a header item
298-
font-size: px2rem(14);
299-
float: right;
300-
position: relative;
301-
z-index: 2;
302-
display: flex;
303-
justify-content: space-between;
304-
align-items: center;
305-
gap: px2rem(24);
306-
}
288+
#header-mobile-search-control {
289+
display: none;
290+
}
307291

308-
.nhsuk-account__login--link,
309-
.nhsuk-account__login--link:visited,
310-
.nhsuk-account__login--link:hover {
311-
// all header items
312-
color: #fff;
292+
.nhsuk-header__break {
293+
display: none;
294+
}
295+
296+
.nhsuk-header__mobile-only-nav {
297+
display: none;
298+
}
299+
300+
.nhsuk-header__mobile-break {
301+
display: none;
302+
}
303+
304+
.nhsuk-header__navigation-item--current {
305+
a {
306+
font-weight: bold;
313307
}
308+
}
309+
310+
.nhsuk-account__login {
311+
// also a header item
312+
font-size: px2rem(14);
313+
float: right;
314+
position: relative;
315+
z-index: 2;
316+
display: flex;
317+
justify-content: space-between;
318+
align-items: center;
319+
gap: px2rem(24);
320+
}
321+
322+
.nhsuk-account__login--link,
323+
.nhsuk-account__login--link:visited,
324+
.nhsuk-account__login--link:hover {
325+
// all header items
326+
color: #fff;
327+
}
314328

315329

316330
// End of header items
317331

318332

319-
.app-width-container--full {
333+
.nhsuk-width-container.app-width-container--full {
320334
// used to allow placement of hero (full width) images
321335
margin: 0;
322336
max-width: none
@@ -354,7 +368,7 @@ form label.nhsuk-u-visually-hidden {
354368
/* small desktop */
355369
@media (max-width: px2rem(989)) {
356370

357-
//entirely headers
371+
//entirely headers
358372

359373
.nhsuk-header__container {
360374
flex-wrap: wrap;
@@ -385,6 +399,13 @@ form label.nhsuk-u-visually-hidden {
385399
order: 0;
386400
}
387401

402+
.nhsuk-account__login {
403+
// also part of the header
404+
order: 1;
405+
margin-left: auto;
406+
margin-right: 0px;
407+
}
408+
388409
.nhsuk-header__break {
389410
display: block;
390411
width: 100%;
@@ -461,14 +482,6 @@ form label.nhsuk-u-visually-hidden {
461482
box-shadow: 0 0 0 2px white;
462483
z-index: 10;
463484
}
464-
465-
.nhsuk-account__login {
466-
// also part of the header
467-
order: 1;
468-
margin-left: auto;
469-
margin-right: 0px;
470-
}
471-
472485
}
473486

474487
@media (max-width: px2rem(768)) {
@@ -510,19 +523,6 @@ form label.nhsuk-u-visually-hidden {
510523
margin-left: px2rem(12);
511524
}
512525

513-
#header-dropdown-menu-control {
514-
opacity: 0;
515-
position: absolute;
516-
}
517-
518-
#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
519-
display: block
520-
}
521-
522-
#header-mobile-search-control {
523-
display: none;
524-
}
525-
526526
.nhsuk-header__break {
527527
display: none;
528528
}
@@ -570,21 +570,6 @@ form label.nhsuk-u-visually-hidden {
570570
margin: px2rem(16) px2rem(-16) 0;
571571
border-bottom: 1px solid $color_nhsuk-grey-4;
572572
}
573-
574-
#header-mobile-search-control {
575-
display: block;
576-
opacity: 0;
577-
position: absolute;
578-
}
579-
580-
#header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap {
581-
display: block;
582-
}
583-
584-
.nhsuk-width-container.nhsuk-header__container.app-width-container {
585-
padding-bottom: 0;
586-
}
587-
588573
}
589574

590575
@media (max-width: px2rem(640)) {
@@ -670,7 +655,7 @@ form label.nhsuk-u-visually-hidden {
670655
margin: px2rem(16) px2rem(-16) 0;
671656
border-bottom: 1px solid $color_nhsuk-grey-4;
672657
}
673-
658+
674659
#header-mobile-search-control {
675660
display: block;
676661
opacity: 0;
@@ -684,4 +669,4 @@ form label.nhsuk-u-visually-hidden {
684669
.nhsuk-width-container.nhsuk-header__container.app-width-container {
685670
padding-bottom: 0;
686671
}
687-
}
672+
}

0 commit comments

Comments
 (0)