final
This commit is contained in:
parent
36bd9d3e21
commit
0dd1cd7a1c
2042 changed files with 383171 additions and 73 deletions
home/dist/component/badge
26
home/dist/component/badge/README.md
vendored
Normal file
26
home/dist/component/badge/README.md
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# badge
|
||||
|
||||
Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.
|
||||
|
||||
## Dépendances
|
||||
```shell
|
||||
badge
|
||||
└─ core
|
||||
```
|
||||
|
||||
## Utilisation
|
||||
Afin d’utiliser le composant `badge`, il est nécessaire d’ajouter les fichiers de styles et de scripts présents dans le dossier dist dans l'ordre suivant :\n
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link href="css/core/core.min.css" rel="stylesheet">
|
||||
<link href="css/badge/badge.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Consulter [la documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge) sur le module Badge
|
||||
740
home/dist/component/badge/badge.css
vendored
Normal file
740
home/dist/component/badge/badge.css
vendored
Normal file
|
|
@ -0,0 +1,740 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/
|
||||
/* ------------------------------------ *\
|
||||
Badge
|
||||
\* ------------------------------------ */
|
||||
.fr-badge {
|
||||
--text-spacing: 0;
|
||||
--title-spacing: 0;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
|
||||
--underline-img: none;
|
||||
--hover-tint: var(--hover);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
overflow: initial;
|
||||
max-height: none;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
text-transform: uppercase;
|
||||
border-radius: 0.25rem;
|
||||
color: var(--text-default-grey);
|
||||
background-color: var(--background-contrast-grey);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-grey-hover);
|
||||
--active: var(--background-contrast-grey-active);
|
||||
}
|
||||
|
||||
.fr-badge::before,
|
||||
.fr-badge::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fr-badge--icon-left[class^=fr-icon-],
|
||||
.fr-badge--icon-left[class*=" fr-icon-"],
|
||||
.fr-badge--icon-left[class^=fr-fi-],
|
||||
.fr-badge--icon-left[class*=" fr-fi-"] {
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--icon-left[class^=fr-icon-]::before,
|
||||
.fr-badge--icon-left[class*=" fr-icon-"]::before,
|
||||
.fr-badge--icon-left[class^=fr-fi-]::before,
|
||||
.fr-badge--icon-left[class*=" fr-fi-"]::before {
|
||||
--icon-size: 1rem;
|
||||
margin-left: -0.125rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
min-height: 1.125rem;
|
||||
padding: 0 0.375rem;
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-],
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"],
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-],
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"] {
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"]::before {
|
||||
--icon-size: 0.75rem;
|
||||
margin-left: -0.09375rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge--sm[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badge::before {
|
||||
--icon-size: 1rem;
|
||||
margin-left: -0.125rem;
|
||||
margin-right: 0.25rem;
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
|
||||
background-color: currentColor;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
.fr-badge--sm::before {
|
||||
--icon-size: 0.75rem;
|
||||
margin-left: -0.09375rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--info::before,
|
||||
.fr-badge--sm.fr-badge--info::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--info-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--info-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--success::before,
|
||||
.fr-badge--sm.fr-badge--success::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--success-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--success-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--error::before,
|
||||
.fr-badge--sm.fr-badge--error::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--error-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--error-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--warning::before,
|
||||
.fr-badge--sm.fr-badge--warning::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--new::before,
|
||||
.fr-badge--sm.fr-badge--new::before {
|
||||
-webkit-mask-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
mask-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge--info::before,
|
||||
.fr-badge--success::before,
|
||||
.fr-badge--error::before,
|
||||
.fr-badge--warning::before,
|
||||
.fr-badge--new::before,
|
||||
.fr-badge--sm--info::before,
|
||||
.fr-badge--sm--success::before,
|
||||
.fr-badge--sm--error::before,
|
||||
.fr-badge--sm--warning::before,
|
||||
.fr-badge--sm--new::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--no-icon::before,
|
||||
.fr-badge--sm.fr-badge--no-icon::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badges-group {
|
||||
--ul-type: none;
|
||||
--ol-type: none;
|
||||
--ul-start: 0;
|
||||
--ol-start: 0;
|
||||
--xl-block: 0;
|
||||
--li-bottom: 0;
|
||||
--ol-content: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badges-group > li {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.fr-badges-group .fr-badge {
|
||||
margin: 0 0.25rem 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badges-group--sm .fr-badge {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
min-height: 1.125rem;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.fr-badges-group--sm .fr-badge::before,
|
||||
.fr-badges-group--sm .fr-badge::after {
|
||||
--icon-size: 0.75rem;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: var(--text-default-info);
|
||||
background-color: var(--background-contrast-info);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-info-hover);
|
||||
--active: var(--background-contrast-info-active);
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: var(--text-default-error);
|
||||
background-color: var(--background-contrast-error);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-error-hover);
|
||||
--active: var(--background-contrast-error-active);
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: var(--text-default-success);
|
||||
background-color: var(--background-contrast-success);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-success-hover);
|
||||
--active: var(--background-contrast-success-active);
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: var(--text-default-warning);
|
||||
background-color: var(--background-contrast-warning);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-warning-hover);
|
||||
--active: var(--background-contrast-warning-active);
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: var(--text-action-high-yellow-moutarde);
|
||||
background-color: var(--background-contrast-yellow-moutarde);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-moutarde-hover);
|
||||
--active: var(--background-contrast-yellow-moutarde-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: var(--text-label-green-tilleul-verveine);
|
||||
background-color: var(--background-contrast-green-tilleul-verveine);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-tilleul-verveine-hover);
|
||||
--active: var(--background-contrast-green-tilleul-verveine-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: var(--text-label-green-bourgeon);
|
||||
background-color: var(--background-contrast-green-bourgeon);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-bourgeon-hover);
|
||||
--active: var(--background-contrast-green-bourgeon-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: var(--text-label-green-emeraude);
|
||||
background-color: var(--background-contrast-green-emeraude);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-emeraude-hover);
|
||||
--active: var(--background-contrast-green-emeraude-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: var(--text-label-green-menthe);
|
||||
background-color: var(--background-contrast-green-menthe);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-menthe-hover);
|
||||
--active: var(--background-contrast-green-menthe-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: var(--text-label-green-archipel);
|
||||
background-color: var(--background-contrast-green-archipel);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-archipel-hover);
|
||||
--active: var(--background-contrast-green-archipel-active);
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: var(--text-label-blue-ecume);
|
||||
background-color: var(--background-contrast-blue-ecume);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-blue-ecume-hover);
|
||||
--active: var(--background-contrast-blue-ecume-active);
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: var(--text-label-blue-cumulus);
|
||||
background-color: var(--background-contrast-blue-cumulus);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-blue-cumulus-hover);
|
||||
--active: var(--background-contrast-blue-cumulus-active);
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: var(--text-label-purple-glycine);
|
||||
background-color: var(--background-contrast-purple-glycine);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-purple-glycine-hover);
|
||||
--active: var(--background-contrast-purple-glycine-active);
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: var(--text-label-pink-macaron);
|
||||
background-color: var(--background-contrast-pink-macaron);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-pink-macaron-hover);
|
||||
--active: var(--background-contrast-pink-macaron-active);
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: var(--text-label-pink-tuile);
|
||||
background-color: var(--background-contrast-pink-tuile);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-pink-tuile-hover);
|
||||
--active: var(--background-contrast-pink-tuile-active);
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: var(--text-label-yellow-tournesol);
|
||||
background-color: var(--background-contrast-yellow-tournesol);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-tournesol-hover);
|
||||
--active: var(--background-contrast-yellow-tournesol-active);
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: var(--text-label-yellow-moutarde);
|
||||
background-color: var(--background-contrast-yellow-moutarde);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-moutarde-hover);
|
||||
--active: var(--background-contrast-yellow-moutarde-active);
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: var(--text-label-orange-terre-battue);
|
||||
background-color: var(--background-contrast-orange-terre-battue);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-orange-terre-battue-hover);
|
||||
--active: var(--background-contrast-orange-terre-battue-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: var(--text-label-brown-cafe-creme);
|
||||
background-color: var(--background-contrast-brown-cafe-creme);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-cafe-creme-hover);
|
||||
--active: var(--background-contrast-brown-cafe-creme-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: var(--text-label-brown-caramel);
|
||||
background-color: var(--background-contrast-brown-caramel);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-caramel-hover);
|
||||
--active: var(--background-contrast-brown-caramel-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: var(--text-label-brown-opera);
|
||||
background-color: var(--background-contrast-brown-opera);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-opera-hover);
|
||||
--active: var(--background-contrast-brown-opera-active);
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: var(--text-label-beige-gris-galet);
|
||||
background-color: var(--background-contrast-beige-gris-galet);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-beige-gris-galet-hover);
|
||||
--active: var(--background-contrast-beige-gris-galet-active);
|
||||
}
|
||||
|
||||
.fr-badge-group {
|
||||
--ul-type: none;
|
||||
--ol-type: none;
|
||||
--ul-start: 0;
|
||||
--ol-start: 0;
|
||||
--xl-block: 0;
|
||||
--li-bottom: 0;
|
||||
--ol-content: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badge-group > li {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.fr-badge-group .fr-badge {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@media (min-width: 36em) {
|
||||
/*! media sm */
|
||||
|
||||
/*! media sm */
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
/*! media md */
|
||||
|
||||
/*! media md */
|
||||
}
|
||||
@media (min-width: 62em) {
|
||||
/*! media lg */
|
||||
|
||||
/*! media lg */
|
||||
}
|
||||
@media (min-width: 78em) {
|
||||
/*! media xl */
|
||||
|
||||
/*! media xl */
|
||||
}
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.fr-badge::before,
|
||||
.fr-badge::after {
|
||||
background-color: transparent;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.fr-badge--sm::before {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--info::before,
|
||||
.fr-badge.fr-badge--info::after,
|
||||
.fr-badge--sm.fr-badge--info::before,
|
||||
.fr-badge--sm.fr-badge--info::after {
|
||||
background-image: url("../../icons/system/fr--info-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--success::before,
|
||||
.fr-badge.fr-badge--success::after,
|
||||
.fr-badge--sm.fr-badge--success::before,
|
||||
.fr-badge--sm.fr-badge--success::after {
|
||||
background-image: url("../../icons/system/fr--success-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--error::before,
|
||||
.fr-badge.fr-badge--error::after,
|
||||
.fr-badge--sm.fr-badge--error::before,
|
||||
.fr-badge--sm.fr-badge--error::after {
|
||||
background-image: url("../../icons/system/fr--error-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--warning::before,
|
||||
.fr-badge.fr-badge--warning::after,
|
||||
.fr-badge--sm.fr-badge--warning::before,
|
||||
.fr-badge--sm.fr-badge--warning::after {
|
||||
background-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--new::before,
|
||||
.fr-badge.fr-badge--new::after,
|
||||
.fr-badge--sm.fr-badge--new::before,
|
||||
.fr-badge--sm.fr-badge--new::after {
|
||||
background-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
}
|
||||
|
||||
ul.fr-badges-group {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ol.fr-badges-group {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.fr-badges-group,
|
||||
ol.fr-badges-group {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badge {
|
||||
color: #3a3a3a;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: #0063cb;
|
||||
background-color: #e8edff;
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: #ce0500;
|
||||
background-color: #ffe9e9;
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: #18753c;
|
||||
background-color: #b8fec9;
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: #b34000;
|
||||
background-color: #ffe9e6;
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: #66673d;
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: #447049;
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: #297254;
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: #37635f;
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: #006a6f;
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: #2f4077;
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: #3558a2;
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: #6e445a;
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: #8d533e;
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: #a94645;
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: #716043;
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: #755348;
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: #685c48;
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: #845d48;
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: #745b47;
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: #6a6156;
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
.fr-badge {
|
||||
color: #3a3a3a;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: #0063cb;
|
||||
background-color: #e8edff;
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: #ce0500;
|
||||
background-color: #ffe9e9;
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: #18753c;
|
||||
background-color: #b8fec9;
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: #b34000;
|
||||
background-color: #ffe9e6;
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: #66673d;
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: #447049;
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: #297254;
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: #37635f;
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: #006a6f;
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: #2f4077;
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: #3558a2;
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: #6e445a;
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: #8d533e;
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: #a94645;
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: #716043;
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: #755348;
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: #685c48;
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: #845d48;
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: #745b47;
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: #6a6156;
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/badge/badge.css.map
vendored
Normal file
1
home/dist/component/badge/badge.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
195
home/dist/component/badge/badge.legacy.css
vendored
Normal file
195
home/dist/component/badge/badge.legacy.css
vendored
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/
|
||||
@media (min-width: 36em) {
|
||||
/*! media sm */
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
/*! media md */
|
||||
}
|
||||
@media (min-width: 62em) {
|
||||
/*! media lg */
|
||||
}
|
||||
@media (min-width: 78em) {
|
||||
/*! media xl */
|
||||
}
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.fr-badge::before,
|
||||
.fr-badge::after {
|
||||
background-color: transparent;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.fr-badge--sm::before {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--info::before,
|
||||
.fr-badge.fr-badge--info::after,
|
||||
.fr-badge--sm.fr-badge--info::before,
|
||||
.fr-badge--sm.fr-badge--info::after {
|
||||
background-image: url("../../icons/system/fr--info-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--success::before,
|
||||
.fr-badge.fr-badge--success::after,
|
||||
.fr-badge--sm.fr-badge--success::before,
|
||||
.fr-badge--sm.fr-badge--success::after {
|
||||
background-image: url("../../icons/system/fr--success-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--error::before,
|
||||
.fr-badge.fr-badge--error::after,
|
||||
.fr-badge--sm.fr-badge--error::before,
|
||||
.fr-badge--sm.fr-badge--error::after {
|
||||
background-image: url("../../icons/system/fr--error-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--warning::before,
|
||||
.fr-badge.fr-badge--warning::after,
|
||||
.fr-badge--sm.fr-badge--warning::before,
|
||||
.fr-badge--sm.fr-badge--warning::after {
|
||||
background-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--new::before,
|
||||
.fr-badge.fr-badge--new::after,
|
||||
.fr-badge--sm.fr-badge--new::before,
|
||||
.fr-badge--sm.fr-badge--new::after {
|
||||
background-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
}
|
||||
|
||||
ul.fr-badges-group {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ol.fr-badges-group {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.fr-badges-group,
|
||||
ol.fr-badges-group {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badge {
|
||||
color: #3a3a3a;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: #0063cb;
|
||||
background-color: #e8edff;
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: #ce0500;
|
||||
background-color: #ffe9e9;
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: #18753c;
|
||||
background-color: #b8fec9;
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: #b34000;
|
||||
background-color: #ffe9e6;
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: #66673d;
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: #447049;
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: #297254;
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: #37635f;
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: #006a6f;
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: #2f4077;
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: #3558a2;
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: #6e445a;
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: #8d533e;
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: #a94645;
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: #716043;
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: #755348;
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: #685c48;
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: #845d48;
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: #745b47;
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: #6a6156;
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/badge/badge.legacy.css.map
vendored
Normal file
1
home/dist/component/badge/badge.legacy.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
7
home/dist/component/badge/badge.legacy.min.css
vendored
Normal file
7
home/dist/component/badge/badge.legacy.min.css
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/@media (min-width:36em){
|
||||
/*! media sm */}@media (min-width:48em){
|
||||
/*! media md */}@media (min-width:62em){
|
||||
/*! media lg */}@media (min-width:78em){
|
||||
/*! media xl */}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.fr-badge:after,.fr-badge:before{background-color:transparent;background-repeat:no-repeat;background-size:100%;height:1rem;width:1rem}.fr-badge--sm:before{height:.75rem;width:.75rem}.fr-badge--sm.fr-badge--info:after,.fr-badge--sm.fr-badge--info:before,.fr-badge.fr-badge--info:after,.fr-badge.fr-badge--info:before{background-image:url(../../icons/system/fr--info-fill.svg)}.fr-badge--sm.fr-badge--success:after,.fr-badge--sm.fr-badge--success:before,.fr-badge.fr-badge--success:after,.fr-badge.fr-badge--success:before{background-image:url(../../icons/system/fr--success-fill.svg)}.fr-badge--sm.fr-badge--error:after,.fr-badge--sm.fr-badge--error:before,.fr-badge.fr-badge--error:after,.fr-badge.fr-badge--error:before{background-image:url(../../icons/system/fr--error-fill.svg)}.fr-badge--sm.fr-badge--warning:after,.fr-badge--sm.fr-badge--warning:before,.fr-badge.fr-badge--warning:after,.fr-badge.fr-badge--warning:before{background-image:url(../../icons/system/fr--warning-fill.svg)}.fr-badge--sm.fr-badge--new:after,.fr-badge--sm.fr-badge--new:before,.fr-badge.fr-badge--new:after,.fr-badge.fr-badge--new:before{background-image:url(../../icons/weather/flashlight-fill.svg)}ol.fr-badges-group,ul.fr-badges-group{list-style-type:none}ol.fr-badges-group,ul.fr-badges-group{margin-bottom:0;margin-top:0;padding-left:0}.fr-badge{background-color:#eee;color:#3a3a3a}.fr-badge--info{background-color:#e8edff;color:#0063cb}.fr-badge--error{background-color:#ffe9e9;color:#ce0500}.fr-badge--success{background-color:#b8fec9;color:#18753c}.fr-badge--warning{background-color:#ffe9e6;color:#b34000}.fr-badge--new{background-color:#feebd0;color:#695240}.fr-badge--green-tilleul-verveine{background-color:#fceeac;color:#66673d}.fr-badge--green-bourgeon{background-color:#c9fcac;color:#447049}.fr-badge--green-emeraude{background-color:#c3fad5;color:#297254}.fr-badge--green-menthe{background-color:#bafaee;color:#37635f}.fr-badge--green-archipel{background-color:#c7f6fc;color:#006a6f}.fr-badge--blue-ecume{background-color:#e9edfe;color:#2f4077}.fr-badge--blue-cumulus{background-color:#e6eefe;color:#3558a2}.fr-badge--purple-glycine{background-color:#fee7fc;color:#6e445a}.fr-badge--pink-macaron{background-color:#fee9e6;color:#8d533e}.fr-badge--pink-tuile{background-color:#fee9e7;color:#a94645}.fr-badge--yellow-tournesol{background-color:#feecc2;color:#716043}.fr-badge--yellow-moutarde{background-color:#feebd0;color:#695240}.fr-badge--orange-terre-battue{background-color:#fee9e5;color:#755348}.fr-badge--brown-cafe-creme{background-color:#f7ecdb;color:#685c48}.fr-badge--brown-caramel{background-color:#f7ebe5;color:#845d48}.fr-badge--brown-opera{background-color:#f7ece4;color:#745b47}.fr-badge--beige-gris-galet{background-color:#f3ede5;color:#6a6156}}
|
||||
1
home/dist/component/badge/badge.legacy.min.css.map
vendored
Normal file
1
home/dist/component/badge/badge.legacy.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
436
home/dist/component/badge/badge.main.css
vendored
Normal file
436
home/dist/component/badge/badge.main.css
vendored
Normal file
|
|
@ -0,0 +1,436 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/
|
||||
/* ------------------------------------ *\
|
||||
Badge
|
||||
\* ------------------------------------ */
|
||||
.fr-badge {
|
||||
--text-spacing: 0;
|
||||
--title-spacing: 0;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
|
||||
--underline-img: none;
|
||||
--hover-tint: var(--hover);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
overflow: initial;
|
||||
max-height: none;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
text-transform: uppercase;
|
||||
border-radius: 0.25rem;
|
||||
color: var(--text-default-grey);
|
||||
background-color: var(--background-contrast-grey);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-grey-hover);
|
||||
--active: var(--background-contrast-grey-active);
|
||||
}
|
||||
|
||||
.fr-badge::before,
|
||||
.fr-badge::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fr-badge--icon-left[class^=fr-icon-],
|
||||
.fr-badge--icon-left[class*=" fr-icon-"],
|
||||
.fr-badge--icon-left[class^=fr-fi-],
|
||||
.fr-badge--icon-left[class*=" fr-fi-"] {
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--icon-left[class^=fr-icon-]::before,
|
||||
.fr-badge--icon-left[class*=" fr-icon-"]::before,
|
||||
.fr-badge--icon-left[class^=fr-fi-]::before,
|
||||
.fr-badge--icon-left[class*=" fr-fi-"]::before {
|
||||
--icon-size: 1rem;
|
||||
margin-left: -0.125rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
min-height: 1.125rem;
|
||||
padding: 0 0.375rem;
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-],
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"],
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-],
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"] {
|
||||
overflow: initial;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-icon-]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-icon-"]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class^=fr-fi-]::before,
|
||||
.fr-badge--sm.fr-badge--icon-left[class*=" fr-fi-"]::before {
|
||||
--icon-size: 0.75rem;
|
||||
margin-left: -0.09375rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge--sm[class^=fr-icon-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class*=" fr-icon-"]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class^=fr-fi-]:not([class*=fr-badge--icon-])::before,
|
||||
.fr-badge--sm[class*=" fr-fi-"]:not([class*=fr-badge--icon-])::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badge::before {
|
||||
--icon-size: 1rem;
|
||||
margin-left: -0.125rem;
|
||||
margin-right: 0.25rem;
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
|
||||
background-color: currentColor;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
.fr-badge--sm::before {
|
||||
--icon-size: 0.75rem;
|
||||
margin-left: -0.09375rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--info::before,
|
||||
.fr-badge--sm.fr-badge--info::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--info-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--info-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--success::before,
|
||||
.fr-badge--sm.fr-badge--success::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--success-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--success-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--error::before,
|
||||
.fr-badge--sm.fr-badge--error::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--error-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--error-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--warning::before,
|
||||
.fr-badge--sm.fr-badge--warning::before {
|
||||
-webkit-mask-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
mask-image: url("../../icons/system/fr--warning-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--new::before,
|
||||
.fr-badge--sm.fr-badge--new::before {
|
||||
-webkit-mask-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
mask-image: url("../../icons/weather/flashlight-fill.svg");
|
||||
}
|
||||
|
||||
.fr-badge--info::before,
|
||||
.fr-badge--success::before,
|
||||
.fr-badge--error::before,
|
||||
.fr-badge--warning::before,
|
||||
.fr-badge--new::before,
|
||||
.fr-badge--sm--info::before,
|
||||
.fr-badge--sm--success::before,
|
||||
.fr-badge--sm--error::before,
|
||||
.fr-badge--sm--warning::before,
|
||||
.fr-badge--sm--new::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.fr-badge.fr-badge--no-icon::before,
|
||||
.fr-badge--sm.fr-badge--no-icon::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.fr-badges-group {
|
||||
--ul-type: none;
|
||||
--ol-type: none;
|
||||
--ul-start: 0;
|
||||
--ol-start: 0;
|
||||
--xl-block: 0;
|
||||
--li-bottom: 0;
|
||||
--ol-content: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badges-group > li {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.fr-badges-group .fr-badge {
|
||||
margin: 0 0.25rem 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
.fr-badges-group--sm .fr-badge {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
min-height: 1.125rem;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.fr-badges-group--sm .fr-badge::before,
|
||||
.fr-badges-group--sm .fr-badge::after {
|
||||
--icon-size: 0.75rem;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: var(--text-default-info);
|
||||
background-color: var(--background-contrast-info);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-info-hover);
|
||||
--active: var(--background-contrast-info-active);
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: var(--text-default-error);
|
||||
background-color: var(--background-contrast-error);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-error-hover);
|
||||
--active: var(--background-contrast-error-active);
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: var(--text-default-success);
|
||||
background-color: var(--background-contrast-success);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-success-hover);
|
||||
--active: var(--background-contrast-success-active);
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: var(--text-default-warning);
|
||||
background-color: var(--background-contrast-warning);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-warning-hover);
|
||||
--active: var(--background-contrast-warning-active);
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: var(--text-action-high-yellow-moutarde);
|
||||
background-color: var(--background-contrast-yellow-moutarde);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-moutarde-hover);
|
||||
--active: var(--background-contrast-yellow-moutarde-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: var(--text-label-green-tilleul-verveine);
|
||||
background-color: var(--background-contrast-green-tilleul-verveine);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-tilleul-verveine-hover);
|
||||
--active: var(--background-contrast-green-tilleul-verveine-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: var(--text-label-green-bourgeon);
|
||||
background-color: var(--background-contrast-green-bourgeon);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-bourgeon-hover);
|
||||
--active: var(--background-contrast-green-bourgeon-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: var(--text-label-green-emeraude);
|
||||
background-color: var(--background-contrast-green-emeraude);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-emeraude-hover);
|
||||
--active: var(--background-contrast-green-emeraude-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: var(--text-label-green-menthe);
|
||||
background-color: var(--background-contrast-green-menthe);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-menthe-hover);
|
||||
--active: var(--background-contrast-green-menthe-active);
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: var(--text-label-green-archipel);
|
||||
background-color: var(--background-contrast-green-archipel);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-green-archipel-hover);
|
||||
--active: var(--background-contrast-green-archipel-active);
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: var(--text-label-blue-ecume);
|
||||
background-color: var(--background-contrast-blue-ecume);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-blue-ecume-hover);
|
||||
--active: var(--background-contrast-blue-ecume-active);
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: var(--text-label-blue-cumulus);
|
||||
background-color: var(--background-contrast-blue-cumulus);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-blue-cumulus-hover);
|
||||
--active: var(--background-contrast-blue-cumulus-active);
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: var(--text-label-purple-glycine);
|
||||
background-color: var(--background-contrast-purple-glycine);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-purple-glycine-hover);
|
||||
--active: var(--background-contrast-purple-glycine-active);
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: var(--text-label-pink-macaron);
|
||||
background-color: var(--background-contrast-pink-macaron);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-pink-macaron-hover);
|
||||
--active: var(--background-contrast-pink-macaron-active);
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: var(--text-label-pink-tuile);
|
||||
background-color: var(--background-contrast-pink-tuile);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-pink-tuile-hover);
|
||||
--active: var(--background-contrast-pink-tuile-active);
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: var(--text-label-yellow-tournesol);
|
||||
background-color: var(--background-contrast-yellow-tournesol);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-tournesol-hover);
|
||||
--active: var(--background-contrast-yellow-tournesol-active);
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: var(--text-label-yellow-moutarde);
|
||||
background-color: var(--background-contrast-yellow-moutarde);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-yellow-moutarde-hover);
|
||||
--active: var(--background-contrast-yellow-moutarde-active);
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: var(--text-label-orange-terre-battue);
|
||||
background-color: var(--background-contrast-orange-terre-battue);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-orange-terre-battue-hover);
|
||||
--active: var(--background-contrast-orange-terre-battue-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: var(--text-label-brown-cafe-creme);
|
||||
background-color: var(--background-contrast-brown-cafe-creme);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-cafe-creme-hover);
|
||||
--active: var(--background-contrast-brown-cafe-creme-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: var(--text-label-brown-caramel);
|
||||
background-color: var(--background-contrast-brown-caramel);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-caramel-hover);
|
||||
--active: var(--background-contrast-brown-caramel-active);
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: var(--text-label-brown-opera);
|
||||
background-color: var(--background-contrast-brown-opera);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-brown-opera-hover);
|
||||
--active: var(--background-contrast-brown-opera-active);
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: var(--text-label-beige-gris-galet);
|
||||
background-color: var(--background-contrast-beige-gris-galet);
|
||||
|
||||
--idle: transparent;
|
||||
--hover: var(--background-contrast-beige-gris-galet-hover);
|
||||
--active: var(--background-contrast-beige-gris-galet-active);
|
||||
}
|
||||
|
||||
.fr-badge-group {
|
||||
--ul-type: none;
|
||||
--ol-type: none;
|
||||
--ul-start: 0;
|
||||
--ol-start: 0;
|
||||
--xl-block: 0;
|
||||
--li-bottom: 0;
|
||||
--ol-content: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fr-badge-group > li {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.fr-badge-group .fr-badge {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@media (min-width: 36em) {
|
||||
/*! media sm */
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
/*! media md */
|
||||
}
|
||||
@media (min-width: 62em) {
|
||||
/*! media lg */
|
||||
}
|
||||
@media (min-width: 78em) {
|
||||
/*! media xl */
|
||||
}
|
||||
1
home/dist/component/badge/badge.main.css.map
vendored
Normal file
1
home/dist/component/badge/badge.main.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
7
home/dist/component/badge/badge.main.min.css
vendored
Normal file
7
home/dist/component/badge/badge.main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
home/dist/component/badge/badge.main.min.css.map
vendored
Normal file
1
home/dist/component/badge/badge.main.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
11
home/dist/component/badge/badge.min.css
vendored
Normal file
11
home/dist/component/badge/badge.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
home/dist/component/badge/badge.min.css.map
vendored
Normal file
1
home/dist/component/badge/badge.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
119
home/dist/component/badge/badge.print.css
vendored
Normal file
119
home/dist/component/badge/badge.print.css
vendored
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/
|
||||
@media print {
|
||||
.fr-badge {
|
||||
color: #3a3a3a;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fr-badge--info {
|
||||
color: #0063cb;
|
||||
background-color: #e8edff;
|
||||
}
|
||||
|
||||
.fr-badge--error {
|
||||
color: #ce0500;
|
||||
background-color: #ffe9e9;
|
||||
}
|
||||
|
||||
.fr-badge--success {
|
||||
color: #18753c;
|
||||
background-color: #b8fec9;
|
||||
}
|
||||
|
||||
.fr-badge--warning {
|
||||
color: #b34000;
|
||||
background-color: #ffe9e6;
|
||||
}
|
||||
|
||||
.fr-badge--new {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--green-tilleul-verveine {
|
||||
color: #66673d;
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-badge--green-bourgeon {
|
||||
color: #447049;
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-badge--green-emeraude {
|
||||
color: #297254;
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-badge--green-menthe {
|
||||
color: #37635f;
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-badge--green-archipel {
|
||||
color: #006a6f;
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-badge--blue-ecume {
|
||||
color: #2f4077;
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-badge--blue-cumulus {
|
||||
color: #3558a2;
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-badge--purple-glycine {
|
||||
color: #6e445a;
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-badge--pink-macaron {
|
||||
color: #8d533e;
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-badge--pink-tuile {
|
||||
color: #a94645;
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-tournesol {
|
||||
color: #716043;
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-badge--yellow-moutarde {
|
||||
color: #695240;
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-badge--orange-terre-battue {
|
||||
color: #755348;
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-cafe-creme {
|
||||
color: #685c48;
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-badge--brown-caramel {
|
||||
color: #845d48;
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-badge--brown-opera {
|
||||
color: #745b47;
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-badge--beige-gris-galet {
|
||||
color: #6a6156;
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/badge/badge.print.css.map
vendored
Normal file
1
home/dist/component/badge/badge.print.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
3
home/dist/component/badge/badge.print.min.css
vendored
Normal file
3
home/dist/component/badge/badge.print.min.css
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/@media print{.fr-badge{background-color:#eee;color:#3a3a3a}.fr-badge--info{background-color:#e8edff;color:#0063cb}.fr-badge--error{background-color:#ffe9e9;color:#ce0500}.fr-badge--success{background-color:#b8fec9;color:#18753c}.fr-badge--warning{background-color:#ffe9e6;color:#b34000}.fr-badge--new{background-color:#feebd0;color:#695240}.fr-badge--green-tilleul-verveine{background-color:#fceeac;color:#66673d}.fr-badge--green-bourgeon{background-color:#c9fcac;color:#447049}.fr-badge--green-emeraude{background-color:#c3fad5;color:#297254}.fr-badge--green-menthe{background-color:#bafaee;color:#37635f}.fr-badge--green-archipel{background-color:#c7f6fc;color:#006a6f}.fr-badge--blue-ecume{background-color:#e9edfe;color:#2f4077}.fr-badge--blue-cumulus{background-color:#e6eefe;color:#3558a2}.fr-badge--purple-glycine{background-color:#fee7fc;color:#6e445a}.fr-badge--pink-macaron{background-color:#fee9e6;color:#8d533e}.fr-badge--pink-tuile{background-color:#fee9e7;color:#a94645}.fr-badge--yellow-tournesol{background-color:#feecc2;color:#716043}.fr-badge--yellow-moutarde{background-color:#feebd0;color:#695240}.fr-badge--orange-terre-battue{background-color:#fee9e5;color:#755348}.fr-badge--brown-cafe-creme{background-color:#f7ecdb;color:#685c48}.fr-badge--brown-caramel{background-color:#f7ebe5;color:#845d48}.fr-badge--brown-opera{background-color:#f7ece4;color:#745b47}.fr-badge--beige-gris-galet{background-color:#f3ede5;color:#6a6156}}
|
||||
1
home/dist/component/badge/badge.print.min.css.map
vendored
Normal file
1
home/dist/component/badge/badge.print.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue