From 846561689712f9c4b6a3e7317788d129233f1aa6 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Wed, 29 Jun 2022 10:56:55 -0400
Subject: [PATCH] ISTWCMS-5633: adding the css for colour loops in header
color-bar, and horizontal menu
---
src/patterns/01-core/props/_colors.scss | 52 ++---
src/patterns/04-components/_index.scss | 1 +
.../04-components/color-bar/_color-bar.scss | 23 +-
.../04-components/color-bar/color-bar.twig | 4 +-
src/patterns/04-components/date/_date.scss | 6 +-
.../menu--horizontal/_menu--horizontal.scss | 217 +++++++++---------
6 files changed, 150 insertions(+), 153 deletions(-)
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 34de27d9..639711bc 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -1,10 +1,10 @@
:where(html) {
// uw-branding follows:
- --art-1: #ffe8cc;
- --art-2: #ffd8a8;
- --art-3: #ffc078;
- --art-4: #ffa94d;
- --art-primary: #ff922b;
+ --art-1: #ffd5a5;
+ --art-2: #fbaf00;
+ --art-3: #e78100;
+ --art-4: #d93f00;
+ --art-primary: #d93f00;
--cgc-1: #ffa5aa;
--cgc-2: #e41740;
--cgc-3: #b71233;
@@ -32,16 +32,16 @@
--env-3: #b4be00;
--env-4: #607000;
--env-primary: #607000;
- --health-1: #97dfef;
- --health-2: #00bed0;
- --health-3: #0098a5;
- --health-4: #005963;
- --health-primary: #005963;
- --math-1: #ffbeef;
- --math-2: #ff63aa;
- --math-3: #df2498;
- --math-4: #c60078;
- --math-primary: #df2498;
+ --ahs-1: #97dfef;
+ --ahs-2: #00bed0;
+ --ahs-3: #0098a5;
+ --ahs-4: #005963;
+ --ahs-primary: #005963;
+ --mat-1: #ffbeef;
+ --mat-2: #ff63aa;
+ --mat-3: #df2498;
+ --mat-4: #c60078;
+ --mat-primary: #df2498;
--neutral-1: #dfdfdf;
--neutral-2: #a2a2a2;
--neutral-3: #787878;
@@ -221,17 +221,17 @@
$faculties_colours: (
'org-default': --uw-gold,
- 'org-ahs': --ahs-primary,
- 'org-art': --art-primary,
- 'org-eng': --eng-primary,
- 'org-env': --env-primary,
- 'org-mat': --mat-primary,
- 'org-sci': --sci-primary,
- 'org-school': --school-primary,
- 'org-stp': --stp-primary,
- 'org-cgc': --cgc-primary,
- 'org-stj': --stj-primary,
- 'org-ren': --ren-primary
+ 'org-ahs': --ahs,
+ 'org-art': --art,
+ 'org-eng': --eng,
+ 'org-env': --env,
+ 'org-mat': --mat,
+ 'org-sci': --sci,
+ 'org-school': --school,
+ 'org-stp': --stp,
+ 'org-cgc': --cgc,
+ 'org-stj': --stj,
+ 'org-ren': --ren
);
//Swatches
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 54c7a0bb..2c89b0d9 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -2,6 +2,7 @@
@forward 'button/button';
@forward 'card/card';
@forward 'card/card--node/card--node';
+@forward 'color-bar/color-bar';
@forward 'contact-info/contact-info';
@forward 'date/date';
@forward 'image/image';
diff --git a/src/patterns/04-components/color-bar/_color-bar.scss b/src/patterns/04-components/color-bar/_color-bar.scss
index af4bfbf9..e64e424c 100644
--- a/src/patterns/04-components/color-bar/_color-bar.scss
+++ b/src/patterns/04-components/color-bar/_color-bar.scss
@@ -1,22 +1,12 @@
-$defaults: 'uw-gold';
-$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
-$lvls: '--color1', 'lvl2', 'lvl3', 'lvl4';
+@use '../../01-core' as *;
-@each $default in $defaults {
- @each $lvl in $lvls {
- .uw-colour-bar__cbar {
- &org-default__#{$default}--#{$lvl} {
- background-color: gesso-brand('org-default', $default, $lvl);
- }
- }
- }
-}
+$lvls: '1', '2', '3', '4';
-@each $faculty in $faculties {
+@each $faculty, $colour in $faculties_colours {
@each $lvl in $lvls {
.uw-colour-bar__cbar {
- &#{$faculty}--#{$lvl} {
- background-color: gesso-brand($faculty, $lvl);
+ &.#{$faculty}-#{$lvl} {
+ background-color: var(#{$colour}-#{$lvl});
}
}
}
@@ -24,7 +14,8 @@ $lvls: '--color1', 'lvl2', 'lvl3', 'lvl4';
.uw-colour-bar__cbars {
display: flex;
- flex-direction: row wrap;
+ flex-direction: row;
+ flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
diff --git a/src/patterns/04-components/color-bar/color-bar.twig b/src/patterns/04-components/color-bar/color-bar.twig
index 1261808b..a78f308c 100644
--- a/src/patterns/04-components/color-bar/color-bar.twig
+++ b/src/patterns/04-components/color-bar/color-bar.twig
@@ -4,9 +4,9 @@
<div class="uw-colour-bar__cbars">
{% for lvl in range(1,lvls) %}
{% if faculty == 'org-default' %}
- <div class="uw-colour-bar__cbar org-default__uw-gold--lvl{{ lvl }}"></div>
+ <div class="uw-colour-bar__cbar uw-gold-{{ lvl }}"></div>
{% else %}
- <div class="uw-colour-bar__cbar {{ faculty }}--lvl{{ lvl }}"></div>
+ <div class="uw-colour-bar__cbar {{ faculty }}-{{ lvl }}"></div>
{% endif %}
{% endfor %}
</div>
diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss
index 50067530..7ceb560d 100644
--- a/src/patterns/04-components/date/_date.scss
+++ b/src/patterns/04-components/date/_date.scss
@@ -106,12 +106,12 @@
}
} @else {
.uw-date {
- background-color: var($colour);
+ background-color: var(#{$colour}-primary);
color: var(--uw-white);
}
.uw-date-details {
- background-color: var($colour);
+ background-color: var(#{$colour}-primary);
&[open] {
.uw-date-details__summary {
@@ -126,7 +126,7 @@
}
@include svg-background(mobile-arrow-down-w);
- background-color: var($colour);
+ background-color: var(#{$colour}-primary);
color: var(--uw-white);
}
}
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index f5c319b8..2f5579ed 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -7,9 +7,11 @@ $menu-horizontal-sub-font-bold: var(--font-systembold);
$menu-horizontal-bar-font-size: var(--font-size-000);
$menu-horizontal-sub-font-size: var(--font-size-000);
$menu-horizontal-drop-bg: #f7f7f7;
+
// Colors
-$menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
-@each $faculty in $menu-faculties {
+
+@each $faculty, $colour in $faculties_colours {
+
@if $faculty == org-default{
.#{$faculty} {
.uw-horizontal-nav {
@@ -114,110 +116,110 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
}
}
@else {
- //.#{$faculty} {
- // .uw-horizontal-nav {
- // .uw-site-home__link{
- // svg{
- // .bg-circle{
- // fill:gesso-brand($faculty, primary);
- // stroke:gesso-brand($faculty, primary);
- // }
- // .house{
- // fill:gesso-brand(org-default,uw-white,lvl1);
- // }
- //
- // }
- // &:focus{
- // svg{
- // .bg-circle{
- // fill:gesso-brand(org-default,uw-white,lvl1);
- // stroke:gesso-brand($faculty, primary);
- // }
- // .house{
- // fill:gesso-brand($faculty, primary);
- // }
- // }
- // }
- // &:hover{
- // svg{
- // .bg-circle{
- // fill:gesso-brand(org-default,uw-white,lvl1);
- // stroke:gesso-brand($faculty, primary);
- // }
- // .house{
- // fill:gesso-brand($faculty, primary);
- // }
- // }
- // }
- // }
- // .menu--horizontal {
- // > .is-active-trail {
- // background-color: gesso-grayscale(gray-3);
- // color: gesso-brand(org-default, uw-black, lvl4);
- // > .menu__link.active{
- // ~ .menu{
- // .menu__item{
- // &__parent{
- // a{
- // border-bottom: 1px solid gesso-brand($faculty, primary);
- // color: gesso-brand($faculty, primary);
- // }
- // }
- // }
- // }
- // }
- // }
- // li {
- // > a{
- // color: gesso-brand(org-default,uw-black,lvl4);
- // &:focus{
- // background-color: gesso-grayscale(gray-3);
- // color: gesso-brand(org-default,uw-black,lvl4);
- // }
- // &.active{
- // background-color: gesso-grayscale(gray-3);
- // color: gesso-brand(org-default,uw-black,lvl4);
- // }
- // &:hover{
- // background-color: gesso-brand(org-default,uw-white,lvl1);
- // color: gesso-brand(org-default,uw-black,lvl4);
- // }
- // }
- // .menu__subnav{
- // a{
- // background-color:transparent;
- // border-bottom:1px solid transparent;
- // text-decoration:none;
- // &:focus {
- // background-color: inherit;
- // border-bottom:1px solid gesso-brand($faculty, primary);
- // color: gesso-brand(org-default,uw-black,lvl4);
- // }
- // &.active{
- // background-color:inherit;
- // border-bottom:1px solid gesso-brand($faculty, primary);
- // color: gesso-brand($faculty, primary);
- // &::after{
- // display:none;
- // }
- // &:hover{
- // background-color:inherit;
- // border-bottom:1px solid gesso-grayscale(gray-3);
- // color: gesso-brand(org-default,uw-black,lvl4);
- // }
- // }
- // &:hover{
- // background-color:inherit;
- // border-bottom:1px solid gesso-brand($faculty, primary);
- // color:gesso-brand($faculty, primary);
- // }
- //
- // }
- // }
- // }
- // }
- // }
- //}
+ .#{$faculty} {
+ .uw-horizontal-nav {
+ .uw-site-home__link{
+ svg{
+ .bg-circle{
+ fill: var(#{$colour}-primary);
+ stroke: var(#{$colour}-primary);
+ }
+ .house{
+ fill: var(--uw-white);
+ }
+
+ }
+ &:focus{
+ svg{
+ .bg-circle{
+ fill: var(--uw-white);
+ stroke: var(#{$colour}-primary);
+ }
+ .house{
+ fill: var(#{$colour}-primary);
+ }
+ }
+ }
+ &:hover{
+ svg{
+ .bg-circle{
+ fill: var(--uw-white);
+ stroke: var(#{$colour}-primary);
+ }
+ .house{
+ fill: var(#{$colour}-primary);
+ }
+ }
+ }
+ }
+ .menu--horizontal {
+ > .is-active-trail {
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ > .menu__link.active{
+ ~ .menu{
+ .menu__item{
+ &__parent{
+ a{
+ border-bottom: 1px solid var(#{$colour}-primary);
+ color: var(#{$colour}-primary);
+ }
+ }
+ }
+ }
+ }
+ }
+ li {
+ > a{
+ color: var(--uw-black);
+ &:focus{
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ }
+ &.active{
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ }
+ &:hover{
+ background-color: var(--uw-white);
+ color: var(--uw-black);
+ }
+ }
+ .menu__subnav{
+ a{
+ background-color: transparent;
+ border-bottom: var(--size-xs) solid transparent;
+ text-decoration: none;
+ &:focus {
+ background-color: inherit;
+ border-bottom: var(--size-xs) solid var(#{$colour}-primary);
+ color: var(--uw-black);
+ }
+ &.active{
+ background-color: inherit;
+ border-bottom: var(--size-xs) solid var(#{$colour}-primary);
+ color: var(#{$colour}-primary);
+ &::after{
+ display:none;
+ }
+ &:hover{
+ background-color:inherit;
+ border-bottom: var(--size-xs) solid var(--gray-3);
+ color: var(--uw-black);
+ }
+ }
+ &:hover{
+ background-color: inherit;
+ border-bottom: var(--size-xs) solid var(#{$colour}-primary);
+ color: var(#{$colour}-primary);
+ }
+
+ }
+ }
+ }
+ }
+ }
+ }
}
}
@@ -252,6 +254,9 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
stroke-miterlimit: 10;
stroke-width: 0.5;
}
+ .house{
+ stroke:none !important;
+ }
}
}
}
--
GitLab