fix: UIO focus styling (resolves #231)

src/scss/abstracts/_mixins.scss

@@ -1,18 +1,107 @@
 // Mixins.
-@mixin adapt-to-highContrast($fColor, $bColor) {
-	// Social media icons
-	footer .footer-content .social-media .social-media-icons a {
-		svg path {
-			fill: currentColor;
-			stroke: $bColor;
+
+// To adapt to UIO high contrast themes
+@mixin adapt-to-contrastThemes($fColor, $bColor) {
+	// WeCount logo
+	.logo circle,
+	.logo path {
+		fill: none;
+		stroke: var(--logo-stroke, currentColor);
+		stroke-linecap: round;
+		stroke-width: rem(3);
+	}
+	// Search icon; IDRC, OCADU and Canada logos
+	header .site-nav-wrapper .site-nav .search-container svg {
+		fill: currentColor;
+		height: rem(19.2);
+		margin: rem(-25.6);
+		width: rem(19.2);
+	}
+
+	// Canada logo
+	--theme-link-fill: currentColor;
+
+	// Placeholder images on the "views" page
+	svg.news-item-img use {
+		stroke: var(--placeholder-stroke, currentColor);
+		stroke-linecap: round;
+		stroke-width: rem(3);
+	}
+
+	footer .footer-content {
+		// fix overlap of box-shadow on footer links
+		.funders a,
+		.footer-logos a {
+			padding: rem(5);
 		}
+		// Social media icons
+		.social-media .social-media-icons a {
+			svg path {
+				fill: currentColor;
+				stroke: $bColor;
+			}
+
+			&:hover,
+			&:focus {
+				svg path {
+					fill: $bColor;
+					stroke: currentColor;
+				}
+			}
+		}
+	}
 
+	// UIO focus style focus/hover styles for links in uio contrast themes
+	#defaultContainer a:focus,
+	#defaultContainer a:hover,
+	#defaultContainer header .site-nav-wrapper .site-nav nav a:focus,
+	#defaultContainer header .site-nav-wrapper .site-nav nav a:hover,
+	#defaultContainer .content-wrapper .tags-info .tags a:focus,
+	#defaultContainer .content-wrapper .tags-info .tags a:hover,
+	#search-form input,
+	.card:focus,
+	.card:hover,
+	button:focus,
+	button:hover,
+	li .pagination-link,
+	li .pagination-link::before {
+		box-shadow: inset 0 0 0 rem(2) currentColor;
+	}
+
+	#defaultContainer {
+		// fix overlap of box-shadow on buttons
+		.fl-prefsEditor-buttons button {
+			padding-left: rem(3);
+			padding-right: rem(3);
+		}
+
+		// undo default focus/hover styling on next, previous and current pagination
+		.content-wrapper main .pagination .pagination-list {
+			.pagination-next,
+			.pagination-previous,
+			li a[aria-current="page"]::before {
+				box-shadow: none;
+			}
+		}
+
+		// cards and homepage have no background in contrast themes
+		.blue,
+		.green,
+		.yellow {
+			background-image: none;
+		}
+	}
+
+	// Current page pagination styling for uio contrast themes
+	#defaultContainer .content-wrapper main .pagination .pagination-list li a[aria-current="page"] {
+		background-color: $fColor !important; // Enactors.css in infusion uses !important on this element
+		box-shadow: none;
+		color: $bColor !important; // Enactors.css in infusion uses !important on this element
 		&:hover,
 		&:focus {
-			svg path {
-				fill: $bColor;
-				stroke: currentColor;
-			}
+			box-shadow:
+				0 0 0 rem(4) $bColor,
+				0 0 0 rem(6) $fColor;
 		}
 	}
 

src/scss/vendors/_vendors.scss

@@ -1,7 +1,8 @@
 // Vendor-specific styles.
 
-//UIO
+// UIO
 
+// UIO tab styling
 #defaultContainer .fl-prefsEditor-separatedPanel .fl-panelBar {
 	border-bottom: none;
 	box-shadow: none;
@@ -31,6 +32,7 @@
 	}
 }
 
+// Stlying for when enhance inputs is turned on
 .fl-input-enhanced #defaultContainer .fl-prefsEditor-separatedPanel .fl-panelBar .fl-prefsEditor-buttons {
 	display: inline-block;
 	height: rem(88);
@@ -61,7 +63,22 @@
 	}
 }
 
-@media screen and (min-width: 40em) { // This media query breakpoint comes from the infusion preferences framework for UIO in order to customize UIO button styles on desktop and mobile.
+// For styles that require foreground and background colors from each theme
+@each $theme, $fColor, $bColor in $UIOThemes {
+	.fl-theme-#{$theme}, .gpii-ext-theme-#{$theme} {
+		// WeCount logo
+		--logo-stroke: #{$fColor};
+
+		// The placeholder svg on the "views" page
+		--theme-background-fill: #{$bColor};
+		--placeholder-stroke: #{$fColor};
+
+		@include adapt-to-contrastThemes($fColor, $bColor);
+	}
+}
+
+// This media query breakpoint comes from the infusion preferences framework for UIO in order to customize UIO button styles on desktop and mobile.
+@media screen and (min-width: 40em) {
 	.fl-input-enhanced #defaultContainer header .fl-prefsEditor-separatedPanel .fl-panelBar .fl-prefsEditor-buttons {
 		display: block;
 		height: auto;
@@ -89,44 +106,14 @@
 	}
 }
 
-// To adapt to UIO high contrast themes
-[class^="gpii-ext-theme"],
-[class^="fl-theme"]:not(.fl-theme-prefsEditor-default) {
-	// WeCount logo
-	.logo circle,
-	.logo path {
-		fill: none;
-		stroke: var(--logo-stroke, currentColor);
-		stroke-linecap: round;
-		stroke-width: rem(3);
-	}
-
-	// Search icon; IDRC, OCADU and Canada logos
-	header .site-nav-wrapper .site-nav .search-container svg {
-		fill: currentColor;
-	}
-
-	// Canada logo
-	--theme-link-fill: currentColor;
-
-	// Placeholder images on the "views" page
-	svg.news-item-img use {
-		stroke: var(--placeholder-stroke, currentColor);
-		stroke-linecap: round;
-		stroke-width: rem(3);
-	}
-}
-
-// For styles that require foreground and background colors from each theme
-@each $theme, $fColor, $bColor in $UIOThemes {
-	.fl-theme-#{$theme}, .gpii-ext-theme-#{$theme} {
-		// WeCount logo
-		--logo-stroke: #{$fColor};
-
-		// The placeholder svg on the "views" page
-		--theme-background-fill: #{$bColor};
-		--placeholder-stroke: #{$fColor};
-
-		@include adapt-to-highContrast($fColor, $bColor);
+@media screen and (min-width: 1024px) {
+	[class^="gpii-ext-theme"],
+	[class^="fl-theme"]:not(.fl-theme-prefsEditor-default) {
+		// Search icon; IDRC, OCADU and Canada logos
+		header .site-nav-wrapper .site-nav .search-container svg {
+			height: rem(24);
+			margin: rem(-40);
+			width: rem(24);
+		}
 	}
 }