css: align wcs form buttons on mobile (#71917) #53

Merged
tjund merged 2 commits from wip/71917-buttons-alignment-mobile into main 2022-12-12 14:54:24 +01:00
4 changed files with 16 additions and 36 deletions

View File

@ -634,10 +634,6 @@ div.gru-content .previous-button button {
div {
display: block;
}
button {
width: 100%;
margin: 0;
}
}
}

View File

@ -657,6 +657,7 @@ div.select2-search {
display: flex;
flex-wrap: wrap;
justify-content: $buttons-alignment;
gap: 0 1.5rem;
@each $btn, $grow in $buttons-order {
$i: index($buttons-order, $btn);
@ -675,6 +676,19 @@ div.select2-search {
.savedraft-button {
display: none;
}
// mobile: grow buttons.
@media (max-width: $very-small-limit) {
.widget {
flex-grow: 1;
}
.content {
display: flex;
}
button {
flex-grow: 1;
margin-right: 0;
}
}
}
}

View File

@ -504,16 +504,8 @@ div#rub_service {
@media (max-width: $very-small-limit) {
.form-content--body .buttons {
column-gap: 1.5rem;
> * {
flex: 1 0 30%;
.content, .content button {
width: 100%;
margin-right: 0;
}
&.submit-button {
flex-basis: 100%;
}
.submit-button {
flex-basis: 100%;
}
}
}

View File

@ -104,28 +104,6 @@ a.pk-button.pk-button {
}
}
// mobile buttons extended like metz-metropole-2019
@media (max-width: $very-small-limit) {
form.quixote div.buttons {
display: flex;
flex-wrap: wrap;
div.widget {
div.content,
button {
width: 100%;
}
div.content {
padding-right: 1.5rem;
}
}
div.previous-button,
div.cancel-button,
div.submit-button {
flex: 1;
}
}
}
//
// GLOBAL LAYOUT
//