Merge pull request dnum-mi#149 from dnum-mi/fix/dsfr-card

refactor: ♻️ Utilise les derniers styles du DSFR
TaylorGit9 · Nov 16, 2021 · f37655c · f37655c
2 parents e78e297 + ea9e884
commit f37655c
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 88 deletions.
diff --git a/src/components/DsfrCard/DsfrCard.vue b/src/components/DsfrCard/DsfrCard.vue
@@ -85,22 +85,14 @@ export default {
 }
 </script>
 
-<style scoped>
-.fr-card {
-  position: relative;
-  display: flex;
-  flex-direction: column-reverse;
-  background-color: var(--beige);
-  cursor: pointer;
-}
+<style src="./card.css" />
 
-.fr-card--horizontal {
-  @media screen and (min-width: 769px) {
-    flex-direction: row-reverse;
-  }
+<style scoped>
+.fr-card:not(.fr-card--no-arrow) .fr-card__body::after {
+  display: none;
+  content: '';
 }
 
-/* TODO: emulate this with oh-vue-icons */
 .fr-card__arrow {
   font-size: 1.5rem;
   width: 1.5rem;
@@ -111,79 +103,4 @@ export default {
 
   color: var(--bf500);
 }
-.fr-card__img {
-  position: relative;
-  width: 100%;
-}
-.fr-card__img:before {
-  display: block;
-  content: "";
-  width: 100%;
-  padding-bottom: 56.25%;
-}
-.fr-card__img img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%
-}
-.fr-card__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  padding: 1.5rem;
-}
-.fr-card__detail {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: .75rem;
-  line-height: 1.25rem;
-  color: var(--g600);
-  order: 1;
-}
-.fr-card__title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin-bottom: .5rem;
-  order: 2;
-}
-.fr-card__desc,
-.fr-card__title {
-  line-height: 1.5rem;
-  margin-top: 0;
-  color: var(--g800);
-}
-.fr-card__desc {
-  margin-bottom: 1rem;
-  font-size: .875rem;
-  color: var(--g800);
-  order: 3;
-}
-.fr-card__link {
-  --is-link: false;
-  display: inline-flex;
-  width: 100%;
-  margin-top: auto;
-}
-
-.fr-card,
-.fr-card.fr-enlarge-link {
-  background-color: var(--beige);
-}
-
-.fr-card.fr-enlarge-link,
-:root:not([data-fr-theme=dark i]) .fr-card.fr-enlarge-link {
-  --color-hover: rgba(79,79,79,0.5);
-  --color-active: hsla(0,0%,45.1%,0.5);
-}
-.fr-card.fr-enlarge-link {
-  --color-hover: rgba(79,79,79,0.5);
-  --color-active: hsla(0,0%,45.1%,0.5)
-}
-.fr-card:not(.fr-card--no-arrow) .fr-card__body:after {
-  color: var(--bf500)
-}
 </style>
diff --git a/src/components/DsfrCard/card.css b/src/components/DsfrCard/card.css
@@ -0,0 +1,147 @@
+/*!
+ * DSFR v1.1.0 | SPDX-License-Identifier: MIT | License-Filename: LICENCE.md | restricted use (see terms and conditions)
+ */
+@charset "UTF-8";
+
+/* ------------------------------------ *\
+  CARD
+\* ------------------------------------ */
+.fr-card {
+  display: flex;
+  flex-direction: column-reverse;
+  position: relative;
+  background-color: var(--beige);
+}
+
+.fr-grid-row .fr-card {
+  height: 100%;
+}
+
+.fr-card:not(.fr-card--no-arrow) .fr-card__body::after {
+  font: normal normal normal 1.5rem/1 dsfr-icon;
+  content: "";
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: auto;
+  margin-left: auto;
+  color: var(--bf500);
+}
+
+.fr-card__img {
+  position: relative;
+  width: 100%;
+}
+
+.fr-card__img::before {
+  content: "";
+  display: block;
+  width: 100%;
+  padding-bottom: 56.25%;
+}
+
+.fr-card__img img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+
+.fr-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: 1.5rem;
+}
+
+.fr-card__detail {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  order: -1;
+  color: var(--g600);
+}
+
+.fr-card__title {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  color: var(--g800);
+}
+
+.fr-card__desc {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.fr-card__link {
+  --link-underline: none;
+  --link-blank-font: none;
+  --link-blank-content: none;
+  display: inline-flex;
+  width: 100%;
+  margin-top: auto;
+}
+
+.fr-card.fr-enlarge-link {
+  background-color: var(--beige);
+}
+
+:root:not([data-fr-theme="dark"]) .fr-card.fr-enlarge-link {
+  --color-hover: rgba(224, 219, 208, 0.5);
+  --color-active: rgba(199, 189, 170, 0.5);
+}
+
+:root:not([data-fr-theme="dark"]) [class*="fr-scheme-light"] .fr-card.fr-enlarge-link,
+:root:not([data-fr-theme="dark"]) [class*="--scheme-light-"] .fr-card.fr-enlarge-link {
+  --color-hover: rgba(224, 219, 208, 0.5);
+  --color-active: rgba(199, 189, 170, 0.5);
+}
+
+:root:not([data-fr-theme="dark"]) [class*="fr-scheme-dark"] .fr-card.fr-enlarge-link,
+:root:not([data-fr-theme="dark"]) [class*="--scheme-dark-"] .fr-card.fr-enlarge-link {
+  --color-hover: rgba(79, 79, 79, 0.5);
+  --color-active: rgba(115, 115, 115, 0.5);
+}
+
+:root[data-fr-theme="dark"] .fr-card.fr-enlarge-link {
+  --color-hover: rgba(79, 79, 79, 0.5);
+  --color-active: rgba(115, 115, 115, 0.5);
+}
+
+@media (min-width: 48em) {
+  .fr-card__title {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .fr-card--horizontal {
+    flex-direction: row-reverse;
+  }
+
+  .fr-card--horizontal .fr-card__img {
+    width: 40.78%;
+    flex: 1 0 auto;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .fr-card.fr-enlarge-link:not(a):not(:disabled):hover,
+  a.fr-card.fr-enlarge-link[href]:hover {
+    background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover));
+  }
+
+  .fr-card.fr-enlarge-link:not(a):not(:disabled):active,
+  a.fr-card.fr-enlarge-link[href]:active {
+    background-image: linear-gradient(0deg, var(--color-active), var(--color-active));
+  }
+}