TP_JO2024/home/dist/component/badge/badge.css

741 lines
17 KiB
CSS
Raw Normal View History

2024-03-27 17:19:37 +01:00
/*!
* 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;
}
}