0001-split-wcs.scss-isolate-nearby-form-module-37704.patch

Thomas Jund, 16 novembre 2019 18:41

Voir les différences: en ligne côte à côte

Subject: [PATCH] split wcs.scss: isolate nearby-form module (#37704)

 Makefile                              |   2 +-
 static/includes/_wcs.scss             | 834 +-------------------------
 static/includes/wcs/_bulk.scss        | 760 +++++++++++++++++++++++
 static/includes/wcs/_nearby-form.scss |  82 +++
 4 files changed, 845 insertions(+), 833 deletions(-)
 create mode 100644 static/includes/wcs/_bulk.scss
 create mode 100644 static/includes/wcs/_nearby-form.scss

     %.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

     @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'

     // $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 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';
+    		}
+    	}
+    }
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-split-wcs.scss-isolate-nearby-form-module-37704.patch