-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* fix: focus/hover styling to cards and search for uio contrast options * fix: remove card svg from uio contrast options * fix: use colour code from infusion * fix: hover and focus stlying to uio tab * fix: added styling for current page pagination * fix: hover and focus styling comment in vendors scss * fix: apply uio specific styles to uio plus themes * fix: add hover and focus styling to contrast uio tab * fix: refactor vendors scss * fix: replace foregroundColor with fColor and backgroundColor with bColor * fix: add media query to vendors scss * fix: removed duplicate uio themes variable * fix: removed uneeded comments form mixins * fix: refactored contrast theme styling moved selectors with curretColor value to mixins scss * fix: remove uneeded comment * fix: properly formated rem functions with negative input * fix: moved each before media queries * fix: refactored all uio contrast themes stlyling into mixins scss * fix: placed media query for svg positioning inside mixins scss * fix: added padding to uio tab on enhance inputs to prevent hover/focus overlap * fix: css clean up and adjust code comments Co-authored-by: Cindy Qi Li <cli@ocadu.ca>
- Loading branch information
Showing
2 changed files
with
130 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,128 @@ | ||
| // 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 contrast themes | ||
| @mixin adapt-to-uioThemes($fColor, $bColor) { | ||
| // WeCount logo | ||
| .logo circle, | ||
| .logo path { | ||
| fill: none; | ||
| stroke: var(--logo-stroke, currentColor); | ||
| stroke-linecap: round; | ||
| stroke-width: rem(3); | ||
| } | ||
|
|
||
| --logo-stroke: #{$fColor}; | ||
|
|
||
| // 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); | ||
| } | ||
|
|
||
| --theme-background-fill: #{$bColor}; | ||
| --placeholder-stroke: #{$fColor}; | ||
|
|
||
| // Focus/hover styles for SVGs on the footer | ||
| footer .footer-content { | ||
| // Logos on the footer | ||
| .funders a, | ||
| .footer-logos a { | ||
| padding: rem(5); | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| // Social media icons | ||
| .social-media .social-media-icons a { | ||
| svg path { | ||
| fill: $bColor; | ||
| stroke: currentColor; | ||
| fill: currentColor; | ||
| stroke: $bColor; | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| svg path { | ||
| fill: $bColor; | ||
| stroke: currentColor; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Focus/hover styles for links | ||
| #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 { | ||
| // UIO buttons | ||
| .fl-prefsEditor-buttons button { | ||
| padding-left: rem(3); | ||
| padding-right: rem(3); | ||
| } | ||
|
|
||
| // Pagination on the contrast theme: previous, next, current page | ||
| .content-wrapper main .pagination .pagination-list { | ||
| .pagination-next, | ||
| .pagination-previous, | ||
| li a[aria-current="page"]::before { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
|
|
||
| .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 { | ||
| box-shadow: | ||
| 0 0 0 rem(4) $bColor, | ||
| 0 0 0 rem(6) $fColor; | ||
| } | ||
| } | ||
|
|
||
| // Home page cards: hide background images on UIO contrast themes | ||
| .blue, | ||
| .green, | ||
| .yellow { | ||
| background-image: none; | ||
| } | ||
| } | ||
|
|
||
| // Hide ellipsis when a post excerpt is fully displayed | ||
| .news-grid .api-content .news-item .preview-content::after { | ||
| background: $bColor; | ||
| } | ||
|
|
||
| @media screen and (min-width: 1024px) { | ||
| // Adjust the position of the search icon on the header | ||
| header .site-nav-wrapper .site-nav .search-container svg { | ||
| height: rem(24); | ||
| margin: rem(-40); | ||
| width: rem(24); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters