105 lines
2 KiB
SCSS
105 lines
2 KiB
SCSS
@import "colors";
|
|
@import "constants";
|
|
|
|
// scss-lint:disable SelectorFormat
|
|
|
|
.procedure-form .page-title {
|
|
text-align: left;
|
|
}
|
|
|
|
.procedure-form__columns {
|
|
display: flex;
|
|
margin-top: -$sub-header-bottom-margin;
|
|
}
|
|
|
|
// We want to make the form as large as possible,
|
|
// without shrinking the preview too much.
|
|
//
|
|
// A balanced compromised seems to make the form
|
|
// slighly larger than the preview (flex 10/9), and
|
|
// to reduce the margins on the preview as much as
|
|
// possible.
|
|
.procedure-form__column--form {
|
|
flex: 10;
|
|
padding: 0 $default-padding;
|
|
|
|
input[type=file] {
|
|
background-color: transparent; // Remove white bg set by DSFR
|
|
}
|
|
|
|
&.no-background {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.procedure-form__column--preview {
|
|
flex: 9;
|
|
padding: 0 2 * $default-padding;
|
|
// Gain a little horizontal space by using the white
|
|
// space on the right as our margin.
|
|
padding-right: 0;
|
|
}
|
|
|
|
// Hide the preview panel on smaller screens
|
|
@media screen and (max-width: 800px) {
|
|
.procedure-form__column--preview {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.procedure-form__preview .procedure-preview {
|
|
max-width: 450px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.procedure-form__preview-title {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
opacity: 0.5;
|
|
margin-top: $default-spacer * 4;
|
|
margin-bottom: $default-spacer * 8;
|
|
|
|
.notice {
|
|
color: $dark-grey;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
[data-fr-theme="dark"] .procedure-form__actions {
|
|
background: var(--background-action-low-blue-france);
|
|
border-top: 1px solid var(--background-action-low-blue-france-hover);
|
|
}
|
|
|
|
.procedure-form__actions {
|
|
display: flex;
|
|
padding: $default-spacer $default-padding;
|
|
background: $light-grey;
|
|
border-top: 1px solid $border-grey;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.button.send {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.actions-left {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.actions-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.procedure-form__options-details {
|
|
margin-bottom: $default-padding;
|
|
}
|
|
|
|
.procedure-form__options-summary {
|
|
cursor: pointer;
|
|
|
|
h3 {
|
|
display: inline-block;
|
|
}
|
|
}
|