diff --git a/src/patterns/01-core/mixins/_focus.scss b/src/patterns/01-core/mixins/_focus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af7c7703daa8042371394e812ea5ffd269d80abe
--- /dev/null
+++ b/src/patterns/01-core/mixins/_focus.scss
@@ -0,0 +1,10 @@
+// @file
+// Focus mixin
+
+@mixin focus($color: var(--uw-black), $width: var(--size-sm), $offset: var(--size-sm)) {
+ outline: $width solid transparent;
+ outline-offset: $offset;
+ &:focus {
+ outline-color: $color;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index c6a93e78071fd0084b44a691b6d9c134860c4192..8f3a12bbe0b324beea66cf9b6c0262bcc88a153c 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -32,6 +32,7 @@
@mixin heading-1 {
@include heading-base;
+ line-height: var(--font-lineheight-1);
font-size: var( --font-size-8);
}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index 12cb9174c3990b15a0dd34f3d4e493fced562502..46a21902c6f4121f2aac032e8f312fa120526b7a 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -1,6 +1,7 @@
@forward 'accessiblity';
@forward 'button';
@forward 'clearfix';
+@forward 'focus';
@forward 'headings';
@forward 'image-replace';
@forward 'layout';
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 34de27d9ae09b0d5b9c3e1d4cc6adce0141f9f37..af9c8be2093d0a9e4eef614c5f06272501bfe3e0 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;
@@ -220,18 +220,18 @@
}
$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-default': uw-gold,
+ '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/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
index 83b5a3af793b815c48d1afe86851d6bd0abc797a..d9b1708739baf91c7052f4b0b59be74e1c5980ff 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -1,24 +1,25 @@
:where(html) {
--size-xs: 0.063rem; // 1px
--size-sm: 0.125rem; // 2px
- --size-05: 0.25rem; // 4px
- --size-1: 0.5rem; // 8px
+ --size-05: 0.25rem; // 4px xxs
+ --size-1: 0.5rem; // 8px xs
--size-105: 0.75rem; // 12px
- --size-2: 1rem; // 16px
+ --size-2: 1rem; // 16px sm
--size-205: 1.25rem; // 20px
- --size-3: 1.5rem; // 24px
- --size-4: 2rem; // 32px
+ --size-3: 1.5rem; // 24px md
+ --size-4: 2rem; // 32px lg
--size-5: 2.5rem; // 40px
--size-6: 3rem; // 48px
- --size-7: 3.5rem; // 56px
+ --size-7: 3.5rem; // 56px xl
--size-8: 4rem; // 64px
--size-9: 4.5rem; // 72px
--size-10: 5rem; // 80px
--size-11: 5.5rem; // 88px
- --size-12: 6rem; // 96px
+ --size-12: 6rem; // 96px xxl
--size-13: 6.5rem; // 104px
--size-14: 7rem; // 112px
--size-15: 7.5rem; // 120px
+ --size-16: 8rem; // 128px
--size-20: 10rem; // 160px
--size-fluid-1: clamp(.5rem, 1vw, 1rem);
--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 1377c404e720e4caf2423e418719b0f56423f0ef..03fd07a2652b0ae05883ee14c77649ddc366433c 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -9,13 +9,9 @@
width: 100%;
&__wrapper {
@include uw-contained-width();
- padding: var(--size-2);
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
display: grid;
grid-template-columns: 100%;
- padding-top: var(--size-1);
+ padding: var(--size-2);
text-size-adjust: none;
@media(min-width: $screen-xs) {
grid-template-columns: 50% 50%;
@@ -49,7 +45,6 @@
font-size: var(--font-size-00);
}
}
-
&__menu {
-webkit-font-smoothing: antialiased;
grid-column: 1 / 3;
@@ -63,7 +58,6 @@
grid-row: 1 / 2;
}
}
-
&__social {
grid-column: 1 / 3;
grid-row: 3 / 4;
diff --git a/src/patterns/03-layouts/header/_header.scss b/src/patterns/03-layouts/header/_header.scss
index cd71ae72da1d9bf888dbad6d43f99c15a6fe52ed..cf75d95417901c8c5758977796b90f9796a8cb9a 100644
--- a/src/patterns/03-layouts/header/_header.scss
+++ b/src/patterns/03-layouts/header/_header.scss
@@ -4,21 +4,21 @@ $site-name-bg: var(--gray-2);
.uw-header {
@include uw-full-width;
- background-color: #000;
+ background-color: var(--uw-black);
&__masthead {
display: flex;
- //font-family:gesso-font-family(condensedbook);
+ font-family: var(--font-condensedbook);
margin-bottom: 0;
- min-height: 3.5rem;
+ min-height: var(--size-7);
padding: var(--size-1);
position: relative;
transition: margin 300ms;
&.open{
- margin-bottom: 4rem;
+ margin-bottom: var(--size-8);
transition: margin 300ms;
}
@media(min-width: $screen-md) {
- @include layout-constrain;
+ @include uw-contained-width;
min-height: inherit;
padding: var(--size-2);
}
@@ -30,14 +30,15 @@ $site-name-bg: var(--gray-2);
align-self: flex-end;
margin-right: 2.75rem;
@media(min-width: $screen-md) {
- margin-right: 1rem;
+ margin-right: var(--size-2);
}
}
.uw-header-search {
align-self: flex-end;
+ display: inline-flex;
}
.uw-header-searchbar{
- @include layout-constrain;
+ @include uw-contained-width;
display: block;
left: 0;
padding: 0;
@@ -45,7 +46,7 @@ $site-name-bg: var(--gray-2);
top: 100%;
width: 100%;
@media(min-width: $screen-md) {
- display: none;
+ //display: none;
}
}
}
@@ -55,13 +56,13 @@ $site-name-bg: var(--gray-2);
background-color: $site-name-bg;
}
.uw-header__center{
- @include layout-constrain;
- border-bottom: 1px solid var(--gray-3);
+ @include uw-contained-width;
+ border-bottom: var(--size-xs) solid var(--gray-3);
@media(min-width: $screen-md) {
border-bottom: inherit;
}
display: grid;
- grid-template-columns: auto 4rem;
+ grid-template-columns: auto var(--size-8);
padding: 0;
}
.uw-header__site-name{
@@ -83,6 +84,6 @@ $site-name-bg: var(--gray-2);
grid-row: 2 / 3;
margin-bottom: 0;
margin-top: 0;
- padding: 0 1rem;
+ padding: 0 var(--size-2);
}
}
diff --git a/src/patterns/03-layouts/header/header.twig b/src/patterns/03-layouts/header/header.twig
index ab8155c716c1a0e24b46173e97c2c806ab10f121..b4c274a8e5db9b9a1c5c343a697733b66951ef1b 100644
--- a/src/patterns/03-layouts/header/header.twig
+++ b/src/patterns/03-layouts/header/header.twig
@@ -10,7 +10,18 @@
</div>
{% endif %}
<div class="uw-header__masthead">
+ {% include '@components/site-logo/site-logo.twig' %}
+ {% if branding_level == 'full' %}
+ {% include "@components/menu/menu--header/menu--header.twig" with {
+ 'modifier_classes': 'header',
+ 'include_home': false,
+ } %}
+ {% endif %}
+
+ {% include '@components/search/search.twig' with {
+ 'search': search
+ }%}
</div>
<!-- Branding colour bar. -->
{% if branding_level == 'full' %}
@@ -22,7 +33,10 @@
<nav class="uw-header__nav">
<div class="uw-header__center">
<div class="uw-header__site-name">
- Site Name
+ {% include '@components/site-name/site-name.twig' with {
+ 'site_name': site_name,
+ 'home_link': home_link
+ } %}
</div>
<button class="uw-navigation-button" aria-controls="uw-header__navigation" aria-expanded="false">
<span class="uw-navigation-button__text">Menu</span>
@@ -30,7 +44,19 @@
</button>
</div>
<div id="uw-header__navigation" class="uw-header__navigation">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'main',
+ 'menu_name': 'horizontal',
+ 'items': nav_items,
+ 'home_link': home_link,
+ 'include_home': true,
+ }%}
+ {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+ 'modifier_classes': 'secondary',
+ 'items': secondary_items,
+ 'include_home': false,
+ }%}
</div>
</nav>
</header>
diff --git a/src/patterns/03-layouts/header/header.yml b/src/patterns/03-layouts/header/header.yml
index e2b641c35454fd2d06ca03f207d5fb29597162a9..52daa00365cf17d5d772bc656e6289994316b0d7 100644
--- a/src/patterns/03-layouts/header/header.yml
+++ b/src/patterns/03-layouts/header/header.yml
@@ -1,5 +1,6 @@
---
is_demo_header: true
+faculty: 'org-art'
header_modifier_classes: 'header'
menu_name: 'horizontal'
global_message:
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index e729d003858fa1a3fc809199131258bb58447ea7..f15a9928a35c59966e7e1c06dd6cb5f3a04f399c 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -24,5 +24,5 @@
}
.pl-layout-h2 {
- @include layout-constrain;
+ @include uw-contained-width;
}
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 8916c64ed16c852b2060aaa0be08b2617bf50b1e..d8aa3e619a9b3129859384ef77d152985a6a6c9c 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,7 +1,7 @@
@use '../../01-core' as *;
.layout {
- @include layout-constrain;
+ @include uw-contained-width;
.uw-node__with-image .card__node & {
padding: var(--size-1);
@@ -11,7 +11,7 @@
}
&.uw-contained-width {
- @include layout-constrain;
+ @include uw-contained-width;
padding: var(--size-1);
@media(min-width: $screen-xxl) {
@@ -81,7 +81,7 @@
}
.block-inline-blockuw-cbl-google-maps{
- @include layout-constrain;
+ @include uw-contained-width;
@media(min-width: $screen-md) {
@include uw-full-width-margin;
@@ -108,11 +108,11 @@
margin: inherit;
@media(min-width: $screen-md) {
- @include layout-constrain;
+ @include uw-contained-width;
}
&.uw-contained-width {
- @include layout-constrain;
+ @include uw-contained-width;
margin: inherit;
padding: var(--size-1);
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 6cca3390f9a302e2ff679d7feefcdab68efcf539..b56621ab98abbe05780775009450f9c1e1080778 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -14,7 +14,7 @@
z-index: var(--layer-header);
}
.uw-highlighted {
- @include layout-constrain;
+ @include uw-contained-width;
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 8042ec9391ab0b455c27cd35f2243dea65d8405d..6f28e947adf8a8e2e82a4d70c01bf328b0f17c7a 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -3,7 +3,7 @@
.uw-site-footer {
background-color: var(--uw-black-3);
&__wrapper {
- @include layout-constrain;
+ @include uw-contained-width;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index f896bdf47c626539d3a81369e526fa9d35025a41..706ed1e623a77bae086c762c0d04b1e6d7d16c4f 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -2,12 +2,23 @@
@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';
@forward 'menu/menu';
+@forward 'menu/menu--header/menu--header';
+@forward 'menu/menu--horizontal/menu--horizontal';
@forward 'menu/menu--footer/menu--footer';
+@forward 'menu/menu--secondary/menu--secondary';
@forward 'menu/menu--social/menu--social';
+@forward 'mobile-menu/mobile-menu';
+@forward 'mobile-menu-button/mobile-menu-button';
+@forward 'search/search';
+@forward 'search/search--wcms-headerbar/search--wcms-headerbar';
+@forward 'site-logo/site-logo';
+@forward 'site-name/site-name';
+@forward 'skiplinks/skiplinks';
@forward 'social-media/social-media--icon/social-media--icon';
@forward 'svg/svg';
@forward 'tag/tag';
diff --git a/src/patterns/04-components/blockquote/_blockquote.scss b/src/patterns/04-components/blockquote/_blockquote.scss
index 16aefd7d56b2519a5e99c7e3cffa24fa3bbe2777..836632fa9f397c8e46ee445b65d017a1bc12cb50 100644
--- a/src/patterns/04-components/blockquote/_blockquote.scss
+++ b/src/patterns/04-components/blockquote/_blockquote.scss
@@ -1,22 +1,22 @@
.uw-blockquote {
background-color: var(--gray-1);
- color: var(--uw-black);
+ color: var(--uw-black);
&__wrapper {
display: block;
margin-left: auto;
margin-right: auto;
- padding: var(--size-4) 0;
+ padding: var(--size-4) 0;
text-align: center;
}
&__text {
display: inline-block;
p{
- font-size: var(--font-size-4);
+ font-size: var(--font-size-4);
}
max-width: 640px;
- padding: 0 var(--size-5);
+ padding: 0 var(--size-5);
position: relative;
text-align: left;
@@ -53,20 +53,18 @@
text-align: left;
}
-
-
cite {
color: var(--uw-black);
font-family: var(--font-condensedbook);
font-size: var(--font-size-1);
font-weight: normal;
text-align: left;
- text-transform:uppercase;
- > :first-child::before{
- content: "\2014";
- display:inline-block;
- padding-right:var(--size-1);
- }
+ text-transform: uppercase;
+ > :first-child::before{
+ content: "\2014";
+ display: inline-block;
+ padding-right: var(--size-1);
+ }
}
}
}
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
index e6e05c1934a2d3b93db32b445fbffad11cd548d5..a994a91d988ccd4694d20a75643acd4be41608d0 100644
--- a/src/patterns/04-components/button/_button.scss
+++ b/src/patterns/04-components/button/_button.scss
@@ -4,7 +4,7 @@
@use '../../01-core' as *;
.button,
- button{
+button{
@include button();
}
@@ -17,7 +17,6 @@
&:focus {
background-color: var(--cgc-3);
color: var(--uw-white);
-
}
&:active {
@@ -65,7 +64,7 @@
color: var(--uw-white);
&:hover,
&:focus {
- background-color: var(--blue-9);
+ background-color: var(--blue-9);
color: var(--uw-white);
}
}
@@ -84,9 +83,8 @@
// Css within pattern lab.
.pattern-lab-content .mobile-menu-button,
.pl-c-pattern__extra-toggle{
- max-width:inherit;
- width:auto;
-
+ max-width: inherit;
+ width: auto;
}
.pl-c-pattern .pl-c-demo button,
.pl-c-pattern .pl-c-demo .button{
diff --git a/src/patterns/04-components/call-to-action/_call-to-action.scss b/src/patterns/04-components/call-to-action/_call-to-action.scss
index aaece3ed3c47480da892d1b340d61472c6242b80..039540e3fd2f97e7c445aa4e073385f6401d1055 100644
--- a/src/patterns/04-components/call-to-action/_call-to-action.scss
+++ b/src/patterns/04-components/call-to-action/_call-to-action.scss
@@ -51,7 +51,7 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
.uw-cta__text--small,
.uw-cta__text--medium,
a {
- color: darken(gesso-brand($faculty, 'primary'), 5%)
+ color: darken(gesso-brand($faculty, 'primary'), 5%);
}
}
@@ -123,17 +123,17 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
.uw-cta__link {
border: 0;
- bottom:0;
+ bottom: 0;
display: block;
- font-family:gesso-font-family(condensedbook);
- height:100%;
- left:0;
- min-height:6.25rem;
+ font-family: gesso-font-family(condensedbook);
+ height: 100%;
+ left: 0;
+ min-height: 6.25rem;
padding: 0;
- position:relative;
- right:0;
+ position: relative;
+ right: 0;
text-decoration: none;
- top:0;
+ top: 0;
width: 100%;
&:hover {
@@ -142,11 +142,11 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
}
.uw-cta__text {
- font-family:gesso-font-family(condensedbook);
+ font-family: gesso-font-family(condensedbook);
text-align: center;
&--big {
- font-size:rem(gesso-font-size(3));
+ font-size: rem(gesso-font-size(3));
letter-spacing: 0.05rem;
line-height: 1.2;
padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs));
@@ -154,7 +154,7 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
&--medium {
color: $uw-white;
- font-size:rem(gesso-font-size(0));
+ font-size: rem(gesso-font-size(0));
line-height: 1.2;
padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
text-transform: uppercase;
@@ -162,8 +162,8 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
&--small {
color: $uw-white;
- font-family:gesso-font-family(systemmedium);
- font-size:rem(gesso-font-size(-2));
+ font-family: gesso-font-family(systemmedium);
+ font-size: rem(gesso-font-size(-2));
line-height: 1;
padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
text-transform: uppercase;
@@ -173,7 +173,6 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
@each $faculty in $faculties {
.call-to-action-theme-#{$faculty}{
-
display: table-cell;
margin: 1px;
vertical-align: middle;
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index 34fe34b50f617d02becd00d87e20ce2de8a73892..b14b0d6630019037829690e27f91ef57bf2ed593 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -6,7 +6,7 @@
$card-accent-border-color: var(--uw-black-primary) !default;
$card-link-color: var(--uw-black-primary) !default;
$card-link-color-hover: var(--gray-5) !default;
-$card-meta-color: var(--gray-5) !default;
+$card-meta-color: var(--gray-5) !default;
$card-padding: var(--size-2) !default;
.card {
@@ -50,7 +50,6 @@ $card-padding: var(--size-2) !default;
display: block;
img {
- -webkit-filter: opacity(100%);
filter: opacity(100%);
transition: filter;
}
@@ -58,9 +57,8 @@ $card-padding: var(--size-2) !default;
&:hover,
&:focus {
img {
- -webkit-filter: opacity(62%);
filter: opacity(62%);
- transition:filter;
+ transition: filter;
}
}
}
@@ -80,12 +78,10 @@ $card-padding: var(--size-2) !default;
.card__header{
@include uw-no-breakout();
-
margin-bottom: var(--size-3);
width: 100%;
-
.card__node--event & {
- display:grid;
+ display: grid;
grid-template-columns: 1fr auto;
.card__author {
@@ -101,12 +97,11 @@ $card-padding: var(--size-2) !default;
}
.view-interact {
- background-color: var(--uw-white-1);
+ background-color: var(--uw-white-1);
grid-column: 2 / 3;
grid-row: 2 / 3;
margin: 0;
padding: var(--size-2) var(--size-2) 0 0;
-
.uw-node__without-image & {
grid-column: 2 / 3;
grid-row: inherit;
@@ -129,7 +124,6 @@ $card-padding: var(--size-2) !default;
width: 100%;
a {
-
@include link-reverse(
var(--uw-black-primary),
var(--uw-black-primary)
@@ -162,7 +156,7 @@ $card-padding: var(--size-2) !default;
width: 100%;
&:empty {
- margin-bottom:0;
+ margin-bottom: 0;
}
}
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index 43570cde698d4ec0c2215a11beafdf860d91f59e..0cfc142ae8be67ac543d9fa973f3cbf063faa027 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -67,7 +67,7 @@
margin-top: 0;
.card__title {
- background: rgba(0, 0, 0, 0.50);
+ background: rgba(0, 0, 0, 0.5);
color: #fff;
margin-bottom: 0;
margin-top: var(--size-4);
diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.scss b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
index 40388933ec8571b5cf18abb64c39fab30365d3fd..6e0ca71fb753a0d7e95e1db9c71f935255f197d1 100644
--- a/src/patterns/04-components/card/card--teaser/_card--teaser.scss
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -1,13 +1,14 @@
+@use '../../../01-core' as *;
+
.card__teaser {
@include uw-flex-grid(card);
-
.views-row & {
- height:100%;
+ height: 100%;
}
.uw-label {
display: block;
- margin-top: 1rem;
+ margin-top: var(--size-2);
}
.card__tags {
@@ -27,8 +28,8 @@
.card {
&__image {
- margin:0;
- max-width:5rem;
+ margin: 0;
+ max-width: 5rem;
}
&__header {
@@ -36,25 +37,25 @@
grid-template-columns: auto 1fr;
//grid-template-rows: minmax(3rem, auto);
.uw-image__profiles {
- grid-column: 1/2;
+ grid-column: 1 / 2;
grid-row: 1 / 3;
- margin-right: 1rem;
+ margin-right: var(--size-2);
}
.card__position {
- grid-column: 2/3;
- grid-row: 2/3;
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
}
.card__title {
- grid-column: 2/3;
- grid-row: 1/2;
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
margin: 0;
}
}
&__body {
- grid-column: 1/3;
+ grid-column: 1 / 3;
}
}
}
diff --git a/src/patterns/04-components/color-bar/_color-bar.scss b/src/patterns/04-components/color-bar/_color-bar.scss
index 88800fbb4ccb9aab06c308647ac1760b01dc15c5..1144cf345257f06afc49c4a9b9615747702ea206 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,30 +14,27 @@ $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%;
}
.uw-colour-bar__cbar {
- -webkit-box-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- -webkit-flex: 1;
flex: 1;
height: 0.625rem;
margin: 0;
padding: 0;
- @include medium {
+ @media(min-width: $screen-md) {
height: 0.875rem;
}
- @include large {
- height: 1rem;
+ @media(min-width: $screen-lg) {
+ height: var(--size-2);
}
- @include xl {
+ @media(min-width: $screen-xl) {
height: 1.125rem;
}
}
diff --git a/src/patterns/04-components/color-bar/color-bar.twig b/src/patterns/04-components/color-bar/color-bar.twig
index 1261808b76888469b7f302830179ae5c6601c59a..91fb95a83c5f57d271bc404fca8e8ff3dcdde549 100644
--- a/src/patterns/04-components/color-bar/color-bar.twig
+++ b/src/patterns/04-components/color-bar/color-bar.twig
@@ -3,11 +3,7 @@
<div class="uw-colour-bar__wrapper">
<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>
- {% else %}
- <div class="uw-colour-bar__cbar {{ faculty }}--lvl{{ lvl }}"></div>
- {% endif %}
+ <div class="uw-colour-bar__cbar {{ faculty }}-{{ lvl }}"></div>
{% endfor %}
</div>
</div>
diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss
index 500675300716169f29c783c05678741c0e086e58..543151a8d16c9aa637ad465671e99c23231b12bb 100644
--- a/src/patterns/04-components/date/_date.scss
+++ b/src/patterns/04-components/date/_date.scss
@@ -1,10 +1,17 @@
@use '../../01-core' as *;
.uw-date {
- width:auto;
-
+ background-color: var(--uw-gold);
+ color: var(--uw-black);
+ clear: both;
+ display: inline-block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-00);
+ padding: var(--size-1) var(--size-2);
+ text-transform: uppercase;
+ width: auto;
@media(min-width: $screen-lg) {
- margin-left:inherit;
+ margin-left: inherit;
}
}
@@ -14,27 +21,22 @@
.uw-date {
box-sizing: border-box;
- display:block;
+ display: block;
padding: var(--size-1) var(--size-2);
-
&:first-child {
padding: var(--size-1) 2.75rem var(--size-1) var(--size-2);
}
-
text-transform: uppercase;
}
&[open] {
background-color: transparent !important;
-
.card__node--event & {
margin-bottom: var(--size-4);
}
-
position: absolute;
width: calc(100%);
z-index: var(--layer-content);
-
@media(min-width: $screen-xs) {
width: inherit;
}
@@ -42,11 +44,9 @@
}
.uw-date-details__summary {
-
.uw-date {
background: inherit;
}
-
background-position: right var(--size-105) center; // LTR
background-repeat: no-repeat;
background-size: 13px;
@@ -54,39 +54,26 @@
cursor: pointer;
display: inline-block;
padding: 0;
-
.block-uw-cbl-multi-type-list & {
background-position: right var(--size-1) center; // LTR
}
-
&::-webkit-details-marker {
display: none;
}
}
-.uw-date {
- background-color: var(--uw-gold);
- color: var(--uw-black);
- clear: both;
- display: inline-block;
- font-family: var(--font-systemmedium);
- font-size: var(--font-size-00);
- padding: var(--size-1) var(--size-2);
- text-transform: uppercase;
-}
-
@each $faculty, $colour in $faculties_colours {
.#{$faculty} {
@if $faculty == org-default {
.uw-date {
- background-color: var($colour);
+ background-color: var(--#{$colour});
color: var(--uw-black);
}
.uw-date-details {
- background-color: var($colour);
+ background-color: var(--#{$colour});
&[open] {
.uw-date-details__summary {
@@ -101,17 +88,18 @@
}
@include svg-background(mobile-arrow-down);
- background-color: var($colour);
+ background-color: var(--#{$colour});
color: var(--uw-black);
}
- } @else {
+ }
+ @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 {
@@ -122,11 +110,11 @@
.uw-date-details__summary{
.uw-date{
- background:inherit;
+ background: inherit;
}
@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/image/_image.scss b/src/patterns/04-components/image/_image.scss
index dc7ca84f970cc7c5684f5cae85a3fc3e5d3eb352..7c84734ac21260f3b7f5a231e3ce0f99d8dfb943 100644
--- a/src/patterns/04-components/image/_image.scss
+++ b/src/patterns/04-components/image/_image.scss
@@ -1,8 +1,8 @@
.block-uw-cbl-image{
.uw-image {
- display:flex;
+ display: flex;
flex-flow: column;
- width:100%;
+ width: 100%;
img{
display: block;
}
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
index 8c7456ad114d6d9d55c6ae4a1f711f2e5839d968..f760379c6323501d197a3677de796f68e05ac7db 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -4,10 +4,10 @@
@use '../../../01-core' as *;
.menu--uw-footer {
- align-items:flex-start;
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
+ align-items: flex-start;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
justify-content: flex-start;
list-style-type: none;
padding-bottom: var(--size-2);
@@ -35,54 +35,54 @@
border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(5) {
- border-width: var(--size-xs) 0 0 var(--size-xs);
+ border-width: var(--size-xs) 0 0 var(--size-xs);
}
&:nth-child(6) {
- border-width: var(--size-xs) var(--size-xs) 0;
+ border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(7) {
- border-width: var(--size-xs) 0 0 var(--size-xs);
+ border-width: var(--size-xs) 0 0 var(--size-xs);
}
&:nth-child(8) {
- border-width: var(--size-xs) var(--size-xs) 0;
+ border-width: var(--size-xs) var(--size-xs) 0;
}
&:nth-child(9) {
- border-width: var(--size-xs);
+ border-width: var(--size-xs);
}
@media(min-width: $screen-xs) {
padding: 0 0 0 var(--size-1);
- text-align:left;
+ text-align: left;
&:nth-child(1) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(2) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(3) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(4) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(5) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(6) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(7) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(8) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
&:nth-child(9) {
- border-width: 0 var(--size-xs) 0 0;
+ border-width: 0 var(--size-xs) 0 0;
}
}
@media(min-width: $screen-md) {
- flex: 1 0 33%;
+ flex: 1 0 33%;
padding: 0 0.25rem 0 var(--size-2);
&:nth-child(1),
&:nth-child(4),
@@ -96,7 +96,7 @@
font-family: var(--font-condensedbook);
font-size: var(--font-size-00);
font-weight: 300;
- line-height: 1.50;
+ line-height: 1.5;
outline: none;
text-decoration: none;
&:hover,
diff --git a/src/patterns/04-components/menu/menu--header/_menu--header.scss b/src/patterns/04-components/menu/menu--header/_menu--header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61f678bf82dea7cf7df8f4b4c3969d1b1a135428
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/_menu--header.scss
@@ -0,0 +1,137 @@
+@use '../../../01-core' as *;
+
+.uw-horizontal-nav.uw-horizontal-nav--header {
+ background-color: var(--uw-black);
+ max-width: inherit;
+ width: inherit;
+
+ .uw-horizontal-nav--wrapper{
+ background-color: var(--uw-black);
+ display: block;
+ max-width: inherit;
+ padding: 0;
+ position: relative;
+ }
+ .uw-horizontal-nav--home{
+ display: none;
+ grid-column: none;
+ padding: 0;
+ }
+ .uw-horizontal-nav--menu {
+ width: inherit;
+ .menu {
+ border: var(--size-xs) solid var(--uw-white);
+ height: auto;
+ position: relative;
+ width: var(--size-12);
+ a{
+ color: var(--uw-white);
+ line-height: 1.25rem;
+ outline: none;
+ outline-offset: unset;
+ width: 100%;
+ &:hover{
+ color: var(--uw-black);
+ }
+ }
+ &.menu__subnav{
+ a{
+ color: var(--uw-black);
+ outline: none;
+ outline-offset: unset;
+ width: 100%;
+ }
+ }
+ &--horizontal {
+ > .menu__item{
+ background-color: var(--uw-black);
+ border-bottom: 0 solid transparent;
+ width: 100%;
+ &.has-submenu {
+ > a{
+ padding-right: var(--size-3);
+ position: relative;
+ &::after {
+ @include svg-background(mobile-arrow-down-w);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ display: block;
+ height: 0.6rem;
+ position: absolute;
+ text-align: center;
+ width: 0.6rem;
+ }
+ &:hover,
+ &:focus{
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ }
+ }
+ }
+ &.submenu-active{
+ > a{
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ }
+ }
+ }
+ }
+ .no-scroll & {
+ &[aria-expanded="true"]{
+ > a{
+ border-left: inherit;
+ display: inline-block;
+ height: inherit;
+ overflow: inherit;
+ width: inherit;
+ z-index: var(--layer-overlay);
+ span{
+ display: block;
+ }
+ &::after {
+ //transform: scale(0.75, 0.75) rotate(270deg);
+ }
+ }
+ }
+ }
+ }
+ }
+ &__subnav {
+ display: none;
+ }
+ .submenu-active .menu__subnav{
+ background: #f7f7f7;
+ border-width: 0;
+ column-count: 1;
+ display: inherit;
+ height: auto;
+ left: inherit;
+ min-height: auto;
+ min-width: 13rem;
+ padding: var(--size-2) var(--size-1);
+ right: 0;
+ top: inherit;
+ width: auto;
+
+ .menu__item{
+ max-width: inherit;
+ &-parent{
+ display: none;
+ }
+ a{
+ .no-scroll &{
+ border-color: transparent;
+ &:hover{
+ border-color: #e6e6e6;
+ }
+ }
+ }
+ }
+ .menu__subnav{
+ border: 0 solid var(--uw-white);
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--header/menu--header.twig b/src/patterns/04-components/menu/menu--header/menu--header.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e1b8f90eee8b6d657c00c4c327c55853af3d0e9e
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/menu--header.twig
@@ -0,0 +1,54 @@
+{% set submenu = [] %}
+
+{% set submenu = submenu|merge([
+ {
+ 'title': 'Admissions',
+ 'url': 'https://uwaterloo.ca/admissions/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'About Waterloo',
+ 'url': 'https://uwaterloo.ca/about/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Faculties & Academics',
+ 'url': 'https://uwaterloo.ca/faculties-academics/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Offices & Services',
+ 'url': 'https://uwaterloo.ca/offices-services/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'Support Waterloo',
+ 'url': 'https://uwaterloo.ca/support/',
+ 'in_active_trail': false
+ },
+ {
+ 'title': 'COVID-19',
+ 'url': 'https://uwaterloo.ca/coronavirus/',
+ 'in_active_trail': false
+ },
+]) %}
+
+{% set items = [] %}
+{% set items = items|merge([
+ {
+ 'title': 'Jump to',
+ 'url': '#',
+ 'in_active_trail': 'false',
+ 'submenu': submenu
+ }
+]) %}
+
+<div class="uw-header-menu">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'items': items,
+ 'modifier_classes': 'header',
+ 'menu_name': 'horizontal',
+ 'include_home': false,
+ }%}
+</div>
+
diff --git a/src/patterns/04-components/menu/menu--header/menu--header.yml b/src/patterns/04-components/menu/menu--header/menu--header.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c226f54196ff9e78034b66c92434a6ee42cd7f01
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--header/menu--header.yml
@@ -0,0 +1,55 @@
+---
+include_home: false
+modifier_classes: 'header'
+menu_name: 'horizontal'
+items:
+ - title: 'Jump To'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - title: 'Admissions'
+ url: 'https://uwaterloo.ca/admissions/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'About Waterloo'
+ url: 'https://uwaterloo.ca/about/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Faculties & Academics'
+ url: 'https://uwaterloo.ca/faculties-academics/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Offices & Services'
+ url: 'https://uwaterloo.ca/offices-services/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Support Waterloo'
+ url: 'https://uwaterloo.ca/support/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'COVID-19'
+ url: 'https://uwaterloo.ca/coronavirus/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c718575d6919ca29a1ce7c0878e4dee1af5872ec
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -0,0 +1,556 @@
+@use '../../../01-core' as *;
+
+$menu-horizontal-bg: var(--gray-2);
+$menu-horizontal-bar-font: var(--font-book);
+$menu-horizontal-sub-font: var(--font-system);
+$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
+
+@each $faculty, $colour in $faculties_colours {
+
+ @if $faculty == org-default{
+ .#{$faculty} {
+ .uw-horizontal-nav {
+ .uw-site-home__link{
+ svg{
+ .bg-circle{
+ fill: var(--uw-black);
+ stroke: var(--uw-black);
+ }
+ .house{
+ fill: var(--uw-white);
+ }
+ }
+ &:focus{
+ svg{
+ .bg-circle {
+ fill: var(--uw-white);
+ stroke: var(--uw-black);
+ }
+ .house {
+ fill: var(--uw-black);
+ }
+ }
+ }
+ &:hover{
+ svg{
+ .bg-circle {
+ fill: var(--uw-white);
+ stroke: var(--uw-black);
+ }
+ .house {
+ fill: var(--uw-black);
+ }
+ }
+ }
+ }
+ .menu--horizontal {
+ > .is-active-trail {
+ background-color: var(--gray-3);
+ color: var(--uw-black);
+ > .menu__link.active{
+ ~ .menu{
+ .menu__item{
+ &-parent{
+ a{
+ border-bottom: var(--size-xs) solid var(--uw-black);
+ }
+ }
+ }
+ }
+ }
+ }
+ 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: 1px solid transparent;
+ text-decoration: none;
+ &:focus {
+ background-color: inherit;
+ border-bottom: 1px solid var(--uw-black);
+ color: var(--uw-black);
+ }
+ &.active{
+ background-color: inherit;
+ border-bottom: 1px solid var(--uw-black);
+ color: var(--uw-black);
+ &::after{
+ display: none;
+ }
+ &:hover{
+ background-color: inherit;
+ border-bottom: 1px solid var(--gray-3);
+ color: var(--uw-black);
+ }
+ }
+ &:hover{
+ background-color: inherit;
+ border-bottom: 1px solid var(--gray-3);
+ color: var(--uw-black);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ @else {
+ .#{$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);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.uw-horizontal-nav{
+ @include uw-full-width;
+ background-color: var(--gray-2);
+ &--wrapper{
+ @include uw-contained-width;
+ display: grid;
+ padding: 0;
+ position: relative;
+ @media(min-width: $screen-md) {
+ grid-template-columns: var(--size-6) auto;
+ padding: 0 var(--size-1);
+ }
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
+ }
+ &--home{
+ display: none;
+ @media(min-width: $screen-md) {
+ display: block;
+ grid-column: 1 / 2;
+ padding: var(--size-05);
+ .uw-site-home__link{
+ display: block;
+ height: var(--size-3);
+ width: var(--size-3);
+ svg{
+ .bg-circle{
+ stroke-miterlimit: 10;
+ stroke-width: 0.5;
+ }
+ .house{
+ stroke: none !important;
+ }
+ }
+ }
+ }
+ @media(min-width: $screen-xl) {
+ padding: var(--size-05) 0;
+ }
+ }
+ &--menu {
+ @include uw-full-width;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ }
+ .menu {
+ margin-left: inherit;
+ &__link{
+ position: relative;
+ }
+ .menu__item{
+ a{
+ cursor: pointer;
+ outline: none;
+ outline-offset: unset;
+ &:hover{
+ background-color: var(--uw-white);
+ }
+ }
+ }
+
+ // Top Level <ul> flex top items
+ &--horizontal {
+ @include uw-full-width;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: $menu-horizontal-bar-font;
+ justify-content: flex-start;
+ width: 100%;
+ li{
+ font-size: $menu-horizontal-bar-font-size;
+ }
+ > .menu__item{
+ border-bottom: var(--size-xs) solid var(--gray-3);
+ font-size: $menu-horizontal-bar-font-size;
+ @media(min-width: $screen-md) {
+ border-bottom: inherit;
+ }
+ width: 100%;
+ @media(min-width: $screen-md) {
+ width: auto;
+ }
+ a{
+ display: inline-block;
+ line-height: var(--font-lineheight-2);
+ padding: var(--size-1);
+ text-decoration: none;
+ width: 100%;
+ }
+ &.has-submenu {
+ > a{
+ padding-right: var(--size-3);
+ position: relative;
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ color: var(--uw-black);
+ content: '';
+ display: block;
+ height: var(--size-1);
+ position: absolute;
+ right: var(--size-1);
+ text-align: center;
+ top: 12px;
+ width: var(--size-1);
+ }
+ }
+ }
+ .no-scroll & {
+ &[aria-expanded="true"]{
+ > a{
+ border-left: var(--size-xs) solid var(--gray-3);
+ display: inline-block;
+ height: 2.25rem;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: var(--size-4);
+ z-index: var(--layer-overlay);
+ span{
+ display: none;
+ }
+ &::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+ }
+ }
+ // hide all menus that are classed subnav
+ &__subnav {
+ display: none;
+ font-size: $menu-horizontal-sub-font-size;
+ text-transform: none;
+ width: 100%;
+ }
+ .submenu-active {
+
+ &[aria-expanded="true"]{
+ > a{
+ &::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ .menu__subnav{
+ background-color: #f7f7f7;
+ display: block;
+ height: calc(100vh - 7rem);
+ position: absolute;
+ top: 0;
+ z-index: var(--layer-dropdown);
+ .menu__subnav{
+ align-items: inherit;
+ background: inherit;
+ box-shadow: none;
+ column-count: inherit;
+ display: inherit;
+ flex-flow: inherit;
+ flex-direction: inherit;
+ flex-wrap: inherit;
+ height: inherit;
+ left: inherit;
+ margin: 0;
+ max-height: inherit;
+ min-height: inherit;
+ padding-top: inherit !important;
+ position: inherit;
+ top: inherit;
+ width: inherit;
+ z-index: inherit;
+ }
+ @media(min-width: $screen-md) {
+ background-color: #f7f7f7;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
+ break-inside: avoid;
+ column-count: 2;
+ column-fill: balance;
+ column-gap: var(--grid-gap);
+ height: auto;
+ left: var(--size-6);
+ overflow-y: inherit;
+ padding: 0 var(--size-2) var(--size-3) var(--size-2);
+ top: 100%;
+ width: calc(100% - 6rem);
+ // Puts the dropdown at z-index 7
+ z-index: var(--layer-dropdown);
+ }
+ @media(min-width: $screen-lg) {
+ column-count: 3;
+ }
+ @media(min-width: $screen-xl) {
+ column-count: 4;
+ }
+ li{
+ font-size: $menu-horizontal-bar-font-size;
+ }
+ .menu__item{
+ @supports (break-inside: avoid-column) {
+ display: block;
+ }
+ .menu__subnav{
+ padding: 0;
+ }
+ a{
+ font-family: $menu-horizontal-sub-font-bold;
+ font-weight: 400;
+ padding: var(--size-1);
+ padding-right: var(--size-3);
+ .no-scroll &{
+ border-bottom: var(--size-xs) solid #e6e6e6;
+ }
+ @media(min-width: $screen-md) {
+ padding: var(--size-1) var(--size-1) var(--size-1) 0;
+ }
+ }
+ .no-scroll & {
+ &-parent{
+ border-bottom: var(--size-xs) solid #e6e6e6;
+ padding: 0;
+ a{
+ border-bottom: var(--size-xs) solid transparent;
+ }
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ padding-left: var(--size-2);
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ .menu__item {
+ a {
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ }
+ }
+ }
+ }
+ @media(min-width: $screen-md) {
+ height: auto;
+ width: 100%;
+ .menu__item{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ margin-top: inherit;
+ max-width: inherit;
+ padding-left: var(--size-1);
+ a{
+ font-family: $menu-horizontal-sub-font;
+ padding: var(--size-05);
+ }
+ .menu__item{
+ margin-top: inherit;
+ padding-left: var(--size-1);
+ a{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ .menu__item{
+ margin-top: inherit;
+ a{
+ font-family: $menu-horizontal-sub-font;
+ font-weight: 200;
+ }
+ }
+ }
+ }
+ }
+ &-parent{
+ padding: var(--size-05) 0 var(--size-05) 0;
+ top: 0;
+ width: 100%;
+ .menu__link-parent {
+ display: inline-block;
+ position: relative;
+ width: auto;
+ &::after {
+ @include svg-background(mobile-arrow-down);
+ background-position: center center; // LTR
+ background-repeat: no-repeat;
+ background-size: contain;
+ color: var(--uw-black);
+ content: '';
+ display: block;
+ height: var(--size-1);
+ position: absolute;
+ right: var(--size-1);
+ text-align: center;
+ top: 12px;
+ transform: rotate(-90deg);
+ width: var(--size-1);
+ }
+ }
+ @media(min-width: $screen-md) {
+ column-span: all;
+ max-width: inherit !important;
+ padding: var(--size-1) 0 var(--size-1) 0;
+ .menu__link-parent {
+ font-size: var(--font-size-00);
+ margin: 0 0 var(--size-05) 0;
+ &::after {
+ right: -1rem !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .sub-1{
+ @media(min-width: $screen-md) {
+ /* for Chrome and Edge Brave Opera */
+ break-inside: avoid;
+ /* for Firefox */
+ display: inline-grid;
+ page-break-inside: avoid;
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
new file mode 100644
index 0000000000000000000000000000000000000000..c494ab85d1ad614bd6fd4eaffcd5774e0b3df2d4
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -0,0 +1,237 @@
+/**
+ * @file
+ */
+
+(function ($, document, Drupal) {
+ 'use strict';
+ Drupal.behaviors.menuhorizontal = {
+ attach: function (context) {
+ // uw-horizontal-nav.
+ $(document).ready(
+ function () {
+ // Have to add the run this code only once, so that multiple
+ // loads of the menu are not shown when logged in.
+ $(document, context).once('menuhorizontal').each(
+ function () {
+
+ var toggle = document.querySelector('.uw-navigation-button');
+ var navHeader = document.querySelector('.uw-header__navigation');
+ var menus = document.querySelectorAll('.menu--horizontal');
+ var items = document.querySelectorAll('.menu__item');
+
+ /* Toggle mobile menu */
+ /**
+ * Javascript for Toggle mobile menu
+ * Allows for buttons to be used.
+ * @const {string}
+ * @const {string}
+ * @const {Object}
+ * @const {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleMenu() {
+
+ if (this.classList.contains('active')) {
+ this.classList.remove('active');
+ this.setAttribute('aria-expanded', 'false');
+ navHeader.classList.remove('open');
+ navHeader.classList.add('close');
+ $('html').removeClass('no-scroll');
+ }
+ else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
+
+ }
+
+ }
+
+ /**
+ * Javascript for Toggle items
+ * Allows for buttons to be used.
+ * @const {string}
+ * @const {string}
+ * @const {Object}
+ * @const {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleItem() {
+
+ var parent = this.parentNode.parentNode.parentNode.parentNode;
+
+ var screenWidth = $(window).width();
+
+ if (this.classList.contains('submenu-active')) {
+
+ this.classList.remove('submenu-active');
+
+ if (this.hasAttribute('aria-expanded', 'true')) {
+
+ this.setAttribute('aria-expanded', 'false');
+ }
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and reset the menus.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'block');
+ }
+ }
+ }
+ else if ($('.submenu-active')) {
+
+ // Get elements with .submnenu-active then close them,.
+ $('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
+
+ // And open this one.
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+
+ // If hamburger.
+ if (screenWidth <= 767) {
+ // Look at parents and hide other menus
+ // if not secondary and open.
+ if (parent.classList.contains('uw-horizontal-nav--secondary')) {
+ $('.uw-horizontal-nav--main').css('display', 'none');
+ $('.uw-horizontal-nav--secondary').css('display', 'block');
+ }
+ }
+ }
+ else {
+ this.classList.add('submenu-active');
+ this.setAttribute('aria-expanded', 'true');
+ }
+ }
+
+ for (let menu of menus) {
+ /* Close Submenu From Anywhere */
+ /**
+ * Javascript
+ * Allows for close menu.
+ * @returns {boolean} close menu.
+ */
+ function closeSubmenu(e) {
+
+ let isClickInside = menu.contains(e.target);
+
+ if (!isClickInside && menu.querySelector('.submenu-active')) {
+
+ menu.querySelector('.submenu-active').classList.remove('submenu-active');
+ }
+ }
+ document.addEventListener('click', closeSubmenu, false);
+ }
+
+ for (let item of items) {
+ if (item.querySelector('.menu__subnav')) {
+ item.addEventListener('click', toggleItem, false);
+ }
+ // Add event listeners to keyup event of enter
+ // and escape keys for the menu--items .
+ item.addEventListener(
+ 'keyup', function (e) {
+
+ if (e.key === 'Enter') {
+ this.click();
+ }
+ if (e.key === 'Escape') {
+ this.click();
+ }
+
+ // Space bar keypress to open close menu
+ // keyCode to be deprecated find way to use key.
+ }
+ );
+ item.addEventListener(
+ 'keypress', function (e) {
+ if (e.keyCode === 32) {
+ this.click();
+ e.preventDefault();
+ }
+ }
+ );
+ }
+
+ // If Toggle on page Add event
+ // listeners on the menu toggle button.
+ if (toggle) {
+ toggle.addEventListener('click', toggleMenu, false);
+ }
+
+ // Apply timeout to the to event firing
+ // so it fires at end of event.
+ /**
+ * Javascript for debounce
+ * @var {string}
+ * @var {Object}
+ * @const {Object}
+ * @returns {funcction} debounce.
+ */
+ function debouncer(func) {
+ var timeoutID;
+ var timeout = 300;
+ return function () {
+ var scope = this;
+ var args = arguments;
+ clearTimeout(timeoutID);
+ timeoutID = setTimeout(
+ function () {
+ func.apply(scope, Array.prototype.slice.call(args));
+ }, timeout
+ );
+ };
+ }
+
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ /**
+ * Javascript for check width
+ * @var {string}
+ * @var {Object}
+ * @const {Object}
+ * @returns {funcction} how wide.
+ */
+ function menuCheckWidth() {
+ // Check if menu is on page.
+ if (navHeader) {
+
+ // Set screenWidth var.
+ var screenWidth = $(window).width();
+
+ if (screenWidth > 767) {
+ if ($('html').hasClass('no-scroll')) {
+ toggle.click();
+ $('.uw-horizontal-nav').css('display', 'block');
+ }
+ else {
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ else {
+ if ($('.uw-header__navigation').hasClass('open')) {
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ }
+ }
+
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer(
+ function () {
+ menuCheckWidth();
+ }
+ )
+ );
+ menuCheckWidth();
+ }
+ );
+ }
+ );
+ }
+ };
+})(jQuery, document, Drupal);
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
new file mode 100644
index 0000000000000000000000000000000000000000..eb71ccdf1f00b0491d586d271a8d204719361978
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -0,0 +1,19 @@
+<nav class="uw-horizontal-nav {% if modifier_classes %} uw-horizontal-nav--{{ modifier_classes }}{% endif %}">
+ <div class="uw-horizontal-nav--wrapper">
+ {% if include_home %}
+ <div class="uw-horizontal-nav--home">
+ <a href="{{ home_link }}" class="uw-site-home__link" title="{{ site_name }} {{ 'Home'|t }}" rel="home">
+ <div class="uw-icon uw-svg uw-svg__home">
+ {% include '@components/svg/icons/_home.svg.twig' %}
+ </div>
+ <span class="off-screen">{{ site_name }} {{ 'Home'|t }}</span>
+ </a>
+ </div>
+ {% endif %}
+ <div class="uw-horizontal-nav--menu">
+ {% include '@components/menu/menu.twig' with {
+ 'items': items
+ } %}
+ </div>
+ </div>
+</nav>
diff --git a/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
new file mode 100644
index 0000000000000000000000000000000000000000..567c41026df2347cb26ccf1d821981ef082de7b3
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--horizontal/menu--horizontal.yml
@@ -0,0 +1,75 @@
+---
+include_home: true
+modifier_classes: 'main'
+menu_name: 'horizontal'
+is_demo: true
+items:
+ - text: 'Link #1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Link #1-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-3'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-4'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ menu_items_count: 0
diff --git a/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
new file mode 100644
index 0000000000000000000000000000000000000000..85c98f31daccf257876378c80fde63c827d1ee12
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -0,0 +1,76 @@
+@use '../../../01-core' as *;
+
+$menu-horizontal-bg-sm: var(--uw-white);
+
+.uw-horizontal-nav--secondary{
+ @include uw-full-width;
+ background-color: $menu-horizontal-bg-sm !important;
+ @media(min-width: $screen-md) {
+ background-color: var(--uw-white);
+ border-bottom: 3px solid var(--gray-2);
+ }
+ .uw-horizontal-nav--wrapper{
+ @include uw-contained-width;
+ display: grid;
+ padding: 0;
+ position: relative;
+ @media(min-width: $screen-md) {
+ grid-template-columns: var(--size-6) auto;
+ padding: 0 var(--size-1);
+ }
+ }
+ .uw-horizontal-nav--home{
+ display: none;
+ grid-column: none;
+ padding: 0;
+ }
+ .uw-horizontal-nav--menu {
+ @include uw-full-width;
+ .menu {
+ // ALL Menus ul>
+ .menu__item{
+ a{
+ outline: none;
+ outline-offset: unset;
+ }
+ }
+ // Top Level <ul> flex top items
+ &--horizontal {
+ @include uw-full-width;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: var(--font-systembold);
+ font-size: var(--font-size-000);
+ justify-content: flex-start;
+ text-transform: inherit;
+ width: 100%;
+ li{
+ font-size: var(--font-size-000);
+ }
+ > .menu__item{
+ @media(min-width: $screen-md) {
+ width: auto;
+ }
+ a{
+ display: inline-block;
+ font-weight: inherit;
+ line-height: 1.25rem;
+ text-decoration: none;
+ &:hover{
+ background-color: var(--gray-2);
+ color: var(--uw-black);
+ }
+ }
+ &.has-submenu {
+ > a{
+ &::after {
+ top: 14px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig b/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..fc8165feee65221d99e35c3f15c825caecb5c6d4
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/menu--secondary.twig
@@ -0,0 +1,10 @@
+{% if items %}
+{% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'secondary',
+ 'menu_name': 'horizontal',
+ 'items': items,
+ 'is_demo': true,
+ 'include_home': false,
+}%}
+
+{% endif %}
diff --git a/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml b/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..21e89990dbd846997ebf4024572b61282eff39be
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--secondary/menu--secondary.yml
@@ -0,0 +1,546 @@
+---
+include_home: false
+modifier_classes: 'secondary'
+menu_name: 'horizontal'
+is_demo: true
+items:
+ - text: 'Undergraduate students '
+ url: '#Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 39
+ submenu:
+ - text: 'Degree Options and Specializations'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'How to become a Psychology Student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Prospective student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Future course offerings'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses requiring an application'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Honours Thesis (Psych 499)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Conference opportunities '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Publishing opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Course overrides'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Special Topics and Honours Seminars'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Syllabus Archive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Experiential Learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Psychology co-op'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Assistant (RA) positions'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Academic standing'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'University policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Department policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Awards '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Convocation and thesis awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Memorial Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other research awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Distinguished Teacher Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Undergraduate Society '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'About to graduate'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Career Options'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Career advising'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'College programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Bachelors'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Masters or PhD'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate studies in Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Letters of recommendation'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Who can I ask?'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Human Resources Management program '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Meet your lecturers'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minor & Diploma'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Meet Our Students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Get involved'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Alumni | Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'HRM Opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 19
+ submenu:
+ - text: 'Programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minimum admission requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Application procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Degree requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Submission of the Masters Thesis'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the Masters Research Paper (MASc students)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forming a PhD Committee'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Guideline for PhD Thesis Defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the PhD thesis following the defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forms'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Funding & Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Careers of Alumni'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'GASP (Graduate Association of Students in Psychology)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Orientation guide'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies and procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Showcasing graduate student research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Teaching assistantships'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Faculty & Staff'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Alumni & Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Share your story'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Profiles & Achievements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Make a gift'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Positions available'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
diff --git a/src/patterns/04-components/menu/menu--social/_menu--social.scss b/src/patterns/04-components/menu/menu--social/_menu--social.scss
index 7615068fff0ca132aabd391e83b93b96620abdc5..8ec163d37c47f3b040a5b3bbc754f6b51e4e7078 100644
--- a/src/patterns/04-components/menu/menu--social/_menu--social.scss
+++ b/src/patterns/04-components/menu/menu--social/_menu--social.scss
@@ -7,9 +7,9 @@
justify-content: center;
list-style-type: none;
margin: 0 auto;
- padding:0;
- text-align:center;
- width:100%;
+ padding: 0;
+ text-align: center;
+ width: 100%;
@media(min-width: $screen-xs) {
margin: 0;
max-width: inherit;
@@ -19,20 +19,20 @@
}
li {
margin: 0;
- padding:0;
+ padding: 0;
}
}
.social-media-i {
&::before{
- display:block;
- height:100%;
- width:100%;
+ display: block;
+ height: 100%;
+ width: 100%;
}
}
.social-media-link {
background-color: var(--uw-white);
border-radius: 3px;
- display:block;
+ display: block;
height: 2.125rem;
padding: 0.225rem;
position: relative;
@@ -44,7 +44,7 @@
}
&:hover,
&:focus{
- background-color:transparent;
+ background-color: transparent;
text-decoration: none;
}
}
diff --git a/src/patterns/04-components/menu/menu.twig b/src/patterns/04-components/menu/menu.twig
index cb9010905adc4e2faa89faa292d8f55a8640bae4..72885a743128f12d7af4dea0afb6c6de98b86b6c 100644
--- a/src/patterns/04-components/menu/menu.twig
+++ b/src/patterns/04-components/menu/menu.twig
@@ -1,8 +1,9 @@
{% import _self as menus %}
-{{ menus.menu_links(items, attributes, 0, menu_name) }}
+{% set menu_parent_hide = false %}
+{{ menus.menu_links(items, attributes, 0, menu_name, menu_class, item_class, link_class) }}
-{% macro menu_links(items, attributes, menu_level, menu_name) %}
+{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class, parent) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
@@ -39,6 +40,10 @@
{% set link_classes = link_classes|merge(['is-active-trail']) %}
{% endif %}
+ {% if item.active %}
+ {% set link_classes = link_classes|merge(['active']) %}
+ {% endif %}
+
{% if item.is_collapsed %}
{% set item_classes = item_classes|merge(['is-collapsed']) %}
{% set link_classes = link_classes|merge(['is-collapsed']) %}
@@ -57,14 +62,81 @@
{% set link_classes = link_classes|merge(original_link_class) %}
{% endif %}
+ {# Check for submenu #}
+ {% if item.submenu %}
+
+ {# Add class for indicating the item has a submenu #}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+
+ {# Check if we are in parent menu_level #}
+ {% if menu_level == 0 %}
+
+ {# Add the link class #}
+ {% set link_classes = link_classes|merge(['menu__link-sub']) %}
+
+ {% endif %}
+ {% if menu_level == 1 %}
+ {% set item_classes = item_classes|merge(['sub-1']) %}
+ {% endif %}
+ {% endif %}
+
{% set item_classes = item_classes|join(' ')|trim %}
{% set link_classes = link_classes|join(' ')|trim %}
+ {# Check menu level 1 and parent and not have the hide parent flag
+ Hide the Parent menu item from printing more than once
+ this is the recursive check currently 2 deep
+ #}
+ {% if menu_level == 1 and parent and not menu_parent_hide %}
+
+ {% set menu_parent_hide = true %}
+
+ <li class="menu__item menu__item-parent">
+
+ <a href="{{ parent.url }}" class="menu__link-parent">
+
+ <span class="link-text">
+ {% if parent.title %}
+ {{ parent.title }}
+ {% elseif parent.text %}
+ {{ parent.text }}
+ {% endif %}
+ </span>
+
+ </a>
+
+ </li>
+ {% endif %}
+
<li class="{{ item_classes }}" {{ item.attributes ? item.attributes|without('class') }}>
- <a class="{{ link_classes }}" href="{{ item.url }}">{{ item.title }}</a>
+ <a class="{{ link_classes }}"
+ {% if item.submenu and menu_level == 0 %}
+ tabindex="0"
+ aria-haspopup="true"
+ role="button"
+ {% elseif item.submenu %}
+ href="{{ item.url }}"
+ {% else %}
+ href="{{ item.url }}"
+ {% endif %}
+ >
+ <span class="link-text">
+ {% if item.title %}
+ {{ item.title }}
+ {% elseif item.text %}
+ {{ item.text }}
+ {% endif %}
+ </span>
+ </a>
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+ {% elseif item.submenu %}
+ {% if menu_level == 0 %}
+ {{ menus.menu_links(item.submenu, attributes, menu_level + 1, '', '', '', '', item) }}
+ {% else %}
+ {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }}
+ {% endif %}
{% endif %}
</li>
diff --git a/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9896b125a6cc9993d1fe2c3b67b7b4f7819df782
--- /dev/null
+++ b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
@@ -0,0 +1,86 @@
+// @file
+// Styles for the mobile menu buttons.
+
+@use '../../01-core' as *;
+
+.uw-navigation-button{
+ @include focus();
+ background-color: transparent;
+ border-radius: inherit;
+ color: var(--gray-6);
+ cursor: pointer;
+ display: block;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ font-family: var(--font-book);
+ font-size: var(--font-size-00000);
+ font-weight: var(--font-weight-400);
+ height: 2.98125rem;
+ letter-spacing: 0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding: 0;
+ padding-top: var(--size-2);
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+ &:hover,
+ &:focus {
+ border: 0;
+ outline: none !important;
+ }
+ &:active {
+ outline: none !important;
+ }
+ &[disabled] {
+ cursor: default;
+ pointer-events: none;
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines{
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: var(--size-3);
+ }
+ > .uw-navigation-button__lines {
+ background-color: var(--gray-5);
+ display: block;
+ font-size: 0;
+ height: var(--size-sm);
+ left: 50%;
+ margin-left: -0.75rem;
+ position: absolute;
+ top: 28%;
+ transition: background-color 0.3s;
+ user-select: none;
+ width: var(--size-3);
+ &::before,
+ &::after{
+ background: var(--gray-5);
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ transition: transform 0.3s;
+ width: 100%;
+ }
+ &::before{
+ transform: translateY(-250%);
+ }
+ &::after{
+ transform: translateY(250%);
+ }
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines::before{
+ transform: translateY(0) rotate(45deg);
+ }
+ &[aria-expanded='true'] > .uw-navigation-button__lines::after{
+ transform: translateY(0) rotate(-45deg);
+ }
+}
diff --git a/src/patterns/04-components/mobile-menu/_mobile-menu.scss b/src/patterns/04-components/mobile-menu/_mobile-menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4107a2be12eb425626d52c4fa3de33650d854e9e
--- /dev/null
+++ b/src/patterns/04-components/mobile-menu/_mobile-menu.scss
@@ -0,0 +1,161 @@
+//// @file
+//// Styles for the mobile menu.
+
+@use '../../01-core' as *;
+
+
+//$mobile-menu-fallback-bg-color: gesso-color(ui, generic, background-light) !default;
+//$mobile-menu-bg-color: rgba(gesso-color(ui, generic, background-light), 0.98) !default;
+//$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-submenu-fallback-bg-color: gesso-color(ui, generic, background-lighter) !default;
+//$mobile-menu-submenu-bg-color: rgba(gesso-color(ui, generic, background-lighter), 0.98) !default;
+//$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-submenu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-button-height: 54px;
+//$mobile-menu-button-width: 44px;
+//$mobile-menu-font-size: gesso-font-size(2);
+//$mobile-menu-line-height: gesso-line-height(base);
+//
+//.mobile-menu {
+// background-color: $mobile-menu-fallback-bg-color;
+// background-color: $mobile-menu-bg-color;
+// left: 0;
+// overflow-y: auto;
+// position: fixed;
+// top: 0;
+// width: 100%;
+// z-index: 999999;
+//}
+//
+//.mobile-menu__menu {
+// @include list-clean;
+// margin: 0.75em 0 0;
+//}
+//
+//.mobile-menu__item {
+// margin: 0;
+// padding: 0;
+// position: relative;
+//}
+//
+//.mobile-menu__link {
+// background-color: transparent;
+// border: 0;
+// color: $mobile-menu-link-color;
+// display: block;
+// font-family: gesso-font-family(system);
+// font-size: rem($mobile-menu-font-size);
+// font-weight: gesso-font-weight(bold);
+// line-height: $mobile-menu-line-height;
+// margin: 0;
+// padding: rem(($mobile-menu-button-height - ($mobile-menu-font-size * $mobile-menu-line-height)) / 2) rem(gesso-spacing(sm));
+// text-align: left;
+// text-decoration: none;
+// white-space: normal;
+// width: auto;
+// z-index: 3;
+//
+// &:hover,
+// &:focus,
+// &:active,
+// &.is-active {
+// color: $mobile-menu-link-hover-color;
+// }
+//
+// &.has-subnav {
+// margin-right: $mobile-menu-button-width;
+// }
+//}
+//
+//.mobile-menu__subnav-arrow {
+// @include focus();
+// @include image-replace($mobile-menu-button-width, $mobile-menu-button-height);
+// @include svg-background-inline(mobile-arrow-down);
+// background-attachment: initial;
+// background-color: initial;
+// background-position: 50%;
+// background-repeat: no-repeat;
+// background-size: 19px 12px;
+// border: 0;
+// box-shadow: none;
+// cursor: pointer;
+// display: inline-block;
+// outline-offset: 0;
+// position: absolute;
+// right: 0;
+// top: 0;
+// vertical-align: top;
+// z-index: 2;
+//
+// @if $support-for-rtl {
+// [dir='rtl'] & {
+// left: 0;
+// right: auto;
+// }
+// }
+//
+// &[aria-expanded="true"] {
+// @include svg-background-inline(mobile-arrow-up);
+// }
+//}
+//
+//.mobile-menu__subnav {
+// background-color: $mobile-menu-submenu-fallback-bg-color;
+// background-color: $mobile-menu-submenu-bg-color;
+// display: none;
+// list-style: none;
+// margin: 0;
+// padding: 0;
+//
+// .mobile-menu__link {
+// color: $mobile-menu-submenu-link-color;
+// padding-left: gesso-spacing(md);
+//
+// &:hover,
+// &:focus,
+// &:active {
+// color: $mobile-menu-submenu-link-hover-color;
+// }
+// }
+//}
+
+.uw-header__navigation{
+ display: none;
+ &.close{
+ display: none;
+ }
+ &.open{
+ background-color: var(--gray-2);
+ display: block;
+ // Minus height of header
+ height: calc(100vh - 7rem);
+ }
+ @media(min-width: $screen-md) {
+ display: block !important;
+ &.open{
+ display: block !important;
+ height: auto;
+ }
+ }
+}
+.no-scroll{
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ position: fixed;
+ right: 0;
+ top: 0;
+ .uw-header__navigation{
+ &.open{
+ background: #f7f7f7;
+ display: block;
+ overflow: auto;
+ }
+ @media(min-width: $screen-md) {
+ &.open{
+ display: block !important;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/responsive-image/_responsive-image.scss b/src/patterns/04-components/responsive-image/_responsive-image.scss
index d6c9de4193e6edf931f70be33e17e25885aa93bb..07ec0a8da9a249957bb4e833c7cc817635e1b9d6 100644
--- a/src/patterns/04-components/responsive-image/_responsive-image.scss
+++ b/src/patterns/04-components/responsive-image/_responsive-image.scss
@@ -2,6 +2,5 @@ picture {
img {
width: 100%;
}
-
width: 100%;
}
diff --git a/src/patterns/04-components/search/_search.scss b/src/patterns/04-components/search/_search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..08a0afc59f4b04ee7f9d9379ff07bb0a53f42a1a
--- /dev/null
+++ b/src/patterns/04-components/search/_search.scss
@@ -0,0 +1,513 @@
+@use '../../01-core' as *;
+
+.uw-header-search {
+ position: absolute;
+ right: var(--size-1);
+ top: var(--size-8);
+ width: 100%;
+ &:focus-within {
+ z-index: var(--layer-overlay);
+ }
+
+ @media(min-width: $screen-md) {
+ position: relative;
+ right: inherit;
+ top: inherit;
+ width: inherit;
+ }
+
+ form label {
+ margin: 0;
+ position: absolute;
+ right: 0;
+ top: -3.4rem;
+ @media(min-width: $screen-md) {
+ position: relative;
+ right: inherit;
+ top: inherit;
+ }
+
+ &[for="uw-select-site"] {
+ background-color: var(--uw-white);
+ }
+ }
+
+ .uw-search--form {
+ display: grid;
+ gap: 0.7rem;
+ grid-template-columns: auto var(--size-16) 2.125rem;
+ height: 3.4rem;
+ margin: 0;
+ padding: 0 0 0 var(--size-2);
+ position: relative;
+ width: 100%;
+ @media(min-width: $screen-md) {
+ border: var(--size-xs) solid var(--uw-white);
+ display: inline-flex;
+ gap: inherit;
+ grid-template-columns: inherit;
+ height: inherit;
+ padding: 0;
+ width: inherit;
+ }
+
+ .option {
+ display: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ margin-left: inherit;
+ padding-left: inherit;
+ }
+
+ .form-item {
+ margin: inherit;
+ }
+
+ .form-type-select {
+ height: 0;
+ left: -1000rem;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ .uw-input--checkboxform {
+ margin: inherit;
+ }
+
+ .uw-search--checkboxlabel {
+ background-color: transparent;
+ border: var(--size-xs) solid var(--uw-white);
+ border-radius: 0;
+ box-shadow: none;
+ color: var(--uw-white);
+ display: block;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ font-weight: 200;
+ height: 2.375rem;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ transition: all 300ms;
+ width: 2.125rem;
+ &::after {
+ @include svg-background(search_2-white);
+ background-position: 8px 11px;
+ background-repeat: no-repeat;
+ background-size: 40%;
+ content: '';
+ display: block;
+ height: var(--size-4);
+ width: 2.125rem;
+ }
+
+ &:hover,
+ &:focus {
+ background: var(--uw-white);
+ &::after {
+ @include svg-background(search_2);
+ }
+ }
+ }
+
+ .uw-search-button__wrapper {
+ border-width: 0;
+ display: none;
+ height: 2.25rem;
+ position: relative;
+ width: 2.125rem;
+ @media(min-width: $screen-md) {
+ display: block;
+ }
+ &::after {
+ @include svg-background(search_2-white);
+ background-position: 8px 11px;
+ background-repeat: no-repeat;
+ background-size: 45%;
+ color: var(--uw-white);
+ content: '';
+ display: block;
+ font-weight: 200;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ z-index: var(--layer-background);
+ }
+
+ &:hover,
+ &:focus {
+ &::after {
+ @include svg-background(search_2-white);
+ background-color: var(--gray-6);
+ color: var(--uw-white);
+ }
+ }
+
+ &:focus-within {
+ &::after {
+ @include svg-background(search_2-white);
+ background-color: var(--gray-6);
+ color: var(--uw-white);
+ }
+ }
+
+ .button--submit {
+ &__form {
+ background-color: inherit;
+ background-image: none;
+ border: var(--size-xs) solid var(--uw-white);
+ @media(min-width: $screen-md) {
+ border-width: 0;
+ }
+ box-shadow: none;
+ cursor: pointer;
+ display: inherit;
+ font-family: var(--font-book);
+ font-size: inherit;
+ font-weight: 200;
+ height: 2.25rem;
+ letter-spacing: inherit;
+ line-height: inherit;
+ margin: 0;
+ max-width: inherit;
+ padding: inherit;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: uppercase;
+ top: 0;
+ transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
+ vertical-align: top;
+ white-space: normal;
+ width: 2.125rem;
+ z-index: gesso-z-index(content);
+ }
+ }
+ }
+
+ .uw-input--search {
+ background-color: var(--uw-black);
+ border: 1px solid var(--uw-white);
+ border-radius: 0;
+ border-width: 1px 0 1px 1px;
+ border-width: 0;
+ box-shadow: none;
+ color: var(--uw-white);
+ display: none;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ font-weight: 200;
+ height: 2.25rem;
+ line-height: 1.25rem;
+ overflow: hidden;
+ padding: var(--size-1);
+ position: relative;
+ transition: all 0.3s ease;
+ @media(min-width: $screen-md) {
+ display: block;
+ font-size: var(--font-size-000);
+ width: var(--size-8);
+ }
+
+ &::placeholder {
+ color: var(--uw-white);
+ opacity: 0.75;
+
+ &:hover {
+ color: var(--uw-black);
+ }
+ }
+
+ &:hover {
+ background: var(--uw-white);
+ color: var(--uw-black);
+
+ &::placeholder {
+ color: var(--uw-black);
+ }
+
+ ~ .uw-search-button__wrapper {
+ &::after {
+ @include svg-background(search_2);
+ background-color: var(--uw-white);
+ }
+ }
+ }
+
+ &:focus {
+ background: var(--uw-white);
+ border-width: 0;
+ color: var(--uw-black);
+
+ &::placeholder {
+ color: var(--uw-black);
+ }
+ }
+ }
+
+ .uw-select--search {
+ appearance: none;
+ background-color: var(--uw-black);
+ border-radius: 0;
+ display: block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ @media(min-width: $screen-md) {
+ font-size: var(--font-size-000);
+ }
+ opacity: 0;
+ overflow: hidden;
+ padding-right: 0;
+ transition: opacity 0.5s ease;
+ width: var(--size-16);
+ }
+
+ .form-actions {
+ height: 2.25rem;
+ margin: 0;
+ opacity: 0;
+ @media(min-width: $screen-md) {
+ opacity: 1;
+ }
+ padding: 0;
+ transition: opacity 0.5s ease;
+ width: 2.125rem;
+ }
+
+
+ .uw-input {
+ &.uw-input--checkboxform {
+ display: block;
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+
+ &:checked {
+ ~ .uw-search--checkboxlabel {
+ background: var(--uw-white);
+
+ &::after {
+ @include svg-background(mobile-arrow-up);
+ background-position: 10px 14px;
+ background-repeat: no-repeat;
+ background-size: 34%;
+ color: var(--uw-white);
+ content: '';
+ display: block;
+ line-height: 1.5rem;
+ text-align: center;
+ }
+
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ }
+
+ ~ .form-item {
+ animation: fadeIn 500ms;
+ display: block;
+ .no-js & {
+ background-color: var(--uw-black);
+ padding: var(--size-2);
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ margin: 0;
+ padding: 0;
+ }
+
+ &.form-type-textfield {
+ display: block;
+ .uw-input--search {
+ border: var(--size-xs) solid var(--uw-white);
+ display: inline-block;
+ width: 100%;
+ }
+ }
+
+ &.form-type-select {
+ display: block;
+ height: inherit;
+ left: inherit;
+ opacity: 1;
+ overflow: hidden;
+ position: relative;
+ .no-js & {
+ background-color: var(--uw-black);
+ display: block;
+ height: 100%;
+ padding: var(--size-2);
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ height: auto;
+ padding: 0;
+ }
+
+ .uw-select--search {
+ appearance: none;
+ background-color: var(--uw-black);
+ border-color: var(--uw-white);
+ color: var(--uw-white);
+ display: inline-block;
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ font-weight: 200;
+ height: 2.25rem;
+ line-height: 1.25rem;
+ margin: 0 0.725rem 0 0;
+ opacity: 1;
+ outline: none;
+ overflow: hidden;
+ padding: var(--size-1);
+ transition: opacity 0.5s ease;
+ width: var(--size-16);
+ &::placeholder {
+ color: var(--uw-black);
+ }
+
+ option {
+ color: var(--uw-black);
+ }
+
+ @media(min-width: $screen-md) {
+ display: none;
+ font-size: var(--font-size-000);
+ }
+ }
+ }
+ }
+
+ ~ .form-actions {
+ background-color: var(--uw-black);
+ margin: 0;
+ opacity: 1;
+ transition: opacity 0.5s ease;
+ .no-js & {
+ background-color: var(--uw-black);
+ height: 100%;
+ padding: var(--size-2) 0;
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ height: auto;
+ padding: 0;
+ }
+
+ .uw-search-button__wrapper {
+ animation: fadeIn 500ms;
+ border-width: 0;
+ display: inherit;
+ @media(min-width: $screen-md) {
+ margin-right: 0;
+ }
+ .button--submit {
+ &__form {
+ position: relative;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &:focus-within {
+ @media(min-width: $screen-md) {
+
+ .uw-input--search {
+ transition: width 0.3s ease;
+ width: 1var(--size-8);
+
+ &:hover {
+ ~ .button--submit {
+ &__form {
+ color: var(--uw-white);
+ }
+ }
+ }
+ }
+ .form-type-select {
+ height: 2.25rem;
+ left: inherit;
+ opacity: 1;
+ overflow: inherit;
+ position: relative;
+ width: var(--size-16);
+ }
+ .uw-select--search {
+ border-width: 0;
+ color: var(--uw-white);
+ display: inline-block;
+ height: 2.25rem;
+ opacity: 1;
+ outline: none;
+ padding-left: var(--size-1);
+ padding-right: 0;
+ width: var(--size-16);
+ &:hover,
+ &:focus {
+ background-color: var(--uw-white);
+ border-width: 0;
+ color: var(--uw-black);
+ }
+ }
+ .form-action {
+ height: inherit;
+ margin: 0;
+ opacity: 1;
+ padding: 0;
+ transition: opacity 0.5s ease;
+ width: inherit;
+ }
+ .button--submit {
+ &__form {
+ border-color: var(--gray-6);
+ border-width: 0;
+ height: 2.25rem;
+ top: 0;
+ }
+ }
+ }
+ }
+
+ .button {
+ color: transparent !important;
+ }
+
+ .uw-search{
+ &--hidelabel {
+ display: block;
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ &--checkboxlabel__labeltext {
+ color: var(--uw-white);
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ &--labeltext {
+ color: var(--uw-white);
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/search/_search.twig b/src/patterns/04-components/search/_search.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d33167eba3de07def9faea970736cd9588102580
--- /dev/null
+++ b/src/patterns/04-components/search/_search.twig
@@ -0,0 +1,38 @@
+<div class="uw-header-search" style="background-color: black">
+ <form class="uw-search--form" role="search" data-drupal-selector="uw-search-form" action="/" method="post" id="uw-search-form" accept-charset="UTF-8" data-once="form-updated" data-drupal-form-fields="edit-opentray,uw-search,uw-select-site,edit-submit" novalidate="novalidate">
+
+ <input class="uw-input uw-input--checkboxform form-checkbox" aria-hidden="true" tabindex="-1" data-drupal-selector="edit-opentray" type="checkbox" id="edit-opentray" name="opentray" value="1">
+
+ <label class="uw-search--checkboxlabel option" data-drupal-selector="edit-opentray" for="edit-opentray"><span class="uw-search--checkboxlabel__labeltext">Open Search Location </span></label>
+
+ <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-search-input form-item-search-input form-no-label">
+
+ <label for="uw-search" class="visually-hidden"><span class="uw-search--labeltext">Search for </span></label>
+
+ <input class="uw-input uw-input--search form-text" data-drupal-selector="uw-search" data-msg-maxlength="Search for field has a maximum length of 128." type="text" id="uw-search" name="search-input" value="" size="60" maxlength="128" placeholder="Search">
+
+ </div>
+
+ <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-search-type form-item-search-type form-no-label">
+
+ <label for="uw-select-site" class="visually-hidden">Search Location</label>
+
+ <select class="form-item__select uw-select--search form-select" data-drupal-selector="uw-select-site" id="uw-select-site" name="search-type"><option value="" selected="selected">On all sites</option><option value="inurl:http://sitesearch.docker.localhost:8300/">On this site</option></select>
+
+ </div>
+
+ <input autocomplete="off" data-drupal-selector="form-fhzkvlakiamwermjlilm2fi45pnbkax5pnmaanmybxm" type="hidden" name="form_build_id" value="form-fHZKVlAkiamWerMjLiLm2fi45pnBkAx5pnMaaNmyBXM">
+
+ <input data-drupal-selector="edit-uw-search-form-form-token" type="hidden" name="form_token" value="I775DnRrXAs_98eUOcougfNve1glCddLwwUcgRV19us">
+
+ <input data-drupal-selector="edit-uw-search-form" type="hidden" name="form_id" value="uw_search_form">
+
+ <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--4">
+ <div class="uw-search-button__wrapper">
+
+ <input value="Search" class="button button--submit button--submit__form js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op">
+ </div>
+ </div>
+
+ </form>
+</div>
diff --git a/src/patterns/04-components/search/search--wcms-headerbar/_search--wcms-headerbar.scss b/src/patterns/04-components/search/search--wcms-headerbar/_search--wcms-headerbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4e01592294ff773a575c0382d3ecd8262deedf8b
--- /dev/null
+++ b/src/patterns/04-components/search/search--wcms-headerbar/_search--wcms-headerbar.scss
@@ -0,0 +1,517 @@
+@use '../../../01-core' as *;
+
+
+.uw-header-search {
+ position: absolute;
+ right: var(--size-1);
+ top: var(--size-8);
+ width: 100%;
+
+ &:focus-within {
+ z-index: var(--layer-overlay);
+ }
+
+ @media(min-width: $screen-md) {
+ position: relative;
+ right: inherit;
+ top: inherit;
+ width: inherit;
+ }
+
+ form label {
+ margin: 0;
+ position: absolute;
+ right: 0;
+ top: -3.4rem;
+ @media(min-width: $screen-md) {
+ position: relative;
+ right: inherit;
+ top: inherit;
+ }
+
+ &[for="uw-select-site"] {
+ background-color: var(--uw-white);
+ }
+ }
+
+ .uw-search--form {
+ display: grid;
+ gap: var(--size-2);
+ grid-template-columns: auto 8rem 2.125rem;
+ height: 3.4rem;
+ margin: 0;
+ padding: 0 0 0 1rem;
+ position: relative;
+ width: 100%;
+ @media(min-width: $screen-md) {
+ border: 1px solid var(--uw-white);
+ display: inline-flex;
+ gap: inherit;
+ grid-template-columns: inherit;
+ height: inherit;
+ padding: 0;
+ width: inherit;
+ }
+
+ .option {
+ display: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ margin-left: inherit;
+ padding-left: inherit;
+ }
+
+ .form-item {
+ margin: inherit;
+ }
+
+ .form-type-select {
+ height: 0;
+ left: -1000rem;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ .uw-input--checkboxform {
+ margin: inherit;
+ }
+
+ .uw-search--checkboxlabel {
+ background-color: transparent;
+ border: 1px solid var(--uw-white);
+ border-radius: 0;
+ box-shadow: none;
+ color: var(--uw-white);
+ display: block;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ font-weight: 200;
+ height: 2.375rem;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ transition: all 300ms;
+ width: 2.125rem;
+
+ &::after {
+ @include svg-background(search_2-white);
+ background-position: 8px 11px;
+ background-repeat: no-repeat;
+ background-size: 40%;
+ content: '';
+ display: block;
+ height: 2rem;
+ width: 2.125rem;
+ }
+
+ &:hover,
+ &:focus {
+ background: var(--uw-white);
+
+ &::after {
+ @include svg-background(search_2);
+ }
+ }
+ }
+
+ .uw-search-button__wrapper {
+ border-width: 0;
+ display: none;
+ height: 2.25rem;
+ position: relative;
+ width: 2.125rem;
+ @media(min-width: $screen-md) {
+ display: block;
+ }
+ &::after {
+ @include svg-background(search_2-white);
+ background-position: 8px 11px;
+ background-repeat: no-repeat;
+ background-size: 45%;
+ color: var(--uw-white);
+ content: '';
+ display: block;
+ font-weight: 200;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: 100%;
+ z-index: var(--layer-background);
+ }
+ &:hover,
+ &:focus {
+ &::after {
+ @include svg-background(search_2-white);
+ background-color: gesso-grayscale(gray-6);
+ color: var(--uw-white);
+ }
+ }
+ &:focus-within {
+ &::after {
+ @include svg-background(search_2-white);
+ background-color: var(--gray-6);
+ color: var(--uw-white);
+ }
+ }
+
+ .button--submit {
+ &__form {
+ background-color: inherit;
+ background-image: none;
+ border: 1px solid var(--uw-white);
+ @media(min-width: $screen-md) {
+ border-width: 0;
+ }
+ box-shadow: none;
+ cursor: pointer;
+ display: inherit;
+ font-family: var(--font-book);
+ font-size: inherit;
+ font-weight: 200;
+ height: 2.25rem;
+ letter-spacing: inherit;
+ line-height: inherit;
+ margin: 0;
+ max-width: inherit;
+ padding: inherit;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: uppercase;
+ top: 0;
+ transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
+ vertical-align: top;
+ white-space: normal;
+ width: 2.125rem;
+ z-index: var(--layer-content);
+ }
+ }
+ }
+
+ .uw-input--search {
+ background-color: var(--uw-black);
+ border: 1px solid var(--uw-white);
+ border-radius: 0;
+ border-width: 1px 0 1px 1px;
+ border-width: 0;
+ box-shadow: none;
+ color: var(--uw-white);
+ display: none;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ font-weight: 200;
+ height: 2.25rem;
+ line-height: 1.25rem;
+ overflow: hidden;
+ padding: gesso-spacing(xs);
+ position: relative;
+ transition: all 0.3s ease;
+ @media(min-width: $screen-md) {
+ display: block;
+ font-size: var(--font-size-000);
+ width: 4rem;
+ }
+
+ &::placeholder {
+ color: var(--uw-white);
+ opacity: 0.75;
+
+ &:hover {
+ color: var(--uw-black);
+ }
+ }
+
+ &:hover {
+ background: var(--uw-white);
+ color: var(--uw-black);
+
+ &::placeholder {
+ color: var(--uw-black);
+ }
+
+ ~ .uw-search-button__wrapper {
+ &::after {
+ @include svg-background(search_2);
+ background-color: var(--uw-white);
+ }
+ }
+ }
+
+ &:focus {
+ background: var(--uw-white);
+ border-width: 0;
+ color: var(--uw-black);
+
+ &::placeholder {
+ color: var(--uw-black);
+ }
+ }
+ }
+
+ .uw-select--search {
+ appearance: none;
+ background-color: var(--uw-black);
+ border-radius: 0;
+ display: block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+
+ @media(min-width: $screen-md) {
+ font-size: var(--font-size-000);
+ }
+ opacity: 0;
+ overflow: hidden;
+ padding-right: 0;
+ transition: opacity 0.5s ease;
+ width: 7.5rem;
+ }
+
+ .form-actions {
+ height: 2.25rem;
+ margin: 0;
+ opacity: 0;
+ @media(min-width: $screen-md) {
+ opacity: 1;
+ }
+ padding: 0;
+ transition: opacity 0.5s ease;
+ width: 2.125rem;
+ }
+
+ .uw-input {
+ &.uw-input--checkboxform {
+ display: block;
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+ &:checked {
+ ~ .uw-search--checkboxlabel {
+ background: var(--uw-white);
+ &::after {
+ @include svg-background(mobile-arrow-up);
+ background-position: 10px 14px;
+ background-repeat: no-repeat;
+ background-size: 34%;
+ color: var(--uw-white);
+ content: '';
+ display: block;
+ line-height: var(--size-3);
+ text-align: center;
+ }
+
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ }
+
+ ~ .form-item {
+ animation: fadeIn 500ms;
+ display: block;
+ .no-js & {
+ background-color: var(--uw-black);
+ padding: var(--size-2);
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ margin: 0;
+ padding: 0;
+ }
+
+ &.form-type-textfield {
+ display: block;
+
+ .uw-input--search {
+ border: var(--size-xs) solid var(--uw-white);
+ display: inline-block;
+ width: 100%;
+ }
+ }
+
+ &.form-type-select {
+ display: block;
+ height: inherit;
+ left: inherit;
+ opacity: 1;
+ overflow: hidden;
+ position: relative;
+
+ .no-js & {
+ background-color: var(--uw-black);
+ display: block;
+ height: 100%;
+ padding: var();
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ height: auto;
+ padding: 0;
+ }
+
+ .uw-select--search {
+ appearance: none;
+ background-color: var(--uw-black);
+ border-color: var(--uw-white);
+ color: var(--uw-white);
+ display: inline-block;
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ font-weight: 200;
+ height: 2.25rem;
+ line-height: 1.25rem;
+ margin: 0 0.725rem 0 0;
+ opacity: 1;
+ outline: none;
+ overflow: hidden;
+ padding: var(--size-1);
+ transition: opacity 0.5s ease;
+ width: var(--size-16);
+ &::placeholder {
+ color: var(--uw-black);
+ }
+
+ option {
+ color: var(--uw-black);
+ }
+
+ @media(min-width: $screen-md) {
+ display: none;
+ font-size: var(--fpont-size-000);
+ }
+ }
+ }
+ }
+
+ ~ .form-actions {
+ background-color: var(--uw-black);
+ margin: 0;
+ opacity: 1;
+ transition: opacity 0.5s ease;
+
+ .no-js & {
+ background-color: var(--uw-black);
+ height: 100%;
+ padding: var(--size-2) 0;
+ }
+
+ .no-js.js & {
+ background-color: inherit;
+ height: auto;
+ padding: 0;
+ }
+
+ .uw-search-button__wrapper {
+ animation: fadeIn 500ms;
+ border-width: 0;
+ display: inherit;
+ @media(min-width: $screen-md) {
+ margin-right: 0;
+ }
+
+ .button--submit {
+ &__form {
+ position: relative;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &:focus-within {
+ @media(min-width: $screen-md) {
+
+ .uw-input--search {
+ transition: width 0.3s ease;
+ width: 14rem;
+ &:hover {
+ ~ .button--submit {
+ &__form {
+ color: var(--uw-white);
+ }
+ }
+ }
+ }
+ .form-type-select {
+ height: 2.25rem;
+ left: inherit;
+ opacity: 1;
+ overflow: inherit;
+ position: relative;
+ width: var(--size-15);
+ }
+ .uw-select--search {
+ border-width: 0;
+ color: var(--uw-white);
+ display: inline-block;
+ height: 2.25rem;
+ opacity: 1;
+ outline: none;
+ padding-left: var(--size-1); // LTR
+ padding-right: 0;
+ width: var(--size-16);
+
+ &:hover,
+ &:focus {
+ background-color: var(--uw-white);
+ border-width: 0;
+ color: var(--uw-black);
+ }
+ }
+ .form-action {
+ height: inherit;
+ margin: 0;
+ opacity: 1;
+ padding: 0;
+ transition: opacity 0.5s ease;
+ width: inherit;
+ }
+ .button--submit {
+ &__form {
+ border-color: var(--gray-6);
+ border-width: 0;
+ height: 2.25rem;
+ top: 0;
+ }
+ }
+ }
+ }
+
+ .button {
+ color: transparent !important;
+ }
+
+ .uw-search{
+ &--hidelabel {
+ display: block;
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ &--checkboxlabel__labeltext {
+ color: var(--uw-white);
+ height: 0;
+ left: -1000rem;
+ overflow: hidden;
+ position: absolute;
+ }
+
+ &--labeltext {
+ color: var(--uw-white);
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.twig b/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.twig
new file mode 100644
index 0000000000000000000000000000000000000000..872825f893191e9769a929c7be5c132f7cf9a2d8
--- /dev/null
+++ b/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.twig
@@ -0,0 +1,5 @@
+<div class="uw-header-searchbar">
+ {% include '@components/search/search.twig' with {
+ 'form_items': form_items
+ } %}
+</div>
diff --git a/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.yml b/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.yml
new file mode 100644
index 0000000000000000000000000000000000000000..81e5c849e1aaec222e662c1cd5a6eaeb865a22ff
--- /dev/null
+++ b/src/patterns/04-components/search/search--wcms-headerbar/search--wcms-headerbar.yml
@@ -0,0 +1,35 @@
+---
+form_action: 'https://uwaterloo.ca/search'
+form_autocomplete: 'off'
+form_classes: 'uw-search--form'
+form_id: 'uw-search'
+form_method: 'get'
+form_target: ''
+form_accept-charset : 'UTF-8'
+form_role: 'search'
+form_items:
+ - classes: 'uw-input--search'
+ form_item_wrapper: true
+ id: 'uw-input--search'
+ name: 'search-input'
+ type: 'text'
+ placeholder: 'Search'
+ label:
+ text: 'Search'
+ class: ''
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: 'uw-search'
+ name: ''
+ formenctype: ''
+ value: 'submit'
+ formmethod: ''
+ formtarget: ''
+ text: ''
+ btnclick: |
diff --git a/src/patterns/04-components/search/search.js b/src/patterns/04-components/search/search.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c74c22e74a9619c04179dfbf411a09740618384
--- /dev/null
+++ b/src/patterns/04-components/search/search.js
@@ -0,0 +1,64 @@
+/**
+ * Javascript enhancements for the header search.
+ *
+ * @file
+ */
+
+(function ($, document, Drupal) {
+ 'use strict';
+ Drupal.behaviors.wcmsheadersearchbar = {
+ attach: function () {
+ $(document).ready(
+ function () {
+ $('.uw-search--checkboxlabel').on(
+ 'click', function () {
+ $(this).toggleClass('close');
+ $('.uw-header__masthead').toggleClass('open');
+ }
+ );
+ /**
+ * Javascript for debounce
+ * @var {string}
+ * @var {Object}
+ * @param {func}
+ * @returns {function} debounce.
+ */
+ function debouncer(func) {
+ var timeoutID;
+ var timeout = 100;
+ return function () {
+ var scope = this;
+ var args = arguments;
+ clearTimeout(timeoutID);
+ timeoutID = setTimeout(
+ function () {
+ func.apply(scope, Array.prototype.slice.call(args));
+ }, timeout
+ );
+ };
+ }
+ // Check the width of the screen and.
+ function checkWidth() {
+ // Set screenWidth var.
+ var screenWidth = $(window).width();
+ if (screenWidth >= 768) {
+ if ($('.uw-header__masthead').hasClass('open')) {
+ $('.uw-search--checkboxlabel').click();
+ }
+ }
+ }
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer(
+ function () {
+ checkWidth();
+ }
+ )
+ );
+ checkWidth();
+ }
+ );
+ }
+ };
+})(jQuery, document, Drupal);
diff --git a/src/patterns/04-components/search/search.md b/src/patterns/04-components/search/search.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/patterns/04-components/search/search.twig b/src/patterns/04-components/search/search.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b6c6f734cf8d3616893451241b6877048d86065a
--- /dev/null
+++ b/src/patterns/04-components/search/search.twig
@@ -0,0 +1,16 @@
+{#{% set modifier_classes -%}#}
+{# button--submit button--submit__form {{ modifier_classes }}#}
+{#{%- endset %}#}
+
+{#{% include '@base/02-html-elements/25-forms/forms.twig' with {#}
+{# 'form_items': form_items#}
+{#} %}#}
+
+
+{% if pattern_lab %}
+ {% include '@components/search/_search.twig'%}
+{% else %}
+ <div class="uw-header-search">
+ {{ search }}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/search/search.yml b/src/patterns/04-components/search/search.yml
new file mode 100644
index 0000000000000000000000000000000000000000..425d0330ae90fea22525e87993b4ab86192c9f0d
--- /dev/null
+++ b/src/patterns/04-components/search/search.yml
@@ -0,0 +1,36 @@
+---
+form_action: 'https://uwaterloo.ca/search'
+form_autocomplete: 'off'
+form_classes: ''
+form_id: 'uw-search'
+form_method: 'get'
+form_target: ''
+form_accept-charset : 'UTF-8'
+form_role: 'search'
+onsubmit: ''
+form_items:
+ - classes: ''
+ form_item_wrapper: true
+ id: '1text'
+ name: 'search-input'
+ type: 'text'
+ placeholder: 'Search'
+ label:
+ text: 'Search'
+ class: ''
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: 'uw-search'
+ name: ''
+ formenctype: ''
+ value: 'submit'
+ formmethod: ''
+ formtarget: ''
+ text: 'Search'
+ btnclick: |
diff --git a/src/patterns/04-components/site-logo/_site-logo.scss b/src/patterns/04-components/site-logo/_site-logo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d85aa521fe41e604cfb5beb4a94c78c9a165aa2d
--- /dev/null
+++ b/src/patterns/04-components/site-logo/_site-logo.scss
@@ -0,0 +1,26 @@
+// @file
+// Styles for Site logo.
+@use '../../01-core' as *;
+
+.uw-site-logo {
+ .uw-site-logo__link {
+ @include svg-background(uwaterloo-logo);
+ background-color: var(--uw-black);
+ background-size: contain;
+ color: var(--uw-white);
+ display: block;
+ height: var(--size-5);
+ outline: var(--size-xs) solid transparent;
+ text-align: center;
+ text-indent: -999rem;
+ width: 8rem;
+ @media(min-width: $screen-xs) {
+ height: 2.5rem;
+ width: 10.6rem;
+ }
+ &:hover,
+ &:focus {
+ outline: 1px solid var(--uw-white);
+ }
+ }
+}
diff --git a/src/patterns/04-components/site-logo/site-logo.twig b/src/patterns/04-components/site-logo/site-logo.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e95703f29b4720e610c7ef98793c09e4297b937a
--- /dev/null
+++ b/src/patterns/04-components/site-logo/site-logo.twig
@@ -0,0 +1,5 @@
+<div class="uw-site-logo">
+ {% if branding_level != 'generic_barebones' %}
+ <a class="uw-site-logo__link" href="https://uwaterloo.ca" title="{{ 'University of Waterloo Home'|t }}" aria-label="{{ 'University of Waterloo Home'|t }}" rel="home"></a>
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss
new file mode 100644
index 0000000000000000000000000000000000000000..04e886989b9baec7a666ad0cd6561164c766c2fc
--- /dev/null
+++ b/src/patterns/04-components/site-name/_site-name.scss
@@ -0,0 +1,31 @@
+// @file
+// Styles for Site name.
+@use '../../01-core' as *;
+
+$site-name-font-size: var(--font-size-5);
+
+.uw-site-name {
+ a{
+ color: var(--uw-black);
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ &__wrapper{
+ padding: 0 var(--size-1);
+ @media(min-width: $screen-md) {
+ @include uw-contained-width();
+ }
+ }
+ &__link{
+ display: inline-block;
+ letter-spacing: inherit;
+ text-decoration: none;
+ text-transform: uppercase;
+ }
+ &__text{
+ font-size: $site-name-font-size;
+ margin: 0;
+ padding: var(--size-1) 0;
+ }
+}
diff --git a/src/patterns/04-components/site-name/site-name.md b/src/patterns/04-components/site-name/site-name.md
new file mode 100644
index 0000000000000000000000000000000000000000..7a7003d8fba1e34a593d4798c84ff2f313c4be0c
--- /dev/null
+++ b/src/patterns/04-components/site-name/site-name.md
@@ -0,0 +1,8 @@
+---
+el: .site-name
+title: Site Name
+---
+
+__Variables:__
+* url: [string] URL of the site name link.
+* site_name: [string] Text of the site name.
diff --git a/src/patterns/04-components/site-name/site-name.twig b/src/patterns/04-components/site-name/site-name.twig
new file mode 100644
index 0000000000000000000000000000000000000000..74b9c200d284f1b6960b5e20854a4c7df2eaa42f
--- /dev/null
+++ b/src/patterns/04-components/site-name/site-name.twig
@@ -0,0 +1,8 @@
+<div class="uw-site-name">
+ <div class="uw-site-name__wrapper">
+ <a class="uw-site-name__link" href="{{ home_link }}" title="{{ site_name}} {{ 'Home'|t }}" rel="home">
+ <h1 class="uw-site-name__text">{{ site_name }}</h1>
+ </a>
+ </div>
+</div>
+
diff --git a/src/patterns/04-components/skiplinks/_skiplinks.scss b/src/patterns/04-components/skiplinks/_skiplinks.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ce8aa298812608c4e573bcd15a95d866bf37902
--- /dev/null
+++ b/src/patterns/04-components/skiplinks/_skiplinks.scss
@@ -0,0 +1,38 @@
+// @file
+// Styles for accessible skiplinks.
+
+.skiplinks {
+ display: flex;
+ font-family: var(--font-book);
+ font-size: var(font-size-00);
+ justify-content: center;
+ position: absolute;
+ width: 100%;
+ z-index: var(--layer-overlay);
+ &__link{
+ color: var(--uw-white) !important;
+ &:focus{
+ background-color:transparent;
+ border: var(--size-xs) solid var(--uw-white);
+ border-top: 0;
+ color: var(--uw-white) !important;
+ display: inline-block;
+ font-weight: 200;
+ margin: 0;
+ outline: 0;
+ padding: var(--size-1);
+ text-align: center;
+ text-decoration: none;
+ &:hover{
+ background-color: var(--uw-white);
+ color: var(--uw-black) !important;
+ }
+ }
+ }
+}
+
+// Remove :focus styles for skiplink targets.
+/* stylelint-disable-next-line selector-max-id */
+#main:focus {
+ outline: 0;
+}
diff --git a/src/patterns/04-components/skiplinks/skiplinks.twig b/src/patterns/04-components/skiplinks/skiplinks.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6eb263f65d86e2354c3b68503ccbedd76fc37a94
--- /dev/null
+++ b/src/patterns/04-components/skiplinks/skiplinks.twig
@@ -0,0 +1,3 @@
+<div class="skiplinks">
+ <a href="#main" class="skiplinks__link visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
+</div>
diff --git a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
index 0819d71a1fbff9c2999d3a473696ffd88d043966..09eec3938a3739bc13591992834e2b38c3abf879 100644
--- a/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
+++ b/src/patterns/04-components/social-media/social-media--icon/_social-media--icon.scss
@@ -7,7 +7,7 @@ $social-accounts: 'facebook', 'twitter', 'youtube', 'instagram', 'linkedin', 'sn
height: 100%;
width: 100%;
&::before{
- content:'';
+ content: '';
}
}
}
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
index 457a9b82616867c51b3b1efad64fab95d2b65f00..dcdb8275224f63ee4a12669e1647950365c7dc16 100644
--- a/src/patterns/04-components/tag/_tag.scss
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -3,7 +3,6 @@
@use '../../01-core' as *;
-$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';
$tag-font-family-small: var(--font-systemmedium) !default;
$tag-font-family-normal: var(--font-systembold) !default;
$tag-font-size-normal: var(--font-size-00) !default;
@@ -12,8 +11,8 @@ $tag-font-size-small: var(--font-size-0000) !default;
.tag {
@include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
background: none;
display: inline-block;
@@ -22,7 +21,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
padding: 0;
text-decoration: none;
text-transform: uppercase;
- transition:background 300ms ease-in;
+ transition: background 300ms ease-in;
&.token{
text-transform: inherit;
}
@@ -33,11 +32,18 @@ $tag-font-size-small: var(--font-size-0000) !default;
&--normal{
font-family: $tag-font-family-normal;
font-size: $tag-font-size-normal;
+ a{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
}
&--small{
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
-
+ a {
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ }
}
&--full{
background: var(--uw-gold-3);
@@ -51,52 +57,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
color: var(--uw-gold-3);
text-decoration: none;
}
- }
- &--simple{
- @include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- font-family: $tag-font-family-normal;
- }
-
-
-
-
-
- a{
- @include link-no-underline(
- var(--uw-black-primary),
- var(--uw-black-primary)
- );
- background:none;
- display: inline-block;
- font-size: $tag-font-size-normal;
- margin: 0 0 var(--size-1) 0;
- padding:0;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- transition:background 300ms ease;
-
- &:hover,
- &:focus {
-
- }
- }
- &--normal{
- a{
- font-family: $tag-font-family-normal;
- font-size: $tag-font-size-normal;
- }
- }
- &--small{
- a {
- font-family: $tag-font-family-small;
- font-size: $tag-font-size-small;
- }
- }
- &--full{
a {
background: var(--uw-gold-3);
color: var(--uw-black-primary);
@@ -112,18 +72,38 @@ $tag-font-size-small: var(--font-size-0000) !default;
}
}
}
- &--simple {
+ &--simple{
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
a {
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
font-family: $tag-font-family-normal;
}
}
-}
-@each $faculty in $faculties {
+ a{
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background: none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding: 0;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: background 300ms ease;
+ }
+}
+@each $faculty, $colour in $faculties_colours {
.#{$faculty} {
a.tag--full{
@if $faculty == org-default {
@@ -134,26 +114,25 @@ $tag-font-size-small: var(--font-size-0000) !default;
background-color: var(--uw-gold-3);
color: var(--uw-black-primary);
}
-
}
- //@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
- // background-color:gesso-brand($faculty,'primary');
- // color: gesso-brand(org-default,uw-white,'primary');
- // &:hover,
- // &:focus {
- // background-color: gesso-brand($faculty, 'light');
- // color:gesso-brand($faculty,'primary');
- // }
- //}
- //@else {
- // background-color:gesso-brand($faculty,'primary');
- // color: gesso-brand(org-default,uw-white,'primary');
- // &:hover,
- // &:focus {
- // background-color: gesso-brand($faculty, 'lvl1');
- // color:gesso-brand($faculty,'primary');
- // }
- //}
+ @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
+ background-color: var(--#{$colour}-primary);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--#{$colour}-light);
+ color: var(--#{$colour}-primary);
+ }
+ }
+ @else {
+ background-color: var(--#{$colour}-primary);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--#{$colour}-primary);
+ color: var(--#{$colour}-primary);
+ }
+ }
}
}
}
diff --git a/src/patterns/04-components/territorial-statement/_territorial-statement.scss b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
index 6f5dee1e24dbdddaeb20efda4154f66308dc9219..883758d505d6079d20aec062d58594874cc1f0bc 100644
--- a/src/patterns/04-components/territorial-statement/_territorial-statement.scss
+++ b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
@@ -1,20 +1,20 @@
@use '../../01-core' as *;
.uw-bg--black{
- background-color:gesso-brand(org-default,uw-black,lvl4);
+ background-color: var(--uw-black);
}
.uw-bg--white{
- background-color:gesso-brand(org-default,uw-white,lvl1);
+ background-color: var(--uw-white);
}
.uw-territorial{
- text-align:center;
+ text-align: center;
p{
color: var(--uw-white);
font-family: var(--font-system);
font-size: var(--font-size-000);
- font-weight:200;
- letter-spacing:0.5px;
- line-height:1.7;
+ font-weight: 200;
+ letter-spacing: 0.5px;
+ line-height: 1.7;
padding: var(--size-2) 0;
.uw-bg--black &{
color: var(--uw-white);
@@ -24,9 +24,9 @@
}
}
@media(min-width: $screen-md) {
- text-align:left;
+ text-align: left;
p{
- line-height:1.5;
+ line-height: 1.5;
}
}
}