demarches-normaliennes/app/assets/stylesheets/procedure_context.scss
2023-02-23 15:23:20 +01:00

148 lines
3 KiB
SCSS

@import "colors";
@import "constants";
$procedure-context-breakpoint: $two-columns-breakpoint;
$procedure-description-line-height: 22px;
.procedure-preview {
.paperless-logo {
width: 100%;
margin-bottom: 60px;
@media (max-width: $procedure-context-breakpoint) {
display: none;
}
}
.simple {
margin-bottom: 0.2rem;
font-size: 1.5rem;
color: $blue-france-500;
font-weight: bold;
}
.small-simple {
font-size: 16px;
color: $blue-france-500;
font-weight: bold;
}
.close-procedure {
font-size: 12px;
}
.procedure-title {
font-size: 26px;
margin: 0 0 20px 0;
text-align: center;
@media (min-width: $procedure-context-breakpoint) {
margin: 50px 0 32px;
font-size: 30px;
text-align: left;
}
}
.procedure-configuration {
font-size: 20px;
margin-bottom: 32px;
}
.procedure-configuration--auto-archive {
cursor: pointer;
summary {
font-size: 20px;
// Hide the default triangle details marker
list-style: none;
// (using the non-standard way for Chrome.)
&::-webkit-details-marker {
display: none;
}
}
p {
padding-top: 8px;
font-size: 16px;
}
}
.procedure-auto-archive-title {
border-bottom: 1px dotted $blue-france-500;
}
.read-more-button {
display: none;
}
@media (max-width: $procedure-context-breakpoint) {
// Truncate description and display the "Read more" UI if the text is too long
.procedure-description-body.read-more-collapsed {
// Setting the description at 25% of the viewport height:
// - displays more text on screens having more vertical space (like small tablets);
// - is enough for the action buttons to be visible on the bottom (even on mobiles).
max-height: 25vh;
// If the text exceeds the max-height,
// truncate it and displays the "Read more" button.
&.read-more-enabled {
overflow: auto;
border-bottom: 1px solid $border-grey;
+ .read-more-button {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
top: -19px;
margin-bottom: -19px;
}
}
}
}
.procedure-logos {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
> :not(:last-child) {
margin-right: $default-padding;
}
img {
max-width: 100%;
max-height: 50px;
// Fix Chrome flexbox issue
// See https://github.com/philipwalton/flexbugs/issues/225
width: 100%;
height: 100%;
min-width: 0;
object-fit: contain;
@media (min-width: $procedure-context-breakpoint) {
max-width: 500px;
max-height: 130px;
}
}
}
}
.no-procedure-presentation {
margin-bottom: 1.6rem;
p {
margin: 0;
}
}
.procedure-context-content {
@media (max-width: $procedure-context-breakpoint) {
input[type=submit] {
margin-bottom: 2 * $default-padding;
}
}
}