From 5d32c4139fcbc5987e0231b94d3a57685a40a6cb Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 8 Nov 2021 19:12:14 +0000
Subject: [PATCH] ISTWCMS-5151:additional updates to the svg and css for the
home icon presentation
---
.../00-config/_design-tokens.artifact.scss | 2 +-
.../menu--horizontal/_menu--horizontal.scss | 93 +++++++++++++------
.../menu--horizontal/menu--horizontal.twig | 6 +-
.../04-components/svg/icons/_home.svg | 17 +++-
.../04-components/svg/icons/_home.svg.twig | 9 +-
5 files changed, 92 insertions(+), 35 deletions(-)
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index d2ef2e77..8e7f094b 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -503,4 +503,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
-);
+);
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 92be6677..b67b8f91 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -12,20 +12,41 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
.uw-horizontal-nav {
.uw-site-home__link{
- background-color:gesso-brand(org-default,uw-black, lvl4);
+ //background-color:gesso-brand(org-default,uw-black, lvl4);
svg{
- fill:gesso-brand(org-default,uw-gold,primary);
+ .bg-circle{
+ fill:gesso-brand(org-default,uw-black, lvl4);
+ stroke:gesso-brand(org-default,uw-black, lvl4);
+ }
+ .house{
+ fill:gesso-brand(org-default,uw-gold,primary);
+ }
}
&:focus{
- background-color: gesso-brand(org-default,uw-white,lvl1);
+
+ //background-color: gesso-brand(org-default,uw-white,lvl1);
svg{
- fill:gesso-brand(org-default,uw-gold,primary);
+ .bg-circle {
+ fill: gesso-brand(org-default, uw-gold, primary);
+ stroke: gesso-brand(org-default, uw-gold, primary);
+ }
+
+ .house {
+ fill: gesso-brand(org-default, uw-black, lvl4);
+ }
}
}
&:hover{
- background-color:gesso-brand(org-default,uw-gold,primary);
+ //background-color:gesso-brand(org-default,uw-gold,primary);
svg{
- fill:gesso-brand(org-default,uw-black, lvl4);
+ .bg-circle {
+ fill: gesso-brand(org-default, uw-gold, primary);
+ stroke: gesso-brand(org-default, uw-gold, primary);
+ }
+
+ .house {
+ fill: gesso-brand(org-default, uw-black, lvl4);
+ }
}
}
}
@@ -102,20 +123,37 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
.uw-horizontal-nav {
.uw-site-home__link{
- background-color:gesso-brand($faculty, lvl4);
+ //background-color:gesso-brand($faculty, lvl4);
svg{
- fill:gesso-brand(org-default,uw-white,lvl1);
+ .bg-circle{
+ fill:gesso-brand($faculty, lvl4);
+ stroke:gesso-brand($faculty, lvl4);
+ }
+ .house{
+ fill:gesso-brand(org-default,uw-white,lvl1);
+ }
+
}
&:focus{
- background-color: gesso-brand(org-default,uw-white,lvl1);
svg{
- fill:gesso-brand($faculty, lvl4);
+ .bg-circle{
+ fill:gesso-brand(org-default,uw-white,lvl1);
+ stroke:gesso-brand(org-default,uw-white,lvl1);
+ }
+ .house{
+ fill:gesso-brand($faculty, lvl4);
+ }
}
}
&:hover{
- background-color:gesso-brand(org-default,uw-white,lvl1);
svg{
- fill:gesso-brand($faculty, lvl4);
+ .bg-circle{
+ fill:gesso-brand(org-default,uw-white,lvl1);
+ stroke:gesso-brand(org-default,uw-white,lvl1);
+ }
+ .house{
+ fill:gesso-brand($faculty, lvl4);
+ }
}
}
}
@@ -203,7 +241,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
grid-template-columns: 3rem auto;
padding:0 gesso-spacing(xs);
}
-
+ @include xl{
+ padding:0;
+ }
}
&--home{
display:none;
@@ -212,26 +252,23 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
grid-column: 1/2;
padding:gesso-spacing(xxs);
.uw-site-home__link{
- border:1px solid $menu-horizontal-bg;
- border-radius:50%;
display:block;
- height:1.6rem;
-
- outline:none;
- overflow:hidden;
- position:relative;
- width:1.6rem;
+ height:24px;
+ width:24px;
svg{
- height:1.9rem;
- //padding-left:gesso-spacing(xxs);
- //padding-top:gesso-spacing(xxs);
- left:5px;
- position:absolute;
- top:2px;
- width:1.9rem;
+ .bg-circle{
+ stroke-miterlimit:10;
+ stroke-width:0.5;
+ }
+ .house{
+
+ }
}
}
}
+ @include xl{
+ padding:gesso-spacing(xxs) 0;
+ }
}
&--menu {
@include uw-full-width;
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
index 09c0654a..730b1ab2 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
@@ -2,8 +2,10 @@
<div class="uw-horizontal-nav--wrapper">
<div class="uw-horizontal-nav--home">
<a href="{{ home_link }}" class="uw-site-home__link">
- {{ source('@components/svg/icons/_home.svg') }}
- <span class="off-screen">Home</span>
+ <div class="uw-icon uw-svg uw-svg__home">
+ {% include '@components/svg/icons/_home.svg.twig' %}
+ </div>
+ <span class="off-screen">Home</span>
</a>
</div>
<div class="uw-horizontal-nav--menu">
diff --git a/source/_patterns/04-components/svg/icons/_home.svg b/source/_patterns/04-components/svg/icons/_home.svg
index bef30771..ee6a90b5 100644
--- a/source/_patterns/04-components/svg/icons/_home.svg
+++ b/source/_patterns/04-components/svg/icons/_home.svg
@@ -1,3 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
- <path d="M10.982,5.04a.384.384,0,0,0-.375-.4H9.481a.384.384,0,0,0-.375.4V6.187L7.367,4.621a.479.479,0,0,0-.638,0L.9,9.818l.638.837L2.389,9.9v6.479a.384.384,0,0,0,.375.4h2.9a.384.384,0,0,0,.375-.4V13h2v3.375a.384.384,0,0,0,.375.4h2.9a.384.384,0,0,0,.375-.4V9.9l.851.756.638-.837-2.2-1.957Z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<g id="Layer_1">
+ <circle cx="12.1" cy="12.1" r="11.8"/>
+</g>
+<g id="Layer_2">
+ <path class="st0" d="M15.9,6.6c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0h-1.1c-0.2,0-0.4,0.2-0.4,0.4c0,0,0,0,0,0v1.1l-1.7-1.6
+ c-0.2-0.2-0.5-0.2-0.6,0l-5.8,5.2l0.6,0.8l0.9-0.8V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0
+ v-3.4h2V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0v-6.5l0.9,0.8l0.6-0.8l-2.2-2L15.9,6.6z"/>
+</g>
</svg>
diff --git a/source/_patterns/04-components/svg/icons/_home.svg.twig b/source/_patterns/04-components/svg/icons/_home.svg.twig
index 5756efa9..f7df4385 100644
--- a/source/_patterns/04-components/svg/icons/_home.svg.twig
+++ b/source/_patterns/04-components/svg/icons/_home.svg.twig
@@ -1,3 +1,8 @@
-<svg height="20" width="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
-<path fill="#fff" d="m13 4-9 6 0 10 7 0 0-7 4 0 0 7 7 0 0-10zM5 0v5.3l-5 3.3 1 1.3 12-8 12 8 1-1.3-13-8.7-5 3.3v-3.3h-3z"/>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 24 24">
+<title>Home</title>
+<circle class="bg-circle" cx="12" cy="11.9" r="11.6"/>
+<path class="house" d="M15.9,6.6c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0h-1.1c-0.2,0-0.4,0.2-0.4,0.4c0,0,0,0,0,0v1.1l-1.7-1.6
+ c-0.2-0.2-0.5-0.2-0.6,0l-5.8,5.2l0.6,0.8l0.9-0.8V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0
+ v-3.4h2V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0v-6.5l0.9,0.8l0.6-0.8l-2.2-2L15.9,6.6z"/>
</svg>
--
GitLab