Modification tuile en vedette (#107)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · May 7, 2024 · 4cd46af · 4cd46af
1 parent c63147a
commit 4cd46af
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ 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.3.0] - Unreleased
+
+### Changed
+- Components Tuile: Modification Tuile en vedette (Espacement, breakpoint)
+
+
 ## [5.2.0] - 2024-04-11
 
 ### Changed
@@ -13,7 +19,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [5.1.0] - 2024-03-22
 
 ### Changed
-- Retrait du tilde importer qui causait problème avec des versions récentes (15+ d'angular). Devrait être transparent dans des versions récentes de sass (dart-sass).
 - Components Accordeon: Ajustement structure accordeon et fix disabled state.
 - Components Étiquettes: Fusion de la variante light. Modification des schemas de couleurs des étiquettes.
 - Components Badge: Harmonisation des schémas de couleurs avec les étiquettes. Ajout d'une bordure.
@@ -34,6 +39,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Components - Accordeon: retrait de la version Framed. La version listed est la seule qui devrait être utilisé.
 - Components - Entree de données: Les versions small des input text, textarea et select sont deprecated et retiré des exemples.
 
+### BREAKING CHANGE
+- Retrait du tilde importer qui causait problème avec des versions récentes (15+ d'angular). Devrait être transparent dans des versions récentes de sass (dart-sass). A valider pour les anciennes versions ou node-sass...
+
 ## [4.24.3] - 2023-05-24
 
 ### Fixed

diff --git a/source/css/scss/_card.scss b/source/css/scss/_card.scss
@@ -132,6 +132,7 @@
 
   // Card text-interface
   // smaller line-height
+  .card-text,
   .card-text-interface {
     line-height: $line-height-md;
     margin-bottom: 1rem;
@@ -373,6 +374,7 @@
     }
 
     .card-body {
+      padding: 2rem;
       .card-title {
         @include font-size($h3-font-size);  // 24/32
         line-height: 2rem;
@@ -390,12 +392,12 @@
       }
     }
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(md) {
       .card-body {
         position: relative;
         margin-top: -4rem;
         z-index: 1;
-        padding: 2rem 6rem 2rem 2rem;
+        padding-right: 6rem;
 
         &:before {
           content: "";
@@ -414,6 +416,9 @@
         @include border-radius(0);
       }
 
+    }
+
+    @include media-breakpoint-up(lg) {
       [class*="col-"] {
         &:first-child {
           padding-left: calc($grid-gutter-width / 2);
@@ -440,24 +445,18 @@
       .card-body {
         height: 100%; // Force to take 100% of parent
         position: relative;
-        margin-top: 0;
         z-index: 1;
-
-        &:before {
-          content: none;
-        }
       }
 
       @include media-breakpoint-up(lg) {
         border: none;
         .card-body {
           border-bottom: 1px solid $neutral-stroke;
+          margin-top: 0;
           padding-right: 2rem;
 
-          .card-title {
-            @include font-size($h2-font-size);  // 32/40
-            line-height: 2.5rem;
-            margin-bottom: 2rem;
+          &:before {
+            content: none;
           }
         }
       }