Skip to content
Snippets Groups Projects
Commit 84656168 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5633: adding the css for colour loops in header color-bar, and horizontal menu

parent a6116e0b
No related branches found
No related tags found
1 merge request!15ISTWCMS-5633: import of website's header section
Hide whitespace changes
Inline Side-by-side
Showing
with 150 additions and 153 deletions
src/patterns/01-core/props/_colors.scss
+ 26
− 26
View file @ 84656168
: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
......
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ 84656168
......@@ -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';
......
src/patterns/04-components/color-bar/_color-bar.scss
+ 7
− 16
View file @ 84656168
$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%;
}
......
src/patterns/04-components/color-bar/color-bar.twig
+ 2
− 2
View file @ 84656168
......@@ -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>
......
src/patterns/04-components/date/_date.scss
+ 3
− 3
View file @ 84656168
......@@ -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);
}
}
......
src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 111
− 106
View file @ 84656168
......@@ -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;
}
}
}
}
......
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