feat: new checkbox style

better use of screen real estate + more clearly associated with label
Ayolland · Oct 28, 2021 · 91e4c20 · 91e4c20
1 parent 7fdab93
commit 91e4c20
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 15 deletions.
diff --git a/src/scripts/borksy.js b/src/scripts/borksy.js
@@ -461,7 +461,7 @@ function createThisHackMenu(hack) {
 	$collapse.append($description);
 
 	const $label = $('<label>', {
-		text: `Include "${removeExtraChars(hack.metadata.name)}" hack`,
+		class: 'horizontal',
 	});
 	const $checkbox = $('<input>', {
 		type: 'checkbox',
@@ -473,6 +473,7 @@ function createThisHackMenu(hack) {
 	toggleIncludedDisplay($collapse, $checkbox);
 	hackIncludeTrigger($checkbox);
 	$label.append($checkbox);
+	$label.append(`Include "${removeExtraChars(hack.metadata.name)}" hack`);
 	$collapse.append($label);
 
 	if (hack.options) {

diff --git a/src/style/style.scss b/src/style/style.scss
@@ -215,7 +215,7 @@ form {
 			display: block;
 			box-sizing: border-box;
 			min-height: 2em;
-			width: calc(100% + 2em);
+			min-width: 2em;
 			max-width: 100%;
 			max-height: 80vh;
 			padding: 0.25em 1em;
@@ -224,20 +224,10 @@ form {
 			background-color: $light-glass;
 			border: 0;
 			tab-size: 2;
+		}
 
-			&.half {
-				min-width: 50%;
-				width: 50%;
-			}
-
-			&.inline {
-				display: inline-block;
-				margin-right: 0.5em;
-			}
-
-			&.right {
-				text-align: right;
-			}
+		textarea {
+			width: 100%;
 		}
 
 		&.horizontal {
@@ -247,6 +237,8 @@ form {
 			> * {
 				flex: auto;
 			}
+
+			> input[type="checkbox"],
 			&::before,
 			&::after {
 				flex: none;