From f3ed174b0ea2dd4e457ab28483caf08d8014c87c Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Fri, 23 Aug 2024 19:16:59 -0500
Subject: [PATCH] eslint and stylelint

stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars.  As far as i can tell, the selector is not standards-track, so that is probably why.  Not sure if we want to adjsut our stylelint config to allow it?
---
 .../homebrew/brewRenderer/brewRenderer.less   | 38 ++++++--------
 .../brewRenderer/toolBar/toolBar.less         | 50 +++++++++----------
 2 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index b1613a61b..eb58a1eac 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,9 +1,9 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
-	will-change   : transform;
-	overflow-y    : scroll;
 	padding-top   : 30px;
+	overflow-y    : scroll;
+	will-change   : transform;
 
 	:where(.pages) {
 		margin : 30px 0px;
@@ -19,23 +19,19 @@
 	}
 
 	&::-webkit-scrollbar {
-		width: 20px;
+		width : 20px;
 
-		&:horizontal{
-			height: 20px;
-			width:auto;
+		&:horizontal {
+			width  : auto;
+			height : 20px;
 		}
 
 		&-thumb {
-			background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
-			&:horizontal{
-				background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-			}
+			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
+			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
 		}
 
-		&-corner {
-			visibility: hidden;
-		}
+		&-corner { visibility : hidden; }
 	}
 }
 
@@ -70,18 +66,14 @@
 }
 
 @media print {
-	.toolBar {
-		display: none;
-	}
+	.toolBar { display : none; }
 	.brewRenderer {
-		height: 100%;
-		overflow-y: unset;
-		padding-top: unset;
+		height      : 100%;
+		padding-top : unset;
+		overflow-y  : unset;
 		.pages {
-			margin: 0px;
-			&>.page {
-				box-shadow: unset;
-			}
+			margin : 0px;
+			& > .page { box-shadow : unset; }
 		}
 	}
 }
\ No newline at end of file
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index a758f7574..21c741bbd 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -1,12 +1,12 @@
 .toolBar {
 	position         : absolute;
 	z-index          : 1;
+	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
 	gap              : 8px 30px;
 	align-items      : center;
 	justify-content  : center;
-	box-sizing       : border-box;
 	width            : 100%;
 	height           : auto;
 	padding          : 2px 0;
@@ -15,17 +15,17 @@
 	background-color : #555555;
 
 	.group {
+		box-sizing       : border-box;
 		display          : flex;
-		gap: 0 3px;
+		gap              : 0 3px;
 		align-items      : center;
 		justify-content  : center;
-		box-sizing       : border-box;
-		height: 28px;
+		height           : 28px;
 	}
 
 	.tool {
-		display: flex;
-		align-items: center;
+		display     : flex;
+		align-items : center;
 	}
 
 	input {
@@ -35,20 +35,20 @@
 		font-family    : 'Open Sans', sans-serif;
 		color          : #000000;
 		background     : #EEEEEE;
-		border : 1px solid gray;
-		&:focus { outline : 1px solid #d3d3d3; }
+		border         : 1px solid gray;
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
 		&.range-input {
-			color: #D3D3D3;
-			accent-color: #d3d3d3;
-			padding: 2px 0;
+			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
   
-			&::-webkit-slider-thumb, &::-moz-slider-thumb {
-				cursor           : pointer; 
-				width: 5px;
-				height: 5px;
-				outline: none;
+			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
+				width            : 5px;
+				height           : 5px;
+				cursor           : pointer;
+				outline          : none;
 			}
 
 			&:hover::after {
@@ -70,9 +70,9 @@
 
 		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
 		&#page-input {
-			width: 4ch;
-			text-align: center;
-			margin-right: 1ch;
+			width        : 4ch;
+			margin-right : 1ch;
+			text-align   : center;
 
 		}
 
@@ -80,21 +80,21 @@
 
 
 	button {
-		display     : flex;
-		align-items : center;
-		justify-content: center;
-		height           : 100%;
+		box-sizing       : content-box;
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
 		width            : auto;
 		min-width        : 46px;
+		height           : 100%;
 		padding          : 0 0px;
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
-		box-sizing: content-box;
 
 		&:hover { background-color : #444444; }
 
-		&:focus { outline : 1px solid #d3d3d3; }
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		&:disabled {
 			color            : #777777;