-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: UIO focus styling (resolves #231) #233
Changes from 2 commits
67cc1f8
20a7494
1b11d50
211a5a5
8ca4ffa
51e7eab
247387e
a0c2179
fb27e7d
5eb3c71
725ddbc
da22299
97017cb
5f96329
b14d1f0
233b7ed
092bfea
e055cd6
78d1a51
3818497
e0e1671
7e2b072
c846398
a351d48
abe2cb9
50bcad6
4da980e
ac1cc2d
499de18
deef358
7ac9ce1
b75e5b9
abb4cac
45a5804
9ed5f98
e3d30d3
67a4594
9ba17c8
9e0d2d7
330d1be
a3986f5
e7a469b
35d52ea
18a4d6a
1abd850
a04dfe5
d3628e9
3b4be93
a16d8ea
5c813fb
c3f6f41
6888687
bf7994d
b1b7484
1dba701
e056019
5a04e46
8e03e09
8318a6c
b4f2b6b
74cefef
01ad22f
e728734
92f3ee2
28f1d59
a42b255
9d5e0b1
5125487
05557f0
1343c9a
f15442b
6833bcb
5ad376d
90eb719
a94b98d
88869eb
9952e7b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,23 +3,50 @@ | |
// UIO | ||
|
||
// To adapt to UIO high contrast themes | ||
[class^="gpii-ext-theme"], | ||
|
||
// TODO: Address style lint errors when line below is uncommented | ||
// [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: 0.1875rem; | ||
stroke-width: rem(3); | ||
} | ||
|
||
// fix overlap of box-shadow on footer links | ||
footer { | ||
.funders a, | ||
.footer-logos a { | ||
padding: rem(5); | ||
} | ||
} | ||
|
||
// 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; | ||
} | ||
|
||
// Search icon; IDRC, OCADU and Canada logos | ||
header .site-nav-wrapper .site-nav .search-container svg { | ||
fill: currentColor; | ||
height: 1.3rem; | ||
margin: -1.6rem; | ||
width: 1.2rem; | ||
height: rem(19.2); | ||
margin: -rem(25.6); | ||
width: rem(19.2); | ||
} | ||
|
||
// Canada logo | ||
|
@@ -29,38 +56,35 @@ | |
svg.news-item-img use { | ||
stroke: var(--placeholder-stroke, currentColor); | ||
stroke-linecap: round; | ||
stroke-width: 0.1875rem; | ||
stroke-width: rem(3); | ||
} | ||
|
||
#defaultContainer { | ||
// fix overlap of box-shadow on buttons | ||
.fl-prefsEditor-buttons button { | ||
padding-left: rem(3); | ||
padding-right: rem(3); | ||
} | ||
|
||
.content-wrapper .pagination .pagination-list { | ||
// undo default colour from next previous and current pagination | ||
.content-wrapper main .pagination .pagination-list { | ||
.pagination-next, | ||
.pagination-previous { | ||
.pagination-previous, | ||
li a[aria-current="page"]::before { | ||
box-shadow: none; | ||
} | ||
} | ||
|
||
.content-wrapper main .pagination .pagination-list li a[aria-current="page"]::before { | ||
box-shadow: none; | ||
} | ||
|
||
// cards and homepage have no background in contrast themes | ||
.blue, | ||
.green, | ||
.yellow { | ||
background-image: none; | ||
} | ||
|
||
footer .funders .footer-logos a { | ||
padding: rem(5); | ||
} | ||
} | ||
} | ||
|
||
// UIO tab styling | ||
#defaultContainer .fl-prefsEditor-separatedPanel .fl-panelBar { | ||
border-bottom: none; | ||
box-shadow: none; | ||
|
@@ -90,6 +114,66 @@ | |
} | ||
} | ||
|
||
// 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); | ||
padding: 0; | ||
|
||
button { | ||
padding: rem(10) 0; | ||
} | ||
|
||
.fl-prefsEditor-reset { | ||
border: none; | ||
margin-left: rem(9); | ||
padding-bottom: rem(1); | ||
padding-top: rem(5); | ||
} | ||
|
||
button[aria-expanded="false"] { | ||
margin-top: rem(20); | ||
word-spacing: -2px; | ||
} | ||
|
||
button[aria-expanded="true"] { | ||
border-bottom: 2px solid #ccc; | ||
margin-left: rem(5); | ||
padding-bottom: rem(15); | ||
padding-left: rem(10); | ||
width: 97%; | ||
} | ||
} | ||
|
||
// 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; | ||
padding: rem(10) rem(20); | ||
|
||
button:not(.fl-prefsEditor-reset) { | ||
margin: 0 rem(8); | ||
} | ||
|
||
.fl-prefsEditor-reset { | ||
padding: 0; | ||
padding-left: rem(12.8); | ||
} | ||
|
||
button[aria-expanded="true"] { | ||
border: none; | ||
padding: 0; | ||
width: unset; | ||
} | ||
|
||
button[aria-expanded="false"] { | ||
margin-top: 0; | ||
padding: 0; | ||
} | ||
} | ||
} | ||
|
||
// For styles that require foreground and background colors from each theme | ||
@each $theme, $fColor, $bColor in $UIOThemes { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It might be better to move this section to before the line 94 since this style belongs to the generic css outside of any specific media query breakpoint. After the change, the structure of this file will be more structured with the media query breakpoints. |
||
.fl-theme-#{$theme}, .gpii-ext-theme-#{$theme} { | ||
|
@@ -100,10 +184,7 @@ | |
--theme-background-fill: #{$bColor}; | ||
--placeholder-stroke: #{$fColor}; | ||
|
||
@include adapt-to-highContrast($fColor, $bColor); | ||
|
||
// uio constrast focus and hover | ||
@include uio-focus-style($fColor, $bColor); | ||
@include adapt-to-contrastThemes($fColor, $bColor); | ||
} | ||
} | ||
|
||
|
@@ -112,9 +193,9 @@ | |
[class^="fl-theme"]:not(.fl-theme-prefsEditor-default) { | ||
// Search icon; IDRC, OCADU and Canada logos | ||
header .site-nav-wrapper .site-nav .search-container svg { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe this css needs to be moved out of the generic selector into theme specific selectors too. Seems you need another loop on |
||
height: 1.5rem; | ||
margin: -2.5rem; | ||
width: 1.5rem; | ||
height: rem(24); | ||
margin: -rem(40); | ||
width: rem(24); | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When including the selector
.gpii-ext-theme-#{$theme}
for UIO + themes the following linting errors occur:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While working on #266, I found CSS attached with the generic selector
[class^="gpii-ext-theme"], [class^="fl-theme"]:not(.fl-theme-prefsEditor-default)
sometimes are not applied when another UIO style that is attached with a specific theme selector kicks in. The solution (#269) is to hook up CSS with each specific theme selector.From the lesson learnt there, I feel the same rule applies to other CSS you have here too. It means to move all css inside
[class^="gpii-ext-theme"], [class^="fl-theme"]:not(.fl-theme-prefsEditor-default)
to the mixin function. This change will fix this linting error too.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@cindyli I have moved only the selectors with a
currentColor
value to_mixins.scss
file. Let me now if this is a valid a solution for this linting problem and I will request another reviewThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested with your update. Unfortunately, the similar issue as #266 appears with other css that are not moved from the generic theme into specific theme selector.
Using hiding background image of home page cards as an example:
Turn on "enhance inputs" -> switch to another theme -> the background images of cards show up
These images should not be shown on contrast themes.