/* Bouton declencheur */
.mdi-drilldown-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--mdi-color-primary, #ff6600);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 1em;
font-family: var(--mdi-font-family, inherit);
}
.mdi-drilldown-trigger:hover {
opacity: 0.9;
}
.mdi-drilldown-trigger-icon {
width: 1.2em;
height: 1.2em;
object-fit: contain;
flex-shrink: 0;
}
/* Overlay plein ecran (backdrop + tiroir) */
.mdi-drilldown-overlay {
position: fixed;
inset: 0;
z-index: 9999;
visibility: hidden;
pointer-events: none;
}
.mdi-drilldown-overlay--open {
visibility: visible;
pointer-events: auto;
}
.mdi-drilldown-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.3s ease;
}
.mdi-drilldown-overlay--open .mdi-drilldown-backdrop {
opacity: 1;
}
/* Le tiroir lui-meme, glisse depuis la gauche */
.mdi-drilldown {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--mdi-window-size, 35%);
background: var(--mdi-bg-color, #fff);
overflow: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 6px 0 16px rgba(0, 0, 0, 0.15);
font-size: var(--mdi-font-size, 16px);
font-family: var(--mdi-font-family, inherit);
}
@media (max-width: 991px) {
.mdi-drilldown {
width: 90%;
}
}
.mdi-drilldown-overlay--open .mdi-drilldown {
transform: translateX(0);
}
/* Panneaux empiles a l'interieur du tiroir (un par niveau) */
.mdi-drilldown-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--mdi-bg-color, #fff);
transform: translateX(100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
}
.mdi-drilldown-panel--active {
transform: translateX(0);
}
.mdi-drilldown-panel--exit {
transform: translateX(-100%);
}
.mdi-drilldown-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: var(--mdi-panel-padding, 16px);
border-bottom: 1px solid var(--mdi-item-border-color, #eee);
font-weight: bold;
color: var(--mdi-color-secondary, #222);
background: var(--mdi-header-bg-color, #fff);
flex-shrink: 0;
}
.mdi-drilldown-header-icon {
width: 1.4em;
height: 1.4em;
object-fit: contain;
flex-shrink: 0;
}
.mdi-drilldown-panel-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mdi-drilldown-close {
background: none;
border: none;
font-size: 1.6em;
line-height: 1;
cursor: pointer;
color: var(--mdi-color-secondary, #222);
padding: 0 4px;
}
.mdi-drilldown-list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1;
}
.mdi-drilldown-item {
display: flex;
align-items: center;
gap: var(--mdi-item-gap, 12px);
padding: var(--mdi-item-padding-v, 14px) var(--mdi-item-padding-h, 16px);
border-bottom: 1px solid var(--mdi-item-border-color, #eee);
cursor: pointer;
color: var(--mdi-color-secondary, #222) !important;
text-decoration: none;
transition: background 0.15s ease;
}
.mdi-drilldown-item:hover {
background: var(--mdi-hover-color, rgba(0, 0, 0, 0.03));
color: var(--mdi-color-secondary, #222) !important;
}
/* Ligne "Voir toute la categorie" : ajoutee en premier item de chaque panneau ou l'on
vient de drill-down, puisque le titre de l'en-tete n'est plus cliquable (cliquer sur
une categorie parente ouvre desormais toujours ses sous-categories, voir drilldown.js). */
.mdi-drilldown-item--view-all {
font-weight: bold;
border-bottom: 2px solid var(--mdi-item-border-color, #eee);
}
.mdi-drilldown-icon {
width: var(--mdi-icon-size, 28px);
height: var(--mdi-icon-size, 28px);
object-fit: contain;
flex-shrink: 0;
}
/* Icone PAR DEFAUT uniquement (jamais une vraie photo/icone importee) : au lieu d'une
![]()
classique, un dont l'image sert de masque -- ca permet de la recolorer
avec n'importe quelle couleur CSS, meme si le fichier source est un PNG plat. */
.mdi-drilldown-icon--default {
display: inline-block;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
background-color: var(--mdi-default-icon-color, #ff6600);
}
.mdi-drilldown-arrow {
margin-left: auto;
color: var(--mdi-arrow-color, var(--mdi-color-primary, #ff6600));
font-style: normal;
font-size: var(--mdi-arrow-size, 1.2em);
transition: font-size 0.25s ease;
display: inline-flex;
align-items: center;
}
.mdi-drilldown-back {
background: none;
border: none;
font-size: var(--mdi-arrow-size, 1.2em);
cursor: pointer;
color: var(--mdi-arrow-color, var(--mdi-color-primary, #ff6600));
padding: 0 4px;
flex-shrink: 0;
}
/* Animation au survol (facultative, activee via case a cocher en admin) :
l'icone fait un quart de tour, icone + texte glissent legerement a droite.
La rotation (transform) et le glissement (margin-left) sont sur deux
proprietes CSS distinctes expres, pour ne pas se combiner/interferer. */
.mdi-drilldown--hover-fx .mdi-drilldown-icon {
transition: transform 0.25s ease, margin-left 0.25s ease;
}
.mdi-drilldown--hover-fx .mdi-drilldown-item span {
transition: transform 0.25s ease;
}
.mdi-drilldown--hover-fx .mdi-drilldown-item:hover .mdi-drilldown-icon {
transform: rotate(45deg);
margin-left: 4px;
}
.mdi-drilldown--hover-fx .mdi-drilldown-item:hover span {
transform: translateX(4px);
}
.mdi-drilldown--hover-fx .mdi-drilldown-item:hover .mdi-drilldown-arrow {
font-size: calc(var(--mdi-arrow-size, 1.2em) * 1.2);
}