436 lines
12 KiB
CSS
436 lines
12 KiB
CSS
/*!
|
|
* 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 */
|
|
}
|