diff --git a/source/_patterns/04-components/call-to-action/_call-to-action.scss b/source/_patterns/04-components/call-to-action/_call-to-action.scss index 5d2983967b92ed6f78bbed9e060cf5c092e09bb2..4d35c7f0c95c132329cb0700f2a3f92a70f4af88 100644 --- a/source/_patterns/04-components/call-to-action/_call-to-action.scss +++ b/source/_patterns/04-components/call-to-action/_call-to-action.scss @@ -1,3 +1,44 @@ +$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school'; + +@each $faculty in $faculties { + .uw-cta { + .#{$faculty} { + .uw-cta__text--big { + + @if $faculty == org-default { + color: $uw-gold; + } + @else { + color: gesso-brand($faculty, 'lvl1'); + } + } + } + + &__aside.#{$faculty} { + &:hover { + @if $faculty == org-default { + background-color: $uw-gold; + + .uw-cta__text--big, + .uw-cta__text--small, + .uw-cta__text--medium { + color: $uw-black; + } + } + @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 { clear: both; height: 100%; @@ -11,22 +52,10 @@ padding: 0 1rem; } - aside { + .uw-cta__aside { background-color: $uw-black; flex: 1 0 30%; margin: 0 1rem; - - .uw-cta__wrapper { - color: $uw-gold; - } - - &:hover { - background-color: $uw-gold; - - .uw-cta__wrapper { - color: $uw-black; - } - } } } @@ -37,6 +66,10 @@ padding: 0; text-decoration: none; width: 100%; + + &:hover { + text-decoration: none; + } } .uw-cta__text { @@ -49,6 +82,7 @@ } &--medium { + color: $uw-white; font-size: 1.2rem; letter-spacing: 0.05rem; line-height: 1.2; @@ -56,6 +90,7 @@ } &--small { + color: $uw-white; font-size: 0.8rem; letter-spacing: 0.02rem; line-height: 1; diff --git a/source/_patterns/04-components/call-to-action/call-to-action.twig b/source/_patterns/04-components/call-to-action/call-to-action.twig index 53cc3ca701f640e805fc2169387b008692909a2a..5a153ceb652e02989cf16ab441076066e0b743c3 100644 --- a/source/_patterns/04-components/call-to-action/call-to-action.twig +++ b/source/_patterns/04-components/call-to-action/call-to-action.twig @@ -3,7 +3,7 @@ {% for cta in ctas %} - <aside class="uw-cta__aside"> + <aside class="uw-cta__aside {{ cta.theme }}"> {% if cta.link %} <a href="{{ cta.link }}" class="uw-cta__link"> diff --git a/source/_patterns/04-components/call-to-action/call-to-action.yml b/source/_patterns/04-components/call-to-action/call-to-action.yml index aa3360d28b57297579d7fae95099a447b957ec76..15b5a663d016a512cf91b4890fb81ceb05d39266 100644 --- a/source/_patterns/04-components/call-to-action/call-to-action.yml +++ b/source/_patterns/04-components/call-to-action/call-to-action.yml @@ -19,10 +19,10 @@ ctas: type: 'big' - text: 'ST#2' type: 'small' - theme: 'org-default' + theme: 'org-ahs' - link: '#' details: - - text: 'BT#1' + - text: 'BT#3' type: 'big' - theme: 'org-default' + theme: 'org-eng'