Clean up inputs

agatemosu · Dec 29, 2024 · f8e0f14 · f8e0f14
1 parent 43f9495
commit f8e0f14
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 28 deletions.
diff --git a/src/styles/_base.css b/src/styles/_base.css
@@ -24,3 +24,11 @@ body {
 	-webkit-user-select: none;
 	user-select: none;
 }
+
+input,
+button {
+	appearance: none;
+	margin: 0;
+	border: none;
+	background: none;
+}
diff --git a/src/styles/inputs.css b/src/styles/inputs.css
@@ -3,8 +3,8 @@
 	justify-content: center;
 	align-items: center;
 	transition: background-color 300ms;
+	cursor: pointer;
 	margin: 10px;
-	border: none;
 	border-radius: 3px;
 	background-color: var(--buttons-color);
 	padding: 7px;
@@ -14,7 +14,6 @@
 }
 
 .button:hover {
-	cursor: pointer;
 	background-color: var(--button-hover);
 }
 
@@ -34,8 +33,6 @@
 }
 
 input[type="checkbox"] {
-	appearance: none;
-	margin: 0;
 	border-radius: 1px;
 	background-color: var(--button-text);
 	width: 12px;

diff --git a/src/styles/tier-options.css b/src/styles/tier-options.css
@@ -11,38 +11,43 @@
 	height: 80px;
 }
 
-.tier-option {
+.tier-option-container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	width: 40px;
-	height: auto;
 }
 
-.tier-option.delete {
-	--option-img: url("../assets/trash.svg");
+.tier-option-container-span {
 	grid-row: span 2;
 	justify-content: right;
 }
 
-.tier-option.up i {
-	--option-img: url("../assets/chevron-up.svg");
+.tier-option {
+	transition: filter 200ms;
+	cursor: pointer;
+	background-image: var(--option-img);
+	width: 32px;
+	height: 32px;
 }
 
-.tier-option.down i {
-	--option-img: url("../assets/chevron-down.svg");
+.tier-option:hover {
+	filter: brightness(0.6);
 }
 
-.tier-option i {
-	-webkit-mask-image: var(--option-img);
-	mask-image: var(--option-img);
-	transition: background-color 200ms;
-	cursor: pointer;
-	background-color: white;
-	width: 32px;
-	height: 32px;
+.tier-option:focus-visible {
+	outline: 1px solid white;
+	background-color: #fff2;
+}
+
+.tier-option-delete {
+	--option-img: url("../assets/trash.svg");
 }
 
-.tier-option i:hover {
-	background-color: #7f7f7f;
+.tier-option-up {
+	--option-img: url("../assets/chevron-up.svg");
+}
+
+.tier-option-down {
+	--option-img: url("../assets/chevron-down.svg");
 }
diff --git a/src/tier-row.js b/src/tier-row.js
@@ -40,9 +40,15 @@ export default class TierRow extends HTMLElement {
 			<div class="tier-content sort"></div>
 			<div class="tier-options">
 				<div class="tier-options-container">
-					<div class="tier-option delete"><i></i></div>
-					<div class="tier-option up"><i></i></div>
-					<div class="tier-option down"><i></i></div>
+					<div class="tier-option-container tier-option-container-span">
+						<button class="tier-option tier-option-delete"></button>
+					</div>
+					<div class="tier-option-container">
+						<button class="tier-option tier-option-up"></button>
+					</div>
+					<div class="tier-option-container">
+						<button class="tier-option tier-option-down"></button>
+					</div>
 				</div>
 			</div>
 		`;
@@ -59,9 +65,9 @@ export default class TierRow extends HTMLElement {
 		this.sort = new Sortable(tierSort, { group: TierRow.sortableGroup });
 
 		// Options
-		const deleteButton = this.querySelector(".tier-option.delete i");
-		const upButton = this.querySelector(".tier-option.up i");
-		const downButton = this.querySelector(".tier-option.down i");
+		const deleteButton = this.querySelector(".tier-option-delete");
+		const upButton = this.querySelector(".tier-option-up");
+		const downButton = this.querySelector(".tier-option-down");
 
 		deleteButton.addEventListener("click", this.deleteRow);
 		upButton.addEventListener("click", this.moveUp);