scss: introduce a compact style for file upload widgets (#66463)

This commit is contained in:
Frédéric Péters 2022-08-09 08:46:51 +02:00
parent b0cc167f8e
commit 865b012c6f
2 changed files with 48 additions and 6 deletions

View File

@ -94,6 +94,11 @@ de classes CSS réutilisables.
d'informations budgétaires (libellés alignés à gauche, utilisation de toute
la largeur, colonne de saisie des nombres poussée sur la droite).</p></td>
</tr>
<tr>
<td><p><code>pk-compact-file</code></p></td>
<td><p>Dispose les champs de type « Fichier » dans une version compacte,
moins haute.</p></td>
</tr>
<tr>
<td><p><code>pk-hidden</code></p></td>
<td><p>Cache le champ (applicable uniquement aux champs de type « Liste »).</p></td>

View File

@ -652,22 +652,59 @@ div.file-upload-widget {
}
}
}
&.pk-compact-file,
&.short {
div.file-button {
min-height: 110px;
min-height: 50px;
}
&.widget-readonly div.file-button {
height: 110px;
div.widget-message.click-to-upload {
display: flex;
}
div.file-button div.widget-message {
padding-top: 0px;
div.widget-message.upload-done,
div.widget-message.click-to-upload {
align-items: center;
padding: 5px 10px;
text-align: left;
&::before {
padding-top: 10px;
padding-right: 20px;
}
&::after {
top: 5px;
top: 2px;
left: 38px;
}
}
&.widget-readonly div.file-button {
height: 70px;
div.widget-message.upload-done {
display: none;
}
span.filename {
padding: 5px 10px;
display: flex;
align-items: center;
&::before {
display: block;
padding-top: 18px;
padding-bottom: 15px;
padding-right: 20px;
}
}
div.fileinfo {
margin-top: 0;
}
}
&.has-file {
div.widget-message.upload-done {
display: flex;
}
}
div.fileinfo {
text-align: left;
padding-left: 55px;
min-height: 1.5em;
margin-top: -1.5em;
}
}
div.fileprogress {
position: absolute;