Produits Entr'ouvert » Intégrations graphiques Publik

Peut-être utile, grosboule-les-bains/extra.js (qui se combine avec le $form-style: light qui a un effet de style similaire)

Côté couleur je trouve ça un peu fort.
Je verrais mieux un rose plus clair pour le fond
Je te propose de récupérer la couleur de fond et de bordure du message d'alerte (permettrait d'uniformiser).

Il manque la couleur sur les listes checkbox/radio.

Thomas Jund a écrit :

Je te propose de récupérer la couleur de fond et de bordure du message d'alerte (permettrait d'uniformiser).

Ok, je vais prendre $notification_error_color pour le fond et pour la bordure assombrir celle-ci de 25%

Il manque la couleur sur les listes checkbox/radio.

Comme ce sont des widgets natifs faits par le navigo, la bordure ne s'y applique pas. Je suis preneur de tes conseils.

Ça en devient compliqué je trouve. Tu redessines les checkboxs et les radios.
et puis ça ne rend pas la solution compatible avec les champs custom comme template_meeting oui template_evaluation.

J'ai tourné un peu ce problème et je proposerais de cibler plutôt '.content' pour afficher un code couleur d'erreur. Ça englobe le message d'alerte du champ et conserve l'input. Je trouve ça beaucoup plus intéressant, autant d'un point de vue code qu'affichage.

Je pense que ça correspondra aux attentes d'Orléans et c'est même envisageable de l'adapter pour le core. En y ajoutant par exemple une modification de message de champ (champ obligatoire -> champ modifié).

Dis moi ce que tu penses de

CSS :

.widget {
    .content {
        display: inline-block;
        padding: .33em 0;
        transition: padding 200ms;

        &.with-padding {
            padding: .33em;
        }
    }

    &.widget-with-error .content {
        background-color: $notification_error_color;
    }
}

ET JS

$(function() {
  var $widgets_with_error = $('.widget-with-error');

  if ($widgets_with_error.length) {
    $widgets_with_error
      .find('.content').addClass('with-padding')
      .on('change', 'input, select, textarea', function() {
        $widgets_with_error.removeClass('widget-with-error');
      });
  }
});

J'viens de me rendre compte que

.widget {
    .content {
        display: inline-block;
    }
}

peut fait déborder les champs. Il faut ajouter Un `max-width: 100%` en plus.

Du coup tu as 2 propriétés `transition` la seconde écrasant la première.
La première ne sert donc plus à rien. Si tu souhaites conserver la transition sur le padding aussi tu dois les combiner

transition: padding 0.3s, background 0.3s linear;

(Mais pour moi c'est pas nécessaire)