@inseefr/lunatic 2.0.0-rc8 → 2.0.0-v2

package/src/stories/loops/custom-lunatic.scss

@@ -1,789 +0,0 @@
-// Lunatic
-
-// Define colors
-$colorPrimaryDark: #2a5885;
-$colorPrimaryLight: rgb(81, 129, 184);
-$colorPrimaryMain: #4a73a4;
-$colorPrimaryContrastText: #ffffff;
-
-$colorVeryLight: rgb(219, 228, 239);
-$colorCurrentItem: #0d823e;
-
-$colorSecondaryDark: #1a293b;
-$colorSecondaryLight: #f7f8fa;
-$colorSecondaryMain: #1a293b;
-$colorSecondaryContrastText: #ffffff;
-
-* {
-	box-sizing: border-box;
-	font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
-}
-
-.lunatic input[type='number']::-webkit-inner-spin-button,
-.lunatic input[type='number']::-webkit-outer-spin-button {
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-.lunatic input[type='number'] {
-	text-align: left;
-}
-
-.lunatic textarea {
-	border-color: $colorPrimaryDark;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $colorPrimaryMain;
-	}
-}
-
-.lunatic .datepicker-lunatic {
-	border-color: $colorPrimaryDark;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $colorPrimaryMain;
-	}
-}
-
-.lunatic .table-lunatic {
-	width: 100%;
-	& td {
-		border-color: $colorPrimaryDark;
-	}
-	& thead td {
-		text-align: center;
-	}
-}
-// Conteneur
-.component.lunatic {
-	margin-bottom: 0.4375rem;
-}
-
-#componentsPrix {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-
-	// border: 1px solid #39d2b4;
-	width: 650px;
-}
-
-.promotionEtPrixLieQuantite {
-	margin-left: 15px;
-	visibility: hidden;
-	// border: 1px solid red;
-}
-
-.cacher {
-	visibility: hidden;
-	//border: 1px solid red;
-}
-// sequence-lunatic
-
-.lunatic .sequence-lunatic {
-	padding: 0;
-	font-size: 0.875rem;
-	color: $colorPrimaryLight;
-	background-color: $colorSecondaryContrastText;
-	border: 0;
-	height: 1.875rem;
-}
-
-// FIELDSET
-.lunatic fieldset,
-.lunatic .checkbox-group,
-.lunatic .radio-group {
-	border: 0;
-	outline: 0;
-	margin-top: 0.9375rem;
-}
-
-// CHECKBOXES & RADIO_BUTTONS
-.lunatic .checkbox-modality,
-.lunatic .radio-modality {
-	margin-top: 0.375rem;
-}
-
-.lunatic .checkbox-lunatic,
-.lunatic .radio-lunatic {
-	box-shadow: none;
-	opacity: 0;
-	margin-right: -1.1875rem;
-}
-
-.lunatic .checkbox-lunatic:focus,
-.lunatic .radio-lunatic:focus {
-	box-shadow: none;
-}
-
-.lunatic .checkbox-lunatic + label,
-.lunatic .radio-lunatic + label {
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-}
-
-.lunatic .checkbox-lunatic:focus + label,
-.lunatic .radio-lunatic:focus + label {
-	box-shadow: none;
-	background-color: rgba(0, 0, 0, 0.05);
-	border-right: 1px solid $colorVeryLight;
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-	padding-bottom: 0.125rem;
-}
-.lunatic .checkbox-modality label::before,
-.lunatic .checkbox-lunatic + label::before,
-.lunatic .radio-lunatic + label::before {
-	border: 0;
-	transform: none;
-	margin: 0;
-	margin-right: 0.375rem;
-	padding: 0;
-	position: relative;
-	top: 0.4375rem;
-}
-
-.lunatic .checkbox-lunatic + label::before {
-	content: url(./img/check_box_outline.svg);
-}
-
-.lunatic .radio-lunatic + label::before {
-	content: url(./img/radio_button_unchecked.svg);
-}
-
-.lunatic .checkbox-lunatic:checked + label,
-.lunatic .radio-lunatic:checked + label {
-	border: 0;
-	outline: 0;
-	padding: 0;
-	padding-right: 0.3125rem;
-	padding-top: 0.125rem;
-	padding-bottom: 0.125rem;
-	background-color: rgba(0, 0, 0, 0.05);
-	border-right: 1px solid $colorVeryLight;
-}
-
-.lunatic.checkbox-boolean .checkbox-modality {
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: flex-end;
-}
-
-.lunatic.checkbox-boolean .checkbox-lunatic {
-	position: relative;
-	top: 5px;
-}
-
-.lunatic .checkbox-lunatic:checked + label::before {
-	content: url(./img/check_box.svg);
-}
-
-.lunatic .radio-lunatic:checked + label::before {
-	content: url(./img/radio_button_checked.svg);
-}
-
-// CHECKBOX BOOLEAN
-.lunatic .checkbox-boolean-lunatic + label::before,
-.lunatic .checkbox-boolean-lunatic-no-margin + label::before {
-	content: url(./img/check_box_outline.svg);
-}
-.lunatic .checkbox-boolean-lunatic:checked + label::before,
-.lunatic .checkbox-boolean-lunatic-no-margin:checked + label::before {
-	content: url(./img/check_box.svg);
-}
-.lunatic .checkbox-boolean-lunatic {
-	box-shadow: none;
-	opacity: 1;
-	margin-right: -1.1875rem;
-	& + span {
-		padding-right: 0.3125rem;
-		padding-top: 0.125rem;
-	}
-}
-.lunatic .checkbox-boolean-modality label::before {
-	border: 0;
-	transform: none;
-	margin: 0;
-	margin-right: 0.375rem;
-	padding: 0;
-	position: relative;
-	top: 0.4375rem;
-}
-
-// LABEL, LEGEND
-.lunatic label,
-.lunatic legend,
-.lunatic .subsequence-lunatic,
-.lunatic-dropdown-label {
-	color: $colorPrimaryDark;
-	background-color: $colorPrimaryContrastText;
-	border: 0;
-	padding: 0;
-	font-size: 0.75rem;
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-	line-height: 0.75rem;
-	font-weight: bold;
-	margin-bottom: 0.375rem;
-}
-
-// DROPDOWN
-
-$inputHeight: 32px;
-$boxShadowColor: $colorPrimaryMain;
-
-@mixin defaultFont {
-	font-family: Georgia, Times, 'Times New Roman', serif;
-	font-size: 16px;
-}
-
-@mixin disableSelect {
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /* Internet Explorer */
-	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-	-webkit-user-select: none; /* Chrome, Safari, and Opera */
-	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
-}
-
-.lunatic .lunatic-dropdown {
-	display: block;
-	width: 100%;
-	&:focus {
-		outline: none;
-	}
-
-	&.label-left {
-		display: flex;
-		flex-direction: row;
-	}
-
-	&.label-right {
-		display: flex;
-		flex-direction: row-reverse;
-	}
-
-	&.label-top {
-		display: flex;
-		flex-direction: column;
-	}
-
-	&.label-bottom {
-		display: flex;
-		flex-direction: column-reverse;
-	}
-
-	.lunatic-dropdown-label {
-		opacity: 1;
-	}
-
-	.lunatic-dropdown-container {
-		position: relative;
-		height: $inputHeight;
-		width: 100%;
-		&:focus {
-			outline: none;
-		}
-
-		.lunatic-dropdown-content {
-			background-color: lavenderblush;
-			box-shadow: 0em 0em 0.1em 0.1em $boxShadowColor;
-			border-radius: 20px 20px;
-			border-color: white;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-
-			&.visible {
-				border-radius: 16px 16px;
-				height: auto;
-			}
-
-			&.focused {
-				box-shadow: 0 0 0 0.2em $colorPrimaryMain;
-			}
-
-			&.disabled {
-				background-color: whitesmoke;
-			}
-
-			.lunatic-dropdown-input {
-				border-radius: 10px 10px;
-				box-shadow: 0 0 0 0.2em $colorPrimaryDark;
-				input {
-					@include defaultFont();
-					@include disableSelect();
-					margin: 0px 25px 0px 12px;
-					width: calc(100% - 37px);
-					background-color: transparent;
-					border-color: transparent;
-					height: $inputHeight;
-					border: none;
-					outline: none;
-					text-align: left;
-				}
-			}
-
-			.lunatic-icone {
-				cursor: pointer;
-				position: absolute;
-				right: 10px;
-				top: 7px;
-				&:focus {
-					outline: none;
-				}
-			}
-
-			.lunatic-transition {
-				visibility: hidden;
-				overflow-y: hidden;
-				opacity: 0;
-
-				&:focus {
-					outline: none;
-				}
-
-				&.visible {
-					visibility: visible;
-					opacity: 1;
-					transition: opacity 1s ease-out;
-				}
-
-				.lunatic-dropdown-panel {
-					background-color: transparent;
-					margin: 0 10px 12px 10px;
-					padding-top: 3px;
-					list-style: none;
-					&:focus {
-						outline: none;
-					}
-					max-height: 100px;
-					overflow-y: auto;
-
-					&::-webkit-scrollbar {
-						width: 8px;
-					}
-					&::-webkit-scrollbar-track {
-						background-color: $boxShadowColor;
-					}
-					&::-webkit-scrollbar-thumb {
-						background: $colorPrimaryMain;
-					}
-					&::-webkit-scrollbar-thumb:hover {
-						background: $colorPrimaryDark;
-					}
-				}
-
-				/** options style */
-				.lunatic-dropdown-option {
-					cursor: pointer;
-					@include defaultFont();
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					color: black;
-
-					display: block;
-
-					&.lunatic-dropdown-option-active {
-						color: ivory;
-						background-color: $colorPrimaryMain;
-						.lunatic-prefix {
-							color: darkgoldenrod;
-							font-weight: bold;
-						}
-					}
-
-					&.lunatic-dropdown-option-selected {
-						color: snow;
-						background-color: rgb(136, 19, 151);
-						.lunatic-prefix {
-							color: lightgray;
-							font-weight: bold;
-						}
-
-						&.lunatic-dropdown-option-active {
-							color: khaki;
-							background-color: rgb(188, 90, 201);
-						}
-					}
-
-					.lunatic-prefix {
-						color: cornflowerblue;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-}
-
-// SELECT
-// .lunatic .simple-select {
-// 	display: inline-block;
-// 	position: relative;
-// }
-
-// .lunatic .simple-select button {
-// 	width: 100%;
-// 	height: 2rem;
-// 	line-height: 1.1875rem;
-
-// 	color: $colorPrimaryMain;
-// 	background-color: white;
-// 	position: relative;
-
-// 	border: 0;
-// 	border-radius: 0;
-// 	border-bottom-width: 0.0625rem;
-// 	border-bottom-color: $colorPrimaryDark;
-// 	border-bottom-style: dotted;
-
-// 	margin: 0;
-
-// 	padding-bottom: 0.4375rem;
-// 	padding-left: 0.375rem;
-// 	padding-right: 0;
-// 	padding-top: 0.375rem;
-
-// 	text-decoration: none;
-// 	display: block;
-
-// 	text-align: left;
-// }
-
-// .lunatic .simple-select button:focus {
-// 	border: 0;
-// 	outline: none;
-// 	box-shadow: none;
-// 	background: rgba(0, 0, 0, 0.05);
-// 	border-bottom-width: 0.0625rem;
-// 	border-bottom-color: $colorPrimaryDark;
-// 	border-bottom-style: dotted;
-// }
-// .lunatic .simple-select button:after {
-// 	border: 0;
-// 	transform: none;
-// 	float: right;
-// 	margin-left: 0.3125rem;
-// 	content: url(./img/menu-down.svg);
-// 	color: rgba(0, 0, 0, 0.54);
-// 	padding: 0;
-// }
-
-// .lunatic .simple-select button[aria-expanded='true']:after {
-// 	border: 0;
-// 	transform: none;
-// 	float: right;
-// 	margin-left: 0.3125rem;
-// 	content: url(./img/menu-up.svg);
-// 	padding: 0;
-// }
-
-// .lunatic .simple-select ul.options,
-// .lunatic .simple-select ul.options:active {
-// 	box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
-// 		0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
-// 		0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
-// 	opacity: 1;
-// 	transform: scale(1, 1) translateZ(0);
-// 	transition: opacity 343ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-// 		transform 228ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-// 	transform-origin: 0 12.75rem 0;
-// 	padding: 0.5rem 0;
-// 	margin: 0;
-// 	background-color: white;
-// 	position: absolute;
-// 	top: -3.125rem;
-// 	list-style: none;
-// 	border: 0;
-// 	list-style-type: none;
-
-// 	min-width: 100%;
-// 	width: auto;
-
-// 	overflow-y: auto;
-// 	z-index: 1;
-// 	max-height: none;
-// }
-
-// .lunatic .simple-select .hidden {
-// 	display: none;
-// }
-
-// .lunatic .simple-select ul.options li.option {
-// 	cursor: pointer;
-// }
-
-// .lunatic .simple-select ul.options li.selected {
-// 	background-color: rgba(0, 0, 0, 0.14);
-// 	color: black;
-// }
-
-// .lunatic .simple-select .read-only {
-// 	background-color: #ebebe4;
-// 	color: black;
-// }
-
-// .lunatic .simple-select ul.options:focus {
-// 	border: 0;
-// 	outline: none;
-// 	background-color: white;
-// }
-
-// .lunatic .simple-select ul li.option {
-// 	display: flex;
-// 	justify-content: flex-start;
-// 	align-items: center;
-
-// 	border-color: rgba(0, 0, 0, 0.87);
-// 	border-radius: 0;
-// 	border-style: none;
-// 	border-width: 0;
-// 	border-image-outset: 0;
-// 	border-image-repeat: stretch;
-// 	border-image-slice: 100%;
-// 	border-image-source: none;
-// 	border-image-width: 1;
-
-// 	box-sizing: content-box;
-// 	color: rgba(0, 0, 0, 0.87);
-// 	cursor: pointer;
-
-// 	font-family: Roboto, Helvetica, Arial, sans-serif;
-// 	font-size: 1.1rem;
-// 	font-weight: normal;
-// 	height: 1.5rem;
-
-// 	line-height: 1.65rem;
-// 	list-style-image: none;
-// 	list-style-position: outside;
-// 	list-style-type: none;
-// 	margin: 0;
-// 	outline-color: rgba(0, 0, 0, 0.87);
-// 	outline-style: none;
-// 	outline-width: 0;
-// 	overflow: hidden;
-
-// 	padding: 0.6875rem 1rem;
-
-// 	position: relative;
-// 	text-align: left;
-// 	text-decoration-color: rgba(0, 0, 0, 0.87);
-// 	text-decoration-line: none;
-// 	text-decoration-style: solid;
-// 	transition-delay: 0s;
-// 	transition-duration: 0.15s;
-// 	transition-property: background-color;
-// 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-// 	user-select: none;
-// 	vertical-align: middle;
-// 	white-space: nowrap;
-// 	-webkit-appearance: none;
-// 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-// }
-
-// .lunatic .simple-select ul li:hover {
-// 	text-decoration: none;
-// 	background-color: rgba(0, 0, 0, 0.08);
-// }
-
-//TEXT
-.lunatic .input-lunatic {
-	font: inherit;
-	color: currentColor;
-	border: 0;
-	border-radius: 0;
-	border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
-	margin: 0;
-	padding: 0.375rem 0 0.375rem 0.4375rem;
-	display: block;
-	min-width: 0;
-	box-sizing: content-box;
-	background: none;
-	// -webkit-tap-highlight-color: transparent;
-}
-
-.lunatic .input-lunatic:hover {
-	outline: none;
-	box-shadow: none;
-	border-bottom: 0.125rem solid black;
-}
-
-.lunatic .input-lunatic:focus {
-	outline: none;
-	box-shadow: none;
-	border-bottom: 0.125rem solid $colorPrimaryMain;
-}
-
-// CHECKBOXES SWITCH
-// https://www.creativejuiz.fr/blog/tutoriels/personnaliser-aspect-boutons-radio-checkbox-css
-
-.lunatic.switch [type='checkbox']:not(:checked),
-.lunatic.switch [type='checkbox']:checked {
-	opacity: 0;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label,
-.lunatic.switch [type='checkbox']:checked + label {
-	position: relative;
-	padding-left: 46px;
-	cursor: pointer;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:before,
-.lunatic.switch [type='checkbox']:checked + label:before,
-.lunatic.switch [type='checkbox']:not(:checked) + label:after,
-.lunatic.switch [type='checkbox']:checked + label:after {
-	content: '';
-	position: absolute;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:before,
-.lunatic.switch [type='checkbox']:checked + label:before {
-	left: 0;
-	top: 2px;
-	width: 34px;
-	height: 14px;
-	background: #dddddd;
-	border-radius: 15px;
-	-webkit-transition: background-color 0.2s;
-	-moz-transition: background-color 0.2s;
-	-ms-transition: background-color 0.2s;
-	transition: background-color 0.2s;
-}
-
-.lunatic.switch [type='checkbox']:not(:checked) + label:after,
-.lunatic.switch [type='checkbox']:checked + label:after {
-	width: 20px;
-	height: 20px;
-	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	transition: all 0.2s;
-	border-radius: 50%;
-	background: #7f8c9a;
-	top: -1px;
-	left: 0;
-}
-
-/* on checked */
-.lunatic.switch [type='checkbox']:checked + label:before {
-	background: #34495e;
-}
-.lunatic.switch [type='checkbox']:checked + label:after {
-	background: $colorCurrentItem;
-	top: -1px;
-	left: 15px;
-}
-
-.lunatic.switch [type='checkbox']:checked + label .ui,
-.lunatic.switch [type='checkbox']:not(:checked) + label .ui:before,
-.lunatic.switch [type='checkbox']:checked + label .ui:after {
-	position: absolute;
-	left: 6px;
-	width: 65px;
-	border-radius: 15px;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 22px;
-	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	transition: all 0.2s;
-}
-.lunatic.switch [type='checkbox']:not(:checked) + label .ui:before {
-	content: 'no';
-	left: 32px;
-}
-.lunatic.switch [type='checkbox']:checked + label .ui:after {
-	content: 'yes';
-	color: #39d2b4;
-}
-.lunatic.switch [type='checkbox']:focus + label:before {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-ms-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.lunatic table.table-lunatic {
-	.table-cell-axis {
-		text-align: left;
-		width: 100%;
-	}
-	td,
-	th {
-		border-color: $colorPrimaryDark;
-		padding: 0.4em;
-	}
-}
-
-.lunatic .button-lunatic {
-	color: white;
-	background-color: $colorPrimaryDark;
-	border-color: $colorPrimaryDark;
-	width: 30%;
-	&:hover {
-		background-color: white;
-		color: $colorPrimaryDark;
-		border-color: $colorPrimaryDark;
-	}
-	&:disabled {
-		color: $colorPrimaryDark;
-		background-color: $colorVeryLight;
-		border-color: $colorPrimaryDark;
-	}
-}
-
-.lunatic .tooltip-lunatic {
-	border: none;
-	color: white;
-	.tooltip-text {
-		background-color: $colorPrimaryDark;
-	}
-}
-
-.lunatic .filter-description-lunatic {
-	display: inline;
-	color: $colorPrimaryDark;
-	background-color: #dcdcdc;
-	font-weight: bold;
-	padding: 0.2em;
-}
-.lunatic .filter-description-lunatic::before {
-	content: url(./img/arrow.png);
-	vertical-align: -40%;
-	margin-right: 0.5em;
-}
-
-.field-container {
-	width: 100%;
-}
-
-.field-with-tooltip {
-	width: 90%;
-}
-
-.tooltip {
-	width: 10%;
-}
-
-.lunatic .table-lunatic {
-	width: 50%;
-	.field-with-tooltip {
-		width: 95%;
-	}
-	.tooltip {
-		width: 5%;
-	}
-	.tooltip-lunatic {
-		img {
-			width: 1em;
-		}
-	}
-}
-
-.lunatic-loop {
-	border: 1px solid $colorPrimaryMain;
-}