split wcs.scss: isolate nearby-form module (#37704)

This commit is contained in:
Thomas Jund 2019-11-15 17:54:30 +01:00
parent dda9d52315
commit 3812c6742f
4 changed files with 845 additions and 833 deletions

View File

@ -25,7 +25,7 @@ themes.json: $(wildcard static/*/config.json) help/fr/misc-scss.page
%.css: export LC_ALL=C.UTF-8
.SECONDEXPANSION:
%.css: %.scss $(wildcard static/includes/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
%.css: %.scss $(wildcard static/includes/*.scss static/includes/*/*.scss) static/includes/_data_uris.scss static/lille/_data_uris.scss static/lomme/_data_uris.scss static/hellemmes/_data_uris.scss static/toodego/_data_uris.scss $$(wildcard $$(@D)/*.scss)
sassc --sourcemap $< $@
css: $(shell python get_themes.py) static/portal-agent/css/agent-portal.css

View File

@ -1,833 +1,3 @@
@import 'grid';
// $form-sidebar-position: position of sidebar (tracking code + steps)
// possible values are: left, right, top
$form-sidebar-position: left !default;
$responsive-steps: horizontal !default;
// hide a bunch of elements
div#droite,
div#services > h3,
div#steps h2,
div#sidebox div#links {
display: none;
}
// general layout
div#gauche, div#rub_service {
margin-top: 15px;
}
div#rub_service {
background: $body-background;
}
@if ($form-sidebar-position == top) {
div#gauche {
text-align: center;
div#tracking-code {
display: inline-block;
min-width: 15rem;
a {
padding-left: 0;
}
}
}
} @else {
div#gauche {
clear: both;
width: 18.5%;
@if ($form-sidebar-position == left) {
float: left;
} @else {
float: right;
}
}
div#gauche + div#rub_service {
width: 79.5%;
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-width: $mobile-limit) {
@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%;
}
div#tracking-code h3,
div#rub_service h2 {
@extend %title;
}
div.large div#rub_service h3,
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 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;
padding: 0.3em 0 0 0.3em;
color: #444;
}
div#tracking-code {
margin-bottom: 1em;
}
div#services div.block-custom-text {
margin: 1em;
}
// steps
div#steps ol {
margin: 0;
padding: 0;
list-style: none;
color: #868686;
& li {
border: 0;
border-bottom: 1px solid #ccc;
margin-bottom: 1.5em;
border-radius: $border-radius;
padding: 0.7em;
letter-spacing: 1px;
}
& li.current {
border: 0;
background: $title-background;
color: $title-color;
& span.label {
font-weight: bold;
}
}
& li span.marker {
font-size: 250%;
display: block;
}
}
@if ($form-sidebar-position == top) {
div#steps ol {
text-align: center;
li {
display: inline-block;
min-width: 7rem;
max-width: 11rem;
vertical-align: top;
border-bottom: none;
}
}
}
@if ($responsive-steps == horizontal) {
@media screen and (max-width: $mobile-limit) {
div#gauche {
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; }
}
div#steps {
position: static;
margin: 0;
color: #aaa;
white-space: nowrap;
overflow: hidden;
width: 100%;
& ol {
list-style: none;
padding: 0 0;
margin: 0;
text-align: left;
& li {
border: none;
display: inline-block;
margin: 0;
padding: 0 1em 0.7em 0;
list-style: none;
min-width: auto;
border-radius: 0;
& span.marker {
float: none;
display: inline;
font-size: 26px;
position: static;
padding: 2px 9px;
font-weight: bold;
color: white;
text-align: center;
background: #ddd;
border-radius: $border-radius;
border: 1px solid #ddd;
}
}
& li.current {
background: inherit;
color: inherit;
& span.label {
font-weight: normal;
}
& span.marker {
background: $title-background;
color: $title-color;
border-radius: $border-radius;
}
}
& li.step-before .label {
display: none;
}
}
}
}
} // @endif ($responsive-steps == horizontal)
@media screen and (max-width: $mobile-limit) {
div#gauche + div#rub_service,
div#rub_service {
width: 100%;
margin: 0;
float: none;
}
div#gauche {
text-align: left;
div#tracking-code a {
padding-left: 0.3em;
}
}
}
li.required-authentication span {
display: none;
}
li.required-authentication a:after {
content: "\f084";
font-family: FontAwesome;
position: absolute;
right: 0.7em;
color: #444;
}
ul#evolutions,
div.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 div.evolution-metadata {
width: auto;
display: inline-block;
background: $body-background;
margin-left: 60px;
padding: 0.7em;
padding-top: 30px;
padding-bottom: 0;
margin-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: $body-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;
}
#evolutions .msg-system {
margin-bottom: 30px;
}
ul#evolutions li span.item {
// left circle icon
box-sizing: border-box;
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 $body-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;
}
span.label {
font-weight: bold;
}
.value {
display: block;
margin-left: 0.7em;
}
}
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::after,
div.dataview div.page::after {
content: "";
display: block;
clear: both;
}
div.form-validation div.page {
background: #f0f0f0;
padding-left: 0.7em;
box-sizing: border-box;
}
div.form-validation div.page > h3 {
padding-top: 0.7em;
font-size: 140%;
}
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-width: $mobile-limit) {
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;
box-sizing: border-box;
}
&.upload-error .bar {
background: #FF7575;
color: black;
width: 100% !important;
white-space: normal;
}
}
.fileinfo {
line-height: 1.5em;
height: 100%;
}
div.fileinfo a.remove {
text-indent: 0;
background: none;
color: transparent;
display: inline-block;
width: 16px;
position: relative;
text-indent: -10000px;
&::before {
font-family: FontAwesome;
content: "\f057"; // times-circle
color: $button-background;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
}
}
div.RankedItemsWidget label input {
margin-right: 1em;
}
div.RadiobuttonsWidget, div.SingleSelectHintWidget,
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
&.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;
box-sizing: border-box;
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;
}
}
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;
color: $button-background;
}
&.upload-done::after {
content: "\f05d"; // check-circle-o
}
}
&.file-image div.widget-message::before {
content: "\f1c5"; // file-image-o
}
}
&.short div.file-button {
height: 110px;
div.widget-message {
padding-top: 0px;
&::before {
padding-top: 10px;
}
&::after {
top: 5px;
}
}
}
&.has-file {
div.file-button {
div.upload-done {
display: block;
}
div.click-to-upload {
display: none;
}
}
}
&.widget-readonly {
div.file-button {
div.widget-message {
display: none;
}
.fileinfo.thumbnail span.filename {
display: none;
}
span.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: 40px;
padding-bottom: 10px;
}
}
img {
max-height: 100%;
position: relative;
z-index: 10;
}
}
}
div.fileprogress {
position: absolute;
border: none;
overflow: hidden;
width: 100%;
left: 0;
bottom: 0;
}
}
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-width: $mobile-limit) {
// 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
}
}
}
.nearby-forms {
margin: 0;
padding: 0;
}
.nearby-form {
margin: 5px auto;
display: -ms-flexbox;
display: flex;
-ms-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-pack: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
border: $widget-border;
padding: 5px;
}
.nearby-form--digest, .nearby-form--datetime, .nearby-form--marker-counter {
margin: 0 5px;
}
.nearby-form--digest {
width: 60%;
}
.nearby-form--datetime {
width: 20%;
@media screen and (max-width: $mobile-limit) {
width: 30%;
}
}
.nearby-form--marker-counter {
background: $button-background;
padding: 5px 10px;
color: $button-color;
min-width: 0.5em;
max-width: 1em;
border-radius: 3px;
}
.template-nearby-forms div.leaflet-div-icon {
padding: 3px;
margin: auto;
border-radius: 3px;
display: -ms-flexbox;
display: flex;
a {
line-height: 1;
margin: auto;
}
}
.signalements-thanks ~ .buttons {
.submit-button, .previous-button {
display: none;
}
.cancel-button button {
text-indent: -9999px;
line-height: 0;
&::after {
text-indent: 0;
line-height: initial;
display: block;
content: 'Continuer';
}
}
}
@import 'wcs/bulk';
@import 'wcs/nearby-form';

View File

@ -0,0 +1,760 @@
// $form-sidebar-position: position of sidebar (tracking code + steps)
// possible values are: left, right, top
$form-sidebar-position: left !default;
$responsive-steps: horizontal !default;
// hide a bunch of elements
div#droite,
div#services > h3,
div#steps h2,
div#sidebox div#links {
display: none;
}
// general layout
div#gauche, div#rub_service {
margin-top: 15px;
}
div#rub_service {
background: $body-background;
}
@if ($form-sidebar-position == top) {
div#gauche {
text-align: center;
div#tracking-code {
display: inline-block;
min-width: 15rem;
a {
padding-left: 0;
}
}
}
} @else {
div#gauche {
clear: both;
width: 18.5%;
@if ($form-sidebar-position == left) {
float: left;
} @else {
float: right;
}
}
div#gauche + div#rub_service {
width: 79.5%;
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-width: $mobile-limit) {
@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%;
}
div#tracking-code h3,
div#rub_service h2 {
@extend %title;
}
div.large div#rub_service h3,
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 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;
padding: 0.3em 0 0 0.3em;
color: #444;
}
div#tracking-code {
margin-bottom: 1em;
}
div#services div.block-custom-text {
margin: 1em;
}
// steps
div#steps ol {
margin: 0;
padding: 0;
list-style: none;
color: #868686;
& li {
border: 0;
border-bottom: 1px solid #ccc;
margin-bottom: 1.5em;
border-radius: $border-radius;
padding: 0.7em;
letter-spacing: 1px;
}
& li.current {
border: 0;
background: $title-background;
color: $title-color;
& span.label {
font-weight: bold;
}
}
& li span.marker {
font-size: 250%;
display: block;
}
}
@if ($form-sidebar-position == top) {
div#steps ol {
text-align: center;
li {
display: inline-block;
min-width: 7rem;
max-width: 11rem;
vertical-align: top;
border-bottom: none;
}
}
}
@if ($responsive-steps == horizontal) {
@media screen and (max-width: $mobile-limit) {
div#gauche {
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; }
}
div#steps {
position: static;
margin: 0;
color: #aaa;
white-space: nowrap;
overflow: hidden;
width: 100%;
& ol {
list-style: none;
padding: 0 0;
margin: 0;
text-align: left;
& li {
border: none;
display: inline-block;
margin: 0;
padding: 0 1em 0.7em 0;
list-style: none;
min-width: auto;
border-radius: 0;
& span.marker {
float: none;
display: inline;
font-size: 26px;
position: static;
padding: 2px 9px;
font-weight: bold;
color: white;
text-align: center;
background: #ddd;
border-radius: $border-radius;
border: 1px solid #ddd;
}
}
& li.current {
background: inherit;
color: inherit;
& span.label {
font-weight: normal;
}
& span.marker {
background: $title-background;
color: $title-color;
border-radius: $border-radius;
}
}
& li.step-before .label {
display: none;
}
}
}
}
} // @endif ($responsive-steps == horizontal)
@media screen and (max-width: $mobile-limit) {
div#gauche + div#rub_service,
div#rub_service {
width: 100%;
margin: 0;
float: none;
}
div#gauche {
text-align: left;
div#tracking-code a {
padding-left: 0.3em;
}
}
}
li.required-authentication span {
display: none;
}
li.required-authentication a:after {
content: "\f084";
font-family: FontAwesome;
position: absolute;
right: 0.7em;
color: #444;
}
ul#evolutions,
div.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 div.evolution-metadata {
width: auto;
display: inline-block;
background: $body-background;
margin-left: 60px;
padding: 0.7em;
padding-top: 30px;
padding-bottom: 0;
margin-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: $body-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;
}
#evolutions .msg-system {
margin-bottom: 30px;
}
ul#evolutions li span.item {
// left circle icon
box-sizing: border-box;
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 $body-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;
}
span.label {
font-weight: bold;
}
.value {
display: block;
margin-left: 0.7em;
}
}
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::after,
div.dataview div.page::after {
content: "";
display: block;
clear: both;
}
div.form-validation div.page {
background: #f0f0f0;
padding-left: 0.7em;
box-sizing: border-box;
}
div.form-validation div.page > h3 {
padding-top: 0.7em;
font-size: 140%;
}
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-width: $mobile-limit) {
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;
box-sizing: border-box;
}
&.upload-error .bar {
background: #FF7575;
color: black;
width: 100% !important;
white-space: normal;
}
}
.fileinfo {
line-height: 1.5em;
height: 100%;
}
div.fileinfo a.remove {
text-indent: 0;
background: none;
color: transparent;
display: inline-block;
width: 16px;
position: relative;
text-indent: -10000px;
&::before {
font-family: FontAwesome;
content: "\f057"; // times-circle
color: $button-background;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
}
}
div.RankedItemsWidget label input {
margin-right: 1em;
}
div.RadiobuttonsWidget, div.SingleSelectHintWidget,
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
&.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;
box-sizing: border-box;
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;
}
}
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;
color: $button-background;
}
&.upload-done::after {
content: "\f05d"; // check-circle-o
}
}
&.file-image div.widget-message::before {
content: "\f1c5"; // file-image-o
}
}
&.short div.file-button {
height: 110px;
div.widget-message {
padding-top: 0px;
&::before {
padding-top: 10px;
}
&::after {
top: 5px;
}
}
}
&.has-file {
div.file-button {
div.upload-done {
display: block;
}
div.click-to-upload {
display: none;
}
}
}
&.widget-readonly {
div.file-button {
div.widget-message {
display: none;
}
.fileinfo.thumbnail span.filename {
display: none;
}
span.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: 40px;
padding-bottom: 10px;
}
}
img {
max-height: 100%;
position: relative;
z-index: 10;
}
}
}
div.fileprogress {
position: absolute;
border: none;
overflow: hidden;
width: 100%;
left: 0;
bottom: 0;
}
}
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-width: $mobile-limit) {
// 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
}
}
}

View File

@ -0,0 +1,82 @@
/*
* Nearby form
*
* Ajout de styles à un champ carte pour sélectionner un signalement identique à proximité
*
* Template
* quommon/forms/widgets/nearby-forms.html
* JS
* static/js/plus1.js
*/
.nearby-forms {
margin: 0;
padding: 0;
}
.nearby-form {
margin: 5px auto;
display: -ms-flexbox;
display: flex;
-ms-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-pack: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
border: $widget-border;
padding: 5px;
}
.nearby-form--digest, .nearby-form--datetime, .nearby-form--marker-counter {
margin: 0 5px;
}
.nearby-form--digest {
width: 60%;
}
.nearby-form--datetime {
width: 20%;
@media screen and (max-width: $mobile-limit) {
width: 30%;
}
}
.nearby-form--marker-counter {
background: $button-background;
padding: 5px 10px;
color: $button-color;
min-width: 0.5em;
max-width: 1em;
border-radius: 3px;
}
.template-nearby-forms div.leaflet-div-icon {
padding: 3px;
margin: auto;
border-radius: 3px;
display: -ms-flexbox;
display: flex;
a {
line-height: 1;
margin: auto;
}
}
.signalements-thanks ~ .buttons {
.submit-button, .previous-button {
display: none;
}
.cancel-button button {
text-indent: -9999px;
line-height: 0;
&::after {
text-indent: 0;
line-height: initial;
display: block;
content: 'Continuer';
}
}
}