Skip to content
Extraits de code Groupes Projets
Valider eca11247 rédigé par tcharlss's avatar tcharlss
Parcourir les fichiers

Ajustements des boutons du privé : 

* Limiter un peu la hauteur des icônes pour ne pas « écraser » le texte adjacent
* Ajout d'une variante de taille plus petite : .s12
* Correction boutons .link dans un groupe de boutons
* Correction du survol des boutons .link (pas de changement d'icône)
* Pouvoir mettre la classe .bouton sur un .editbox
parent 78d09529
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
prive/themes/spip/boutons.css.html
+ 54
− 20
Voir le fichier @ eca11247
...@@ -32,24 +32,34 @@ ...@@ -32,24 +32,34 @@
[(#REM) Tailles et valeurs associées ] [(#REM) Tailles et valeurs associées ]
#SET{paddings, #ARRAY{ #SET{paddings, #ARRAY{
12, #LISTE{0.25em, 0.75em},
16, #LISTE{0.5em, 1.25em}, 16, #LISTE{0.5em, 1.25em},
24, #LISTE{0.5em, 1.25em}, 24, #LISTE{0.5em, 1.25em},
32, #LISTE{0.5em, 1.25em}, 32, #LISTE{0.5em, 1.25em},
}} }}
#SET{margins, #ARRAY{
12, 0.25em,
16, 0.25em,
24, 0.25em,
32, 0.25em,
}}
#SET{font-sizes, #ARRAY{ #SET{font-sizes, #ARRAY{
12, 0.75em,
16, 0.85em, 16, 0.85em,
24, 1em, 24, 0.85em,
32, 1.15em, 32, 1em,
}} }}
#SET{heights, #ARRAY{ #SET{heights, #ARRAY{
12, calc\(\(#GET{paddings/12/0} * 2\) + 12px + 2px\),
16, calc\(\(#GET{paddings/16/0} * 2\) + 16px + 2px\), 16, calc\(\(#GET{paddings/16/0} * 2\) + 16px + 2px\),
24, calc\(\(#GET{paddings/24/0} * 2\) + 24px + 2px\), 24, calc\(\(#GET{paddings/24/0} * 2\) + 24px + 2px\),
32, calc\(\(#GET{paddings/32/0} * 2\) + 32px + 2px\), 32, calc\(\(#GET{paddings/32/0} * 2\) + 32px + 2px\),
}} }}
#SET{tailles, #ARRAY{ #SET{tailles, #ARRAY{
16, #ARRAY{font-size, #GET{font-sizes/16}, height, #GET{heights/16}, padding, #GET{paddings/16}}, 12, #ARRAY{font-size, #GET{font-sizes/12}, height, #GET{heights/12}, padding, #GET{paddings/12}, margin, #GET{margins/12}},
24, #ARRAY{font-size, #GET{font-sizes/24}, height, #GET{heights/24}, padding, #GET{paddings/24}}, 16, #ARRAY{font-size, #GET{font-sizes/16}, height, #GET{heights/16}, padding, #GET{paddings/16}, margin, #GET{margins/16}},
32, #ARRAY{font-size, #GET{font-sizes/32}, height, #GET{heights/32}, padding, #GET{paddings/32}}, 24, #ARRAY{font-size, #GET{font-sizes/24}, height, #GET{heights/24}, padding, #GET{paddings/24}, margin, #GET{margins/24}},
32, #ARRAY{font-size, #GET{font-sizes/32}, height, #GET{heights/32}, padding, #GET{paddings/32}, margin, #GET{margins/32}},
}} }}
/** /**
...@@ -65,7 +75,7 @@ ...@@ -65,7 +75,7 @@
.formulaire_spip button { .formulaire_spip button {
border-radius: 0.33em; border-radius: 0.33em;
text-decoration: none; text-decoration: none;
margin-bottom: 0.25em; margin-bottom: #GET{tailles/16/margin};
vertical-align: middle; vertical-align: middle;
} }
.bouton, .bouton,
...@@ -220,6 +230,16 @@ ...@@ -220,6 +230,16 @@
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.bouton.link:hover:before,
.bouton.link:focus:before,
.bouton_action_post.link .submit:hover:before,
.bouton_action_post.link .submit:focus:before,
.formulaire_spip input.submit.link:hover:before,
.formulaire_spip input.submit.link:focus:before,
.formulaire_spip button.link:hover:before,
.formulaire_spip button.link:focus:before {
filter: brightness(1.33);
}
/* Variante bloc : pleine largeur */ /* Variante bloc : pleine largeur */
.bouton.bloc, .bouton.bloc,
...@@ -309,7 +329,7 @@ ...@@ -309,7 +329,7 @@
.bouton_action_post.s#CLE .submit, .bouton_action_post.s#CLE .submit,
.formulaire_spip input.submit.s#CLE, .formulaire_spip input.submit.s#CLE,
.formulaire_spip button.s#CLE { .formulaire_spip button.s#CLE {
font-size: [(#VALEUR{fontsize})]; font-size: [(#VALEUR{font-size})];
min-height: [(#VALEUR{height})]; /* Pour hauteur identique avec ou sans icone */ min-height: [(#VALEUR{height})]; /* Pour hauteur identique avec ou sans icone */
padding: [(#VALEUR{padding}|implode{' '})]; padding: [(#VALEUR{padding}|implode{' '})];
} }
...@@ -329,7 +349,7 @@ ...@@ -329,7 +349,7 @@
width: auto; width: auto;
} }
.formulaire_spip input.submit.s#CLE { .formulaire_spip input.submit.s#CLE {
background-size: [(#CLE)]px; background-size: calc([(#CLE) ]* 0.8)px; /* Limiter un peu en hauteur pour ne pas « écraser » le texte adjacent */
padding-#ENV{left}: [(#VALEUR{padding/1})]; padding-#ENV{left}: [(#VALEUR{padding/1})];
} }
</BOUCLE_icones_tailles> </BOUCLE_icones_tailles>
...@@ -357,7 +377,7 @@ ...@@ -357,7 +377,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-#ENV{right}: 0.5em; margin-#ENV{right}: 0.5em;
background-size: 100%; background-size: auto 80%; /* Limiter un peu en hauteur pour ne pas « écraser » le texte adjacent */
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -366,7 +386,7 @@ ...@@ -366,7 +386,7 @@
</BOUCLE_icones_submit> </BOUCLE_icones_submit>
{ {
padding-#ENV{left}: calc(16px + 1.5em); /* Todo autres tailles */ padding-#ENV{left}: calc(16px + 1.5em); /* Todo autres tailles */
background-size: 16px 16px; background-size: auto calc(16px * 0.8); /* Limiter un peu en hauteur pour ne pas « écraser » le texte adjacent */
background-position: center left 1em; background-position: center left 1em;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -379,15 +399,15 @@ ...@@ -379,15 +399,15 @@
.formulaire_spip button.#VALEUR:before { .formulaire_spip button.#VALEUR:before {
background-image: url(#CHEMIN_IMAGE{#VALEUR-xx.svg}); background-image: url(#CHEMIN_IMAGE{#VALEUR-xx.svg});
} }
/* Au survol on met une variante mono de couleur claire */ /* Au survol on met une variante mono de couleur claire, sauf pour les .link */
.bouton.#VALEUR:hover:before, .bouton.#VALEUR:not(.link):hover:before,
.bouton.#VALEUR:focus:before, .bouton.#VALEUR:not(.link):focus:before,
.bouton_action_post.#VALEUR .submit:hover:before, .bouton_action_post.#VALEUR:not(.link) .submit:hover:before,
.bouton_action_post.#VALEUR .submit:focus:before, .bouton_action_post.#VALEUR:not(.link) .submit:focus:before,
.formulaire_spip input.submit.#VALEUR:hover, .formulaire_spip input.submit.#VALEUR:not(.link):hover,
.formulaire_spip input.submit.#VALEUR:focus, .formulaire_spip input.submit.#VALEUR:not(.link):focus,
.formulaire_spip button.#VALEUR:hover:before, .formulaire_spip button.#VALEUR:not(.link):hover:before,
.formulaire_spip button.#VALEUR:focus:before { .formulaire_spip button.#VALEUR:not(.link):focus:before {
background-image: url(#CHEMIN_IMAGE{#VALEUR-inverse-xx.svg}); background-image: url(#CHEMIN_IMAGE{#VALEUR-inverse-xx.svg});
} }
</BOUCLE_icones_images> </BOUCLE_icones_images>
...@@ -490,6 +510,7 @@ ...@@ -490,6 +510,7 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-flow: row nowrap; -ms-flex-flow: row nowrap;
flex-flow: row nowrap; flex-flow: row nowrap;
margin-bottom: #GET{tailles/16/margin};
} }
/* Si boutons de formulaire ou pied d'une boîte : bloc et alignement */ /* Si boutons de formulaire ou pied d'une boîte : bloc et alignement */
.groupe-boutons.act, .groupe-boutons.act,
...@@ -508,6 +529,7 @@ ...@@ -508,6 +529,7 @@
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 1 auto; -ms-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
margin: 0;
} }
.groupe-boutons:not(.vertical) .bouton:not(:last-child), .groupe-boutons:not(.vertical) .bouton:not(:last-child),
.groupe-boutons:not(.vertical) .bouton_action_post:not(:last-child) .submit, .groupe-boutons:not(.vertical) .bouton_action_post:not(:last-child) .submit,
...@@ -611,4 +633,16 @@ ...@@ -611,4 +633,16 @@
-webkit-box-pack: end; -webkit-box-pack: end;
-ms-flex-pack: end; -ms-flex-pack: end;
justify-content: flex-end; justify-content: flex-end;
} }
\ No newline at end of file
/* Ajustements .link */
.groupe-boutons .link {
padding-left: #GET{tailles/16/padding/1};
padding-right: #GET{tailles/16/padding/1};
}
<BOUCLE_tailles_link(DATA) {source table, #GET{tailles}|array_keys}>
.groupe-boutons .link.s#VALEUR {
padding-left: #GET{tailles/#VALEUR/padding/1};
padding-right: #GET{tailles/#VALEUR/padding/1};
}
</BOUCLE_tailles_link>
\ No newline at end of file
prive/themes/spip/theme.css.html
+ 1
− 1
Voir le fichier @ eca11247
...@@ -164,7 +164,7 @@ h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px ...@@ -164,7 +164,7 @@ h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px
.formulaire_spip span.choix,.formulaire_spip span.choix:first-of-type,.formulaire_spip span.choix:last-of-type,.formulaire_spip span.choix:last-child{display:inline-block;background: transparent;padding: 0;border:0;} .formulaire_spip span.choix,.formulaire_spip span.choix:first-of-type,.formulaire_spip span.choix:last-of-type,.formulaire_spip span.choix:last-child{display:inline-block;background: transparent;padding: 0;border:0;}
.formulaire_spip .boutons {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;position:relative;} .formulaire_spip .boutons {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;position:relative;}
.actions a.editbox {display:inline-block;} .actions a.editbox:not(.bouton) {display:inline-block;}
.formulaire_spip .toggle_box_link {-webkit-opacity:0.6;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);;z-index: 1;font-size: 10px;color: #GET{lien};} .formulaire_spip .toggle_box_link {-webkit-opacity:0.6;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);;z-index: 1;font-size: 10px;color: #GET{lien};}
.formulaire_spip .toggle_box_link button {font-size: 10px;color: #GET{lien};} .formulaire_spip .toggle_box_link button {font-size: 10px;color: #GET{lien};}
.formulaire_spip:hover .toggle_box_link {-webkit-opacity:1.0;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);} .formulaire_spip:hover .toggle_box_link {-webkit-opacity:1.0;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);}
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site