Cette page détaille les principales modifications apportées à JdB.CSS.
Accèder à l'installation.jdb-input-all. Avant, le style de bordure était défini avec !important, ce qui empêchait de le modifier avec d'autres classes. Maintenant, la mention !important a été retirée et vous pouvez désormais modifier le style de bordure avec les classes .jdb-border-* ou autres./* Applique une bordure rouge pointillée à l'input */ <input class="jdb-input-all jdb-border-red jdb-border-dashed"/>
img ayant l'attribut width dans le parent .jdb-container. Jusque-là toutes les images à l'intérieur de l'élément .jdb-container sont mises par défaut à 100% de largeur et à une hauteur automatique (proportionnelle à la largeur). Désormais, si une image a un attribut width, elle ne sera pas redimensionnée.<div class="jdb-container"> <!-- Celle-ci ne sera pas redimensionné --> <img src="image.jpg" width="100px"/> <!-- Celle-ci sera redimensionné --> <img src="image.jpg"/> </div>
jdb-text-balance qui permet de répartir le texte sur plusieurs lignes de façon équilibrée. En savoir plus.jdb-text-pretty qui fait la même chose que jdb-text-balance, mais avec un rendu plus "joli" en évitant les mots orphélins seuls sur leurs ligne. En savoir plus.h1 à h6), les classes de titre (.h1 à .h6) et les citations (blockquote) bénéficient déjà de cet équilibre de jdb-text-balance sur le texte.p) utilisent désormais la propriété text-wrap: pretty pour un meilleur rendu, une encapsulation de texte plus "jolie".video ont désormais une hauteur automatique et une largeur limitée à 100%.!important sur la classe jdb-btn-block.pointer-event pour la classe jdb-nocursor est désormais conservé à l'état initial.jdb-margin-0 et jdb-margin-none ne s'imposent plus (!important). Utilisez désormais jdb-margin-0-f pour forcer la suppression de la marge.jdb-clamp-([2-4]) introduits à la version 1.1.0 n'étaient pas fonctionnelles jusqu'ici. Elles sont corrigées. jdb-clamp ne fait plus rien tout seul, et doit être accompagnée de l2 (pour "2 lignes"), l3, l4, l5 ou l6 pour fonctionner.jdb-margin-position se forcent maintenant avec la propriété !important.jdb-monospace a une police (Courier) en plus de "Courier new".!important sur les classes jdb-opacity-*.jdb-input-all a maintenant un style de focus à l'état :focus.radio (jdb-radio) et checkbox (jdb-check) afin de permettre une meilleure aération entre ces éléments et leur label (jdb-label), s'il y en a. Voilà un exemple de deux cas concernés :<!-- Même niveau --> <input class="jdb-check"/> <label class="jdb-label">Je confirme...</label> <!-- Imbriqués --> <label class="jdb-label"> <input class="jdb-check"/> Je confirme... </label>
jdb-accordion-hover sans jdb-accordion :<!-- Avant (obligé d'avoir les deux) --> <div class="jdb-accordion jdb-accordion-hover"> ... </div> <!-- Après (un seul suffit) --> <div class="jdb-accordion-hover"> ... </div>
jdb-dropdown peut désormais imbriquer d'autres jdb-dropdown.input de type couleur ([type=color]) portant la classe jdb-input peut désormais bénéficier d'un style particulier JdB.CSS.jdb-dropdown) dans la barre latérale (jdb-sidenav).jdb-sans-serif qui met une série de polices sans empattement (serif) basiques.jdb-word-wrap qui force le retour à la ligne du texte lorsque c'est nécessaire.jdb-border-transparent qui rend (force) la couleur de la bordure transparente.jdb-hover-border-transparent qui rend (par force) la couleur de la bordure transparente au survol.jdb-hide-empty qui masque les éléments n'ayant pas de contenu (enfants).jdb-blur, jdb-blur-min et jdb-blur-max qui appliquent un flou à l'élément à différente intensité. La nouvelle classe jdb-hover-blur-off permet de retirer cet effet de flou au survol.jdb-resizable, jdb-resizable-x et jdb-resizable-y qui permettent de redimensionner l'élément à la souris.jdb-flex(-*) pour le flex et jdb-order-* pour le flex et le grid (à venir). En savoir plus.jdb-separator, jdb-separator-x et jdb-separator-y pour créer un séparateur entre les blocs (en savoir plus).:focus aux éléments select (ayant la classe jdb-select), input (ayant la classe jdb-radio ou jdb-check), et textarea (ayant la classe jdb-input). Remarque : Les éléments textarea qui n'ont pas de classe de focus JdB.CSS ne sont plus concernés par cet effet.Ajout de l'ombre portée au pour la classe jdb-hover-card-4.
!important aux classes jdb-focusable-0 et jdb-focusable-none afin de forcer la suppression de l'effet de :focus.jdb-codespan est passé de 110% à 105%.jdb-tight, l'opposé de jdb-wide permet de retirer un peu d'espace entre les lettres.jdb-align-top, jdb-align-middle et jdb-align-bottom permettent d'aligner verticalement le contenu d'une cellule de tableau.jdb-border-w0, jdb-border-w1, jdb-border-w2, jdb-border-w3, jdb-border-w4 et jdb-border-w5.jdb-border-dotted, jdb-border-dashed et jdb-border-solidjdb-label-required : Pour ajouter une astérisque rouge aux labels jdb-label des champs obligatoires des formulaires.required.jdb-bordered-items : Pour mettre une bordure aux éléments jdb-bar-item contenus dans jdb-bar.jdb-btn-link donne un style de lien hypertexte aux boutons.jdb-ripple, jdb-label-required et jdb-bordered-items.jdb-hover-card-2:hover et jdb-hover-card-4:hover