From 27286baf8e1bb86f0891337b76c8336d32254a0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 11 Jan 2021 15:35:44 +0100 Subject: [PATCH] feat(links): with chevron :tada: --- .bundlewatch.config.json | 4 +-- scss/_type.scss | 29 +++++++++++++++++ scss/_variables.scss | 11 +++++++ site/assets/scss/_boosted.scss | 3 +- site/content/docs/5.0/content/typography.md | 14 +++++++++ .../content/docs/5.0/guidelines/navigation.md | 31 ++++++++++++------- 6 files changed, 78 insertions(+), 14 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index d4b566a5ca..e70316bb84 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "23.4 kB" + "maxSize": "23.75 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "21.5 kB" + "maxSize": "21.75 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_type.scss b/scss/_type.scss index d41ee13055..d3093356ff 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -239,6 +239,35 @@ h2, } } +// +// Links // Boosted mod +// +.link-chevron { + font-weight: $font-weight-bold; + text-decoration: if($link-decoration == none, null, none); + + &::after { + display: inline-block; + width: $linked-chevron-icon-width; + height: $linked-chevron-icon-height; + margin-left: $linked-chevron-margin-left; + vertical-align: middle; + content: ""; + background-image: escape-svg($chevron-icon); + background-repeat: no-repeat; + transform: $linked-chevron-transform; + } + + &:hover, + &:focus { + text-decoration: $link-decoration; + + &::after { + filter: $orange-filter; + } + } +} +// End mod // // Misc diff --git a/scss/_variables.scss b/scss/_variables.scss index d1ee5eb6a9..f9fa5db755 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -236,6 +236,7 @@ $escaped-characters: ( ) !default; // Boosted mod +// For colored filters, see https://codepen.io/sosuke/pen/Pjoqqp $chevron-icon: url("data:image/svg+xml,") !default; $chevron-icon-disabled: url("data:image/svg+xml,") !default; $cross-icon: url("data:image/svg+xml,") !default; @@ -245,6 +246,7 @@ $info-icon: url("data:image/svg+xml,") !default; $danger-icon: url("data:image/svg+xml,") !default; $invert-filter: invert(1) !default; +$orange-filter: invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; // End mod // Options @@ -329,6 +331,15 @@ $link-hover-decoration: null !default; $stretched-link-pseudo-element: after !default; $stretched-link-z-index: 1 !default; + +// Boosted mod +$linked-chevron-icon-width: subtract(.5rem, 1px) !default; +$linked-chevron-icon-height: $spacer / 2 !default; +$linked-chevron-transform: rotate(.5turn) translateY(1px) !default; +$linked-chevron-margin-left: $spacer / 4 !default; +// End mod + + // Paragraphs // // Style p element. diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index 6e5723018c..f64711e456 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -65,7 +65,8 @@ body { .bd-guidelines .bd-content > h2 + p, .bd-guidelines .bd-content > h3 + p, #with-labels + p, -#with-icons + p { +#with-icons + p, +#links + .row h3 + p { display: flex; align-items: center; padding: 0 0 $spacer / 2; diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index a373edda82..34252d7e8c 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -361,6 +361,20 @@ Use text utilities as needed to change the alignment of your blockquote. {{< /example >}} + +## Links + +Links in content are black and underlined. They adapt to their context otherwise, mainly in navigation components like [Navs & tabs]({{< docsref "/components/navs-tabs" >}}) or [Navbar]({{< docsref "/components/navbar" >}}). + +### With chevron + +Add `.link-chevron` to bold your link and enhance them with a chevron. + +{{< example >}} +This is a sample link with chevron +{{< /example >}} + + ## Lists ### Unstyled diff --git a/site/content/docs/5.0/guidelines/navigation.md b/site/content/docs/5.0/guidelines/navigation.md index d31d1794bc..1585094fcb 100644 --- a/site/content/docs/5.0/guidelines/navigation.md +++ b/site/content/docs/5.0/guidelines/navigation.md @@ -9,19 +9,28 @@ toc: true ## Links -
-
-

Default

+[Documentation]({{< docsref "/content/typography" >}}#links) + +
+
+

Main navigation links — {{< anchor web-nav-lnk-001 >}}

+ Text link
-
- Text link +
+

Small navigation links — {{< anchor web-nav-lnk-002 >}}

+ Text link
-
-

With chevrons

- - {{< callout info >}} - This feature will be delivered with [#520]({{< param repo >}}/issues/520). - {{< /callout >}} +
+

Links with underline — {{< anchor web-nav-lnk-003 >}}

+ Text link +
+
+

Small links width underline — {{< anchor web-nav-lnk-004 >}}

+ Text link +
+
+

With chevron — {{< anchor web-nav-lnk-005 >}}

+ Text link