Implement the toggle for capacity usage. (closes #156)

styles/v3/elements/checkbox.scss

@@ -0,0 +1,24 @@
+.dotdungeon.style-v3 {
+	input[type="checkbox"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border-radius: 2px;
+		margin: 0;
+		cursor: pointer;
+
+		background: var(--elevation-8dp-bg);
+		position: relative;
+		&:checked::before {
+			content: "";
+			background: var(--checkbox-checked);
+			border-radius: 3px;
+			$margin: 4px;
+			top: $margin;
+			bottom: $margin;
+			left: $margin;
+			right: $margin;
+			position: absolute;
+		}
+	}
+}

styles/v3/index.scss

@@ -5,6 +5,7 @@
 /* Element-Styling */
 @use "./elements/utilities.scss";
 @use "./elements/button.scss";
+@use "./elements/checkbox.scss";
 @use "./elements/select.scss";
 @use "./elements/text-input.scss";
 @use "./elements/number-input.scss";

styles/v3/layouts/items/untyped/v2.scss

@@ -60,6 +60,11 @@
 		@extend %flex-col;
 
 		.capacity {
+			&--usage, &--quantity {
+				display: flex;
+				align-items: center;
+			}
+
 			&--calculated {
 				display: flex;
 				flex-direction: row;

styles/v3/themes/dark.css

@@ -4,4 +4,6 @@
 
 	--surface: #121212;
 	--on-surface: white;
+
+	--checkbox-checked: #00d300;
 }

templates/items/untyped/v2/tabs/settings.v2.untyped.hbs

@@ -5,10 +5,21 @@
 		</div>
 	{{/if}}
 	{{#if isGM}}
-		<div class="capacity-usage panel">
+		<div class="capacity--usage panel">
+			<label
+				for="{{meta.idp}}-{{item.uuid}}-uses-inventory-slot"
+			>
 				Uses Capacity?
 				<br>
 				(GM Only)
+			</label>
+			<div class="grow"></div>
+			<input
+				type="checkbox"
+				id="{{meta.idp}}-{{item.uuid}}-uses-inventory-slot"
+				name="system.uses_inventory_slot"
+				{{checked system.uses_inventory_slot}}
+			>
 		</div>
 		<div class="quantity-capacity panel">
 			Quantity Affects Capacity?