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

Boîtes du privé : on tempère l'utilisation des ombres portées, sujet sur... 

Boîtes du privé : on tempère l'utilisation des ombres portées, sujet sur lequel il va falloir se pencher mais de façon générale.

De base il n'y a plus d'ombre portée, à part sur boîtes error, notice et success. Ces dernières sont souvent utilisées en parallèle ou en substitut de formulaires, il est donc logique de reprendre le style.

Ensuite il faudra définir des règles générales, soit faire du cas-par-cas, à voir.
Pour l'instant au besoin, la classe `.pop` ajoute une ombre portée : on peut soit l'utiliser dans l'appel de la boîte, soit faire un @extend à la main en CSS.
parent ef7ac419

prive/themes/spip/box_skins.css.html

+19 −17
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -122,21 +122,17 @@ 
 */





/* Conteneur + obligé de reset les vieux messages d'alertes */

/* Conteneur + obligé de reset les styles des vieux messages d'alertes */

.box,

.box.notice, .box.error, .box.success {

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

	padding: 0;

	border-radius: var(--spip-box-border-radius);

	border: 0;

	box-shadow: var(--spip-box-shadow);

	box-shadow: none;

	color: var(--spip-color-black);

	transition: box-shadow 0.2s;

}

.box:hover,

.box:focus-within {

	box-shadow: var(--spip-box-shadow-hover);

}



/* Header */

.box__header {
@@ -194,6 +190,7 @@ 
/* Simple */

.box.simple {

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

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

}



/* Info */
@@ -210,7 +207,6 @@ 


/* Raccourcis */

.box.raccourcis {

	border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);

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

}
@@ -251,6 +247,14 @@ 
 */





/* Emballage */

.box.notice, .box.error, .box.success {

	box-shadow: var(--spip-box-shadow);

}

.box.notice:hover, .box.error:hover, .box.success:hover,

.box.notice:focus-within, .box.error:focus-within, .box.success:focus-within {

	box-shadow: var(--spip-box-shadow-hover);

}

/* Icône centrée verticalement dans le header */

.box.notice .box__header, .box.error .box__header, .box.success .box__header,

.box.notice .box__body, .box.error .box__body, .box.success .box__body {
@@ -340,27 +344,22 @@ 
   Certaines le sont d'office, notamment les boîtes imbriquées.

	 Une bordure est ajoutée si nécessaire. */

.box.flat,

.box.info:not(.pop),

.box.note:not(.pop),

.box.important:not(.pop),

.box.raccourcis:not(.pop),

.box .box:not(.pop) /* imbriquées */

{

	box-shadow: none !important;

}

.box.simple.flat,

.box.notice.flat,

.box.error.flat,

.box.success.flat,

.box .box.simple:not(.pop), /* imbriquées */

.box .box.notice:not(.pop),

.box .box.notice:not(.pop), /* imbriquées */

.box .box.error:not(.pop),

.box .box.success:not(.pop) {

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

}



/* pop : avec une ombre portée.

   Peut se conjuguer aux autres quand on veut forcer */

/* Pop : avec une ombre portée.

   Peut se conjuguer aux autres quand on veut forcer.

	 Il faut ajuster la bordure dans certains cas */

.box.pop {

	box-shadow: var(--spip-box-shadow);

}
@@ -368,6 +367,9 @@ 
.box.pop:focus-within {

	box-shadow: var(--spip-box-shadow-hover);

}

.box.simple.pop {

	border: 0;

}





/**
@@ -383,7 +385,7 @@ 
 */

.box.sous-rub {

	background-color: var(--spip-color-theme-lighter);

	box-shadow: none !important;

	border: 0;

}

/* titre */

.box.sous-rub .box__header {

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