diff --git a/src/components.d.ts b/src/components.d.ts index f5282119165fa474173b5e25dded9a62615aa626..a2df908d1bfafdcacdd14dee11ac6634c8ebf20f 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -572,6 +572,7 @@ export namespace Components { interface HyMenuLanguageItem { abbr: string; isActive: boolean; + isDisabled: boolean; isMobile: boolean; label: string; langCode: string; @@ -1866,6 +1867,7 @@ declare namespace LocalJSX { interface HyMenuLanguageItem { abbr?: string; isActive?: boolean; + isDisabled?: boolean; isMobile?: boolean; label?: string; langCode?: string; diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss index 1bf43fbfd5ec278e2f06f7ab1241116ca05ff57c..2b9bd26f8a1ab9e01ec5af02fc893ff7f748afe1 100644 --- a/src/components/navigation/menu-language-item/menu-language-item.scss +++ b/src/components/navigation/menu-language-item/menu-language-item.scss @@ -18,7 +18,6 @@ a { @include font-size(14px, 20px); @include font-weight($semibold); color: var(--brand-main-light); - font-weight: 700; letter-spacing: -0.5px; padding: 8px 12px; text-transform: none; @@ -28,6 +27,7 @@ a { color: var(--brand-main); } } + @include breakpoint($xlarge) { @include font-size(16px, 20px); letter-spacing: -0.53px; @@ -46,14 +46,25 @@ a { .hy-menu-language-item__label { color: var(--grayscale-black); - font-weight: 700; border-bottom: 2px solid var(--additional-orange); + @include breakpoint($wide) { border: none; } } } + &.is-disabled { + @include breakpoint($wide) { + color: var(--link-disabled); + + &:hover { + background-color: transparent; + color: var(--link-disabled); + } + } + } + &:not(.is-mobile) { margin: 0; } diff --git a/src/components/navigation/menu-language-item/menu-language-item.tsx b/src/components/navigation/menu-language-item/menu-language-item.tsx index 830850dab833972be03fba4309f0d81f88cd2233..9e949b30702258bb63e6222531acf0371f8b41c1 100644 --- a/src/components/navigation/menu-language-item/menu-language-item.tsx +++ b/src/components/navigation/menu-language-item/menu-language-item.tsx @@ -8,6 +8,7 @@ import {Component, h, Prop, Host} from '@stencil/core'; export class SiteLanguage { @Prop() abbr: string; @Prop() isActive: boolean = false; + @Prop() isDisabled: boolean = false; @Prop() isMobile: boolean = false; @Prop() label: string; @Prop() langCode: string; @@ -18,6 +19,7 @@ export class SiteLanguage { <Host class={{ 'is-active': this.isActive, + 'is-disabled': this.isDisabled, 'hy-menu-language-item': true, }} > @@ -25,6 +27,7 @@ export class SiteLanguage { href={this.url} class={{ 'is-active': this.isActive, + 'is-disabled': this.isDisabled, 'is-mobile': this.isMobile, }} > diff --git a/src/components/navigation/menu-language-item/readme.md b/src/components/navigation/menu-language-item/readme.md index 30f91df8c6c11c0a18f1caee311d36ab203b2cd0..efadc1e0d47be4775769aecda274af351eb90ddf 100644 --- a/src/components/navigation/menu-language-item/readme.md +++ b/src/components/navigation/menu-language-item/readme.md @@ -4,14 +4,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ----------- | ----------- | --------- | ----------- | -| `abbr` | `abbr` | | `string` | `undefined` | -| `isActive` | `is-active` | | `boolean` | `false` | -| `isMobile` | `is-mobile` | | `boolean` | `false` | -| `label` | `label` | | `string` | `undefined` | -| `langCode` | `lang-code` | | `string` | `undefined` | -| `url` | `url` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ----------- | --------- | ----------- | +| `abbr` | `abbr` | | `string` | `undefined` | +| `isActive` | `is-active` | | `boolean` | `false` | +| `isDisabled` | `is-disabled` | | `boolean` | `false` | +| `isMobile` | `is-mobile` | | `boolean` | `false` | +| `label` | `label` | | `string` | `undefined` | +| `langCode` | `lang-code` | | `string` | `undefined` | +| `url` | `url` | | `string` | `undefined` | ## Dependencies diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx index 781645bd766093945a20e91cbcda14cf0c11e71f..ed0386d3465febec4893f8625cdcde3d9d50a4fc 100644 --- a/src/components/navigation/menu-language/menu-language.tsx +++ b/src/components/navigation/menu-language/menu-language.tsx @@ -6,6 +6,7 @@ export interface MenuLanguage { abbr: string; label: string; isActive?: boolean; + isDisabled?: boolean; } import {Component, h, Prop, Host, Watch, Element, Listen, State, Event, EventEmitter} from '@stencil/core'; @@ -101,6 +102,7 @@ export class MenuLanguage { label={item.label} abbr={item.abbr} is-active={item.isActive} + is-disabled={item.isDisabled} is-mobile={this.isMobile} /> ); @@ -144,6 +146,7 @@ export class MenuLanguage { label={item.label} abbr={item.abbr} is-active={item.isActive} + is-disabled={item.isDisabled} is-mobile={this.isMobile} /> ); diff --git a/src/global/_colors.scss b/src/global/_colors.scss index 40d3a2fc71bfc05db99dac7cc9659b8b7ecf7560..3de5b728f2a6f3bc58b7f23be16e45f9aa6b4a89 100644 --- a/src/global/_colors.scss +++ b/src/global/_colors.scss @@ -5,6 +5,7 @@ --brand-main-dark: #003146; --brand-main-nearly-black: #000222; --link-blue: #0479a5; + --link-disabled: #767676; --grayscale-white: #fff; --grayscale-light: #f8f8f8; --grayscale-medium: #d2d2d2;