diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss index 34de27d9ae09b0d5b9c3e1d4cc6adce0141f9f37..639711bcfd901c7aef7f9e97b0efd2a9089baab7 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 54c7a0bb320d2a99dcdfa9ae8d55d30dffb60707..2c89b0d9c56ce9802162e6cfba3fd38d025f92a8 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 af4bfbf9e9231dca05b0136a1fbe0d6ebb313aaf..e64e424c1e2c51790e8d6b0d522e1878cfc0d418 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 1261808b76888469b7f302830179ae5c6601c59a..a78f308c5008b479761718e1218d6825abb6647a 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 500675300716169f29c783c05678741c0e086e58..7ceb560dccd572f6f2ebd31e96f8bfccb09b5dd3 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 f5c319b8fdd3ad0abaa72fc3fd1cd5a25de72f91..2f5579ed4d22d51d135d858e5407adc5d913fdc3 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; + } } } }