Valider 77a3ce6f rédigé par tcharlss's avatar tcharlss Validation de marcimat
Parcourir les fichiers

Ticket #4468 : refacto des boutons de l'espace privé

Unifier styles des icônes (classe .icone), boutons d'actions et boutons de validation des formulaires. Même police, graisse et couleurs pour tous. Portage des classes .add, .del, .edit et.config qui ajoutent des icônes aux boutons d'actions, ainsi que de .link, .right et .left. Ajout également de nouvelles classes modificatrices à toute fin utile : .secondary, .block, et .boutons_groupe. Testé en ltr et rtl.

* Un peu de rangement : on déplace tout ce qui concerne les boutons dans boutons.css (c'était auparavant réparti entre theme.css et forms.css).
* De même pour icons.css : on y déplace toutes les règles en rapport qui étaient dans theme.css
* On introduit une nouvelle classe générique .bouton pour afficher n'importe quel élément comme un bouton, à priori surtout pour des liens (pierrox et nicod_).
* On mutualise le plus possible les règles entre les liens boutons, les boutons de formulaire et les boutons d'action.
* Refacto complète du composant .icone : on passe aussi en flexbox comme les boutons, on répare ce qui était cassé (la variante .right notamment).
* La combinaison bouton d'action + classe .icone est dépréciée, on continue de la supporter mais elle est maintenant inutile.
* Ajout de quelques animations au survol et au focus. On essaie de pas faire trop bling, à voir à l'usage.
* Recadrage des icônes génériques add.svg et cie afin de pouvoir les réutiliser plus facilement. Ajout de quelques variantes svg manquantes.
* On passe l'image de fond en svg aussi tant qu'à faire.
parent 5725d586
Chargement en cours
Chargement en cours
Chargement en cours
Chargement en cours
+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><g fill-opacity=".66"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z"/></g></svg>
 No newline at end of file
+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z" fill-opacity=".08"/></svg>
 No newline at end of file
+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0z" fill-opacity=".145"/><path d="M4.233 0H2.117L0 2.117v2.116z" fill="#eb6114" fill-opacity=".149"/><path d="M0 0h2.117L0 2.117z" fill-opacity=".145"/><path d="M4.233 4.233H2.117l2.116-2.116z" fill="#eb6114" fill-opacity=".149"/></svg>
 No newline at end of file
+2 −2
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -78,7 +78,7 @@
				<ul class="rapides creer">
					<BOUCLE_creer(DATA)
						{source tableau, #GET{boutons}}
						{cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="bouton"><a
						{cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="rapides__item"><a
						href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
						title="[(#VALEUR{libelle}|_T|attribut_html)]"
						class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]
@@ -90,7 +90,7 @@
					<ul class="rapides collaborer">
					<BOUCLE_collaborer(DATA)
						{source tableau, #GET{boutons}}
						{cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="bouton"><a
						{cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="rapides__item"><a
							href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
							title="[(#VALEUR{libelle}|_T|attribut_html)]"
							class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]</BOUCLE_collaborersous></BOUCLE_collaborer>
+5 −5
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -96,11 +96,11 @@

#bando_outils ul.creer {float:#ENV{left};}
#bando_outils ul.collaborer {float:#ENV{left};margin-#ENV{right}:20px;}
#bando_outils ul.rapides li.bouton{ float:#ENV{left}; }
#bando_outils ul.rapides li.bouton a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
#bando_outils ul.rapides li.bouton a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
#bando_outils ul.rapides li.bouton a:hover, #bando_outils ul.rapides li.bouton a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
#bando_outils ul.rapides li.bouton{ margin-top:0px;}
#bando_outils ul.rapides li.rapides__item{ float:#ENV{left}; }
#bando_outils ul.rapides li.rapides__item a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
#bando_outils ul.rapides li.rapides__item a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
#bando_outils ul.rapides li.rapides__item a:hover, #bando_outils ul.rapides li.rapides__item a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
#bando_outils ul.rapides li.rapides__item{ margin-top:0px;}

#bando_outils #rapides {float:#ENV{right};}
#bando_outils #rapides .formulaire_recherche {margin:3px 0;clear:none;}
Chargement en cours