From fb31653adede11faf14caef4a98a39cf21cce596 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 29 Apr 2021 16:04:08 -0400
Subject: [PATCH] Fix remaining stylelint problems

---
 app/src/components/v-card/v-card-title.vue    |  2 +-
 app/src/components/v-checkbox/v-checkbox.vue  | 23 +++++++++--------
 app/src/components/v-detail/v-detail.vue      |  1 +
 app/src/components/v-dialog/v-dialog.vue      | 25 +++++++++++--------
 app/src/components/v-divider/v-divider.vue    |  4 +--
 app/src/components/v-menu/v-menu.vue          |  4 +--
 app/src/components/v-tabs/v-tab/v-tab.vue     |  2 +-
 app/src/displays/datetime/datetime.vue        |  2 +-
 app/src/interfaces/markdown/markdown.vue      |  2 +-
 app/src/interfaces/tags/tags.vue              |  3 ++-
 app/src/interfaces/wysiwyg/wysiwyg.vue        |  8 +++---
 app/src/layouts/cards/components/header.vue   |  2 +-
 .../permissions-overview-toggle.vue           |  4 +--
 app/src/routes/logout/logout.vue              |  4 +--
 .../module-bar-avatar/module-bar-avatar.vue   |  2 +-
 15 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/app/src/components/v-card/v-card-title.vue b/app/src/components/v-card/v-card-title.vue
index bb40bf359e..bda656379c 100644
--- a/app/src/components/v-card/v-card-title.vue
+++ b/app/src/components/v-card/v-card-title.vue
@@ -7,8 +7,8 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	padding: var(--v-card-padding);
 	margin-top: 4px;
+	padding: var(--v-card-padding);
 	font-weight: 600;
 	line-height: 1.6em;
 }
diff --git a/app/src/components/v-checkbox/v-checkbox.vue b/app/src/components/v-checkbox/v-checkbox.vue
index bd3fb4936e..9d6c62aab5 100644
--- a/app/src/components/v-checkbox/v-checkbox.vue
+++ b/app/src/components/v-checkbox/v-checkbox.vue
@@ -122,6 +122,7 @@ body {
 
 .v-checkbox {
 	--v-icon-color-hover: var(--primary);
+
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -166,24 +167,14 @@ body {
 		}
 	}
 
-	&:not(:disabled):hover {
-		.checkbox {
-			--v-icon-color: var(--primary);
-		}
-		&.block {
-			border-color: var(--border-normal-alt);
-			background-color: var(--background-subdued);
-		}
-	}
-
 	&.block {
-		transition: all var(--fast) var(--transition);
 		position: relative;
 		width: 100%;
 		height: var(--input-height);
 		padding: 10px; // 14 - 4 (border)
 		border: 2px solid var(--border-normal);
 		border-radius: var(--border-radius);
+		transition: all var(--fast) var(--transition);
 
 		&::before {
 			position: absolute;
@@ -201,6 +192,16 @@ body {
 		}
 	}
 
+	&:not(:disabled):hover {
+		.checkbox {
+			--v-icon-color: var(--primary);
+		}
+		&.block {
+			background-color: var(--background-subdued);
+			border-color: var(--border-normal-alt);
+		}
+	}
+
 	&:not(:disabled):not(.indeterminate).checked {
 		.checkbox {
 			--v-icon-color: var(--v-checkbox-color);
diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail/v-detail.vue
index 9a6eee349e..1afabb5d08 100644
--- a/app/src/components/v-detail/v-detail.vue
+++ b/app/src/components/v-detail/v-detail.vue
@@ -71,6 +71,7 @@ export default defineComponent({
 	--v-divider-label-color: var(--foreground-subdued);
 	&:hover {
 		--v-divider-label-color: var(--foreground-normal-alt);
+
 		cursor: pointer;
 	}
 }
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 2c040ffbbb..1292adb185 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -132,35 +132,40 @@ export default defineComponent({
 		}
 
 		.v-card-actions {
-			flex-wrap: wrap;
 			flex-direction: column-reverse;
-			& > .v-button + .v-button {
-				margin-left: 0;
-				margin-bottom: 20px;
-			}
+			flex-wrap: wrap;
+
 			.v-button {
 				width: 100%;
+
 				.button {
 					width: 100%;
 				}
 			}
+
+			& > .v-button + .v-button {
+				margin-bottom: 20px;
+				margin-left: 0;
+			}
 		}
 
 		@include breakpoint(small) {
 			--v-card-min-width: 540px;
 			.v-card-actions {
-				flex-wrap: nowrap;
 				flex-direction: inherit;
-				& > .v-button + .v-button {
-					margin-left: 12px;
-					margin-bottom: 0;
-				}
+				flex-wrap: nowrap;
+
 				.v-button {
 					width: auto;
 					.button {
 						width: auto;
 					}
 				}
+
+				& > .v-button + .v-button {
+					margin-bottom: 0;
+					margin-left: 12px;
+				}
 			}
 		}
 	}
diff --git a/app/src/components/v-divider/v-divider.vue b/app/src/components/v-divider/v-divider.vue
index 924d91c8ee..92094c252e 100644
--- a/app/src/components/v-divider/v-divider.vue
+++ b/app/src/components/v-divider/v-divider.vue
@@ -67,9 +67,9 @@ body {
 	}
 
 	.type-text {
-		transition: color var(--fast) var(--transition);
-		font-weight: 600;
 		color: var(--v-divider-label-color);
+		font-weight: 600;
+		transition: color var(--fast) var(--transition);
 	}
 
 	&.large .type-text {
diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu/v-menu.vue
index 3b2991fcb7..c6d50fc934 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu/v-menu.vue
@@ -367,9 +367,9 @@ body {
 	padding: 0 4px;
 	overflow-x: hidden;
 	overflow-y: auto;
-	border-radius: var(--border-radius);
-	border: none;
 	background-color: var(--card-face-color);
+	border: none;
+	border-radius: var(--border-radius);
 	box-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), 0.2), 0px 0px 12px 2px rgba(var(--card-shadow-color), 0.05);
 	transition-timing-function: var(--transition-out);
 	transition-duration: var(--fast);
diff --git a/app/src/components/v-tabs/v-tab/v-tab.vue b/app/src/components/v-tabs/v-tab/v-tab.vue
index c1ec09dbad..538f63ee98 100644
--- a/app/src/components/v-tabs/v-tab/v-tab.vue
+++ b/app/src/components/v-tabs/v-tab/v-tab.vue
@@ -50,11 +50,11 @@ body {
 
 <style lang="scss" scoped>
 .v-tab.horizontal {
-	transition: color var(--fast) var(--transition);
 	color: var(--v-tab-color);
 	font-weight: 500;
 	font-size: 14px;
 	background-color: var(--v-tab-background-color);
+	transition: color var(--fast) var(--transition);
 
 	&:hover,
 	&.active {
diff --git a/app/src/displays/datetime/datetime.vue b/app/src/displays/datetime/datetime.vue
index e2e05a67aa..4f9f177ae5 100644
--- a/app/src/displays/datetime/datetime.vue
+++ b/app/src/displays/datetime/datetime.vue
@@ -88,8 +88,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .datetime {
 	overflow: hidden;
+	line-height: 1.15;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	line-height: 1.15;
 }
 </style>
diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue
index 9d579581f8..d497c88622 100644
--- a/app/src/interfaces/markdown/markdown.vue
+++ b/app/src/interfaces/markdown/markdown.vue
@@ -353,8 +353,8 @@ textarea {
 
 .toolbar {
 	display: flex;
-	align-items: center;
 	flex-wrap: wrap;
+	align-items: center;
 	min-height: 40px;
 	padding: 0 4px;
 	background-color: var(--background-subdued);
diff --git a/app/src/interfaces/tags/tags.vue b/app/src/interfaces/tags/tags.vue
index 604ebf7a85..c146ef6bbd 100644
--- a/app/src/interfaces/tags/tags.vue
+++ b/app/src/interfaces/tags/tags.vue
@@ -223,13 +223,14 @@ export default defineComponent({
 
 	.custom {
 		.v-chip {
-			transition: all var(--fast) var(--transition);
 			--v-chip-background-color: var(--primary);
 			--v-chip-color: var(--foreground-inverted);
 			--v-chip-background-color-hover: var(--danger);
 			--v-chip-close-color: var(--v-chip-background-color);
 			--v-chip-close-color-hover: var(--white);
 
+			transition: all var(--fast) var(--transition);
+
 			&:hover {
 				--v-chip-close-color: var(--white);
 				::v-deep .chip-content .close-outline .close:hover {
diff --git a/app/src/interfaces/wysiwyg/wysiwyg.vue b/app/src/interfaces/wysiwyg/wysiwyg.vue
index 225ba53780..566d9b5c9f 100644
--- a/app/src/interfaces/wysiwyg/wysiwyg.vue
+++ b/app/src/interfaces/wysiwyg/wysiwyg.vue
@@ -375,14 +375,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.body {
-	padding: 20px;
-}
-
 @import '~tinymce/skins/ui/oxide/skin.css';
 @import './tinymce-overrides.css';
 @import '@/styles/mixins/form-grid';
 
+.body {
+	padding: 20px;
+}
+
 .grid {
 	@include form-grid;
 }
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index 484cb05078..f09007a79b 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -126,8 +126,8 @@ export default defineComponent({
 	top: var(--layout-offset-top);
 	z-index: 4;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+	justify-content: space-between;
 	width: 100%;
 	height: 52px;
 	margin-bottom: 36px;
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
index 4727b6b74f..6761f2c4b9 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
@@ -164,7 +164,6 @@ export default defineComponent({
 	position: relative;
 
 	&::before {
-		transition: opacity var(--slow) var(--transition);
 		position: absolute;
 		top: -4px;
 		left: -4px;
@@ -172,8 +171,9 @@ export default defineComponent({
 		height: calc(100% + 8px);
 		background-color: var(--background-highlight);
 		border-radius: 50%;
-		content: '';
 		opacity: 0;
+		transition: opacity var(--slow) var(--transition);
+		content: '';
 	}
 	&:hover::before,
 	&.has-app-minimal::before {
diff --git a/app/src/routes/logout/logout.vue b/app/src/routes/logout/logout.vue
index 2c6363690f..eee747574b 100644
--- a/app/src/routes/logout/logout.vue
+++ b/app/src/routes/logout/logout.vue
@@ -19,10 +19,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .logout {
-	width: 100%;
-	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 100%;
+	height: 100%;
 }
 </style>
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
index aa3da2bbef..4e00162fce 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
@@ -124,8 +124,8 @@ export default defineComponent({
 		position: absolute;
 		top: 0;
 		left: 0;
-		transition: transform var(--fast) var(--transition);
 		transform: translateY(-100%);
+		transition: transform var(--fast) var(--transition);
 
 		@include breakpoint(medium) {
 			transform: translateY(0);