Skip to content
Snippets Groups Projects
Commit 6965f6c7 authored by druid's avatar druid
Browse files

header arrows

parent 8de8d298
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/assets/example.svg 0 → 100644
+ 59
− 0
View file @ 6965f6c7
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 -256 1792 1792"
id="svg3013"
version="1.1"
inkscape:version="0.48.3.1 r9886"
width="100%"
height="100%"
sodipodi:docname="download_font_awesome.svg">
<metadata
id="metadata3023">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3021" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview3019"
showgrid="false"
inkscape:zoom="0.13169643"
inkscape:cx="896"
inkscape:cy="896"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg3013" />
<g
transform="matrix(1,0,0,-1,113.89831,1293.0169)"
id="g3015">
<path
d="m 1120,608 q 0,-12 -10,-24 L 791,265 q -9,-9 -23,-9 -14,0 -23,9 L 425,585 q -9,9 -9,23 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 v 352 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 q 13,0 22.5,-9.5 Q 896,1005 896,992 V 640 h 192 q 14,0 23,-9 9,-9 9,-23 z m 160,32 q 0,104 -40.5,198.5 Q 1199,933 1130,1002 1061,1071 966.5,1111.5 872,1152 768,1152 664,1152 569.5,1111.5 475,1071 406,1002 337,933 296.5,838.5 256,744 256,640 256,536 296.5,441.5 337,347 406,278 475,209 569.5,168.5 664,128 768,128 872,128 966.5,168.5 1061,209 1130,278 1199,347 1239.5,441.5 1280,536 1280,640 z m 256,0 Q 1536,431 1433,254.5 1330,78 1153.5,-25 977,-128 768,-128 559,-128 382.5,-25 206,78 103,254.5 0,431 0,640 0,849 103,1025.5 206,1202 382.5,1305 559,1408 768,1408 977,1408 1153.5,1305 1330,1202 1433,1025.5 1536,849 1536,640 z"
id="path3017"
inkscape:connector-curvature="0"
style="fill:currentColor" />
</g>
</svg>
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 48
− 20
View file @ 6965f6c7
:host {
display: block;
align-items: center;
display: flex;
flex-flow: row;
justify-content: center;
margin: 0 32px;
padding: 0;
}
.hy-site-header {
......@@ -9,6 +14,8 @@
display: flex;
flex-flow: row;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
// First level menu items
......@@ -20,54 +27,75 @@
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
@include font-size(15px, 16px);
@include font-size(14px, 14px);
@include font-weight($bold);
align-items: center;
border-top: 0 none;
padding: 10px 8px;
display: flex;
flex-direction: row;
justify-content: center;
letter-spacing: -0.6px;
//padding: 10px 8px;
padding: 0 7px;
text-transform: uppercase;
}
@include breakpoint($fullhd) {
@include font-size(18px, 16px);
letter-spacing: -0.5px;
padding: 10px;
@include breakpoint($xlarge) {
@include font-size(16px, 16px);
letter-spacing: -0.7px;
//padding: 10px;
padding: 0 9px;
}
// Underline if link is in active trail.
&--is-active-trail {
@include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding-bottom: 8px;
//border-bottom: 4px solid var(--brand-main-nearly-black);
//padding-bottom: 8px;
}
@include breakpoint($xlarge) {
padding-bottom: 12px;
//padding-bottom: 12px;
}
}
hy-icon {
//justify-content: center;
svg {
height: 5.63px;
width: 8px;
//height: 7.03px;
// width: 10px;
}
}
&__heading__icon {
display: none;
display: inline-block;
padding-left: 3px;
@include breakpoint($xlarge) {
padding-left: 4px;
}
}
// On hover: change background and show heading icon.
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
//background-color: var(--grayscale-background-box);
//padding: 35px 10px;
position: relative;
.desktop-menu-link__heading__icon {
bottom: 0;
display: block;
left: 0;
position: absolute;
width: 100%;
//bottom: 0;
//display: block;
//left: 0;
//position: absolute;
//width: 100%;
hy-icon {
justify-content: center;
//justify-content: center;
transform: rotateX(180deg);
svg {
padding: 8px 0;
//padding: 8px 0;
}
}
}
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 1
− 3
View file @ 6965f6c7
......@@ -225,9 +225,7 @@ export class HyDesktopMenuLinks {
aria-expanded="false"
>
{label}
<span class="desktop-menu-link__heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
......
src/components/site-header/site-header.scss
+ 9
− 6
View file @ 6965f6c7
......@@ -145,6 +145,7 @@
align-items: center;
display: flex;
flex-flow: row;
margin-right: 0;
&__item {
align-items: center;
......@@ -156,6 +157,7 @@
}
@include breakpoint($extrawide) {
margin-right: 32px;
&__item {
margin: 0 6px;
padding: 10px 0;
......@@ -172,8 +174,8 @@
.hy-link__donate {
@include breakpoint($wide) {
margin-left: 10px;
margin-right: 10px;
//margin-left: 10px;
//margin-right: 10px;
padding: 0;
text-decoration: none;
......@@ -184,13 +186,14 @@
}
@include breakpoint($extrawide) {
margin-left: 8px;
margin-right: 32px;
//margin-left: 8px;
//margin-right: 32px;
margin-right: 0;
}
@include breakpoint($xlarge) {
margin-left: 10px;
margin-right: 32px;
//margin-left: 10px;
//margin-right: 32px;
}
&__label {
......
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