@gouvfr/dsfr 1.4.0 → 1.4.1

package/dist/component/component.main.css

@@ -1,5 +1,5 @@
 /*!
- * DSFR v1.4.0 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ * DSFR v1.4.1 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
  */
 @charset "UTF-8";
 
@@ -5103,6 +5103,20 @@ a.fr-tag--dismiss.fr-tag--sm::after, button.fr-tag--dismiss.fr-tag--sm::after, i
   margin-bottom: 1.5rem;
 }
 
+.fr-tag[aria-pressed="false"] {
+  color: var(--text-action-high-blue-france);
+  background-color: var(--background-action-low-blue-france);
+  --hover: var(--background-action-low-blue-france-hover);
+  --active: var(--background-action-low-blue-france-active);
+}
+
+.fr-tag.fr-tag--dismiss {
+  color: var(--text-inverted-grey);
+  background-color: var(--background-action-high-blue-france);
+  --hover: var(--background-action-high-blue-france-hover);
+  --active: var(--background-action-high-blue-france-active);
+}
+
 a.fr-tag, button.fr-tag, input[type="button"].fr-tag, input[type="image"].fr-tag, input[type="reset"].fr-tag, input[type="submit"].fr-tag {
   color: var(--text-action-high-blue-france);
   background-color: var(--background-action-low-blue-france);
@@ -5229,13 +5243,6 @@ a.fr-tag--beige-gris-galet, button.fr-tag--beige-gris-galet, input[type="button"
   --active: var(--background-action-low-beige-gris-galet-active);
 }
 
-a.fr-tag[aria-pressed="false"], button.fr-tag[aria-pressed="false"], input[type="button"].fr-tag[aria-pressed="false"], input[type="image"].fr-tag[aria-pressed="false"], input[type="reset"].fr-tag[aria-pressed="false"], input[type="submit"].fr-tag[aria-pressed="false"] {
-  color: var(--text-action-high-blue-france);
-  background-color: var(--background-action-low-blue-france);
-  --hover: var(--background-action-low-blue-france-hover);
-  --active: var(--background-action-low-blue-france-active);
-}
-
 a.fr-tag[aria-pressed="true"]:hover, button.fr-tag[aria-pressed="true"]:hover, input[type="button"].fr-tag[aria-pressed="true"]:hover, input[type="image"].fr-tag[aria-pressed="true"]:hover, input[type="reset"].fr-tag[aria-pressed="true"]:hover, input[type="submit"].fr-tag[aria-pressed="true"]:hover {
   background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.57812rem, var(--background-action-high-blue-france-hover) 0.625rem);
 }
@@ -5249,14 +5256,15 @@ a.fr-tag[aria-pressed="true"]:disabled, button.fr-tag[aria-pressed="true"]:disab
 }
 
 a.fr-tag[aria-pressed="true"].fr-tag--sm, button.fr-tag[aria-pressed="true"].fr-tag--sm, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm {
-  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
 }
 
-a.fr-tag.fr-tag--dismiss, button.fr-tag.fr-tag--dismiss, input[type="button"].fr-tag.fr-tag--dismiss, input[type="image"].fr-tag.fr-tag--dismiss, input[type="reset"].fr-tag.fr-tag--dismiss, input[type="submit"].fr-tag.fr-tag--dismiss {
-  color: var(--text-inverted-grey);
-  background-color: var(--background-action-high-blue-france);
-  --hover: var(--background-action-high-blue-france-hover);
-  --active: var(--background-action-high-blue-france-active);
+a.fr-tag[aria-pressed="true"].fr-tag--sm:hover, button.fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:hover, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:hover {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-hover) 0.5rem);
+}
+
+a.fr-tag[aria-pressed="true"].fr-tag--sm:active, button.fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="button"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="image"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="reset"].fr-tag[aria-pressed="true"].fr-tag--sm:active, input[type="submit"].fr-tag[aria-pressed="true"].fr-tag--sm:active {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-active) 0.5rem);
 }
 
 a.fr-tag:disabled, a.fr-tag:not([href]), button.fr-tag:disabled, input[type="button"].fr-tag:disabled, input[type="image"].fr-tag:disabled, input[type="reset"].fr-tag:disabled, input[type="submit"].fr-tag:disabled {
@@ -5267,7 +5275,15 @@ a.fr-tag:disabled, a.fr-tag:not([href]), button.fr-tag:disabled, input[type="but
 }
 
 .fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"], .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"] {
-  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--hsla) 0.5rem), radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france) 0.5rem);
+}
+
+.fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:hover, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:hover {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-hover) 0.5rem);
+}
+
+.fr-tags-group.fr-tags-group--sm a.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="button"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="image"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="reset"].fr-tag[aria-pressed="true"]:active, .fr-tags-group.fr-tags-group--sm input[type="submit"].fr-tag[aria-pressed="true"]:active {
+  background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, var(--background-action-high-blue-france-active) 0.5rem);
 }
 
 /* ¯¯¯¯¯¯¯¯¯ *\
@@ -7122,26 +7138,6 @@ textarea.fr-input {
   display: inline-flex;
   margin-right: 1rem;
   margin-bottom: 1rem;
-  background-color: transparent;
-  --hover: inherit;
-  --active: inherit;
-  color: var(--text-action-high-blue-france);
-}
-
-.fr-follow__social .fr-link .fr-btn {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  font-weight: 500;
-}
-
-.fr-follow__social .fr-link .fr-btn::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: none;
-}
-
-.fr-follow .fr-link--facebook {
   font-size: 1rem;
   line-height: 1.5rem;
   min-height: 2.5rem;
@@ -7154,18 +7150,20 @@ textarea.fr-input {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   font-weight: 500;
+  background-color: transparent;
+  --hover: inherit;
+  --active: inherit;
+  color: var(--text-action-high-blue-france);
 }
 
-.fr-follow .fr-link--facebook::before {
+.fr-follow__social .fr-link::before {
   font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
   margin-left: 0;
   margin-right: 0.5rem;
   font-size: 1.5rem;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--facebook {
+.fr-follow__social .fr-links-group--lg .fr-link {
   font-size: 1.125rem;
   line-height: 1.75rem;
   min-height: 3rem;
@@ -7180,205 +7178,36 @@ textarea.fr-input {
   font-weight: 500;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--facebook::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
+.fr-follow__social .fr-links-group--lg .fr-link::before {
+  font: normal 700 normal 2rem/1 dsfr-icon;
   margin-left: 0;
   margin-right: 0.5rem;
   font-size: 2rem;
 }
 
-.fr-follow .fr-link--twitter {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-link--twitter::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
+.fr-follow .fr-link--facebook::before {
+  content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--twitter {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
-.fr-follow .fr-links-group--lg .fr-link--twitter::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
+.fr-follow .fr-link--twitter::before {
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--instagram {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--instagram::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--instagram {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--instagram::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--linkedin {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--linkedin::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--linkedin {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--linkedin::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
-}
-
-.fr-follow .fr-link--youtube {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  min-height: 2.5rem;
-  padding: 0.5rem 1.5rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
 }
 
 .fr-follow .fr-link--youtube::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
   content: "";
   font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--youtube {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  min-height: 3rem;
-  padding: 0.5rem 2rem;
-  flex-direction: row;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 3rem;
-  max-height: 3rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-weight: 500;
-}
-
-.fr-follow .fr-links-group--lg .fr-link--youtube::before {
-  font: normal 700 normal 1.5rem/1 dsfr-icon;
-  content: "";
-  font-weight: 700;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  font-size: 2rem;
 }
 
 .fr-follow .fr-input {