DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

dossier: add responsive layout for action buttons

Browse source
This commit is contained in:
Pierre de La Morinerie 2018-07-24 18:10:00 +02:00
parent 0f1811dd4e
commit 547c36243d
1 changed files with 32 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/assets/stylesheets/new_design/forms.scss
View file

@ -281,15 +281,43 @@
} }
.send-wrapper { .send-wrapper {
text-align: right; display: flex;
margin-top: 2 * $default-padding; width: 100%;
justify-content: flex-end;
margin-top: $default-padding;
margin-bottom: 2 * $default-padding; margin-bottom: 2 * $default-padding;
.button { .button {
margin-top: $default-padding;
margin-bottom: 0; margin-bottom: 0;
} }
.button.danger {
float:left; // Wide layout: align buttons on a single row
@media (min-width: 550px) {
flex-direction: row;
.button:not(:first-of-type) {
margin-left: $default-spacer;
}
.button.danger {
margin-right: auto;
}
}
// Narrow layout: stack buttons vertically
@media (max-width: 550px) {
flex-direction: column-reverse;
align-items: center;
.button,
.button.danger {
width: 100%;
max-width: 350px;
line-height: 30px;
margin-left: none;
margin-right: none;
}
} }
} }