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

stylesheets: make the actions bar sticky

Browse source
This commit is contained in:
Pierre de La Morinerie 2019-09-12 13:56:24 +00:00 committed by Paul Chavard
parent 1f8f38f492
commit 4b883a57bf
2 changed files with 28 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
app/assets/stylesheets/new_design/dossier_edit.scss
View file

@ -47,59 +47,49 @@
}
.send-dossier-actions-bar {
// scss-lint:disable VendorPrefix
position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
position: sticky;
bottom: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
margin-top: $default-padding;
margin-left: -$default-padding;
margin-right: -$default-padding;
margin-bottom: 0;
padding-top: 0;
padding-bottom: $default-spacer;
padding-right: $default-padding;
padding-left: $default-padding;
background: #FFFFFF;
position: fixed;
bottom: 0px;
border: 1px solid #CCCCCC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
padding-top: 0px;
padding-bottom: $default-spacer;
padding-right: 30px;
padding-left: 30px;
margin: 0 auto;
margin-left: -30px;
max-width: 1100px;
.button {
margin-top: $default-spacer;
min-height: 38px;
line-height: 16px;
}
@media(max-width: 1100px) {
margin-left: -16px;
// If there are more than one button, align the "Send" button to the right
.button:not(:first-of-type).send {
margin-left: auto;
}
// Wide layout: align buttons on a single row
@media (min-width: 550px) {
flex-direction: row;
.button:not(:first-of-type) {
margin-left: $default-spacer;
}
// If there are more than one button, align the "Send" button to the right
.button:not(:first-of-type).send {
margin-left: auto;
}
// Normal layout
@media (min-width: 500px) {
padding-top: $default-spacer * 2;
padding-bottom: $default-spacer * 2;
}
// Narrow layout: stack buttons vertically
@media (max-width: 550px) {
flex-direction: column-reverse;
align-items: center;
margin-left: -16px;
.button {
width: 100%;
max-width: 350px;
line-height: 30px;
margin-left: none;
margin-right: none;
}
// Compact layout
@media (max-width: 500px) {
padding-top: $default-spacer;
padding-bottom: $default-spacer;
}
}
}

4
app/assets/stylesheets/new_design/new_footer.scss
View file

@ -108,10 +108,6 @@ footer {
.footer-row {
margin-bottom: 30px;
&:last-child {
margin-bottom: 35px;
}
// In this case, the bottom margin is defined directly on each individual column
&.footer-columns {
margin-bottom: 0;