diff --git a/src/components.d.ts b/src/components.d.ts index 11f6df4bd4808c7ed0ffb1670bb68a493ad947ea..22f9cd9c92aed79a70b1deb50cbe74777957f420 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -16,6 +16,7 @@ import { CtaLinkVariants, FooterLinkItemColor, FooterLinkVariants, + FooterVariant, GridAlignVariants, GridColumns, GridColumnsLg, @@ -750,6 +751,7 @@ export namespace Components { color: ColorVariant; label?: string; size: SiteLogoSize; + type: FooterVariant; url?: string; } interface HySiteSearch { @@ -2064,6 +2066,7 @@ declare namespace LocalJSX { color?: ColorVariant; label?: string; size?: SiteLogoSize; + type?: FooterVariant; url?: string; } interface HySiteSearch { diff --git a/src/components/cta-link/cta-link.scss b/src/components/cta-link/cta-link.scss index 8ac25a9ae7769b9d3d43be245383544f37d0da3b..a505ced3377d48118b0d49dfa73e1078847aa577 100644 --- a/src/components/cta-link/cta-link.scss +++ b/src/components/cta-link/cta-link.scss @@ -37,6 +37,16 @@ padding: 10.29px; } } + + &:hover { + span { + color: var(--brand-main) !important; + text-decoration: underline; + } + svg { + background-color: var(--brand-main) !important; + } + } } &.link-list { @@ -78,5 +88,15 @@ } } } + + &:hover { + span { + color: var(--brand-main) !important; + text-decoration: underline; + } + .hy-icon-wrapper { + background-color: var(--brand-main) !important; + } + } } } diff --git a/src/components/footer/hy-footer-action/hy-footer-action.scss b/src/components/footer/hy-footer-action/hy-footer-action.scss index 828b97dd7aa23a079a9939d593cc036edc8c7e1c..9b4df2caa1012c024c2240e65db5f2bf71895b7c 100644 --- a/src/components/footer/hy-footer-action/hy-footer-action.scss +++ b/src/components/footer/hy-footer-action/hy-footer-action.scss @@ -56,5 +56,14 @@ svg { fill: var(--grayscale-white); } + + &:hover { + label { + text-decoration: underline; + } + .hy-footer-action__up-button { + background-color: var(--brand-main); + } + } } } diff --git a/src/components/footer/hy-footer-base/hy-footer-base.scss b/src/components/footer/hy-footer-base/hy-footer-base.scss index ca7970495aa333379d4cf395bdac00b2d626c95f..70d85044e05c3b73c045463e0445daaac31e1bfd 100644 --- a/src/components/footer/hy-footer-base/hy-footer-base.scss +++ b/src/components/footer/hy-footer-base/hy-footer-base.scss @@ -130,6 +130,13 @@ :last-child() { margin-right: 0; } + + &:hover { + color: var(--grayscale-medium) !important; + svg { + fill: var(--grayscale-medium); + } + } } svg { diff --git a/src/components/footer/hy-footer-base/hy-footer-base.tsx b/src/components/footer/hy-footer-base/hy-footer-base.tsx index 137e85d078dd27ee59cc3ffc2edaac82387a0e88..d924ff5c1420850af534315fd56c42d6a1ce4851 100644 --- a/src/components/footer/hy-footer-base/hy-footer-base.tsx +++ b/src/components/footer/hy-footer-base/hy-footer-base.tsx @@ -13,7 +13,7 @@ export interface FooterBaseSome { } import {Component, ComponentInterface, Watch, Host, Prop, h} from '@stencil/core'; -import {FooterLinkItemColor, SiteLogoSize, ColorVariant} from '../../../utils/utils'; +import {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from '../../../utils/utils'; @Component({ tag: 'hy-footer-base', @@ -80,7 +80,13 @@ export class HyFooterBase implements ComponentInterface { <div class="hy-footer-base"> <div class="hy-footer-base__left"> <div class="hy-footer-base__logo"> - <hy-site-logo size={56} color={logoColor} url={this.logoUrl} label={this.logoLabel} /> + <hy-site-logo + type={FooterVariant.footer} + size={56} + color={logoColor} + url={this.logoUrl} + label={this.logoLabel} + /> </div> <div class="hy-footer-base__content"> <slot name="content"></slot> diff --git a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss index c1f4d546b27ff95a64244ac2c59028cc6d387c29..c549328f5a113da9bd666666f586a1665c331b2c 100644 --- a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss +++ b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss @@ -63,6 +63,13 @@ hy-footer-link-item[main-link] { .hy-footer-link-item__icon svg { fill: var(--grayscale-white); } + + &:hover { + color: var(--grayscale-medium) !important; + svg { + fill: var(--grayscale-medium); + } + } } &__color-black { @@ -72,6 +79,14 @@ hy-footer-link-item[main-link] { .hy-footer-link-item__icon svg { fill: var(--grayscale-black); } + + &:hover { + color: var(--brand-main) !important; + text-decoration: underline; + svg { + fill: var(--brand-main); + } + } } &__main { @@ -97,4 +112,10 @@ hy-footer-link-item[main-link] { top: 50%; transform: translateY(-50%); } + + &:hover { + h3 a { + color: var(--brand-main) !important; + } + } } diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss index fc58c575f6916b82a6b4f3aa60e37917abc01b05..a7553c617db196e35dcabbaf3899f20306f04a21 100644 --- a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss +++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss @@ -89,6 +89,13 @@ } } + &:hover { + a { + color: var(--brand-main); + text-decoration: underline; + } + } + &:focus { outline: auto; } @@ -105,6 +112,13 @@ stroke: var(--brand-main-light); } } + + &:hover { + svg { + fill: var(--brand-main) !important; + stroke: var(--brand-main) !important; + } + } } .breadcrumb-item.main { @@ -221,6 +235,14 @@ .breadcrumb-item__current { flex: 0 2 auto; min-width: 0; + + &:hover { + a { + cursor: default; + color: var(--grayscale-dark) !important; + text-decoration: none !important; + } + } } .breadcrumb-item__current a { @@ -232,10 +254,6 @@ text-overflow: ellipsis; white-space: nowrap; min-height: auto; - - &:hover { - cursor: default; - } } .intermediate { diff --git a/src/components/hy-shortcuts/hy-shortcuts.scss b/src/components/hy-shortcuts/hy-shortcuts.scss index 7bcb2bd551b21a2c9fcfbf37c637fd65c79046ff..3cc5b5c711ee7bc60aff9e4ec39b4a0d53db69ba 100644 --- a/src/components/hy-shortcuts/hy-shortcuts.scss +++ b/src/components/hy-shortcuts/hy-shortcuts.scss @@ -116,6 +116,13 @@ } } } + + &:hover { + color: var(--brand-main); + svg { + fill: var(--brand-main); + } + } } } } diff --git a/src/components/icon/HeartSupport.tsx b/src/components/icon/HeartSupport.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e6e35060f470e870401503d140bc60080032a259 --- /dev/null +++ b/src/components/icon/HeartSupport.tsx @@ -0,0 +1,11 @@ +import {h} from '@stencil/core'; + +function SvgHeartSupport(props) { + return ( + <svg viewBox="0 0 16 16" {...props}> + <path d="M1.26234059,1.47444321 C-0.421989103,3.44260781 -0.419570856,6.56432454 1.26234059,8.53342384 L7.39772074,15.7174761 C7.55302345,15.8974257 7.76996687,16 7.99652384,16 C8.22388007,16 8.44082554,15.897419 8.59532694,15.7174761 C10.641492,13.3259819 12.6907721,10.931817 14.7370601,8.5403228 C16.4213898,6.57215821 16.4205701,3.44955129 14.7370601,1.48134218 C13.0535502,-0.486866922 10.2157575,-0.486822413 8.53138685,1.48134218 L7.99982331,2.10029098 L7.46825978,1.47437645 C6.62609494,0.490294152 5.49814655,0 4.36859966,0 C3.23880685,0 2.10442346,0.490360916 1.26234059,1.47444321 Z M6.35964437,3.16815532 L7.43710533,4.37841446 C7.58389377,4.54236759 7.78894356,4.63582365 8.00307984,4.63582365 C8.21797156,4.63582365 8.42302328,4.5423615 8.56905435,4.37841446 L9.64045249,3.18084837 C10.6672219,2.02367291 12.2031147,2.02367291 13.2299229,3.18084837 C14.2566924,4.33802382 14.2566924,6.24360205 13.2299229,7.40077751 C11.4835935,9.3682191 9.74020842,11.3325787 7.99399527,13.3 L2.77007709,7.39449182 C1.74330764,6.23492374 1.74330764,4.32524968 2.77007709,3.16807422 C3.28382985,2.58908096 3.92699415,2.3 4.56785341,2.3 C5.20879014,2.3 5.84589161,2.58918234 6.35964437,3.16815532 Z"></path> + </svg> + ); +} + +export default SvgHeartSupport; diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 851e564ac6bb56847aede98960bffa8e2745ed45..677abac7edc74c38da891eb265ec69143cd9cb3b 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -16,6 +16,8 @@ const iconNames: IconName = { 'hy-icon-dot-arrow-right': (p) => <icons.DotArrowRight {...p} />, 'hy-icon-done': (p) => <icons.Done {...p} />, 'hy-icon-euro': (p) => <icons.Euro {...p} />, + 'hy-icon-heart': (p) => <icons.Heart {...p} />, + 'hy-icon-heart-support': (p) => <icons.HeartSupport {...p} />, 'hy-icon-link': (p) => <icons.Url {...p} />, 'hy-icon-globe': (p) => <icons.Globe {...p} />, 'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />, diff --git a/src/components/icon/icons.tsx b/src/components/icon/icons.tsx index 5818b0cd927f2a069d5dec14b72808868716b19f..ca109255a218e9772cc352bfcabca7d2afef1698 100644 --- a/src/components/icon/icons.tsx +++ b/src/components/icon/icons.tsx @@ -98,6 +98,7 @@ export {default as GooglePlus} from './GooglePlus'; export {default as Grid} from './Grid'; export {default as Hamburger} from './Hamburger'; export {default as Heart} from './Heart'; +export {default as HeartSupport} from './HeartSupport'; export {default as Helsinginyliopisto} from './Helsinginyliopisto'; export {default as Home} from './Home'; export {default as HorizontalResize} from './HorizontalResize'; diff --git a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss index fc2699ebc7f65d974ac207012222158259ae0b67..a5a75f7623ebcd742daa9b2f9c10949770c9fee8 100644 --- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss +++ b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss @@ -189,8 +189,10 @@ } &:hover { - color: var(--brand-main-nearly-black); - + a { + color: var(--brand-main) !important; + text-decoration: underline; + } .hy-menu-item__parent__icon__svg { fill: var(--brand-main-nearly-black); } diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss index ba583d5651d5cdd6c42f31b753987d324d4c7d15..44696d8a8c561af78fc78fc393da48fc13ba2056 100644 --- a/src/components/navigation/menu-language/menu-language.scss +++ b/src/components/navigation/menu-language/menu-language.scss @@ -66,7 +66,14 @@ } &:hover { + color: var(--brand-main); cursor: pointer; + span { + color: var(--brand-main); + } + svg { + fill: var(--brand-main); + } } &.is-open { diff --git a/src/components/navigation/menu-sidebar/menu-sidebar.scss b/src/components/navigation/menu-sidebar/menu-sidebar.scss index 795c2c227337ab4bd87ac4a1da0b1daa6ec26edc..f3e5559426afaf282f67580f68f8b896d02cd3ef 100644 --- a/src/components/navigation/menu-sidebar/menu-sidebar.scss +++ b/src/components/navigation/menu-sidebar/menu-sidebar.scss @@ -129,6 +129,8 @@ &:hover { cursor: pointer; + color: var(--brand-main); + text-decoration: underline; } svg { diff --git a/src/components/paragraph-text/paragraph-text.scss b/src/components/paragraph-text/paragraph-text.scss index 8f34f87eb4d376f782c8931ef4de5e3f1287bd45..4578320a476fe1263ab1fb796cd09afd27dcb6bc 100644 --- a/src/components/paragraph-text/paragraph-text.scss +++ b/src/components/paragraph-text/paragraph-text.scss @@ -55,11 +55,33 @@ color: var(--link-blue); font-family: var(--main-font-family); font-weight: 600; + display: inline-flex; @include breakpoint($narrow) { @include font-size(16px, 24px); letter-spacing: -0.1px; } + + &:hover { + color: var(--brand-main); + } + } + + a[target='_blank']:after { + display: block; + content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>"); + margin-left: 3px; + transform: rotate(315deg); + + &:hover { + content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>"); + } + } + + a[target='_blank']:hover { + &:after { + content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>"); + } } p { diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss index a17bbe74a2a66780a5d3a95f758dd7ee79fc666f..0c62a2de7ea7e45ff8eb1bc56a75a8dbaeb8974b 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss @@ -184,6 +184,16 @@ &__title { padding-right: 5px; } + + &:hover { + cursor: pointer; + span { + color: var(--brand-main); + } + svg { + fill: var(--brand-main); + } + } } } diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss index 26292ff750eaf43096feda54e00f2b5b17ebd925..c48320bbb1a9bac2ce2f5e516ca62db7aeb44849 100644 --- a/src/components/site-header/site-header.scss +++ b/src/components/site-header/site-header.scss @@ -48,6 +48,7 @@ } &__logo-container { + color: var(--brand-main-nearly-black); margin: 16px 8px; @include breakpoint($narrow) { @@ -61,6 +62,17 @@ @include breakpoint($extrawide) { margin: 16px; } + + &:hover { + color: var(--brand-main); + a, + span { + color: var(--brand-main) !important; + } + svg { + fill: var(--brand-main); + } + } } &__menu-container { @@ -202,6 +214,16 @@ margin: 0 8px; padding: 10px 0; } + + &:hover { + color: var(--brand-main); + span { + color: var(--brand-main); + } + svg { + fill: var(--brand-main); + } + } } } diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx index 8be0aa04bcf7710f5314dec14d04e4a1bc6aacb1..d38a503eff5d7ae815777a233de73b15f41e4108 100644 --- a/src/components/site-header/site-header.tsx +++ b/src/components/site-header/site-header.tsx @@ -221,7 +221,7 @@ export class SiteHeader { {this.donateLink.map((i) => { return ( <a class={'menu--secondary__item hy-link__donate'} href={i.url}> - <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} /> + <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} /> <span class={'hy-link__donate__label'}>{i.label}</span> </a> ); @@ -255,7 +255,7 @@ export class SiteHeader { {this.donateLink.map((i) => { return ( <a class={'menu--secondary__item hy-link__donate'} href={i.url}> - <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} /> + <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} /> <span class={'hy-link__donate__label'}>{i.label}</span> </a> ); diff --git a/src/components/site-header/site-logo/readme.md b/src/components/site-header/site-logo/readme.md index 6ca8f13049d858c93942fb48a91d43d31cca698b..cdb7cfb5f3b4f5a6b2b6f81859cb1904aeb5215d 100644 --- a/src/components/site-header/site-logo/readme.md +++ b/src/components/site-header/site-logo/readme.md @@ -4,12 +4,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------------------------------------------------------------- | -------------------- | -| `color` | `color` | | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` | -| `label` | `label` | | `string` | `undefined` | -| `size` | `size` | | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` | -| `url` | `url` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------------------------------------------------------------- | ---------------------- | +| `color` | `color` | | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` | +| `label` | `label` | | `string` | `undefined` | +| `size` | `size` | | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` | +| `type` | `type` | | `FooterVariant.footer \| FooterVariant.header` | `FooterVariant.header` | +| `url` | `url` | | `string` | `undefined` | ## Dependencies diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss index 7f4314ec367e3ed40fa419049886092068123490..3bd9dc7ddc3164be745d2f4d4693d28ef7c55f95 100644 --- a/src/components/site-header/site-logo/site-logo.scss +++ b/src/components/site-header/site-logo/site-logo.scss @@ -68,4 +68,27 @@ width: 64px; } } + + &__header { + &:hover { + color: var(--brand-main); + a, + span { + color: var(--brand-main) !important; + } + svg { + fill: var(--brand-main); + } + } + } + &__footer { + &:hover { + span { + color: var(--grayscale-medium) !important; + } + svg { + fill: var(--grayscale-medium) !important; + } + } + } } diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx index 7f06639326843659c2310a2218d3d5d67628eec3..723cb51aad1da1427038ff420c307ff5d7e48588 100644 --- a/src/components/site-header/site-logo/site-logo.tsx +++ b/src/components/site-header/site-logo/site-logo.tsx @@ -1,5 +1,5 @@ import {Component, h, Host, Prop} from '@stencil/core'; -import {ColorVariant, SiteLogoSize} from '../../../utils/utils'; +import {ColorVariant, FooterVariant, SiteLogoSize} from '../../../utils/utils'; @Component({ tag: 'hy-site-logo', @@ -7,14 +7,16 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils'; shadow: false, }) export class SiteLogo { + @Prop() type: FooterVariant = FooterVariant.header; @Prop() color: ColorVariant = ColorVariant.black; @Prop() label?: string; @Prop() size: SiteLogoSize = SiteLogoSize.big; @Prop() url?: string; render() { + const classAttributes = ['hy-site-logo', `hy-site-logo__${this.type}`].join(' '); return this.url ? ( - <Host class={'hy-site-logo'}> + <Host class={classAttributes}> <a href={this.url}> <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} /> <span class={'hy-site-logo__label'} style={{color: this.color}}> @@ -23,7 +25,7 @@ export class SiteLogo { </a> </Host> ) : this.label ? ( - <Host class={'hy-site-logo'}> + <Host class={classAttributes}> <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} /> <span class={'hy-site-logo__label'} style={{color: this.color}}> {this.label} diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss index 700aa57a14613dcc707d49a4aeb5b306d485d37c..bfe7698ccc48afd42c081914a37a8af843286a59 100644 --- a/src/components/site-header/site-search/site-search.scss +++ b/src/components/site-header/site-search/site-search.scss @@ -12,7 +12,6 @@ @include breakpoint($wide) { flex-direction: row-reverse; - //padding: 4px 0; padding: 0; &:focus { @@ -82,6 +81,18 @@ width: 16px; } } + + &:hover { + color: var(--brand-main); + cursor: pointer; + + span { + color: var(--brand-main); + } + svg { + fill: var(--brand-main); + } + } } .site-search { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index c4fa3e0755722d696da99c843bc267dd29b8e4d1..bd9bf643788dbecadb0ea64f69b63b14d6f8efa2 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -171,6 +171,11 @@ export enum SiteLogoSize { large = 80, } +export enum FooterVariant { + header = 'header', + footer = 'footer', +} + export enum ColorVariant { black = 'var(--brand-main-nearly-black)', white = 'var(--grayscale-white)',