demarches-normaliennes/app/assets/stylesheets/new_design/procedure_form.scss
2020-02-24 16:48:07 +00:00

79 lines
1.6 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;
background-color: $light-grey;
}
.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;
}
.procedure-form__actions {
display: flex;
margin-left: -$default-padding;
margin-right: -$default-padding;
padding: $default-spacer $default-padding;
background: $light-grey;
border-top: 1px solid $border-grey;
.button.send {
margin-left: auto;
}
}
.procedure-form__options-details {
margin-bottom: $default-padding;
}
.procedure-form__options-summary {
cursor: pointer;
.header-subsection {
display: inline-block;
}
}