diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2b0cd50c..cb0c962e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-## [5.4.0] - Unreleased
+## [5.5.0] - unreleased
+
+## Added
+- Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
+
+
+## [5.4.0] - 2024-05-30
### Added
- Components - Message ciblé: Ajout de la variante hyperlien.
diff --git a/source/_patterns/02-components/tuiles/_card-item-featured.mustache b/source/_patterns/02-components/tuiles/_card-item-featured.mustache
index 6d7c72e2b..a76127134 100644
--- a/source/_patterns/02-components/tuiles/_card-item-featured.mustache
+++ b/source/_patterns/02-components/tuiles/_card-item-featured.mustache
@@ -21,17 +21,17 @@
{{# card-type }}
{{ card-type }}
{{/ card-type}}
-
+
{{# card-title }}
{{ card-title }}
{{/ card-title }}
-
+
{{# card-text }}
{{{ card-text }}}
{{/ card-text }}
{{# card-link }}
- {{ card-link }}
+ {{ card-link }}
{{/ card-link }}
@@ -46,13 +46,13 @@
{{# card-title }}
{{ card-title }}
{{/ card-title }}
-
+
{{# card-text }}
{{{ card-text }}}
{{/ card-text }}
{{# card-link }}
- {{ card-link }}
+ {{ card-link }}
{{/ card-link }}
{{/ fullwidth}}
diff --git a/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache b/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache
index 0f7a27cd6..fdcc61cef 100644
--- a/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache
+++ b/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache
@@ -15,13 +15,13 @@
{{# card-title }}
{{ card-title }}
{{/ card-title }}
-
+
{{# card-text }}
{{{ card-text }}}
{{/ card-text }}
{{# card-link }}
- {{ card-link }}
+ {{ card-link }}
{{/ card-link }}
diff --git a/source/_patterns/02-components/tuiles/_card-item-full-width.mustache b/source/_patterns/02-components/tuiles/_card-item-full-width.mustache
index 0d4df4e54..e6418b8f2 100644
--- a/source/_patterns/02-components/tuiles/_card-item-full-width.mustache
+++ b/source/_patterns/02-components/tuiles/_card-item-full-width.mustache
@@ -63,7 +63,7 @@
{{/ card-text-interface }}
{{# card-link }}
- {{ card-link }}
+ {{ card-link }}
{{/ card-link }}
diff --git a/source/_patterns/02-components/tuiles/_card-item.mustache b/source/_patterns/02-components/tuiles/_card-item.mustache
index aadd2f8e4..ad42d60c8 100755
--- a/source/_patterns/02-components/tuiles/_card-item.mustache
+++ b/source/_patterns/02-components/tuiles/_card-item.mustache
@@ -72,7 +72,7 @@
{{/ card-cta }}
{{# card-link }}
- {{ card-link }}
+ {{ card-link }}
{{/ card-link }}
diff --git a/source/css/scss/_card.scss b/source/css/scss/_card.scss
index 8ed5c41a0..683ef1a7e 100755
--- a/source/css/scss/_card.scss
+++ b/source/css/scss/_card.scss
@@ -61,16 +61,14 @@
}
.card-img {
- width: 198px;
+ width: calc(100% - 4rem);
@include border-radius(0);
- border: $card-border-width solid $card-border-color;
margin: 2rem 2rem 0 2rem;
align-self: flex-start;
&.img-placeholder {
width: calc(100% - 4rem);
max-height: 200px;
- border: none;
align-items: center;
justify-content: center;
display: flex;
@@ -85,6 +83,7 @@
// 576px and up
@include media-breakpoint-up(sm) {
margin: 2rem 0 2rem 2rem;
+ width: 200px;
&.img-placeholder {
width: 200px;
@@ -157,10 +156,30 @@
display: inline-flex;
font-weight: $font-weight-bold;
line-height: $line-height-md;
+ margin-right: 0;
.icon {
@include icon-color($action);
margin-left: .25rem;
}
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
+
+ &.card-link-icon {
+ display: inline;
+ .icon-nowrap {
+ display: inline;
+ white-space: nowrap;
+ vertical-align: -6px;
+ line-height: 1;
+ }
+ .icon {
+ display: inline;
+ margin-right: 0;
+ line-height: 1;
+ }
+ }
}
// Define cards using 32px padding
@@ -240,14 +259,6 @@
margin-top: 1rem;
}
}
- // Optionnal bottom link-label
- .card-link {
- color: $action;
- display: inline-flex;
- font-weight: $font-weight-bold;
- line-height: $line-height-md;
- padding-top: 1rem;
- }
}
// Card profile
@@ -380,16 +391,6 @@
line-height: 2rem;
margin-bottom: 1rem;
}
- .card-link {
- color: $action;
- display: inline-flex;
- font-weight: $font-weight-bold;
- line-height: $line-height-md;
- .icon {
- @include icon-color($action);
- margin-left: .25rem;
- }
- }
}
@include media-breakpoint-up(md) {
diff --git a/source/css/scss/utilities/_text.scss b/source/css/scss/utilities/_text.scss
index 3f58a5189..065d4fc80 100644
--- a/source/css/scss/utilities/_text.scss
+++ b/source/css/scss/utilities/_text.scss
@@ -252,6 +252,31 @@ a.text-muted {
}
}
+// Allow inline icon that wraps with label and leave no orphan
+.link-inline-icon {
+ display: inline !important;
+ margin-right: 0 !important;
+ text-decoration: none;
+ .icon-nowrap {
+ display: inline;
+ white-space: nowrap;
+ vertical-align: -6px;
+ line-height: 1;
+ }
+ .icon {
+ display: inline;
+ margin-left: 0.25rem;
+ margin-right: 0;
+ }
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ .link-label {
+ background-color: $highlight-light;
+ }
+ }
+}
+
// Utility class for font-size