From 2328d2dbf087291c7b647042f505fc821a875664 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 18 Jan 2021 17:01:07 +0200
Subject: [PATCH] menu language: disabled link styles
---
src/components.d.ts | 2 ++
.../menu-language-item/menu-language-item.scss | 15 +++++++++++++--
.../menu-language-item/menu-language-item.tsx | 3 +++
.../navigation/menu-language-item/readme.md | 17 +++++++++--------
.../navigation/menu-language/menu-language.tsx | 3 +++
src/global/_colors.scss | 1 +
6 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index f5282119..a2df908d 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 1bf43fbf..2b9bd26f 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 830850da..9e949b30 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 30f91df8..efadc1e0 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 781645bd..ed0386d3 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 40d3a2fc..3de5b728 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;
--
GitLab