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

ISTWCMS-5151:additional updates to the svg and css for the home icon presentation

parent 6c3a08e3
No related branches found
No related tags found
1 merge request!112Feature/istwcms 5151 m26lebla update home icon
Hide whitespace changes
Inline Side-by-side
Showing
with 92 additions and 35 deletions
source/_patterns/00-config/_design-tokens.artifact.scss
+ 1
− 1
View file @ 5d32c413
......@@ -503,4 +503,4 @@ $gesso: (
xxl: 96px,
),
gutter-width: 40px,
);
);
\ No newline at end of file
source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+ 65
− 28
View file @ 5d32c413
......@@ -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;
......
source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.twig
+ 4
− 2
View file @ 5d32c413
......@@ -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">
......
source/_patterns/04-components/svg/icons/_home.svg
+ 15
− 2
View file @ 5d32c413
<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>
source/_patterns/04-components/svg/icons/_home.svg.twig
+ 7
− 2
View file @ 5d32c413
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment