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

Ajustements des styles des formulaires pour suivre la refonte des boîtes + quelques détails (#4727) 

* Mutualiser une partie des styles du titre : taille, graisse. On laisse tomber uppercase et couleur.
* Conserver la marge complète en haut dans le cadre d'entête, et une réduite en bas.
* Variante `.flat` avec bordure et sans ombre portée, appliquée automatiquement aux formulaires imbriqués.
* Tous les styles du form de date au même endroit
parent 29e07be1

prive/themes/spip/forms.css.html

+38 −43
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -74,6 +74,7 @@ 
	/* divers */

	--spip-form-border-radius: var(--spip-border-radius); /* bordure inputs et cie */

	--spip-form-input-height: calc((var(--spip-form-padding-input-y) * 2) + var(--spip-line-height)); /* à toute fin utile */

	--spip-form-titrem-factor: 1.1; /* Pour la taille du titre */

}

@media (min-width: 768px) {

	:root {
@@ -87,7 +88,8 @@ 
		--spip-form-fieldset-offset: 2.5em;

	}

}

.lat .formulaire_spip {

.lat .formulaire_spip,

.formulaire_spip.mini {

	/* espacements externes (entre les inputs et cie) */

	--spip-form-spacing-x: 0.75em;

	--spip-form-spacing-y: 0.85em;
@@ -109,9 +111,9 @@ 
 * On regroupe tout au même endroit pour mutualiser et se simplifier la vie.

 */



/* Gouttière latérale principale */

/* Gouttière latérale principale.

   Pour le titre ajuster selon la taille de la police. */

.formulaire_spip,

.formulaire_spip .titrem,

.formulaire_spip fieldset,

.formulaire_spip .editer-groupe,

.formulaire_spip .editer,
@@ -119,9 +121,13 @@ 
	padding-left: var(--spip-form-spacing-x);

	padding-right: var(--spip-form-spacing-x);

}

.formulaire_spip .titrem {

	padding-left: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));

	padding-right: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));

}



/* Marges négatives pour annuler la gouttière */

.formulaire_spip .titrem,

/* Marges négatives pour annuler la gouttière.

   Pour le titre ajuster selon la taille de la police. */

.formulaire_spip .editer-groupe,

.formulaire_spip fieldset,

.formulaire_spip .editer,
@@ -129,6 +135,10 @@ 
	margin-left: calc(var(--spip-form-spacing-x) * -1);

	margin-right: calc(var(--spip-form-spacing-x) * -1);

}

.formulaire_spip .titrem {

	margin-left: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);

	margin-right: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);

}





/**
@@ -256,8 +266,8 @@ 
}

.entete-formulaire {

	position:relative;

	padding: calc(var(--spip-form-spacing-y) / 2) var(--spip-form-spacing-x);

	padding-bottom: 0; /* Déjà une marge suffisante sous le h1 */

	padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x);

	padding-bottom: calc(var(--spip-form-spacing-y) / 2);

	overflow: hidden;

	background: var(--spip-color-white);

	border-bottom: 1px solid var(--spip-form-sep-color);
@@ -305,7 +315,9 @@ 
	box-shadow: var(--spip-box-shadow-hover);

}



/* Titre optionnel */

/* Titre optionnel

   Une partie de l'habillage est mutualisée avec ceux des boîtes : taille, graisse….

	 Voir dans box_skins.css */

.formulaire_spip .titrem {

	display: flex;

	align-items: center;
@@ -313,9 +325,7 @@ 
	padding-bottom: var(--spip-form-spacing-y);

	border-top-left-radius: inherit;

	border-top-right-radius: inherit;

	color: var(--spip-color-theme-dark);

	border-bottom: 1px solid var(--spip-form-sep-color);

	text-transform: uppercase;

}



/* Conteneur des saisies */
@@ -952,10 +962,7 @@ 




.lat .formulaire_spip {

	font-size: 0.9em;

}

.lat .formulaire_spip .titrem {

	font-size: 1em;

	font-size: 0.95em;

}

/* Tous les labels au dessus */

.lat .formulaire_spip .editer {
@@ -995,24 +1002,18 @@ 
 * =======================================

 * 13. Formulaires dans certains contextes

 * =======================================

 * Fiche objet, constructeur de formulaire (formidable), …

 */





/* Dans fiche objet */

/* Formulaires flat : sans ombre portée, simple bordure */

.formulaire_spip.flat,

.fiche_objet .formulaire_spip,

.formulaire_spip .formulaire_spip {

	border: 1px solid hsla(0, 0%, 0%, 0.15); /* Nb : la variable est plutôt pour les bordures des inputs */

	box-shadow: none;

}

.fiche_objet .formulaire_spip.formulaire_dater {

	margin-top: 0;

	border: 0;

	border-radius: 0;

	margin-left: -15px; /* = padding de fiche_objet */

	margin-right: -15px; /* = padding de fiche_objet */

	background-color: var(--spip-color-gray-lightest);

	position: relative;

.formulaire_spip .formulaire_spip,

.box .formulaire_spip,

.popin .entete-formulaire,

.popin .formulaire_spip {

	border: 1px solid var(--spip-form-border-color);

	box-shadow: none !important;

}



/* Dans #wysiwyg */
@@ -1020,21 +1021,6 @@ 
	font-size: 1rem;

}



/* Dans une modale */

.popin .entete-formulaire,

.popin .formulaire_spip,

.popin .formulaire_spip:hover,

.popin .formulaire_spip:focus-within {

	box-shadow: none

}

.popin .entete-formulaire,

.popin .formulaire_spip {

	border: 1px solid var(--spip-form-border-color);

}

.popin .entete-formulaire {

	border-bottom: none;

}





/**

 * ============================
@@ -1214,6 +1200,15 @@ 
		display: inline-block;

	}

}

.fiche_objet .formulaire_spip.formulaire_dater {

	margin-top: 0;

	border: 0;

	border-radius: 0;

	margin-left: -15px; /* = padding de fiche_objet */

	margin-right: -15px; /* = padding de fiche_objet */

	background-color: var(--spip-color-gray-lightest);

	position: relative;

}



/* editer_liens */

.formulaire_editer_liens .liste-objets {

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