X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fform.scss;h=2202be65cf76c474c57085e5590b50ee525b3640;hb=e49b130505f5712075dca2ff990e5a63fc90ce3c;hp=b44ae8112dd0bc5a776405bb727d1ec2bd10b2ce;hpb=812a270c7a410461e931394496512d36b34ef7b5;p=alttp.git

diff --git a/resources/sass/form.scss b/resources/sass/form.scss
index b44ae81..2202be6 100644
--- a/resources/sass/form.scss
+++ b/resources/sass/form.scss
@@ -1,3 +1,7 @@
+label {
+	margin-top: 1ex;
+}
+
 .custom-check {
 	display: table;
 	width: auto;
@@ -8,3 +12,72 @@
 		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;
+			margin-top: 2px;
+			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;
+		}
+	}
+}