@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

package/src/components/dropdown/dropdown.scss

@@ -1,178 +1,178 @@
-@mixin defaultFont {
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-}
-
-@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-component {
-	.lunatic-dropdown {
-		display: block;
-		width: 100%;
-		margin-bottom: 1.5rem;
-		&: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 {
-			ul {
-				padding-inline-start: 0px;
-				font-size: 1rem;
-			}
-			position: relative;
-			height: 2em;
-			width: 100%;
-			z-index: 1;
-
-			&.focused {
-				z-index: 2;
-			}
-			&:focus {
-				outline: none;
-			}
-
-			.lunatic-dropdown-content {
-				// background-color: var(--color-very-very-light);
-				border-color: white;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				height: auto;
-				&.visible {
-					// border-radius: 0 0 16px 16px;
-					height: auto;
-				}
-
-				&.disabled {
-					background-color: var(--color-disabled);
-				}
-
-				.lunatic-dropdown-input {
-					border-bottom: 1px solid var(--color-primary-dark);
-					padding: 6px 0 7px;
-					input {
-						@include defaultFont();
-						@include disableSelect();
-						margin: 0px 25px 0px 0px;
-						width: calc(100% - 37px);
-						background-color: transparent;
-						border-color: transparent;
-						height: 2em;
-						border: none;
-						outline: none;
-						text-align: left;
-						cursor: inherit;
-					}
-					&:hover {
-						cursor: pointer;
-						border-bottom: 2px solid var(--color-primary-main);
-					}
-					&.focused {
-						background-color: rgba(0, 0, 0, 0.05);
-						box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
-					}
-				}
-
-				.lunatic-dropdown-icon {
-					cursor: pointer;
-					position: absolute;
-					right: 2px;
-					top: 2px;
-					svg {
-						fill: rgb(146, 146, 146);
-					}
-				}
-
-				.lunatic-transition {
-					opacity: 0;
-
-					&:focus {
-						outline: none;
-					}
-
-					&.visible {
-						visibility: visible;
-						opacity: 1;
-						transition: opacity var(--dropdown-transition-time) ease-out;
-					}
-
-					.lunatic-dropdown-panel-container {
-						box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
-							0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-							0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-
-						.lunatic-dropdown-panel {
-							background-color: white;
-							margin: 0 0 12px 0;
-							border-radius: 4px;
-							z-index: 3;
-							padding-top: 3px;
-							list-style: none;
-							&:focus {
-								outline: none;
-							}
-							max-height: 100px;
-							overflow-y: auto;
-						}
-					}
-
-					/** options style */
-					.lunatic-dropdown-option {
-						padding-left: 10px;
-						cursor: pointer;
-						@include defaultFont();
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						color: black;
-						line-height: 2rem;
-						display: block;
-						&.lunatic-dropdown-option-active {
-							color: var(--color-primary-dark);
-							background-color: var(--color-dropdown-active);
-						}
-						&.lunatic-dropdown-option-selected {
-							background-color: var(--color-dropdown-selected);
-						}
-
-						.lunatic-prefix {
-							color: var(--color-prefix);
-							font-weight: bold;
-						}
-					}
-				}
-			}
-		}
-	}
-}
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@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-component {
+	.lunatic-dropdown {
+		display: block;
+		width: 100%;
+		margin-bottom: 1.5rem;
+		&: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 {
+			ul {
+				padding-inline-start: 0px;
+				font-size: 1rem;
+			}
+			position: relative;
+			height: 2em;
+			width: 100%;
+			z-index: 1;
+
+			&.focused {
+				z-index: 2;
+			}
+			&:focus {
+				outline: none;
+			}
+
+			.lunatic-dropdown-content {
+				// background-color: var(--color-very-very-light);
+				border-color: white;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				height: auto;
+				&.visible {
+					// border-radius: 0 0 16px 16px;
+					height: auto;
+				}
+
+				&.disabled {
+					background-color: var(--color-disabled);
+				}
+
+				.lunatic-dropdown-input {
+					border-bottom: 1px solid var(--color-primary-dark);
+					padding: 6px 0 7px;
+					input {
+						@include defaultFont();
+						@include disableSelect();
+						margin: 0px 25px 0px 0px;
+						width: calc(100% - 37px);
+						background-color: transparent;
+						border-color: transparent;
+						height: 2em;
+						border: none;
+						outline: none;
+						text-align: left;
+						cursor: inherit;
+					}
+					&:hover {
+						cursor: pointer;
+						border-bottom: 2px solid var(--color-primary-main);
+					}
+					&.focused {
+						background-color: rgba(0, 0, 0, 0.05);
+						box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
+					}
+				}
+
+				.lunatic-dropdown-icon {
+					cursor: pointer;
+					position: absolute;
+					right: 2px;
+					top: 2px;
+					svg {
+						fill: rgb(146, 146, 146);
+					}
+				}
+
+				.lunatic-transition {
+					opacity: 0;
+
+					&:focus {
+						outline: none;
+					}
+
+					&.visible {
+						visibility: visible;
+						opacity: 1;
+						transition: opacity var(--dropdown-transition-time) ease-out;
+					}
+
+					.lunatic-dropdown-panel-container {
+						box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
+							0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+							0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+						.lunatic-dropdown-panel {
+							background-color: white;
+							margin: 0 0 12px 0;
+							border-radius: 4px;
+							z-index: 3;
+							padding-top: 3px;
+							list-style: none;
+							&:focus {
+								outline: none;
+							}
+							max-height: 100px;
+							overflow-y: auto;
+						}
+					}
+
+					/** options style */
+					.lunatic-dropdown-option {
+						padding-left: 10px;
+						cursor: pointer;
+						@include defaultFont();
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: black;
+						line-height: 2rem;
+						display: block;
+						&.lunatic-dropdown-option-active {
+							color: var(--color-primary-dark);
+							background-color: var(--color-dropdown-active);
+						}
+						&.lunatic-dropdown-option-selected {
+							background-color: var(--color-dropdown-selected);
+						}
+
+						.lunatic-prefix {
+							color: var(--color-prefix);
+							font-weight: bold;
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/icon/icon.scss

@@ -1,15 +1,15 @@
-.lunatic-component {
-	.list-icon-wrapper {
-		&:focus-within svg {
-			fill: var(--color-primary-dark);
-		}
-	}
-
-	.list-icon {
-		position: absolute;
-		margin-top: -0.1rem;
-		&.list-icon-disabled svg {
-			background-color: var(--color-disabled);
-		}
-	}
-}
+.lunatic-component {
+	.list-icon-wrapper {
+		&:focus-within svg {
+			fill: var(--color-primary-dark);
+		}
+	}
+
+	.list-icon {
+		position: absolute;
+		margin-top: -0.1rem;
+		&.list-icon-disabled svg {
+			background-color: var(--color-disabled);
+		}
+	}
+}

package/src/components/index.js

@@ -1,3 +1,5 @@
+import 'array-flat-polyfill';
+
 export * from './components';
 export { default as Table } from './table';
 export * from '../utils/to-expose';