demarches-normaliennes/app/assets/stylesheets/dossier_edit.scss
2023-12-04 14:07:21 +01:00

118 lines
2.9 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "colors";
@import "constants";
$dossier-actions-bar-border-width: 1px;
[data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer {
background-color: var(--background-action-low-blue-france);
border: none;
}
.dossier-header {
.fr-container {
padding-bottom: $default-padding;
}
h1 {
font-size: 2rem;
}
.dossier-form-actions {
margin-top: 2rem;
margin-bottom: 1rem;
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
margin-top: 1rem;
}
}
.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;
z-index: 10; // above DSFR btn which are at 1
}
.send-dossier-actions-bar {
display: flex;
flex-direction: row;
align-items: center;
.button:not(:small) {
min-height: 38px;
line-height: 16px;
}
// If there are more than one button, align the "Send" button to the right
.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;
}
}
.autosave {
// Make the autosave block occupy the entire horizontal space,
// to ensure the failed state has room to display its content.
flex-grow: 1;
}
}