Commit 7d012b8f authored by m26lebla's avatar m26lebla

Additional css for cta- swapping the hover state to the anchor tag from the...

 Additional css for cta- swapping the hover state to the anchor tag from the aside to allow accessible @focus state
parent c89c7a9b
......@@ -2232,89 +2232,105 @@ ul.toolbar-menu {
.uw-cta .neutral .uw-cta__text--big {
color: #787878; }
.uw-cta__aside.neutral:hover {
.uw-cta__aside.neutral a:hover, .uw-cta__aside.neutral a:focus {
background-color: #787878; }
.uw-cta__aside.neutral:hover .uw-cta__text--big {
.uw-cta__aside.neutral a:hover .uw-cta__text--big, .uw-cta__aside.neutral a:focus .uw-cta__text--big {
color: #fff; }
.uw-cta .org-default .uw-cta__text--big {
color: #fdd54f; }
.uw-cta__aside.org-default:hover {
.uw-cta__aside.org-default a:hover, .uw-cta__aside.org-default a:focus {
background-color: #fdd54f; }
.uw-cta__aside.org-default:hover .uw-cta__text--big,
.uw-cta__aside.org-default:hover .uw-cta__text--small,
.uw-cta__aside.org-default:hover .uw-cta__text--medium {
.uw-cta__aside.org-default a:hover .uw-cta__text--big,
.uw-cta__aside.org-default a:hover .uw-cta__text--small,
.uw-cta__aside.org-default a:hover .uw-cta__text--medium, .uw-cta__aside.org-default a:focus .uw-cta__text--big,
.uw-cta__aside.org-default a:focus .uw-cta__text--small,
.uw-cta__aside.org-default a:focus .uw-cta__text--medium {
color: #000; }
.uw-cta .org-ahs .uw-cta__text--big {
color: #97dfef; }
.uw-cta__aside.org-ahs:hover {
.uw-cta__aside.org-ahs a:hover, .uw-cta__aside.org-ahs a:focus {
background-color: #97dfef; }
.uw-cta__aside.org-ahs:hover .uw-cta__text--big,
.uw-cta__aside.org-ahs:hover .uw-cta__text--small,
.uw-cta__aside.org-ahs:hover .uw-cta__text--medium {
.uw-cta__aside.org-ahs a:hover .uw-cta__text--big,
.uw-cta__aside.org-ahs a:hover .uw-cta__text--small,
.uw-cta__aside.org-ahs a:hover .uw-cta__text--medium, .uw-cta__aside.org-ahs a:focus .uw-cta__text--big,
.uw-cta__aside.org-ahs a:focus .uw-cta__text--small,
.uw-cta__aside.org-ahs a:focus .uw-cta__text--medium {
color: #005963; }
.uw-cta .org-art .uw-cta__text--big {
color: #ffd5a5; }
.uw-cta__aside.org-art:hover {
.uw-cta__aside.org-art a:hover, .uw-cta__aside.org-art a:focus {
background-color: #ffd5a5; }
.uw-cta__aside.org-art:hover .uw-cta__text--big,
.uw-cta__aside.org-art:hover .uw-cta__text--small,
.uw-cta__aside.org-art:hover .uw-cta__text--medium {
.uw-cta__aside.org-art a:hover .uw-cta__text--big,
.uw-cta__aside.org-art a:hover .uw-cta__text--small,
.uw-cta__aside.org-art a:hover .uw-cta__text--medium, .uw-cta__aside.org-art a:focus .uw-cta__text--big,
.uw-cta__aside.org-art a:focus .uw-cta__text--small,
.uw-cta__aside.org-art a:focus .uw-cta__text--medium {
color: #d93f00; }
.uw-cta .org-eng .uw-cta__text--big {
color: #d0b4ef; }
.uw-cta__aside.org-eng:hover {
.uw-cta__aside.org-eng a:hover, .uw-cta__aside.org-eng a:focus {
background-color: #d0b4ef; }
.uw-cta__aside.org-eng:hover .uw-cta__text--big,
.uw-cta__aside.org-eng:hover .uw-cta__text--small,
.uw-cta__aside.org-eng:hover .uw-cta__text--medium {
.uw-cta__aside.org-eng a:hover .uw-cta__text--big,
.uw-cta__aside.org-eng a:hover .uw-cta__text--small,
.uw-cta__aside.org-eng a:hover .uw-cta__text--medium, .uw-cta__aside.org-eng a:focus .uw-cta__text--big,
.uw-cta__aside.org-eng a:focus .uw-cta__text--small,
.uw-cta__aside.org-eng a:focus .uw-cta__text--medium {
color: #57058b; }
.uw-cta .org-env .uw-cta__text--big {
color: #daf582; }
.uw-cta__aside.org-env:hover {
.uw-cta__aside.org-env a:hover, .uw-cta__aside.org-env a:focus {
background-color: #daf582; }
.uw-cta__aside.org-env:hover .uw-cta__text--big,
.uw-cta__aside.org-env:hover .uw-cta__text--small,
.uw-cta__aside.org-env:hover .uw-cta__text--medium {
.uw-cta__aside.org-env a:hover .uw-cta__text--big,
.uw-cta__aside.org-env a:hover .uw-cta__text--small,
.uw-cta__aside.org-env a:hover .uw-cta__text--medium, .uw-cta__aside.org-env a:focus .uw-cta__text--big,
.uw-cta__aside.org-env a:focus .uw-cta__text--small,
.uw-cta__aside.org-env a:focus .uw-cta__text--medium {
color: #607000; }
.uw-cta .org-mat .uw-cta__text--big {
color: #ffbeef; }
.uw-cta__aside.org-mat:hover {
.uw-cta__aside.org-mat a:hover, .uw-cta__aside.org-mat a:focus {
background-color: #ffbeef; }
.uw-cta__aside.org-mat:hover .uw-cta__text--big,
.uw-cta__aside.org-mat:hover .uw-cta__text--small,
.uw-cta__aside.org-mat:hover .uw-cta__text--medium {
.uw-cta__aside.org-mat a:hover .uw-cta__text--big,
.uw-cta__aside.org-mat a:hover .uw-cta__text--small,
.uw-cta__aside.org-mat a:hover .uw-cta__text--medium, .uw-cta__aside.org-mat a:focus .uw-cta__text--big,
.uw-cta__aside.org-mat a:focus .uw-cta__text--small,
.uw-cta__aside.org-mat a:focus .uw-cta__text--medium {
color: #c60078; }
.uw-cta .org-sci .uw-cta__text--big {
color: #b4d5ff; }
.uw-cta__aside.org-sci:hover {
.uw-cta__aside.org-sci a:hover, .uw-cta__aside.org-sci a:focus {
background-color: #b4d5ff; }
.uw-cta__aside.org-sci:hover .uw-cta__text--big,
.uw-cta__aside.org-sci:hover .uw-cta__text--small,
.uw-cta__aside.org-sci:hover .uw-cta__text--medium {
.uw-cta__aside.org-sci a:hover .uw-cta__text--big,
.uw-cta__aside.org-sci a:hover .uw-cta__text--small,
.uw-cta__aside.org-sci a:hover .uw-cta__text--medium, .uw-cta__aside.org-sci a:focus .uw-cta__text--big,
.uw-cta__aside.org-sci a:focus .uw-cta__text--small,
.uw-cta__aside.org-sci a:focus .uw-cta__text--medium {
color: #0033be; }
.uw-cta .org-school .uw-cta__text--big {
color: #ffa5aa; }
.uw-cta__aside.org-school:hover {
.uw-cta__aside.org-school a:hover, .uw-cta__aside.org-school a:focus {
background-color: #ffa5aa; }
.uw-cta__aside.org-school:hover .uw-cta__text--big,
.uw-cta__aside.org-school:hover .uw-cta__text--small,
.uw-cta__aside.org-school:hover .uw-cta__text--medium {
.uw-cta__aside.org-school a:hover .uw-cta__text--big,
.uw-cta__aside.org-school a:hover .uw-cta__text--small,
.uw-cta__aside.org-school a:hover .uw-cta__text--medium, .uw-cta__aside.org-school a:focus .uw-cta__text--big,
.uw-cta__aside.org-school a:focus .uw-cta__text--small,
.uw-cta__aside.org-school a:focus .uw-cta__text--medium {
color: #80001f; }
.uw-cta__center-wrapper {
......@@ -2357,10 +2373,17 @@ ul.toolbar-menu {
.uw-cta__link {
border: 0;
bottom: 0;
display: block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
height: 100%;
left: 0;
min-height: 6.25rem;
padding: 0;
position: relative;
right: 0;
text-decoration: none;
top: 0;
width: 100%; }
.uw-cta__link:hover {
text-decoration: none; }
......
......@@ -16,32 +16,34 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
}
}
}
&__aside.#{$faculty} {
&:hover {
@if $faculty == org-default {
background-color: $uw-gold;
a{
&:hover,
&:focus{
@if $faculty == org-default {
background-color: $uw-gold;
.uw-cta__text--big,
.uw-cta__text--small,
.uw-cta__text--medium {
color: $uw-black;
.uw-cta__text--big,
.uw-cta__text--small,
.uw-cta__text--medium {
color: $uw-black;
}
}
}
@else if $faculty == neutral {
background-color: $uw-grey;
@else if $faculty == neutral {
background-color: $uw-grey;
.uw-cta__text--big {
color: $uw-white;
.uw-cta__text--big {
color: $uw-white;
}
}
}
@else {
background-color: gesso-brand($faculty, 'lvl1');
@else {
background-color: gesso-brand($faculty, 'lvl1');
.uw-cta__text--big,
.uw-cta__text--small,
.uw-cta__text--medium {
color: gesso-brand($faculty, 'lvl4');
.uw-cta__text--big,
.uw-cta__text--small,
.uw-cta__text--medium {
color: gesso-brand($faculty, 'lvl4');
}
}
}
}
......@@ -85,15 +87,23 @@ $faculties: 'neutral', 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env'
margin: 0;
}
}
.uw-cta__link {
border: 0;
bottom:0;
display: block;
font-family:gesso-font-family(condensedbook);
height:100%;
left:0;
min-height:6.25rem;
padding: 0;
position:relative;
right:0;
text-decoration: none;
top:0;
width: 100%;
&:hover {
text-decoration: none;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment