122 lines
2.5 KiB
SCSS
122 lines
2.5 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-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;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
> :not(:last-child) {
|
|
margin-right: $default-padding;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 50px;
|
|
|
|
@media (min-width: $procedure-context-breakpoint) {
|
|
max-height: 90px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|