X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fform.scss;h=411188ff2eba90c3252cdc7bf45d030ace06a1fb;hb=1b9629ce7f600b4aa9c9d51a281e514031871828;hp=ee2ee5fd567b03e2b3b7dbd8632916cdf23f8088;hpb=a4260a00251cef4ad806c9d5c44d4c444d6ab831;p=alttp.git

diff --git a/resources/sass/form.scss b/resources/sass/form.scss
index ee2ee5f..411188f 100644
--- a/resources/sass/form.scss
+++ b/resources/sass/form.scss
@@ -12,3 +12,71 @@ label {
 		visibility: visible;
 	}
 }
+
+.custom-toggle {
+	display: inline-block;
+	width: auto;
+	height: 2.25rem;
+	min-width: 58px;
+	background: $input-bg;
+	border: $input-border-width solid $input-border-color;
+	border-radius: 1.25rem;
+	transition: background 200ms ease, padding 200ms ease;
+	text-align: left;
+	padding: 3px 3px 3px 24px;
+
+	&.is-toggled {
+		background: $success;
+		padding: 3px 24px 3px 3px;
+	}
+
+	&.is-invalid,
+	&.is-valid {
+		background-image: none;
+		padding: 3px 24px 3px 3px;
+		&.is-toggled {
+			padding: 3px 24px 3px 3px;
+		}
+	}
+	&.is-invalid.is-toggled {
+		background: red;
+
+		.handle-label {
+			color: red;
+		}
+	}
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&:focus {
+		border-color: #ced4da;
+	}
+
+	.handle {
+		display: inline-block;
+		min-width: 40px;
+		height: 28px;
+		background: #fff;
+		border-radius: 1rem;
+		text-transform: uppercase;
+		color: green;
+		text-align: center;
+		padding: 0 10px;
+
+		.handle-label {
+			display: inline-block;
+			font-size: 18px;
+			font-weight: 600;
+			white-space: nowrap;
+			-webkit-touch-callout: none;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+			color: #495057;
+		}
+	}
+}