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) { :where(html) {
// uw-branding follows: // uw-branding follows:
--art-1: #ffe8cc; --art-1: #ffd5a5;
--art-2: #ffd8a8; --art-2: #fbaf00;
--art-3: #ffc078; --art-3: #e78100;
--art-4: #ffa94d; --art-4: #d93f00;
--art-primary: #ff922b; --art-primary: #d93f00;
--cgc-1: #ffa5aa; --cgc-1: #ffa5aa;
--cgc-2: #e41740; --cgc-2: #e41740;
--cgc-3: #b71233; --cgc-3: #b71233;
...@@ -32,16 +32,16 @@ ...@@ -32,16 +32,16 @@
--env-3: #b4be00; --env-3: #b4be00;
--env-4: #607000; --env-4: #607000;
--env-primary: #607000; --env-primary: #607000;
--health-1: #97dfef; --ahs-1: #97dfef;
--health-2: #00bed0; --ahs-2: #00bed0;
--health-3: #0098a5; --ahs-3: #0098a5;
--health-4: #005963; --ahs-4: #005963;
--health-primary: #005963; --ahs-primary: #005963;
--math-1: #ffbeef; --mat-1: #ffbeef;
--math-2: #ff63aa; --mat-2: #ff63aa;
--math-3: #df2498; --mat-3: #df2498;
--math-4: #c60078; --mat-4: #c60078;
--math-primary: #df2498; --mat-primary: #df2498;
--neutral-1: #dfdfdf; --neutral-1: #dfdfdf;
--neutral-2: #a2a2a2; --neutral-2: #a2a2a2;
--neutral-3: #787878; --neutral-3: #787878;
...@@ -221,17 +221,17 @@ ...@@ -221,17 +221,17 @@
$faculties_colours: ( $faculties_colours: (
'org-default': --uw-gold, 'org-default': --uw-gold,
'org-ahs': --ahs-primary, 'org-ahs': --ahs,
'org-art': --art-primary, 'org-art': --art,
'org-eng': --eng-primary, 'org-eng': --eng,
'org-env': --env-primary, 'org-env': --env,
'org-mat': --mat-primary, 'org-mat': --mat,
'org-sci': --sci-primary, 'org-sci': --sci,
'org-school': --school-primary, 'org-school': --school,
'org-stp': --stp-primary, 'org-stp': --stp,
'org-cgc': --cgc-primary, 'org-cgc': --cgc,
'org-stj': --stj-primary, 'org-stj': --stj,
'org-ren': --ren-primary 'org-ren': --ren
); );
//Swatches //Swatches
......
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ 84656168
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
@forward 'button/button'; @forward 'button/button';
@forward 'card/card'; @forward 'card/card';
@forward 'card/card--node/card--node'; @forward 'card/card--node/card--node';
@forward 'color-bar/color-bar';
@forward 'contact-info/contact-info'; @forward 'contact-info/contact-info';
@forward 'date/date'; @forward 'date/date';
@forward 'image/image'; @forward 'image/image';
......
src/patterns/04-components/color-bar/_color-bar.scss
+ 7
− 16
View file @ 84656168
$defaults: 'uw-gold'; @use '../../01-core' as *;
$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';
@each $default in $defaults { $lvls: '1', '2', '3', '4';
@each $lvl in $lvls {
.uw-colour-bar__cbar {
&org-default__#{$default}--#{$lvl} {
background-color: gesso-brand('org-default', $default, $lvl);
}
}
}
}
@each $faculty in $faculties { @each $faculty, $colour in $faculties_colours {
@each $lvl in $lvls { @each $lvl in $lvls {
.uw-colour-bar__cbar { .uw-colour-bar__cbar {
&#{$faculty}--#{$lvl} { &.#{$faculty}-#{$lvl} {
background-color: gesso-brand($faculty, $lvl); background-color: var(#{$colour}-#{$lvl});
} }
} }
} }
...@@ -24,7 +14,8 @@ $lvls: '--color1', 'lvl2', 'lvl3', 'lvl4'; ...@@ -24,7 +14,8 @@ $lvls: '--color1', 'lvl2', 'lvl3', 'lvl4';
.uw-colour-bar__cbars { .uw-colour-bar__cbars {
display: flex; display: flex;
flex-direction: row wrap; flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
} }
......
src/patterns/04-components/color-bar/color-bar.twig
+ 2
− 2
View file @ 84656168
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<div class="uw-colour-bar__cbars"> <div class="uw-colour-bar__cbars">
{% for lvl in range(1,lvls) %} {% for lvl in range(1,lvls) %}
{% if faculty == 'org-default' %} {% 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 %} {% else %}
<div class="uw-colour-bar__cbar {{ faculty }}--lvl{{ lvl }}"></div> <div class="uw-colour-bar__cbar {{ faculty }}-{{ lvl }}"></div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
......
src/patterns/04-components/date/_date.scss
+ 3
− 3
View file @ 84656168
...@@ -106,12 +106,12 @@ ...@@ -106,12 +106,12 @@
} }
} @else { } @else {
.uw-date { .uw-date {
background-color: var($colour); background-color: var(#{$colour}-primary);
color: var(--uw-white); color: var(--uw-white);
} }
.uw-date-details { .uw-date-details {
background-color: var($colour); background-color: var(#{$colour}-primary);
&[open] { &[open] {
.uw-date-details__summary { .uw-date-details__summary {
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
} }
@include svg-background(mobile-arrow-down-w); @include svg-background(mobile-arrow-down-w);
background-color: var($colour); background-color: var(#{$colour}-primary);
color: var(--uw-white); 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); ...@@ -7,9 +7,11 @@ $menu-horizontal-sub-font-bold: var(--font-systembold);
$menu-horizontal-bar-font-size: var(--font-size-000); $menu-horizontal-bar-font-size: var(--font-size-000);
$menu-horizontal-sub-font-size: var(--font-size-000); $menu-horizontal-sub-font-size: var(--font-size-000);
$menu-horizontal-drop-bg: #f7f7f7; $menu-horizontal-drop-bg: #f7f7f7;
// Colors // 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{ @if $faculty == org-default{
.#{$faculty} { .#{$faculty} {
.uw-horizontal-nav { .uw-horizontal-nav {
...@@ -114,110 +116,110 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org ...@@ -114,110 +116,110 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
} }
} }
@else { @else {
//.#{$faculty} { .#{$faculty} {
// .uw-horizontal-nav { .uw-horizontal-nav {
// .uw-site-home__link{ .uw-site-home__link{
// svg{ svg{
// .bg-circle{ .bg-circle{
// fill:gesso-brand($faculty, primary); fill: var(#{$colour}-primary);
// stroke:gesso-brand($faculty, primary); stroke: var(#{$colour}-primary);
// } }
// .house{ .house{
// fill:gesso-brand(org-default,uw-white,lvl1); fill: var(--uw-white);
// } }
//
// } }
// &:focus{ &:focus{
// svg{ svg{
// .bg-circle{ .bg-circle{
// fill:gesso-brand(org-default,uw-white,lvl1); fill: var(--uw-white);
// stroke:gesso-brand($faculty, primary); stroke: var(#{$colour}-primary);
// } }
// .house{ .house{
// fill:gesso-brand($faculty, primary); fill: var(#{$colour}-primary);
// } }
// } }
// } }
// &:hover{ &:hover{
// svg{ svg{
// .bg-circle{ .bg-circle{
// fill:gesso-brand(org-default,uw-white,lvl1); fill: var(--uw-white);
// stroke:gesso-brand($faculty, primary); stroke: var(#{$colour}-primary);
// } }
// .house{ .house{
// fill:gesso-brand($faculty, primary); fill: var(#{$colour}-primary);
// } }
// } }
// } }
// } }
// .menu--horizontal { .menu--horizontal {
// > .is-active-trail { > .is-active-trail {
// background-color: gesso-grayscale(gray-3); background-color: var(--gray-3);
// color: gesso-brand(org-default, uw-black, lvl4); color: var(--uw-black);
// > .menu__link.active{ > .menu__link.active{
// ~ .menu{ ~ .menu{
// .menu__item{ .menu__item{
// &__parent{ &__parent{
// a{ a{
// border-bottom: 1px solid gesso-brand($faculty, primary); border-bottom: 1px solid var(#{$colour}-primary);
// color: gesso-brand($faculty, primary); color: var(#{$colour}-primary);
// } }
// } }
// } }
// } }
// } }
// } }
// li { li {
// > a{ > a{
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// &:focus{ &:focus{
// background-color: gesso-grayscale(gray-3); background-color: var(--gray-3);
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// } }
// &.active{ &.active{
// background-color: gesso-grayscale(gray-3); background-color: var(--gray-3);
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// } }
// &:hover{ &:hover{
// background-color: gesso-brand(org-default,uw-white,lvl1); background-color: var(--uw-white);
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// } }
// } }
// .menu__subnav{ .menu__subnav{
// a{ a{
// background-color:transparent; background-color: transparent;
// border-bottom:1px solid transparent; border-bottom: var(--size-xs) solid transparent;
// text-decoration:none; text-decoration: none;
// &:focus { &:focus {
// background-color: inherit; background-color: inherit;
// border-bottom:1px solid gesso-brand($faculty, primary); border-bottom: var(--size-xs) solid var(#{$colour}-primary);
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// } }
// &.active{ &.active{
// background-color:inherit; background-color: inherit;
// border-bottom:1px solid gesso-brand($faculty, primary); border-bottom: var(--size-xs) solid var(#{$colour}-primary);
// color: gesso-brand($faculty, primary); color: var(#{$colour}-primary);
// &::after{ &::after{
// display:none; display:none;
// } }
// &:hover{ &:hover{
// background-color:inherit; background-color:inherit;
// border-bottom:1px solid gesso-grayscale(gray-3); border-bottom: var(--size-xs) solid var(--gray-3);
// color: gesso-brand(org-default,uw-black,lvl4); color: var(--uw-black);
// } }
// } }
// &:hover{ &:hover{
// background-color:inherit; background-color: inherit;
// border-bottom:1px solid gesso-brand($faculty, primary); border-bottom: var(--size-xs) solid var(#{$colour}-primary);
// color:gesso-brand($faculty, primary); color: var(#{$colour}-primary);
// } }
//
// } }
// } }
// } }
// } }
// } }
//} }
} }
} }
...@@ -252,6 +254,9 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org ...@@ -252,6 +254,9 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
stroke-miterlimit: 10; stroke-miterlimit: 10;
stroke-width: 0.5; 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