Guide de référence UI — composants partagés entre pages publiques et back-office.
scentree-design-system.css ingredient.css user_account.css Bootstrap 5.3.2 Public Sans + Funnel Display
| Fichier CSS | Contenu | Chargé sur |
|---|---|---|
| scentree-design-system.css | Variables :root, déclarations de polices, classes typographiques, et tous les composants .scentree-*. Tronc commun de toute l'UI. |
Toutes les pages |
| ingredient.css | Styles propres aux pages publiques : layout carte, header public, animations, composants sans équivalent back-office. | Pages publiques |
| user_account.css | Styles propres au back-office : dashboard, sidebar, upload, tableaux de données. | Back-office |
var(--variable) — jamais de valeur hex inline..button + modificateur obligatoire — jamais de style inline.scentree-design-system.css ET documenter ici..alert .alert-danger / warning / success / info — couleurs surchargées dans scentree-design-system.css..scentree-tab-content.active — contenu visible quand l'onglet est actif.
.scentree-tab-content — caché par défaut, affiché par le JS au clic.
.scentree-tab-content — troisième panneau.
| Ingrédient | Famille | Statut | Actions |
|---|---|---|---|
| Linalol | Terpène | Actif | |
| Citronellol | Alcool | Bêta | |
| Géraniol | Alcool | Inactif |
| Catégorie | Limite (%) | Note |
|---|---|---|
| Fine fragrance | 0.5 | IFRA 49th |
| Ingrédient | CAS | Famille | Sauv. |
|---|---|---|---|
| Terpène | |||
| Alcool |
| Ingrédient | Famille | Statut |
|---|---|---|
| Linalol | Terpène | Actif |
| Citronellol | Alcool | Actif |
| Géraniol | Alcool | Inactif |
| Ambrette | Macrolide | Bêta |
| Hédione | Ester | Actif |
| Iso E Super | Sesquiterpène | Actif |
| Partenaire | FR | DE | US | JP | UK |
|---|---|---|---|---|---|
| Givaudan | 5 |
4 |
5 |
3 |
4 |
| Firmenich | 4 |
5 |
3 |
2 |
3 |
| IFF | 2 |
1 |
5 |
1 |
2 |
Titre de section
Contenu de la carte — texte explicatif, données, ou composants enfants.
Titre de section
Contenu de la carte — texte explicatif, données, ou composants enfants.
Déposer vos fichiers ici, ou parcourir
PDF uniquement, jusqu'à 20 Mo par fichier, 20 fichiers max.
Audiences
Ingrédients
Partenaires
Aucun résultat
Aucun élément ne correspond à votre recherche. Essayez avec un autre terme ou réinitialisez les filtres.
Erreur de chargement
Impossible de récupérer les données. Vérifiez votre connexion et réessayez.
Première étape — fondation du projet et définition des objectifs initiaux. Le mb-0 sur le paragraphe est obligatoire pour que le JS de centrage de la bulle fonctionne correctement.
La bulle .scentree-timeline-img se positionne via la variable CSS --content-center injectée par JS — elle se centre verticalement avec la carte, quelle que soit la hauteur du contenu.
Le dernier .scentree-timeline-bloc doit toujours porter .pb-0 pour stopper la ligne verticale proprement au niveau du dernier point.
Contenu du dialog — texte, formulaire, ou tout autre composant. Le body est scrollable si le contenu dépasse la hauteur max.
Confirmation rapide, alerte critique, saisie courte.
.scentree-modal--sm
Formulaire complexe, sélection d'ingrédients, prévisualisation de données.
.scentree-modal--lg
① SHELL base.html — NE PAS RÉPLIQUER
header position:fixed
a#logo
.searchBar → search_bar.html
button.openMenu → active nav#main-menu.rightMenu
nav#main-menu.rightMenu slide-in/out, JS dans general.js
main#content.container-fluid
② BLOCK {% block ingredient_template %}
.scentree-page-wrapper.d-flex
.scentree-page-card
.scentree-header-ingredient
.scentree-header-body
.scentree-block-title border-color = couleur ingrédient (inline ok)
.scentree-img-ingredient-mobile ← visible < 1080px
.scentree-header-top
h1 Nom ingrédient
p.textorange-dark Filiation taxonomique
.d-flex Boutons carte (buttonIcon buttonIconSecondary)
.scentree-img-ingredient.col-2 ← visible ≥ 1080px
③ INCLUDE _partners_block.html entre header et body
.scentree-page-body.d-flex.align-items-start
aside.scentree-side-nav
ul.labelsmall
li > a[href="#general"] toujours présent
li > a[href="#physical"] toujours présent
li > a[href="#botanics"] natural seulement
li > a[href="#utilisation"] natural seulement
li > a[href="#chemistry"] synthetic seulement
li > a[href="#legal"] toujours présent
.flex-fill.mt-4
section#general
.scentree-section-header
.d-flex > .scentree-data-list (×2)
section#physical
.scentree-section-header
.d-flex > .scentree-data-list
section#botanics natural seulement
.scentree-section-header
.row.col-12 > .scentree-info-block (×2)
.scentree-info-block
section#chemistry synthetic seulement
.scentree-section-header
.scentree-info-block (×8)
section#utilisation natural seulement
.scentree-section-header
.scentree-info-block (×3)
.d-flex > .scentree-info-block + .scentree-img-ingredient.scentree-img-map
.scentree-info-block
section#legal toujours présent
.scentree-section-header
.scentree-info-block allergens
③ INCLUDE _CLP_block.html dans section#legal
③ INCLUDE _IFRA_block.html dans section#legal
① SHELL back_office_base.html extends base.html — NE PAS RÉPLIQUER
[base.html] header (logo, .openMenu — searchbar vidé)
[back_office_base.html] {% block back_office_menu %}
.back-office-wrapper
.col-2.sidebar-dashboard position:fixed
nav.sidebar-nav
ul > li > a.navdashboard 7 entrées (Accueil → My Account)
.sidebar-footer
a.logout-link
main#content.container-fluid
② BLOCK {% block content %}
.col-12.pagebackoffice
.user-accounts-header
.flex-fill
span.user-accounts-breadcrumb > a
[boutons d'action optionnels]
.user-accounts-title
h1
.user-accounts-content
[composants DS au choix : tabs, cards, tables, forms…]
③ INCLUDES variables selon la page