From 1f1b06fc18433a4a75ce96fc4dd03f81532c64c4 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 9 Nov 2022 16:10:19 -0500
Subject: [PATCH] ISTWCMS-5940: css to make the links use the links mixin and
then loop for the faculties
---
.../01-core/elements/_inline-elements.scss | 42 ++--
.../03-layouts/site-footer/_site-footer.scss | 10 -
src/patterns/04-components/_index.scss | 1 +
src/patterns/04-components/card/_card.scss | 14 --
src/patterns/04-components/links/_links.scss | 201 ++++++++++++++++++
.../04-components/site-name/_site-name.scss | 8 -
6 files changed, 223 insertions(+), 53 deletions(-)
create mode 100644 src/patterns/04-components/links/_links.scss
diff --git a/src/patterns/01-core/elements/_inline-elements.scss b/src/patterns/01-core/elements/_inline-elements.scss
index 1d565316..39bcac00 100644
--- a/src/patterns/01-core/elements/_inline-elements.scss
+++ b/src/patterns/01-core/elements/_inline-elements.scss
@@ -9,27 +9,27 @@
transition-property: background-color, border-color, color, outline-color, text-decoration-color;
transition-timing-function: var(--ease-in-out-2);
- &:where([href]) {
- color: var(--gray-6);
- text-decoration-color: var(--gray-1);
-
- &:where(:hover) {
- color: var(--uw-black);
- text-decoration-color: var(--uw-black);
- }
- &:where(:focus) {
- color: var(--uw-black);
- text-decoration-color: var(--uw-black);
- }
- &:where(:visited) {
- color: var(--gray-6);
- text-decoration-color: var(--gray-6);
- }
- }
-
- &:where(:not(:hover)) {
- text-decoration: inherit;
- }
+ //&:where([href]) {
+ // color: var(--gray-6);
+ // text-decoration-color: var(--gray-1);
+ //
+ // &:where(:hover) {
+ // color: var(--uw-black);
+ // text-decoration-color: var(--uw-black);
+ // }
+ // &:where(:focus) {
+ // color: var(--uw-black);
+ // text-decoration-color: var(--uw-black);
+ // }
+ // &:where(:visited) {
+ // color: var(--gray-6);
+ // text-decoration-color: var(--gray-6);
+ // }
+ //}
+
+ //&:where(:not(:hover)) {
+ // text-decoration: inherit;
+ //}
@media print {
&,
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 6f28e947..1878934f 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -18,16 +18,6 @@
}
&__title {
color: var(--uw-white-1);
- a{
- color: var(--uw-white-1);
- text-decoration: underline;
- &:hover,
- &:focus
- {
- color: var(--uw-white-1);
- text-decoration: none;
- }
- }
//font-family: gesso-font-family(condensedbook);
//font-size: rem(gesso-font-size(3));
grid-column: 1 / 2;
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index dba99d36..57e8d023 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -28,6 +28,7 @@
@forward 'icon/icon--button/icon--button';
@forward 'image/image';
@forward 'image-gallery/image-gallery';
+@forward 'links/links';
@forward 'mailchimp/mailchimp';
@forward 'mailman-subscription/mailman-subscription';
@forward 'menu/menu';
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index 05c0aa2a..b0311a49 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -125,13 +125,6 @@ $card-padding: var(--size-2) !default;
margin: 0 0 var(--size-1) 0;
padding: 0;
width: 100%;
-
- a {
- @include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- }
}
.card__author {
@@ -140,13 +133,6 @@ $card-padding: var(--size-2) !default;
font-size: var(--font-size-00);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
-
- a {
- @include link(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- }
}
// body
diff --git a/src/patterns/04-components/links/_links.scss b/src/patterns/04-components/links/_links.scss
new file mode 100644
index 00000000..a6727130
--- /dev/null
+++ b/src/patterns/04-components/links/_links.scss
@@ -0,0 +1,201 @@
+@use '../../01-core' as *;
+
+@each $faculty, $colour in $faculties_colours {
+ .#{$faculty} {
+ // If the UW branding group
+ @if $faculty == org-default {
+ // Generic links
+ a {
+ @include link(
+ var(--uw-black),
+ var(--gray-5)
+ );
+ &.button {
+ @include link-no-underline(
+ var(--uw-white),
+ var(--gray-5)
+ );
+ }
+ &.uw-site-name__link {
+ @include link-reverse(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ &.tag {
+ @include link-reverse(
+ var(--gray-5),
+ var(--gray-5)
+ );
+ }
+ }
+ .card__title a{
+ @include link-reverse(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .menu--uw-footer li a{
+ @include link-reverse(
+ var(--uw-white),
+ var(--uw-gold)
+ );
+ }
+ .uw-site-footer__content a,
+ .uw-site-footer__title a{
+ @include link(
+ var(--uw-white),
+ var(--uw-white)
+ );
+ }
+ .uw-site-footer__content table a{
+ @include link(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .uw-site-footer__social-media a {
+ @include link(
+ var(--uw-gray),
+ var(--uw-gray)
+ );
+ }
+ .uw-footer__social-directory a{
+ @include link-reverse(
+ var(--uw-gold),
+ var(--uw-white)
+ );
+ }
+ .uw-footer-phone a,
+ .uw-territorial a{
+ @include link-reverse(
+ var(--uw-gold),
+ var(--uw-gold)
+ );
+ }
+ .tabs a{
+ @include link-no-underline(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .pager__item a{
+ &:hover,
+ &:focus{
+ color: var(--uw-black) !important;
+ }
+ }
+ .uw-site-footer__content .highlight{
+ color: var(--uw-white);
+ }
+ }
+ // Else run the loop on the faculties.
+ @else {
+ // Generic links.
+ a{
+ @include link(
+ var(--#{$colour}-primary),
+ var(--#{$colour}-primary)
+ );
+ // Links as buttons need white.
+ &.button {
+ @include link-no-underline(
+ var(--uw-white),
+ var(--gray-5)
+ );
+ }
+ &.pager__link {
+ color: var(--uw-black);
+ }
+ &.uw-site-name__link {
+ @include link-reverse(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ &.tag {
+ @include link-reverse(
+ var(--#{$colour}-primary),
+ var(--#{$colour}-primary)
+ );
+ }
+ }
+ .card__title a{
+ @include link-reverse(
+ var(--#{$colour}-primary),
+ var(--#{$colour}-primary)
+ );
+ }
+ .menu--uw-footer li a{
+ @include link-reverse(
+ var(--uw-white),
+ var(--uw-gold)
+ );
+ }
+ .uw-site-footer__content a,
+ .uw-site-footer__title a{
+ @include link(
+ var(--uw-white),
+ var(--uw-white)
+ );
+ }
+ .uw-site-footer__content table a{
+ @include link(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .uw-site-footer__social-media a {
+ @include link(
+ var(--gray-5),
+ var(--gray-5)
+ );
+ }
+ .uw-footer__social-directory a{
+ @include link-reverse(
+ var(--uw-gold),
+ var(--uw-white)
+ );
+ }
+ .uw-footer-phone a,
+ .uw-territorial a{
+ @include link-reverse(
+ var(--uw-gold),
+ var(--uw-gold)
+ );
+ }
+ // Blackout the link
+ .views-exposed-form a,
+ .uw-site-name__link,
+ .layout-builder__link,
+ .timeline-info__withlink a,
+ .toolbar-tray a,
+ .ui-dialog-content a,
+ .messages--status a,
+ .uw-content-moderation a,
+ .view-interact a{
+ @include link(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .tabs a{
+ @include link-no-underline(
+ var(--uw-black),
+ var(--uw-black)
+ );
+ }
+ .uw-site-footer__content .highlight{
+ color: var(--uw-white);
+ }
+ // MAke primary color.
+ .uw-blockquote__text,
+ .uw-blockquote__text::before,
+ .uw-blockquote__text::after,
+ .uw-blockquote__attribution,
+ .uw-blockquote__attribution cite{
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss
index ec31222e..b488afb5 100644
--- a/src/patterns/04-components/site-name/_site-name.scss
+++ b/src/patterns/04-components/site-name/_site-name.scss
@@ -6,13 +6,6 @@ $site-name-font-size: var(--font-size-5);
$site-slogan-font-size: var(--font-size-2);
.uw-site-name {
- a {
- color: var(--uw-black);
- &:hover{
- text-decoration: underline;
- }
- }
-
&__wrapper {
padding: 0 var(--size-1);
@media(min-width: $screen-md) {
@@ -23,7 +16,6 @@ $site-slogan-font-size: var(--font-size-2);
&__link {
display: inline-block;
letter-spacing: inherit;
- text-decoration: none;
text-transform: uppercase;
}
--
GitLab