246 lines
7.8 KiB
CSS
246 lines
7.8 KiB
CSS
|
/*!
|
||
|
|
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||
|
|
*/
|
||
|
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
/* ¯¯¯¯¯¯¯¯¯ *\
|
||
|
|
CALLOUT
|
||
|
|
\* ˍˍˍˍˍˍˍˍˍ */
|
||
|
|
.fr-callout {
|
||
|
|
position: relative;
|
||
|
|
padding: 1.5rem;
|
||
|
|
|
||
|
|
--title-spacing: 0 0 0.5rem;
|
||
|
|
--text-spacing: 0;
|
||
|
|
margin: 0 0 1.5rem;
|
||
|
|
background-size: 0.25rem 100%;
|
||
|
|
background-position: 0 0;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Inclusion de l'icône (optionnel)
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Ajout de marge quand on inclut un bouton (optionnel)
|
||
|
|
*/
|
||
|
|
background-color: var(--background-contrast-grey);
|
||
|
|
|
||
|
|
--idle: transparent;
|
||
|
|
--hover: var(--background-contrast-grey-hover);
|
||
|
|
--active: var(--background-contrast-grey-active);
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-blue-france), var(--border-default-blue-france));
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout[class^=fr-icon-]::before,
|
||
|
|
.fr-callout[class*=" fr-icon-"]::before,
|
||
|
|
.fr-callout[class^=fr-fi-]::before,
|
||
|
|
.fr-callout[class*=" fr-fi-"]::before {
|
||
|
|
display: block;
|
||
|
|
margin: -0.5rem 0 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout__title {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.375rem;
|
||
|
|
line-height: 1.75rem;
|
||
|
|
color: var(--text-title-grey);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout__text {
|
||
|
|
font-size: 1.125rem;
|
||
|
|
line-height: 1.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout .fr-btn {
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout::before {
|
||
|
|
color: var(--text-title-grey);
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout--green-tilleul-verveine {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-green-tilleul-verveine), var(--border-default-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-callout--green-bourgeon {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-green-bourgeon), var(--border-default-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-callout--green-emeraude {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-green-emeraude), var(--border-default-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-callout--green-menthe {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-green-menthe), var(--border-default-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-callout--green-archipel {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-green-archipel), var(--border-default-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-callout--blue-ecume {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-blue-ecume), var(--border-default-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-callout--blue-cumulus {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-blue-cumulus), var(--border-default-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-callout--purple-glycine {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-purple-glycine), var(--border-default-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-callout--pink-macaron {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-pink-macaron), var(--border-default-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-callout--pink-tuile {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-pink-tuile), var(--border-default-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-callout--yellow-tournesol {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-yellow-tournesol), var(--border-default-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-callout--yellow-moutarde {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-yellow-moutarde), var(--border-default-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-callout--orange-terre-battue {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-orange-terre-battue), var(--border-default-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-callout--brown-cafe-creme {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-brown-cafe-creme), var(--border-default-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-callout--brown-caramel {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-brown-caramel), var(--border-default-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-callout--brown-opera {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-brown-opera), var(--border-default-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-callout--beige-gris-galet {
|
||
|
|
background-image: linear-gradient(0deg, var(--border-default-beige-gris-galet), var(--border-default-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);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 36em) {
|
||
|
|
/*! media sm */
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 48em) {
|
||
|
|
/*! media md */
|
||
|
|
.fr-callout {
|
||
|
|
padding: 2rem 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout[class^=fr-icon-]::before,
|
||
|
|
.fr-callout[class*=" fr-icon-"]::before,
|
||
|
|
.fr-callout[class^=fr-fi-]::before,
|
||
|
|
.fr-callout[class*=" fr-fi-"]::before {
|
||
|
|
margin: -1rem 0 1rem -2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-callout__title {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
line-height: 2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 62em) {
|
||
|
|
/*! media lg */
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 78em) {
|
||
|
|
/*! media xl */
|
||
|
|
}
|