J’aime bien quand une CSS diminue tout en conservant un rendu correct (et plus homogène) côté navigateur !
Exemple avec la page des catégories dont la CSS dédiée s’est un peu réduite :
diff --git a/admin/style/scss/partials/_categories.scss b/admin/style/scss/partials/_categories.scss
index a81be17a4..371853970 100644
--- a/admin/style/scss/partials/_categories.scss
+++ b/admin/style/scss/partials/_categories.scss
@@ -3,12 +3,9 @@
ul {
list-style: none;
- margin-top: 2em;
padding: 0;
-
ul {
- margin-right: 2em;
- margin-left: 2em;
+ margin: 0 1em 0 2em;
}
}
@@ -19,63 +16,40 @@
}
.cat-line {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 1em;
position: relative;
margin: 0.66em 0;
padding: 0.66em 1em;
border: 1px solid var(--cat-line-border);
border-radius: 3px;
- label {
- margin-right: 0.25em;
-
- a {
- font-weight: bold;
- }
+ ul {
+ flex-grow: 1;
}
-
p,
label {
margin: 0;
- display: inline-block;
+ }
+ label {
+ display: inline-flex;
+ gap: 0.5em;
+ align-items: center;
}
.cat-line {
border: 1px solid var(--subcat-line-border);
}
-}
-p.cat-title {
- margin-right: 1em;
-}
-
-.cat-nb-posts a {
- color: var(--cat-post-counter);
-}
-
-.cat-url {
- padding-left: 1em;
-}
-
-.cat-buttons {
- float: right;
- margin-top: -0.2em;
- font-size: 0.91em;
-
- select {
- padding: 1px 2px 3px 2px;
- margin-right: 0.25em;
+ .cat-buttons {
+ margin-inline-start: auto;
}
-
- .reset {
- padding-left: 4px;
- padding-right: 4px;
+ label {
+ a {
+ font-weight: bold;
+ }
}
}
-
-.cat-actions {
- line-height: 2;
-}
-
-#del_cat {
- width: 100%;
-}
Les lignes préfixées par le signe - et affichée sur fond rouge ont été supprimées, celles préfixées par le signe + et affichées sur fond vert ont été ajoutées.
Code source Sass final
#categories {
margin: 1em 0;
ul {
list-style: none;
padding: 0;
ul {
margin: 0 1em 0 2em;
}
}
.placeholder {
outline: 1px dashed var(--cat-placeholder-outline);
min-height: 2.5em;
}
}
.cat-line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1em;
position: relative;
margin: 0.66em 0;
padding: 0.66em 1em;
border: 1px solid var(--cat-line-border);
border-radius: 3px;
ul {
flex-grow: 1;
}
p,
label {
margin: 0;
}
label {
display: inline-flex;
gap: 0.5em;
align-items: center;
}
.cat-line {
border: 1px solid var(--subcat-line-border);
}
.cat-buttons {
margin-inline-start: auto;
}
label {
a {
font-weight: bold;
}
}
}
Merci flex
pour le coup de main, ça aide bien !