877 lines
15 KiB
SCSS
877 lines
15 KiB
SCSS
// $form-sidebar-position: position of sidebar (tracking code + steps)
|
|
// possible values are: left, right, top
|
|
$form-sidebar-position: left !default;
|
|
$form-sidebar-width: 18.5% !default;
|
|
$form-sidebar-gutter: 2% !default;
|
|
// $form-titlebar-mode: display mode for the title bar, possible values are:
|
|
// * page: full page width (i.e. sidebar + form content)
|
|
// * form: form width (+ margin to be aligned on top of form)
|
|
$form-titlebar-mode: page !default;
|
|
$form-background: $body-background !default;
|
|
|
|
// hide a bunch of elements
|
|
div#droite,
|
|
div#services > h3,
|
|
div#sidebox div#links {
|
|
display: none;
|
|
}
|
|
|
|
// general layout
|
|
|
|
.form-content--sidebox, div#rub_service {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
div#rub_service {
|
|
background: $form-background;
|
|
}
|
|
|
|
@if ($form-sidebar-position == top) {
|
|
.form-content--sidebox {
|
|
text-align: center;
|
|
div#tracking-code {
|
|
display: inline-block;
|
|
min-width: 15rem;
|
|
a {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
} @else {
|
|
.form-content--sidebox {
|
|
clear: both;
|
|
width: $form-sidebar-width;
|
|
@if ($form-sidebar-position == left) {
|
|
float: left;
|
|
} @else {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
width: calc(100% - #{$form-sidebar-width} - #{$form-sidebar-gutter});
|
|
clear: none;
|
|
@if ($form-sidebar-position == left) {
|
|
float: right;
|
|
} @else {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// style homepage blocks
|
|
div#services > ul {
|
|
@include vendor-prefix('column-count', '2');
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
@media screen and ($max-mobile-viewport) {
|
|
@include vendor-prefix('column-count', '1');
|
|
}
|
|
}
|
|
|
|
div#services > ul > li {
|
|
display: inline-block;
|
|
}
|
|
|
|
div#services ul li li {
|
|
list-style: none;
|
|
}
|
|
|
|
div#services > ul > li {
|
|
margin: 0;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-content--title,
|
|
div#tracking-code h3,
|
|
div#rub_service h2 {
|
|
@extend %title;
|
|
}
|
|
|
|
div#rub_service h3 {
|
|
border: none;
|
|
text-align: left;
|
|
border-bottom: 2px solid $title-background;
|
|
}
|
|
|
|
div#rub_service div.dataview,
|
|
div#rub_service dl#evolutions,
|
|
div#rub_service .drafts-recall,
|
|
div#rub_service form {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
div#rub_service div.dataview div.title h3 {
|
|
font-size: 115%;
|
|
border: 0;
|
|
}
|
|
|
|
div#rub_service div.dataview div.subtitle h4 {
|
|
font-size: 110%;
|
|
}
|
|
|
|
div#rub_service div.dataview div.field.status {
|
|
clear: both;
|
|
}
|
|
|
|
// tracking code
|
|
div#tracking-code {
|
|
div.tracking-code-part + form {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
div#tracking-code a {
|
|
font-size: 150%;
|
|
display: inline-block;
|
|
color: #444;
|
|
}
|
|
|
|
div#tracking-code {
|
|
@media ($min-desktop-viewport) {
|
|
a, .text-tracking-code-short-text {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
.text-tracking-code-short-text > * {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#tracking-code {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div#services div.block-custom-text {
|
|
margin: 1em;
|
|
}
|
|
|
|
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
// move .form-content--sidebox on top and tracking code after steps
|
|
.form-content--sidebox {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
div#side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
& > div { flex: 1 0 auto; }
|
|
}
|
|
div#tracking-code {
|
|
font-size: 80%;
|
|
order: 1;
|
|
h3 { display: inline-block; }
|
|
.text-tracking-code-short-text { display: none; }
|
|
}
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
.form-content--sidebox + div#rub_service,
|
|
div#rub_service {
|
|
width: 100%;
|
|
margin: 0;
|
|
float: none;
|
|
}
|
|
.form-content--sidebox {
|
|
text-align: left;
|
|
div#tracking-code a {
|
|
padding-left: 0.3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
li.required-authentication span {
|
|
display: none;
|
|
}
|
|
|
|
div ul > li.required-authentication > a {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
li.required-authentication a:after {
|
|
content: "\f084";
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
right: 0.7em;
|
|
color: #444;
|
|
}
|
|
|
|
ul#evolutions,
|
|
.gru-content #disclose-dataview,
|
|
div#receipt-intro {
|
|
margin: 1em;
|
|
padding: 0;
|
|
display: block;
|
|
}
|
|
|
|
div.qommon-map {
|
|
height: 280px;
|
|
}
|
|
|
|
p.use-file-from-fargo span {
|
|
cursor: pointer;
|
|
border-bottom: 1px dotted #999;
|
|
}
|
|
|
|
// journal
|
|
ul#evolutions {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#evolutions:after {
|
|
// the vertical timeline itself
|
|
content: "";
|
|
background: #bbb;
|
|
position: absolute;
|
|
width: 1px;
|
|
top: 40px;
|
|
left: 30px;
|
|
height: calc(100% - 40px);
|
|
z-index: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
ul#evolutions > li {
|
|
list-style-image: none;
|
|
margin: 1em 0 2em 0;
|
|
z-index: 10;
|
|
position: relative;
|
|
li {
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
|
|
ul#evolutions > li:after {
|
|
// li:after, horizontal line, from the timeline to the item
|
|
content: "";
|
|
background: #bbb;
|
|
position: absolute;
|
|
width: 100px;
|
|
left: 30px;
|
|
top: 39px;
|
|
height: 1px;
|
|
z-index: -10;
|
|
}
|
|
|
|
ul#evolutions .evolution-metadata {
|
|
width: auto;
|
|
display: inline-block;
|
|
background: $form-background;
|
|
margin: 0 0 0 60px;
|
|
padding: 0.7em;
|
|
padding-top: 30px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
ul#evolutions span.time {
|
|
display: block;
|
|
color: #aaa;
|
|
}
|
|
|
|
ul#evolutions li div.msg span.time {
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul#evolutions span.status {
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
}
|
|
|
|
ul#evolutions span.user {
|
|
display: block;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
ul#evolutions span.user span {
|
|
font-size: 80%;
|
|
}
|
|
|
|
ul#evolutions li div.msg {
|
|
padding: 0.7em;
|
|
padding-top: 0;
|
|
position: relative;
|
|
background: $form-background;
|
|
margin-left: 60px;
|
|
margin-right: 30px;
|
|
p.wf-attachment {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
ul#evolutions li.msg-in div.msg {
|
|
}
|
|
|
|
ul#evolutions li.msg-out div.msg {
|
|
}
|
|
|
|
ul#evolutions li div.msg div.comment {
|
|
padding: 0.7em 1em;
|
|
background: #EEEEEE;
|
|
}
|
|
|
|
ul#evolutions li span.item {
|
|
// left circle icon
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 31px;
|
|
height: 31px;
|
|
display: block;
|
|
left: 15px;
|
|
border-radius: 20px;
|
|
border: 1px solid #888;
|
|
top: 24px;
|
|
background: $button-color !important;
|
|
box-shadow: 0 0 0px 5px $form-background;
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 7px;
|
|
height: 7px;
|
|
background: $primary-color;
|
|
position: relative;
|
|
left: 11px;
|
|
top: 11px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
div.dataview {
|
|
div.field {
|
|
margin-bottom: 0.7em;
|
|
}
|
|
div.field-type-items .value ul {
|
|
margin-top: 0;
|
|
margin-bottom : 0;
|
|
}
|
|
.label {
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
.value {
|
|
display: block;
|
|
margin-left: 0.7em;
|
|
}
|
|
.field-type-block > .value {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
form div.errornotice {
|
|
margin-top: 0;
|
|
}
|
|
|
|
// classes to be used in forms (legacy, grid system to be preferred)
|
|
div.halfwidth {
|
|
width: 45%;
|
|
float: left;
|
|
}
|
|
|
|
div.widget.halfwidth.right {
|
|
clear: none;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
div.fullwidth {
|
|
width: 95%;
|
|
}
|
|
|
|
div.halfwidth,
|
|
div.fullwidth {
|
|
textarea, select, input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.buttons,
|
|
div.dataview > p,
|
|
div.dataview div.page {
|
|
clear: both;
|
|
}
|
|
|
|
form div.page,
|
|
div.dataview div.page {
|
|
@extend .clearfix;
|
|
}
|
|
|
|
div.form-validation div.page {
|
|
background: #f0f0f0;
|
|
padding-left: 0.7em;
|
|
margin-bottom: 1.5em;
|
|
@media(max-width: $very-small-limit) {
|
|
padding-right: 0.7em;
|
|
}
|
|
> h3 {
|
|
padding-top: 0.7em;
|
|
font-size: 140%;
|
|
}
|
|
.widget:not(.BlockWidget):not(.BlockSubWidget):not([class*=' grid-']) {
|
|
@media(min-width: $very-small-limit + 1) {
|
|
padding-right: 0.7em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
div#rub_service div.form-validation div.page div h3 {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
label.activity {
|
|
display: block;
|
|
background: url(/static/img/spinner.gif) no-repeat top right;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
span.geoloc-error {
|
|
padding-left: 0.7em;
|
|
font-weight: normal;
|
|
font-size: smaller;
|
|
float: right;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
float: none;
|
|
display: block;
|
|
z-index: 100;
|
|
background: red;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.fileprogress {
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
.fileprogress {
|
|
.bar {
|
|
background: $button-background;
|
|
line-height: 1.5em;
|
|
padding-left: 0.7em;
|
|
white-space: nowrap;
|
|
transition: background linear 0.1s;
|
|
}
|
|
&.upload-error .bar {
|
|
background: #FF7575;
|
|
color: black;
|
|
width: 100% !important;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.fileinfo {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
div.fileinfo a.remove {
|
|
text-indent: 0;
|
|
background: none;
|
|
color: transparent;
|
|
display: inline-block;
|
|
text-indent: -10000px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
&::before {
|
|
font-size: 150%;
|
|
font-family: FontAwesome;
|
|
content: "\f057"; // times-circle
|
|
@if ($button-background == $widget-background) {
|
|
color: $button-color;
|
|
} @else {
|
|
color: $button-background;
|
|
}
|
|
text-indent: 0;
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
right: 0;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div.RankedItemsWidget label input {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
div.RadiobuttonsWidget, div.SingleSelectHintWidget,
|
|
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
|
|
&.pk-hidden,
|
|
&.hidden {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
div.CheckboxesWidget div.content ul li.disabled {
|
|
color: lighten($font-color, 50);
|
|
}
|
|
|
|
div.RadiobuttonsWidget div.content input[disabled] + span {
|
|
color: lighten($font-color, 50);
|
|
}
|
|
|
|
div.file-upload-widget {
|
|
&:not([class*="grid-"]) {
|
|
div.file-button {
|
|
max-width: 500px;
|
|
}
|
|
}
|
|
div.file-button {
|
|
overflow: hidden;
|
|
background: $widget-background;
|
|
margin: 0;
|
|
border: $widget-border;
|
|
border-radius: $widget-border-radius;
|
|
&:focus-within {
|
|
border: $widget-focus-border;
|
|
@if $widget-focus-outline == none {
|
|
outline: $widget-border;
|
|
outline-style: dotted;
|
|
} @else {
|
|
outline: $widget-focus-outline;
|
|
outline-offset: $widget-focus-outline-offset;
|
|
}
|
|
}
|
|
min-height: 150px;
|
|
position: relative;
|
|
text-align: center;
|
|
div.widget.FileWidget {
|
|
margin-bottom: 0;
|
|
}
|
|
input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.001;
|
|
margin: 0;
|
|
font-size: 0;
|
|
cursor: pointer;
|
|
}
|
|
div.upload-done {
|
|
display: none;
|
|
}
|
|
div.click-to-upload {
|
|
display: block;
|
|
}
|
|
div.widget-message {
|
|
padding-top: 20px;
|
|
&::before {
|
|
pointer-events: none;
|
|
content: "\f016"; // file-o
|
|
font-family: FontAwesome;
|
|
font-size: 40px;
|
|
display: block;
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
&::after {
|
|
pointer-events: none;
|
|
content: "\f055"; // plus-circle
|
|
font-family: FontAwesome;
|
|
font-size: 20px;
|
|
display: block;
|
|
position: absolute;
|
|
left: calc(50% + 10px);
|
|
top: 30px;
|
|
@if ($button-background == $widget-background) {
|
|
color: $button-color;
|
|
} @else {
|
|
color: $button-background;
|
|
}
|
|
}
|
|
&.upload-done::after {
|
|
content: "\f05d"; // check-circle-o
|
|
}
|
|
}
|
|
&.file-image div.widget-message::before {
|
|
content: "\f1c5"; // file-image-o
|
|
}
|
|
}
|
|
&.has-file {
|
|
div.file-button {
|
|
div.upload-done {
|
|
display: block;
|
|
}
|
|
div.click-to-upload {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.filename {
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
overflow: hidden;
|
|
max-width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
&.widget-readonly {
|
|
div.file-button {
|
|
// sizing is a bit complicated for image thumbnails, we have
|
|
// .file-button > .fileinfo > img
|
|
// .file-button is set to a fixed height
|
|
// .fileinfo is set to use all of it (height: 100%)
|
|
// img is set to fill whatever is possible (max-height: 100%)
|
|
height: 150px;
|
|
.fileinfo.thumbnail {
|
|
height: 100%;
|
|
}
|
|
div.widget-message {
|
|
display: none;
|
|
}
|
|
.fileinfo.thumbnail .filename {
|
|
display: none;
|
|
}
|
|
.filename {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: block;
|
|
padding-top: 30px;
|
|
&::before {
|
|
pointer-events: none;
|
|
content: "\f016"; // file-o
|
|
font-family: FontAwesome;
|
|
font-size: 40px;
|
|
display: block;
|
|
padding-top: 25px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
img {
|
|
max-height: 100%;
|
|
max-width: auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
}
|
|
&.pk-compact-file,
|
|
&.short {
|
|
div.file-button {
|
|
min-height: 50px;
|
|
}
|
|
div.widget-message.click-to-upload {
|
|
display: flex;
|
|
}
|
|
div.widget-message.upload-done,
|
|
div.widget-message.click-to-upload {
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
text-align: left;
|
|
&::before {
|
|
padding-top: 10px;
|
|
padding-right: 20px;
|
|
}
|
|
&::after {
|
|
top: 2px;
|
|
left: 38px;
|
|
}
|
|
}
|
|
&.widget-readonly div.file-button {
|
|
height: 70px;
|
|
div.widget-message.upload-done {
|
|
display: none;
|
|
}
|
|
.filename {
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
&::before {
|
|
display: block;
|
|
padding-top: 18px;
|
|
padding-bottom: 15px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
div.fileinfo {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
&.has-file {
|
|
div.widget-message.upload-done {
|
|
display: flex;
|
|
}
|
|
}
|
|
div.fileinfo {
|
|
text-align: left;
|
|
padding-left: 55px;
|
|
min-height: 1.5em;
|
|
margin-top: -1.5em;
|
|
}
|
|
}
|
|
div.fileprogress {
|
|
position: absolute;
|
|
border: none;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.TableListRowsWidget {
|
|
.widget {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
// Responsive TableWidget
|
|
// work with JS : `new Responsive_table(table);`
|
|
.responsive-tableWidget {
|
|
// table headers
|
|
th, td::before {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
@media ($max-mobile-viewport) {
|
|
&, & tbody {
|
|
display: block;
|
|
}
|
|
thead th {
|
|
display: none;
|
|
}
|
|
tbody {
|
|
th {
|
|
display: block;
|
|
}
|
|
tr {
|
|
display: block;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
|
|
&:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.065);
|
|
}
|
|
}
|
|
td {
|
|
display: flex;
|
|
align-items: last baseline;
|
|
}
|
|
td::before {
|
|
content: attr(data-col-header);
|
|
display: block;
|
|
flex: 0 1 33%;
|
|
margin-right: .66em;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
tbody td {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
p.use-file-from-fargo {
|
|
margin-top: 0;
|
|
}
|
|
|
|
div.section.foldable {
|
|
margin-bottom: 1rem;
|
|
> h2:first-child {
|
|
&::after {
|
|
font-family: FontAwesome;
|
|
content: "\f106"; // angle-up
|
|
position: absolute;
|
|
right: 1em;
|
|
}
|
|
cursor: pointer;
|
|
&:focus span.disclose-message,
|
|
&:hover span.disclose-message {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
span.disclose-message {
|
|
padding-left: 1ex;
|
|
font-size: 1rem;
|
|
display: none;
|
|
}
|
|
&.folded {
|
|
span.disclose-message {
|
|
display: inline-block;
|
|
@media screen and ($max-mobile-viewport) {
|
|
// never displayed on mobile as the small width
|
|
// makes clear the relation between title and
|
|
// open/close bracket.
|
|
display: none;
|
|
}
|
|
}
|
|
div {
|
|
display: none;
|
|
}
|
|
> h2:first-child::after {
|
|
content: "\f107"; // angle-down
|
|
}
|
|
}
|
|
}
|
|
|
|
.wcs-block-with-remove-button {
|
|
.BlockSubWidget {
|
|
position: relative;
|
|
@include clearfix();
|
|
}
|
|
.remove-button {
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 0.5em;
|
|
margin-right: 0;
|
|
span {
|
|
display: none;
|
|
}
|
|
&::after {
|
|
font-family: FontAwesome;
|
|
content: "\f1f8"; // trash
|
|
}
|
|
}
|
|
}
|
|
|
|
.pk-blocks-zebra {
|
|
.BlockSubWidget {
|
|
position: relative;
|
|
@include clearfix();
|
|
}
|
|
// add a gray background for even numbered blocks, but that means odd
|
|
// childs when the first child is an error.
|
|
.error ~ .BlockSubWidget:nth-child(odd),
|
|
.BlockSubWidget:first-child ~ .BlockSubWidget:nth-child(even) {
|
|
background: hsla(0, 0%, 0%, 0.05);
|
|
box-shadow: -0.5em -0.5em 0 .5em hsla(0, 0%, 0%, 0.05);
|
|
}
|
|
}
|
|
|
|
.form-content--body--title {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@if ($form-titlebar-mode == form) {
|
|
.form-content--titlebar {
|
|
display: none;
|
|
}
|
|
.form-content--body--title {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
}
|