demarches-normaliennes/app/assets/stylesheets/dossier_edit.scss

115 lines
2.7 KiB
SCSS
Raw Normal View History

2018-02-21 18:32:07 +01:00
@import "colors";
@import "constants";
$dossier-actions-bar-border-width: 1px;
.dossier-header {
.container {
padding-bottom: $default-padding;
}
2018-02-21 18:32:07 +01:00
h1 {
font-size: 22px;
.icon.folder {
vertical-align: -3px;
2018-02-21 18:32:07 +01:00
}
}
.dossier-form-actions {
margin-top: $default-padding;
margin-bottom: $default-padding;
text-align: right;
}
}
.dossier-edit {
.prologue {
margin: (1.5 * $default-padding) 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
.mandatory-explanation {
flex-grow: 1; // Push the "notice" button to the right
flex-shrink: 1; // Allow the text to shrink
margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
}
.button.notice {
flex-shrink: 0; // Display the button label on a single line
}
2018-02-21 18:32:07 +01:00
}
.warning {
margin-bottom: 20px;
background-color: #f9b91666;
padding: 20px;
border-radius: 4px;
}
.dossier-edit-sticky-footer {
// scss-lint:disable VendorPrefix DuplicateProperty
position: fixed; // Fallback for IE 11, and other browser that don't support sticky
position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
position: sticky;
// scss-lint:enable VendorPrefix DuplicateProperty
// IE 11 uses `position:fixed` and thus needs an explicit width, content-box for better layout, etc.
width: 100%;
max-width: $page-width + 2 * $default-padding;
box-sizing: content-box;
bottom: 0;
margin-top: $default-padding;
margin-left: -$default-padding;
margin-right: -$default-padding;
margin-bottom: 0;
padding-right: $default-padding - $dossier-actions-bar-border-width;
padding-left: $default-padding - $dossier-actions-bar-border-width;
background: #FFFFFF;
border: $dossier-actions-bar-border-width solid #CCCCCC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
}
.send-dossier-actions-bar {
display: flex;
flex-direction: row;
align-items: center;
2019-11-19 17:55:30 +01:00
.button:not(:small) {
min-height: 38px;
line-height: 16px;
}
// If there are more than one button, align the "Send" button to the right
2019-11-19 17:55:30 +01:00
.button:not(:first-child).send {
margin-left: auto;
}
// Normal layout
@media (min-width: 620px) {
padding-top: $default-spacer * 2;
padding-bottom: $default-spacer * 2;
}
// Compact layout
@media (max-width: 620px) {
padding-top: $default-spacer;
padding-bottom: $default-spacer;
}
}
2019-11-19 17:55:30 +01:00
.autosave {
// Make the autosave block occupy the entire horizontal space,
// to ensure the failed state has room to display its content.
flex-grow: 1;
}
2018-02-21 18:32:07 +01:00
}