final
This commit is contained in:
parent
36bd9d3e21
commit
0dd1cd7a1c
2042 changed files with 383171 additions and 73 deletions
home/dist/component/callout
README.mdcallout.csscallout.css.mapcallout.legacy.csscallout.legacy.css.mapcallout.legacy.min.csscallout.legacy.min.css.mapcallout.main.csscallout.main.css.mapcallout.main.min.csscallout.main.min.css.mapcallout.min.csscallout.min.css.mapcallout.print.csscallout.print.css.mapcallout.print.min.csscallout.print.min.css.map
28
home/dist/component/callout/README.md
vendored
Normal file
28
home/dist/component/callout/README.md
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
# callout
|
||||
|
||||
La mise en avant permet à l’utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté.
|
||||
|
||||
## Dépendances
|
||||
```shell
|
||||
callout
|
||||
└─ core
|
||||
└─ button
|
||||
```
|
||||
|
||||
## Utilisation
|
||||
Afin d’utiliser le composant `callout`, 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/button/button.min.css" rel="stylesheet">
|
||||
<link href="css/callout/callout.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Consulter [la documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant) sur le module Mise en avant
|
||||
461
home/dist/component/callout/callout.css
vendored
Normal file
461
home/dist/component/callout/callout.css
vendored
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
/*!
|
||||
* 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 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 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) {
|
||||
/**
|
||||
* Marge des titres et textes
|
||||
*/
|
||||
.fr-callout__title {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout__text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fr-callout {
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(0deg, #6a6af4, #6a6af4);
|
||||
}
|
||||
|
||||
.fr-callout::before {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout--green-tilleul-verveine {
|
||||
background-image: linear-gradient(0deg, #b7a73f, #b7a73f);
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-callout--green-bourgeon {
|
||||
background-image: linear-gradient(0deg, #68a532, #68a532);
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-callout--green-emeraude {
|
||||
background-image: linear-gradient(0deg, #00a95f, #00a95f);
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-callout--green-menthe {
|
||||
background-image: linear-gradient(0deg, #009081, #009081);
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-callout--green-archipel {
|
||||
background-image: linear-gradient(0deg, #009099, #009099);
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-callout--blue-ecume {
|
||||
background-image: linear-gradient(0deg, #465f9d, #465f9d);
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-callout--blue-cumulus {
|
||||
background-image: linear-gradient(0deg, #417dc4, #417dc4);
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-callout--purple-glycine {
|
||||
background-image: linear-gradient(0deg, #a558a0, #a558a0);
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-callout--pink-macaron {
|
||||
background-image: linear-gradient(0deg, #e18b76, #e18b76);
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-callout--pink-tuile {
|
||||
background-image: linear-gradient(0deg, #ce614a, #ce614a);
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-tournesol {
|
||||
background-image: linear-gradient(0deg, #c8aa39, #c8aa39);
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-moutarde {
|
||||
background-image: linear-gradient(0deg, #c3992a, #c3992a);
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-callout--orange-terre-battue {
|
||||
background-image: linear-gradient(0deg, #e4794a, #e4794a);
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-cafe-creme {
|
||||
background-image: linear-gradient(0deg, #d1b781, #d1b781);
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-callout--brown-caramel {
|
||||
background-image: linear-gradient(0deg, #c08c65, #c08c65);
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-opera {
|
||||
background-image: linear-gradient(0deg, #bd987a, #bd987a);
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-callout--beige-gris-galet {
|
||||
background-image: linear-gradient(0deg, #aea397, #aea397);
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.fr-callout {
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(0deg, #6a6af4, #6a6af4);
|
||||
}
|
||||
|
||||
.fr-callout::before {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout__title {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout--green-tilleul-verveine {
|
||||
background-image: linear-gradient(0deg, #b7a73f, #b7a73f);
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-callout--green-bourgeon {
|
||||
background-image: linear-gradient(0deg, #68a532, #68a532);
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-callout--green-emeraude {
|
||||
background-image: linear-gradient(0deg, #00a95f, #00a95f);
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-callout--green-menthe {
|
||||
background-image: linear-gradient(0deg, #009081, #009081);
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-callout--green-archipel {
|
||||
background-image: linear-gradient(0deg, #009099, #009099);
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-callout--blue-ecume {
|
||||
background-image: linear-gradient(0deg, #465f9d, #465f9d);
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-callout--blue-cumulus {
|
||||
background-image: linear-gradient(0deg, #417dc4, #417dc4);
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-callout--purple-glycine {
|
||||
background-image: linear-gradient(0deg, #a558a0, #a558a0);
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-callout--pink-macaron {
|
||||
background-image: linear-gradient(0deg, #e18b76, #e18b76);
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-callout--pink-tuile {
|
||||
background-image: linear-gradient(0deg, #ce614a, #ce614a);
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-tournesol {
|
||||
background-image: linear-gradient(0deg, #c8aa39, #c8aa39);
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-moutarde {
|
||||
background-image: linear-gradient(0deg, #c3992a, #c3992a);
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-callout--orange-terre-battue {
|
||||
background-image: linear-gradient(0deg, #e4794a, #e4794a);
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-cafe-creme {
|
||||
background-image: linear-gradient(0deg, #d1b781, #d1b781);
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-callout--brown-caramel {
|
||||
background-image: linear-gradient(0deg, #c08c65, #c08c65);
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-opera {
|
||||
background-image: linear-gradient(0deg, #bd987a, #bd987a);
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-callout--beige-gris-galet {
|
||||
background-image: linear-gradient(0deg, #aea397, #aea397);
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/callout/callout.css.map
vendored
Normal file
1
home/dist/component/callout/callout.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
122
home/dist/component/callout/callout.legacy.css
vendored
Normal file
122
home/dist/component/callout/callout.legacy.css
vendored
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/*!
|
||||
* 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) {
|
||||
/**
|
||||
* Marge des titres et textes
|
||||
*/
|
||||
.fr-callout__title {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout__text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fr-callout {
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(0deg, #6a6af4, #6a6af4);
|
||||
}
|
||||
|
||||
.fr-callout::before {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout--green-tilleul-verveine {
|
||||
background-image: linear-gradient(0deg, #b7a73f, #b7a73f);
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-callout--green-bourgeon {
|
||||
background-image: linear-gradient(0deg, #68a532, #68a532);
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-callout--green-emeraude {
|
||||
background-image: linear-gradient(0deg, #00a95f, #00a95f);
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-callout--green-menthe {
|
||||
background-image: linear-gradient(0deg, #009081, #009081);
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-callout--green-archipel {
|
||||
background-image: linear-gradient(0deg, #009099, #009099);
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-callout--blue-ecume {
|
||||
background-image: linear-gradient(0deg, #465f9d, #465f9d);
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-callout--blue-cumulus {
|
||||
background-image: linear-gradient(0deg, #417dc4, #417dc4);
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-callout--purple-glycine {
|
||||
background-image: linear-gradient(0deg, #a558a0, #a558a0);
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-callout--pink-macaron {
|
||||
background-image: linear-gradient(0deg, #e18b76, #e18b76);
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-callout--pink-tuile {
|
||||
background-image: linear-gradient(0deg, #ce614a, #ce614a);
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-tournesol {
|
||||
background-image: linear-gradient(0deg, #c8aa39, #c8aa39);
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-moutarde {
|
||||
background-image: linear-gradient(0deg, #c3992a, #c3992a);
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-callout--orange-terre-battue {
|
||||
background-image: linear-gradient(0deg, #e4794a, #e4794a);
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-cafe-creme {
|
||||
background-image: linear-gradient(0deg, #d1b781, #d1b781);
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-callout--brown-caramel {
|
||||
background-image: linear-gradient(0deg, #c08c65, #c08c65);
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-opera {
|
||||
background-image: linear-gradient(0deg, #bd987a, #bd987a);
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-callout--beige-gris-galet {
|
||||
background-image: linear-gradient(0deg, #aea397, #aea397);
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/callout/callout.legacy.css.map
vendored
Normal file
1
home/dist/component/callout/callout.legacy.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
7
home/dist/component/callout/callout.legacy.min.css
vendored
Normal file
7
home/dist/component/callout/callout.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-callout__title{color:#161616;margin:0 0 .5rem}.fr-callout__text{margin:0}.fr-callout{background-color:#eee;background-image:linear-gradient(0deg,#6a6af4,#6a6af4)}.fr-callout:before{color:#161616}.fr-callout--green-tilleul-verveine{background-color:#fceeac;background-image:linear-gradient(0deg,#b7a73f,#b7a73f)}.fr-callout--green-bourgeon{background-color:#c9fcac;background-image:linear-gradient(0deg,#68a532,#68a532)}.fr-callout--green-emeraude{background-color:#c3fad5;background-image:linear-gradient(0deg,#00a95f,#00a95f)}.fr-callout--green-menthe{background-color:#bafaee;background-image:linear-gradient(0deg,#009081,#009081)}.fr-callout--green-archipel{background-color:#c7f6fc;background-image:linear-gradient(0deg,#009099,#009099)}.fr-callout--blue-ecume{background-color:#e9edfe;background-image:linear-gradient(0deg,#465f9d,#465f9d)}.fr-callout--blue-cumulus{background-color:#e6eefe;background-image:linear-gradient(0deg,#417dc4,#417dc4)}.fr-callout--purple-glycine{background-color:#fee7fc;background-image:linear-gradient(0deg,#a558a0,#a558a0)}.fr-callout--pink-macaron{background-color:#fee9e6;background-image:linear-gradient(0deg,#e18b76,#e18b76)}.fr-callout--pink-tuile{background-color:#fee9e7;background-image:linear-gradient(0deg,#ce614a,#ce614a)}.fr-callout--yellow-tournesol{background-color:#feecc2;background-image:linear-gradient(0deg,#c8aa39,#c8aa39)}.fr-callout--yellow-moutarde{background-color:#feebd0;background-image:linear-gradient(0deg,#c3992a,#c3992a)}.fr-callout--orange-terre-battue{background-color:#fee9e5;background-image:linear-gradient(0deg,#e4794a,#e4794a)}.fr-callout--brown-cafe-creme{background-color:#f7ecdb;background-image:linear-gradient(0deg,#d1b781,#d1b781)}.fr-callout--brown-caramel{background-color:#f7ebe5;background-image:linear-gradient(0deg,#c08c65,#c08c65)}.fr-callout--brown-opera{background-color:#f7ece4;background-image:linear-gradient(0deg,#bd987a,#bd987a)}.fr-callout--beige-gris-galet{background-color:#f3ede5;background-image:linear-gradient(0deg,#aea397,#aea397)}}
|
||||
1
home/dist/component/callout/callout.legacy.min.css.map
vendored
Normal file
1
home/dist/component/callout/callout.legacy.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
245
home/dist/component/callout/callout.main.css
vendored
Normal file
245
home/dist/component/callout/callout.main.css
vendored
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
/*!
|
||||
* 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 */
|
||||
}
|
||||
1
home/dist/component/callout/callout.main.css.map
vendored
Normal file
1
home/dist/component/callout/callout.main.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
7
home/dist/component/callout/callout.main.min.css
vendored
Normal file
7
home/dist/component/callout/callout.main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
home/dist/component/callout/callout.main.min.css.map
vendored
Normal file
1
home/dist/component/callout/callout.main.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
11
home/dist/component/callout/callout.min.css
vendored
Normal file
11
home/dist/component/callout/callout.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
home/dist/component/callout/callout.min.css.map
vendored
Normal file
1
home/dist/component/callout/callout.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
102
home/dist/component/callout/callout.print.css
vendored
Normal file
102
home/dist/component/callout/callout.print.css
vendored
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/*!
|
||||
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
||||
*/
|
||||
@media print {
|
||||
.fr-callout {
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(0deg, #6a6af4, #6a6af4);
|
||||
}
|
||||
|
||||
.fr-callout::before {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout__title {
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.fr-callout--green-tilleul-verveine {
|
||||
background-image: linear-gradient(0deg, #b7a73f, #b7a73f);
|
||||
background-color: #fceeac;
|
||||
}
|
||||
|
||||
.fr-callout--green-bourgeon {
|
||||
background-image: linear-gradient(0deg, #68a532, #68a532);
|
||||
background-color: #c9fcac;
|
||||
}
|
||||
|
||||
.fr-callout--green-emeraude {
|
||||
background-image: linear-gradient(0deg, #00a95f, #00a95f);
|
||||
background-color: #c3fad5;
|
||||
}
|
||||
|
||||
.fr-callout--green-menthe {
|
||||
background-image: linear-gradient(0deg, #009081, #009081);
|
||||
background-color: #bafaee;
|
||||
}
|
||||
|
||||
.fr-callout--green-archipel {
|
||||
background-image: linear-gradient(0deg, #009099, #009099);
|
||||
background-color: #c7f6fc;
|
||||
}
|
||||
|
||||
.fr-callout--blue-ecume {
|
||||
background-image: linear-gradient(0deg, #465f9d, #465f9d);
|
||||
background-color: #e9edfe;
|
||||
}
|
||||
|
||||
.fr-callout--blue-cumulus {
|
||||
background-image: linear-gradient(0deg, #417dc4, #417dc4);
|
||||
background-color: #e6eefe;
|
||||
}
|
||||
|
||||
.fr-callout--purple-glycine {
|
||||
background-image: linear-gradient(0deg, #a558a0, #a558a0);
|
||||
background-color: #fee7fc;
|
||||
}
|
||||
|
||||
.fr-callout--pink-macaron {
|
||||
background-image: linear-gradient(0deg, #e18b76, #e18b76);
|
||||
background-color: #fee9e6;
|
||||
}
|
||||
|
||||
.fr-callout--pink-tuile {
|
||||
background-image: linear-gradient(0deg, #ce614a, #ce614a);
|
||||
background-color: #fee9e7;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-tournesol {
|
||||
background-image: linear-gradient(0deg, #c8aa39, #c8aa39);
|
||||
background-color: #feecc2;
|
||||
}
|
||||
|
||||
.fr-callout--yellow-moutarde {
|
||||
background-image: linear-gradient(0deg, #c3992a, #c3992a);
|
||||
background-color: #feebd0;
|
||||
}
|
||||
|
||||
.fr-callout--orange-terre-battue {
|
||||
background-image: linear-gradient(0deg, #e4794a, #e4794a);
|
||||
background-color: #fee9e5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-cafe-creme {
|
||||
background-image: linear-gradient(0deg, #d1b781, #d1b781);
|
||||
background-color: #f7ecdb;
|
||||
}
|
||||
|
||||
.fr-callout--brown-caramel {
|
||||
background-image: linear-gradient(0deg, #c08c65, #c08c65);
|
||||
background-color: #f7ebe5;
|
||||
}
|
||||
|
||||
.fr-callout--brown-opera {
|
||||
background-image: linear-gradient(0deg, #bd987a, #bd987a);
|
||||
background-color: #f7ece4;
|
||||
}
|
||||
|
||||
.fr-callout--beige-gris-galet {
|
||||
background-image: linear-gradient(0deg, #aea397, #aea397);
|
||||
background-color: #f3ede5;
|
||||
}
|
||||
}
|
||||
1
home/dist/component/callout/callout.print.css.map
vendored
Normal file
1
home/dist/component/callout/callout.print.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
3
home/dist/component/callout/callout.print.min.css
vendored
Normal file
3
home/dist/component/callout/callout.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-callout{background-color:#eee;background-image:linear-gradient(0deg,#6a6af4,#6a6af4)}.fr-callout:before,.fr-callout__title{color:#161616}.fr-callout--green-tilleul-verveine{background-color:#fceeac;background-image:linear-gradient(0deg,#b7a73f,#b7a73f)}.fr-callout--green-bourgeon{background-color:#c9fcac;background-image:linear-gradient(0deg,#68a532,#68a532)}.fr-callout--green-emeraude{background-color:#c3fad5;background-image:linear-gradient(0deg,#00a95f,#00a95f)}.fr-callout--green-menthe{background-color:#bafaee;background-image:linear-gradient(0deg,#009081,#009081)}.fr-callout--green-archipel{background-color:#c7f6fc;background-image:linear-gradient(0deg,#009099,#009099)}.fr-callout--blue-ecume{background-color:#e9edfe;background-image:linear-gradient(0deg,#465f9d,#465f9d)}.fr-callout--blue-cumulus{background-color:#e6eefe;background-image:linear-gradient(0deg,#417dc4,#417dc4)}.fr-callout--purple-glycine{background-color:#fee7fc;background-image:linear-gradient(0deg,#a558a0,#a558a0)}.fr-callout--pink-macaron{background-color:#fee9e6;background-image:linear-gradient(0deg,#e18b76,#e18b76)}.fr-callout--pink-tuile{background-color:#fee9e7;background-image:linear-gradient(0deg,#ce614a,#ce614a)}.fr-callout--yellow-tournesol{background-color:#feecc2;background-image:linear-gradient(0deg,#c8aa39,#c8aa39)}.fr-callout--yellow-moutarde{background-color:#feebd0;background-image:linear-gradient(0deg,#c3992a,#c3992a)}.fr-callout--orange-terre-battue{background-color:#fee9e5;background-image:linear-gradient(0deg,#e4794a,#e4794a)}.fr-callout--brown-cafe-creme{background-color:#f7ecdb;background-image:linear-gradient(0deg,#d1b781,#d1b781)}.fr-callout--brown-caramel{background-color:#f7ebe5;background-image:linear-gradient(0deg,#c08c65,#c08c65)}.fr-callout--brown-opera{background-color:#f7ece4;background-image:linear-gradient(0deg,#bd987a,#bd987a)}.fr-callout--beige-gris-galet{background-color:#f3ede5;background-image:linear-gradient(0deg,#aea397,#aea397)}}
|
||||
1
home/dist/component/callout/callout.print.min.css.map
vendored
Normal file
1
home/dist/component/callout/callout.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