/** * Pro HD — Pastille et bulle des declinaisons (`prohddeclinaisons`) * * AUCUNE COULEUR N'EST ECRITE EN DUR : tout passe par les var(--prohddecl-*) * que le module pose dans l'en-tete a partir du back-office. Les valeurs de * repli servent si le module est decroche ou si l'en-tete est absent. * * LES CLASSES SONT NEUVES, exprès. Sur ce site la feuille principale est * chargee par un place dans le , donc APRES cette feuille-ci. * Reutiliser une classe du theme obligerait a gagner une bataille de * specificite a chaque reglage. Avec des classes que personne d'autre * n'emploie, il n'y a aucune concurrence et pas un seul !important. * * LA BULLE NE POUSSE PAS LA CARTE : elle est en position absolue. Sinon * l'ouverture d'une bulle changerait la hauteur de sa carte et decalerait * toute la ligne de la grille. */ .prohddecl { position: relative; display: inline-block; max-width: 100%; } /* ---- La pastille ---- */ .prohddecl__pastille { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px 2px 0; border: 0; background: none; font: inherit; font-size: 0.78rem; line-height: 1.25; color: var(--prohddecl-encre, #22303F); text-align: left; cursor: pointer; } .prohddecl__texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dotted var(--prohddecl-accent, #DF1576); } .prohddecl__pastille:hover .prohddecl__texte, .prohddecl__pastille:focus-visible .prohddecl__texte { border-bottom-style: solid; } /* Le chevron dit que ca s'ouvre. Sans lui, une pastille ressemble a une etiquette passive et personne ne clique — c'est ce qui distingue notre pastille du lien explicite de Rexel. */ .prohddecl__chevron { flex: 0 0 auto; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid var(--prohddecl-accent, #DF1576); transition: transform 0.15s ease; } .prohddecl.-ouverte .prohddecl__chevron { transform: rotate(180deg); } /* ---- La bulle ---- */ .prohddecl__bulle { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; width: 232px; max-width: 78vw; padding: 10px 12px 12px; border: 1px solid rgba(34, 48, 63, 0.14); border-radius: 6px; background: var(--prohddecl-fond, #FFFFFF); box-shadow: 0 6px 18px rgba(34, 48, 63, 0.16); color: var(--prohddecl-encre, #22303F); font-size: 0.8rem; line-height: 1.4; text-align: left; } .prohddecl__bulle[hidden] { display: none; } /* La fleche qui designe la pastille, comme chez Rexel : sans elle, on ne sait pas de quelle carte la bulle parle quand deux sont proches. */ .prohddecl__bulle::before { content: ""; position: absolute; top: -6px; left: 14px; width: 10px; height: 10px; transform: rotate(45deg); border-top: 1px solid rgba(34, 48, 63, 0.14); border-left: 1px solid rgba(34, 48, 63, 0.14); background: var(--prohddecl-fond, #FFFFFF); } .prohddecl__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .prohddecl__titre { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--prohddecl-accent, #DF1576); } .prohddecl__fermer { flex: 0 0 auto; margin: -4px -4px 0 0; padding: 0 4px; border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--prohddecl-encre, #22303F); opacity: 0.55; cursor: pointer; } .prohddecl__fermer:hover { opacity: 1; } .prohddecl__phrase { margin: 4px 0 0; font-size: 0.74rem; opacity: 0.75; } .prohddecl__liste { margin: 8px 0 0; padding: 0; list-style: none; max-height: 208px; overflow-y: auto; } .prohddecl__valeur { padding: 4px 0; border-top: 1px solid rgba(34, 48, 63, 0.09); } .prohddecl__valeur:first-child { border-top: 0; } .prohddecl__reste { margin: 6px 0 0; font-size: 0.74rem; opacity: 0.7; } /* Pres du bord droit, la bulle s'ancre a droite : sinon elle deborde de la derniere colonne de la grille. La classe est posee par le script, qui seul connait la place disponible. */ .prohddecl__bulle.-aDroite { left: auto; right: 0; } .prohddecl__bulle.-aDroite::before { left: auto; right: 14px; } @media (max-width: 575px) { .prohddecl__bulle { width: 208px; } .prohddecl__pastille { font-size: 0.74rem; } }